From bf482e161adaf61c79c81e820d524eebff27d877 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Fri, 14 Jun 2024 13:44:07 +0200
Subject: [PATCH] fix(x-module): deprecate useRegisterXModule composable in
 favour of register the x-module itself in the import

---
 .../src/composables/__tests__/use-getter.spec.ts         | 3 +--
 .../src/composables/__tests__/use-state.spec.ts          | 3 +--
 .../src/composables/use-register-x-module.ts             | 1 +
 .../src/plugins/__tests__/x-plugin-alias.spec.ts         | 6 +++---
 .../src/x-modules/empathize/components/empathize.vue     | 2 --
 .../x-components/src/x-modules/empathize/x-module.ts     | 3 +++
 .../src/x-modules/facets/components/clear-filters.vue    | 3 ---
 .../src/x-modules/facets/components/facets/facets.vue    | 3 ---
 .../components/lists/exclude-filters-with-no-results.vue | 2 --
 .../x-modules/facets/components/lists/filters-list.vue   | 3 ---
 .../x-modules/facets/components/lists/filters-search.vue | 2 --
 .../facets/components/lists/selected-filters-list.vue    | 3 ---
 .../facets/components/lists/selected-filters.vue         | 3 ---
 .../x-modules/facets/components/lists/sliced-filters.vue | 3 ---
 .../x-modules/facets/components/lists/sorted-filters.vue | 2 --
 .../x-modules/facets/components/preselected-filters.vue  | 2 ++
 packages/x-components/src/x-modules/facets/x-module.ts   | 3 +++
 .../next-queries/components/next-queries-list.vue        | 5 +----
 .../x-components/src/x-modules/next-queries/x-module.ts  | 3 +++
 .../queries-preview/components/query-preview-list.vue    | 3 ---
 .../queries-preview/components/query-preview.vue         | 7 +------
 .../src/x-modules/queries-preview/x-module.ts            | 3 +++
 .../src/x-modules/scroll/components/main-scroll-item.vue | 2 --
 .../src/x-modules/scroll/components/main-scroll.vue      | 7 +------
 packages/x-components/src/x-modules/scroll/x-module.ts   | 3 +++
 .../search-box/components/clear-search-input.vue         | 3 ---
 .../x-modules/search-box/components/search-button.vue    | 3 ---
 .../search-box/components/search-input-placeholder.vue   | 3 ---
 .../src/x-modules/search-box/components/search-input.vue | 3 ---
 .../x-components/src/x-modules/search-box/x-module.ts    | 4 +++-
 .../src/x-modules/search/components/banner.vue           | 3 +--
 .../src/x-modules/search/components/banners-list.vue     | 3 ---
 .../x-modules/search/components/partial-query-button.vue | 3 ---
 .../x-modules/search/components/partial-results-list.vue | 3 ---
 .../src/x-modules/search/components/promoted.vue         | 4 +---
 .../src/x-modules/search/components/promoteds-list.vue   | 3 ---
 .../src/x-modules/search/components/results-list.vue     | 9 ++-------
 .../src/x-modules/search/components/sort-dropdown.vue    | 4 ++--
 .../src/x-modules/search/components/sort-list.vue        | 4 ++--
 .../src/x-modules/search/components/sort-picker-list.vue | 4 ++--
 40 files changed, 39 insertions(+), 97 deletions(-)

diff --git a/packages/x-components/src/composables/__tests__/use-getter.spec.ts b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
index 3c103d9160..70019a0803 100644
--- a/packages/x-components/src/composables/__tests__/use-getter.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
@@ -2,7 +2,6 @@ import { defineComponent } from 'vue';
 import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
-import { useRegisterXModule } from '../use-register-x-module';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
 import { useStore } from '../use-store';
 import { XPlugin } from '../../plugins';
@@ -17,7 +16,7 @@ function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
   const component = defineComponent({
     xModule: 'historyQueries',
     setup: () => {
-      useRegisterXModule(historyQueriesXModule);
+      XPlugin.registerXModule(historyQueriesXModule);
       const historyQueriesGetter = useGetter('historyQueries', modulePaths);
       return { historyQueriesGetter };
     },
diff --git a/packages/x-components/src/composables/__tests__/use-state.spec.ts b/packages/x-components/src/composables/__tests__/use-state.spec.ts
index 771870e030..ef124b8559 100644
--- a/packages/x-components/src/composables/__tests__/use-state.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-state.spec.ts
@@ -3,7 +3,6 @@ import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { XPlugin } from '../../plugins';
 import { ExtractState } from '../../x-modules/x-modules.types';
-import { useRegisterXModule } from '../use-register-x-module';
 import { useState } from '../use-state';
 import { searchBoxXModule } from '../../x-modules/search-box/x-module';
 import { useStore } from '../use-store';
@@ -17,7 +16,7 @@ function render(modulePaths: (keyof ExtractState<'searchBox'> & string)[]) {
   const component = defineComponent({
     xModule: 'searchBox',
     setup: () => {
-      useRegisterXModule(searchBoxXModule);
+      XPlugin.registerXModule(searchBoxXModule);
       const searchBoxUseState = useState('searchBox', modulePaths);
       return { searchBoxUseState };
     },
diff --git a/packages/x-components/src/composables/use-register-x-module.ts b/packages/x-components/src/composables/use-register-x-module.ts
index 41bfc0b665..2d421e8cef 100644
--- a/packages/x-components/src/composables/use-register-x-module.ts
+++ b/packages/x-components/src/composables/use-register-x-module.ts
@@ -8,6 +8,7 @@ import { XPlugin } from '../plugins/x-plugin';
  *
  * @param module - The module associated to the X-Component that is being registered.
  * @public
+ * @deprecated Use `XPlugin.registerXModule(xModule)` instead.
  */
 export function useRegisterXModule(module: AnyXModule): void {
   XPlugin.registerXModule(module);
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
index 217e16ea97..41baa25128 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
@@ -46,10 +46,10 @@ describe('testing plugin alias', () => {
       },
       status: {
         identifierResults: undefined,
-        nextQueries: undefined,
+        nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
         popularSearches: undefined,
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
-        recommendations: 'initial', // It is already registered by the `relatedTagsXModule` import itself
+        recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
         relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself
         search: 'initial' // It is already registered by the `searchXModule` import itself
       },
@@ -61,7 +61,7 @@ describe('testing plugin alias', () => {
       isHistoryQueriesEnabled: false,
       fromNoResultsWithFilters: false,
       identifierResults: [],
-      searchBoxStatus: undefined,
+      searchBoxStatus: 'initial', // It is already registered by the `searchBoxXModule` import itself
       isEmpathizeOpen: false,
       nextQueries: [],
       noResults: false,
diff --git a/packages/x-components/src/x-modules/empathize/components/empathize.vue b/packages/x-components/src/x-modules/empathize/components/empathize.vue
index 96c205ed40..4a9f5150e7 100644
--- a/packages/x-components/src/x-modules/empathize/components/empathize.vue
+++ b/packages/x-components/src/x-modules/empathize/components/empathize.vue
@@ -19,7 +19,6 @@
   import { defineComponent, PropType, ref } from 'vue';
   import { NoElement } from '../../../components/no-element';
   import { useDebounce } from '../../../composables/use-debounce';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { use$x } from '../../../composables/use-$x';
   import { AnimationProp } from '../../../types';
   import { XEvent } from '../../../wiring';
@@ -58,7 +57,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(empathizeXModule);
       const $x = use$x();
 
       const empathizeRef = ref<HTMLDivElement>();
diff --git a/packages/x-components/src/x-modules/empathize/x-module.ts b/packages/x-components/src/x-modules/empathize/x-module.ts
index 7c48dc9111..16542a9101 100644
--- a/packages/x-components/src/x-modules/empathize/x-module.ts
+++ b/packages/x-components/src/x-modules/empathize/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { empathizeEmitters } from './store/emitters';
 import { empathizeXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const empathizeXModule: EmpathizeXModule = {
   storeEmitters: empathizeEmitters,
   wiring: empathizeWiring
 };
+
+XPlugin.registerXModule(empathizeXModule);
diff --git a/packages/x-components/src/x-modules/facets/components/clear-filters.vue b/packages/x-components/src/x-modules/facets/components/clear-filters.vue
index 265393de7b..9b1e188002 100644
--- a/packages/x-components/src/x-modules/facets/components/clear-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/clear-filters.vue
@@ -15,7 +15,6 @@
   import { Facet } from '@empathyco/x-types';
   import { computed, defineComponent, PropType } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { useFacets } from '../composables/use-facets';
@@ -37,8 +36,6 @@
       alwaysVisible: Boolean
     },
     setup: function (props) {
-      useRegisterXModule(facetsXModule);
-
       const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props);
 
       /**
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets.vue b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
index 9cc6d91ef4..7cb66653b1 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
@@ -58,7 +58,6 @@
   import { Dictionary, map, objectFilter } from '@empathyco/x-utils';
   import Vue, { computed, ComputedRef, defineComponent, PropType } from 'vue';
   import { useGetter } from '../../../../composables/use-getter';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { toKebabCase } from '../../../../utils/string';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
@@ -118,8 +117,6 @@
       renderableFacets: String
     },
     setup: function (props, { slots }) {
-      useRegisterXModule(facetsXModule);
-
       const { selectedFiltersByFacet } = useFacets(props);
 
       const { facets } = useGetter('facets', ['facets']) as {
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index bf29ecb616..fbc832e5de 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -2,7 +2,6 @@
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
   import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { facetsXModule } from '../../x-module';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
@@ -37,7 +36,6 @@
       }
     },
     setup(props, { slots }) {
-      useRegisterXModule(facetsXModule);
       const renderedFilters = useFiltersInjection(props);
 
       /**
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index 52f1dde2f3..41b7be589a 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -28,7 +28,6 @@
   import { VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
   import { AnimationProp } from '../../../../types/animation-prop';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
@@ -71,8 +70,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(facetsXModule);
-
       const renderedFilters = useFiltersInjection(props);
 
       /**
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 7bccb66310..e67e47874e 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -32,7 +32,6 @@
   import { normalizeString } from '../../../../utils/normalize';
   import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
@@ -69,7 +68,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(facetsXModule);
       const renderedFilters = useFiltersInjection(props);
 
       let query = ref('');
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
index 8515fff460..98f123fb14 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
@@ -40,7 +40,6 @@
 <script lang="ts">
   import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';
   import Vue, { defineComponent, PropType } from 'vue';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { toKebabCase } from '../../../../utils/string';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
@@ -83,8 +82,6 @@
       }
     },
     setup: function (props, { slots }) {
-      useRegisterXModule(facetsXModule);
-
       const { selectedFilters } = useFacets(props);
 
       /**
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
index f0b98658f8..f98a2985bd 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
@@ -8,7 +8,6 @@
   import { Facet } from '@empathyco/x-types';
   import { defineComponent, PropType } from 'vue';
   import { NoElement } from '../../../../components/no-element';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
 
@@ -32,8 +31,6 @@
       alwaysVisible: Boolean
     },
     setup: function (props) {
-      useRegisterXModule(facetsXModule);
-
       const { selectedFilters, isVisible } = useFacets(props);
 
       return {
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
index 7b83f5c8a2..f082281639 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
@@ -49,7 +49,6 @@
   import { computed, defineComponent, PropType, provide, ref } from 'vue';
   import { VueCSSClasses } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
@@ -86,8 +85,6 @@
     },
     emits: ['click:show-less', 'click:show-more'],
     setup(props, { emit }) {
-      useRegisterXModule(facetsXModule);
-
       /** For showing the remaining filters. */
       let showMoreFilters = ref(true);
 
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index 9886f9f769..0b836602f0 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -3,7 +3,6 @@
   import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
-  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
@@ -34,7 +33,6 @@
       }
     },
     setup(props, { slots }) {
-      useRegisterXModule(facetsXModule);
       const renderedFilters = useFiltersInjection(props);
 
       /**
diff --git a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
index d85d4c5a0f..6c4c3b879e 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -5,6 +5,7 @@
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
   import { useNoElementRender } from '../../../composables';
+  import { facetsXModule } from '../x-module';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -14,6 +15,7 @@
    */
   export default defineComponent({
     name: 'PreselectedFilters',
+    xModule: facetsXModule.name,
     props: {
       /**
        * A list of filters to preselect.
diff --git a/packages/x-components/src/x-modules/facets/x-module.ts b/packages/x-components/src/x-modules/facets/x-module.ts
index 54092f3d4d..63b9a2926c 100644
--- a/packages/x-components/src/x-modules/facets/x-module.ts
+++ b/packages/x-components/src/x-modules/facets/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { facetsEmitters } from './store/emitters';
 import { facetsXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const facetsXModule: FacetsXModule = {
   storeEmitters: facetsEmitters,
   wiring: facetsWiring
 };
+
+XPlugin.registerXModule(facetsXModule);
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
index 286096cc94..14fd441249 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
@@ -32,7 +32,6 @@
   import { AnimationProp } from '../../../types/index';
   import { use$x } from '../../../composables/use-$x';
   import { useGetter } from '../../../composables/use-getter';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { NoElement } from '../../../components/no-element';
 
   /**
@@ -43,11 +42,11 @@
    */
   export default defineComponent({
     name: 'NextQueriesList',
+    xModule: nextQueriesXModule.name,
     components: {
       ItemsList,
       NoElement
     },
-    xModule: nextQueriesXModule.name,
     props: {
       /**
        * Animation component that will be used to animate the next queries groups.
@@ -103,8 +102,6 @@
       }
     },
     setup(props, { slots }) {
-      useRegisterXModule(nextQueriesXModule);
-
       const $x = use$x();
 
       /**
diff --git a/packages/x-components/src/x-modules/next-queries/x-module.ts b/packages/x-components/src/x-modules/next-queries/x-module.ts
index f75131dc6a..bf50bcf94b 100644
--- a/packages/x-components/src/x-modules/next-queries/x-module.ts
+++ b/packages/x-components/src/x-modules/next-queries/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { nextQueriesEmitters } from './store/emitters';
 import { nextQueriesXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const nextQueriesXModule: NextQueriesXModule = {
   storeEmitters: nextQueriesEmitters,
   wiring: nextQueriesWiring
 };
+
+XPlugin.registerXModule(nextQueriesXModule);
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 0989037e23..5dc6ef9859 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -29,7 +29,6 @@
   import { QueryPreviewInfo } from '../store/types';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
   import { AnimationProp, QueryFeature } from '../../../types';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import QueryPreview from './query-preview.vue';
 
   interface QueryPreviewStatusRecord {
@@ -101,8 +100,6 @@
       }
     },
     setup(props, { slots }) {
-      useRegisterXModule(queriesPreviewXModule);
-
       const renderSlots = slots;
 
       /**
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 7bdd812aee..b32734f395 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -59,7 +59,6 @@
   import { DebouncedFunction } from '../../../utils';
   import { createRawFilter } from '../../../__stubs__/filters-stubs.factory';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
 
@@ -73,10 +72,8 @@
 
   export default defineComponent({
     name: 'QueryPreview',
-    components: {
-      NoElement
-    },
     xModule: queriesPreviewXModule.name,
+    components: { NoElement },
     props: {
       /**
        * The information about the request of the query preview.
@@ -125,8 +122,6 @@
     },
     emits: ['load', 'error'],
     setup(props, { emit }) {
-      useRegisterXModule(queriesPreviewXModule);
-
       const xBus = useXBus();
 
       const queriesPreviewState = useState('queriesPreview', [
diff --git a/packages/x-components/src/x-modules/queries-preview/x-module.ts b/packages/x-components/src/x-modules/queries-preview/x-module.ts
index ee1ce29cba..16c304deec 100644
--- a/packages/x-components/src/x-modules/queries-preview/x-module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { queriesPreviewEmitters } from './store/emitters';
 import { queriesPreviewXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const queriesPreviewXModule: QueriesPreviewXModule = {
   storeEmitters: queriesPreviewEmitters,
   wiring: queriesPreviewWiring
 };
+
+XPlugin.registerXModule(queriesPreviewXModule);
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 8c5c330016..cfdf65655e 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -19,7 +19,6 @@
   } from 'vue';
   import { scrollXModule } from '../x-module';
   import { useState } from '../../../composables/use-state';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
@@ -58,7 +57,6 @@
         $el: HTMLElement;
       };
 
-      useRegisterXModule(scrollXModule);
       const xBus = useXBus();
 
       /**
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 32ce0ce05d..9c03c9f35c 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -8,7 +8,6 @@
   import { VueCSSClasses } from '../../../utils/types';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
   import { NoElement } from '../../../components/no-element';
@@ -26,10 +25,8 @@
    */
   export default defineComponent({
     name: 'MainScroll',
-    components: {
-      NoElement
-    },
     xModule: scrollXModule.name,
+    components: { NoElement },
     props: {
       /**
        * If `true`, sets this scroll instance to the main of the application. Being the main
@@ -72,8 +69,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(scrollXModule);
-
       const xBus = useXBus();
 
       /**
diff --git a/packages/x-components/src/x-modules/scroll/x-module.ts b/packages/x-components/src/x-modules/scroll/x-module.ts
index d82e6cbff0..2ed7dc4512 100644
--- a/packages/x-components/src/x-modules/scroll/x-module.ts
+++ b/packages/x-components/src/x-modules/scroll/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { scrollEmitters } from './store/emitters';
 import { scrollXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const scrollXModule: ScrollXModule = {
   storeEmitters: scrollEmitters,
   wiring: scrollWiring
 };
+
+XPlugin.registerXModule(scrollXModule);
diff --git a/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue b/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
index d1be96646c..fee8788993 100644
--- a/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
@@ -14,7 +14,6 @@
   import { defineComponent, computed, ref } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
   import { VueCSSClasses } from '../../../utils/types';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
 
@@ -34,8 +33,6 @@
     components: { BaseEventButton },
     xModule: searchBoxXModule.name,
     setup: function () {
-      useRegisterXModule(searchBoxXModule);
-
       const { query } = useState('searchBox', ['query']);
 
       /**
diff --git a/packages/x-components/src/x-modules/search-box/components/search-button.vue b/packages/x-components/src/x-modules/search-box/components/search-button.vue
index 9b8ba21d96..03a9b73038 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-button.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-button.vue
@@ -16,7 +16,6 @@
   import { VueCSSClasses } from '../../../utils/types';
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
 
@@ -34,8 +33,6 @@
     name: 'SearchButton',
     xModule: searchBoxXModule.name,
     setup: function () {
-      useRegisterXModule(searchBoxXModule);
-
       const $x = use$x();
 
       const buttonRef = ref<HTMLElement | null>(null);
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
index e33ad57171..09e3c90626 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
@@ -15,7 +15,6 @@
   import { computed, defineComponent, onBeforeUnmount, PropType, ref, watch } from 'vue';
   import { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
   import { AnimationProp } from '../../../types';
@@ -65,8 +64,6 @@
       animateOnlyOnHover: Boolean
     },
     setup: function (props) {
-      useRegisterXModule(searchBoxXModule);
-
       const $x = use$x();
 
       /**.
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input.vue b/packages/x-components/src/x-modules/search-box/components/search-input.vue
index fc17af0226..2da9925c6f 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input.vue
@@ -31,7 +31,6 @@
   import { XEvent } from '../../../wiring/events.types';
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
 
@@ -75,8 +74,6 @@
       }
     },
     setup: function (props) {
-      useRegisterXModule(searchBoxXModule);
-
       const $x = use$x();
 
       const { query } = useState('searchBox', ['query']);
diff --git a/packages/x-components/src/x-modules/search-box/x-module.ts b/packages/x-components/src/x-modules/search-box/x-module.ts
index 907b77b418..e8ecccf836 100644
--- a/packages/x-components/src/x-modules/search-box/x-module.ts
+++ b/packages/x-components/src/x-modules/search-box/x-module.ts
@@ -1,4 +1,4 @@
-// XModule
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { searchBoxEmitters } from './store/emitters';
 import { searchBoxXStoreModule } from './store/module';
@@ -24,3 +24,5 @@ export const searchBoxXModule: SearchBoxXModule = {
   storeEmitters: searchBoxEmitters,
   wiring: searchBoxWiring
 };
+
+XPlugin.registerXModule(searchBoxXModule);
diff --git a/packages/x-components/src/x-modules/search/components/banner.vue b/packages/x-components/src/x-modules/search/components/banner.vue
index fd9f8cc6b5..8c16b8caa3 100644
--- a/packages/x-components/src/x-modules/search/components/banner.vue
+++ b/packages/x-components/src/x-modules/search/components/banner.vue
@@ -23,8 +23,8 @@
 <script lang="ts">
   import { Banner as BannerModel } from '@empathyco/x-types';
   import { defineComponent, PropType, ref } from 'vue';
+  import { useXBus } from '../../../composables/use-x-bus';
   import { searchXModule } from '../x-module';
-  import { useRegisterXModule, useXBus } from '../../../composables';
 
   /**.
    * A banner result is just an item that has been inserted into the search results to advertise
@@ -55,7 +55,6 @@
       titleClass: String
     },
     setup(props) {
-      useRegisterXModule(searchXModule);
       const xBus = useXBus();
 
       /**
diff --git a/packages/x-components/src/x-modules/search/components/banners-list.vue b/packages/x-components/src/x-modules/search/components/banners-list.vue
index 800eacec0a..8c47d943dd 100644
--- a/packages/x-components/src/x-modules/search/components/banners-list.vue
+++ b/packages/x-components/src/x-modules/search/components/banners-list.vue
@@ -24,7 +24,6 @@
   import { searchXModule } from '../x-module';
   import { AnimationProp } from '../../../types/animation-prop';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
   import { NoElement } from '../../../components/no-element';
@@ -60,8 +59,6 @@
       }
     },
     setup(_, { slots }) {
-      useRegisterXModule(searchXModule);
-
       const $x = use$x();
 
       /**
diff --git a/packages/x-components/src/x-modules/search/components/partial-query-button.vue b/packages/x-components/src/x-modules/search/components/partial-query-button.vue
index 3aaa0f5e94..a19600cdfc 100644
--- a/packages/x-components/src/x-modules/search/components/partial-query-button.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-query-button.vue
@@ -13,7 +13,6 @@
   import { defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { searchXModule } from '../x-module';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { use$x } from '../../../composables/use-$x';
 
   /**
@@ -38,8 +37,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(searchXModule);
-
       const $x = use$x();
 
       const partialButtonEl = ref<HTMLElement>();
diff --git a/packages/x-components/src/x-modules/search/components/partial-results-list.vue b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
index 934d84a7f2..7af1027b26 100644
--- a/packages/x-components/src/x-modules/search/components/partial-results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
@@ -26,7 +26,6 @@
   import { computed, ComputedRef, defineComponent } from 'vue';
   import { searchXModule } from '../x-module';
   import { AnimationProp } from '../../../types/animation-prop';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
 
   /**
@@ -60,8 +59,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(searchXModule);
-
       /**
        * The partials results from the search state.
        *
diff --git a/packages/x-components/src/x-modules/search/components/promoted.vue b/packages/x-components/src/x-modules/search/components/promoted.vue
index 484d9784da..a911486852 100644
--- a/packages/x-components/src/x-modules/search/components/promoted.vue
+++ b/packages/x-components/src/x-modules/search/components/promoted.vue
@@ -11,7 +11,7 @@
   import { Promoted as PromotedModel } from '@empathyco/x-types';
   import { defineComponent, PropType } from 'vue';
   import { searchXModule } from '../x-module';
-  import { useRegisterXModule, useXBus } from '../../../composables';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * A promoted result is just an item that has been inserted into the search results to advertise
@@ -39,8 +39,6 @@
       titleClass: String
     },
     setup(props) {
-      useRegisterXModule(searchXModule);
-
       const xBus = useXBus();
 
       /**
diff --git a/packages/x-components/src/x-modules/search/components/promoteds-list.vue b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
index a1a03fef92..87d66cbfe0 100644
--- a/packages/x-components/src/x-modules/search/components/promoteds-list.vue
+++ b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
@@ -23,7 +23,6 @@
   import { searchXModule } from '../x-module';
   import { AnimationProp } from '../../../types/animation-prop';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
   import { NoElement } from '../../../components/no-element';
@@ -60,8 +59,6 @@
       }
     },
     setup(_, { slots }) {
-      useRegisterXModule(searchXModule);
-
       const $x = use$x();
 
       /**
diff --git a/packages/x-components/src/x-modules/search/components/results-list.vue b/packages/x-components/src/x-modules/search/components/results-list.vue
index 154715d418..d0c2258ecc 100644
--- a/packages/x-components/src/x-modules/search/components/results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/results-list.vue
@@ -27,7 +27,7 @@
   import { RequestStatus } from '../../../store/utils/status-store.utils';
   import { infiniteScroll } from '../../../directives';
   import { animationProp } from '../../../utils/options-api';
-  import { useRegisterXModule, useState } from '../../../composables';
+  import { useState } from '../../../composables/use-state';
   import { searchXModule } from '../x-module';
   import { useXBus } from '../../../composables/use-x-bus';
   import { NoElement } from '../../../components/no-element';
@@ -64,14 +64,9 @@
     },
     emits: ['UserReachedResultsListEnd'],
 
-    setup(props, { slots }) {
+    setup(_, { slots }) {
       const xBus = useXBus();
 
-      /**
-       * The {@link searchXModule | searchXModule } registered.
-       */
-      useRegisterXModule(searchXModule);
-
       /**
        * The results to render from the state.
        *
diff --git a/packages/x-components/src/x-modules/search/components/sort-dropdown.vue b/packages/x-components/src/x-modules/search/components/sort-dropdown.vue
index 8175b1ee0c..1c9bee0ab6 100644
--- a/packages/x-components/src/x-modules/search/components/sort-dropdown.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-dropdown.vue
@@ -36,7 +36,8 @@
   import Vue, { defineComponent, PropType, ref, watch } from 'vue';
 
   import BaseDropdown from '../../../components/base-dropdown.vue';
-  import { use$x, useRegisterXModule, useState } from '../../../composables';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
   import { searchXModule } from '../x-module';
 
   /**
@@ -58,7 +59,6 @@
     },
     emits: ['change'],
     setup(_, { emit }) {
-      useRegisterXModule(searchXModule);
       const $x = use$x();
 
       const { sort: selectedSort } = useState('search', ['sort']);
diff --git a/packages/x-components/src/x-modules/search/components/sort-list.vue b/packages/x-components/src/x-modules/search/components/sort-list.vue
index 83e3d047d8..7591acf891 100644
--- a/packages/x-components/src/x-modules/search/components/sort-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-list.vue
@@ -23,7 +23,8 @@
   import { Sort } from '@empathyco/x-types';
   import Vue, { computed, defineComponent, PropType, watch } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { use$x, useRegisterXModule, useState } from '../../../composables';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { searchXModule } from '../x-module';
@@ -58,7 +59,6 @@
       }
     },
     setup(props) {
-      useRegisterXModule(searchXModule);
       const $x = use$x();
 
       const { sort: selectedSort } = useState('search', ['sort']);
diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
index 25abd48145..9239222fee 100644
--- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
@@ -26,7 +26,8 @@
   import { Sort } from '@empathyco/x-types';
   import Vue, { computed, defineComponent, PropType, watch } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { use$x, useRegisterXModule, useState } from '../../../composables';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { searchXModule } from '../x-module';
@@ -63,7 +64,6 @@
       buttonClass: String
     },
     setup(props) {
-      useRegisterXModule(searchXModule);
       const $x = use$x();
 
       const { sort: selectedSort } = useState('search', ['sort']);