From 617c3b0d4c07a1054d95c9b4316b86dc5112643e Mon Sep 17 00:00:00 2001
From: Manuel Cid <manuelc@empathy.co>
Date: Mon, 17 Jun 2024 11:11:36 +0200
Subject: [PATCH 1/5] feat(search): add the capability to reload the current
 search (#1515)

---
 .../src/x-modules/search/events.types.ts      | 12 ++++++----
 .../src/x-modules/search/store/module.ts      | 18 +++++++++------
 .../src/x-modules/search/store/types.ts       | 17 ++++++++------
 .../src/x-modules/search/wiring.ts            | 23 ++++++++++++++-----
 .../tests/e2e/reload-search.feature           | 19 +++++++++++++++
 .../e2e/reload-search/reload-search.spec.ts   |  6 +++++
 6 files changed, 71 insertions(+), 24 deletions(-)
 create mode 100644 packages/x-components/tests/e2e/reload-search.feature
 create mode 100644 packages/x-components/tests/e2e/reload-search/reload-search.spec.ts

diff --git a/packages/x-components/src/x-modules/search/events.types.ts b/packages/x-components/src/x-modules/search/events.types.ts
index 267884e35d..526ea526d8 100644
--- a/packages/x-components/src/x-modules/search/events.types.ts
+++ b/packages/x-components/src/x-modules/search/events.types.ts
@@ -1,11 +1,11 @@
 import {
+  Banner,
   Facet,
+  Promoted,
+  Redirection,
   Result,
   Sort,
-  Redirection,
-  TaggingRequest,
-  Promoted,
-  Banner
+  TaggingRequest
 } from '@empathyco/x-types';
 import { InternalSearchRequest, InternalSearchResponse } from './types';
 
@@ -26,6 +26,10 @@ export interface SearchXEvents {
    * Payload: The new page number.
    */
   PageChanged: number;
+  /**
+   * Reload the current search has been requested.
+   */
+  ReloadSearchRequested: void;
   /**
    * Results have been changed.
    * Payload: The new {@link @empathyco/x-types#Result | results}.
diff --git a/packages/x-components/src/x-modules/search/store/module.ts b/packages/x-components/src/x-modules/search/store/module.ts
index 2da7948952..1679d1f71d 100644
--- a/packages/x-components/src/x-modules/search/store/module.ts
+++ b/packages/x-components/src/x-modules/search/store/module.ts
@@ -1,18 +1,18 @@
 import { isFacetFilter } from '@empathyco/x-types';
 import { setQuery } from '../../../store/utils/query.utils';
-import { setStatus } from '../../../store/utils/status-store.utils';
+import { setStatus } from '../../../store';
 import { groupItemsBy } from '../../../utils/array';
 import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import { UNKNOWN_FACET_KEY } from '../../facets/store/constants';
 import {
   cancelFetchAndSaveSearchResponse,
-  fetchAndSaveSearchResponse
-} from './actions/fetch-and-save-search-response.action';
-import { fetchSearchResponse } from './actions/fetch-search-response.action';
-import { increasePageAppendingResults } from './actions/increase-page-apending-results.action';
-import { resetRequestOnRefinement } from './actions/reset-request-on-refinement.action';
+  fetchAndSaveSearchResponse,
+  fetchSearchResponse,
+  increasePageAppendingResults,
+  resetRequestOnRefinement,
+  saveSearchResponse
+} from './actions';
 import { saveOrigin } from './actions/save-origin.action';
-import { saveSearchResponse } from './actions/save-search-response.action';
 import { setUrlParams } from './actions/set-url-params.action';
 import { query } from './getters/query.getter';
 import { request } from './getters/request.getter';
@@ -46,6 +46,10 @@ export const searchXStoreModule: SearchXStoreModule = {
     resetState(state) {
       Object.assign(state, resettableState());
     },
+    resetStateForReload(state) {
+      const { query, facets, sort, page, ...resettable } = resettableState();
+      Object.assign(state, resettable);
+    },
     setQuery,
     setResults(state, results) {
       state.results = results;
diff --git a/packages/x-components/src/x-modules/search/store/types.ts b/packages/x-components/src/x-modules/search/store/types.ts
index 848532f4da..08c457936a 100644
--- a/packages/x-components/src/x-modules/search/store/types.ts
+++ b/packages/x-components/src/x-modules/search/store/types.ts
@@ -7,17 +7,15 @@ import {
   Redirection,
   RelatedTag,
   Result,
-  Sort,
-  TaggingRequest,
   SearchRequest,
-  SearchResponse
+  SearchResponse,
+  Sort,
+  TaggingRequest
 } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
-import { XActionContext, XStoreModule } from '../../../store';
+import { StatusMutations, StatusState, XActionContext, XStoreModule } from '../../../store';
 import { QueryMutations, QueryState } from '../../../store/utils/query.utils';
-import { StatusMutations, StatusState } from '../../../store/utils/status-store.utils';
-import { QueryOrigin, QueryOriginInit } from '../../../types/origin';
-import { UrlParams } from '../../../types/url-params';
+import { QueryOrigin, QueryOriginInit, UrlParams } from '../../../types';
 import { SearchConfig } from '../config.types';
 import { InternalSearchRequest, WatchedInternalSearchRequest } from '../types';
 import { ConfigMutations } from '../../../store/utils/config-store.utils';
@@ -108,6 +106,11 @@ export interface SearchMutations
    * {@link searchXStoreModule} for details.
    */
   resetState(): void;
+  /**
+   * Resets the "resettable" part of the Search state like {@link SearchMutations.resetState} but
+   * maintains the values required to perform the search request again.
+   */
+  resetStateForReload(): void;
   /**
    * Sets the banners of the module.
    *
diff --git a/packages/x-components/src/x-modules/search/wiring.ts b/packages/x-components/src/x-modules/search/wiring.ts
index 7679bce076..8ed51ef822 100644
--- a/packages/x-components/src/x-modules/search/wiring.ts
+++ b/packages/x-components/src/x-modules/search/wiring.ts
@@ -1,12 +1,13 @@
-import { filterTruthyPayload, namespacedWireCommitWithoutPayload } from '../../wiring';
 import {
+  createWiring,
+  filterTruthyPayload,
   namespacedWireCommit,
+  namespacedWireCommitWithoutPayload,
   namespacedWireDispatch,
-  namespacedWireDispatchWithoutPayload
-} from '../../wiring/namespaced-wires.factory';
-import { WirePayload } from '../../wiring/wiring.types';
-import { createWiring } from '../../wiring/wiring.utils';
-import { createRawFilters } from '../../utils/filters';
+  namespacedWireDispatchWithoutPayload,
+  WirePayload
+} from '../../wiring';
+import { createRawFilters } from '../../utils';
 import { InternalSearchRequest } from './types';
 
 /**
@@ -130,6 +131,13 @@ export const setSearchPage = wireCommit('setPage');
  */
 export const setSearchExtraParams = wireCommit('setParams');
 
+/**
+ * Resets the search state to reload the current search.
+ *
+ * @public
+ */
+export const resetStateForReloadWire = wireCommitWithoutPayload('resetStateForReload');
+
 /**
  * Resets the search state `isNoResults`.
  *
@@ -272,6 +280,9 @@ export const searchWiring = createWiring({
   ResultsChanged: {
     resetAppending
   },
+  ReloadSearchRequested: {
+    resetStateForReloadWire
+  },
   SelectedSortProvided: {
     setSort
   },
diff --git a/packages/x-components/tests/e2e/reload-search.feature b/packages/x-components/tests/e2e/reload-search.feature
new file mode 100644
index 0000000000..8848d2861b
--- /dev/null
+++ b/packages/x-components/tests/e2e/reload-search.feature
@@ -0,0 +1,19 @@
+Feature: Reload search
+
+  Background:
+    Given a results API with 24 results
+    And   a tracking API with a known response
+    And   no special config for layout view
+
+  Scenario Outline: 1. Search is reloaded when event is emitted
+    When  start button is clicked
+    Then  empathize should be visible
+    When  "<query>" is searched
+    Then  results page number 1 is loaded
+    And  search request contains parameter "query" with value "<query>"
+    When  event ReloadSearchRequested is emitted
+    Then  search request contains parameter "query" with value "<query>"
+
+    Examples:
+      | query |
+      | lego  |
diff --git a/packages/x-components/tests/e2e/reload-search/reload-search.spec.ts b/packages/x-components/tests/e2e/reload-search/reload-search.spec.ts
new file mode 100644
index 0000000000..360489b0c6
--- /dev/null
+++ b/packages/x-components/tests/e2e/reload-search/reload-search.spec.ts
@@ -0,0 +1,6 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor';
+
+When('event ReloadSearchRequested is emitted', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  cy.window().then((w: Window) => w.InterfaceX?.bus.emit('ReloadSearchRequested'));
+});

From 4b79c80c0c9ee2c7ac7a88da6dc0c418bedda20a Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Mon, 17 Jun 2024 09:27:16 +0000
Subject: [PATCH 2/5] chore(release): publish

 - @empathyco/x-components@5.0.0-alpha.46
---
 packages/x-components/CHANGELOG.md | 9 +++++++++
 packages/x-components/package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 1769a801aa..e1a86dd9b6 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.46](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.45...@empathyco/x-components@5.0.0-alpha.46) (2024-06-17)
+
+
+### Features
+
+* **search:** add the capability to reload the current search (#1515) ([617c3b0](https://github.com/empathyco/x/commit/617c3b0d4c07a1054d95c9b4316b86dc5112643e))
+
+
+
 ## [5.0.0-alpha.45](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.44...@empathyco/x-components@5.0.0-alpha.45) (2024-06-14)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 0e083b074b..62af49f5dc 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.45",
+  "version": "5.0.0-alpha.46",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

From 525b020f033b1e44d95e5b4042c8201636c87287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Antonio=20Caba=C3=B1eros?= <joseacabaneros@gmail.com>
Date: Mon, 17 Jun 2024 18:56:45 +0200
Subject: [PATCH 3/5] fix(x-module): deprecate useRegisterXModule composable in
 favour of register the x-module itself in the import (#1520)

---
 .../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']);

From f0c9e71b8c53d09888e54b204a4dcd13448e42b0 Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Mon, 17 Jun 2024 17:11:37 +0000
Subject: [PATCH 4/5] chore(release): publish

 - @empathyco/x-components@5.0.0-alpha.47
---
 packages/x-components/CHANGELOG.md | 9 +++++++++
 packages/x-components/package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index e1a86dd9b6..baccbc3af3 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.47](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.46...@empathyco/x-components@5.0.0-alpha.47) (2024-06-17)
+
+
+### Bug Fixes
+
+* **x-module:** deprecate useRegisterXModule composable in favour of register the x-module itself in the import (#1520) ([525b020](https://github.com/empathyco/x/commit/525b020f033b1e44d95e5b4042c8201636c87287))
+
+
+
 ## [5.0.0-alpha.46](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.45...@empathyco/x-components@5.0.0-alpha.46) (2024-06-17)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 62af49f5dc..fa84fd1689 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.46",
+  "version": "5.0.0-alpha.47",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

From 81b18d03b3ae2ba9df05f5c288a7eab0e0e7966c Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Tue, 18 Jun 2024 13:10:49 +0200
Subject: [PATCH 5/5] feat: migrate `identifier-results` x-module to
 composition API (#1521)

---
 packages/_vue3-migration-test/src/main.ts     |   6 +-
 packages/_vue3-migration-test/src/router.ts   |   8 +-
 .../identifier-results/components/index.ts    |   1 +
 .../components/test-identifier-results.vue    |  10 ++
 .../src/x-modules/identifier-results/index.ts |   2 +
 .../x-modules/identifier-results/x-module.ts  |  21 ++++
 .../src/x-modules/index.ts                    |   1 +
 .../plugins/__tests__/x-plugin-alias.spec.ts  |   2 +-
 .../components/identifier-result.vue          | 100 ++++++++--------
 .../components/identifier-results.vue         | 108 +++++++++---------
 .../x-modules/identifier-results/x-module.ts  |   3 +
 11 files changed, 160 insertions(+), 102 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/identifier-results/components/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/identifier-results/components/test-identifier-results.vue
 create mode 100644 packages/_vue3-migration-test/src/x-modules/identifier-results/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index f376e6a520..197f379b44 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -13,7 +13,8 @@ import {
   recommendationsXModule,
   scrollXModule,
   searchXModule,
-  semanticQueriesXModule
+  semanticQueriesXModule,
+  identifierResultsXModule
 } from './';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
@@ -62,7 +63,8 @@ createApp(App as Component)
       search: searchXModule,
       queriesPreview: queriesPreviewXModule,
       semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule
+      recommendations: recommendationsXModule,
+      identifierResults: identifierResultsXModule
     }
   })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index ce5c957d29..3717cf16a1 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -36,7 +36,8 @@ import {
   TestSpellcheck,
   TestQuerySuggestions,
   TestSemanticQueries,
-  TestRecommendations
+  TestRecommendations,
+  TestIdentifierResults
 } from './';
 
 const routes = [
@@ -224,6 +225,11 @@ const routes = [
     path: '/recommendations',
     name: 'Recommendations',
     component: TestRecommendations
+  },
+  {
+    path: '/identifier-results',
+    name: 'IdentifierResults',
+    component: TestIdentifierResults
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/components/index.ts b/packages/_vue3-migration-test/src/x-modules/identifier-results/components/index.ts
new file mode 100644
index 0000000000..8cd45a343e
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/components/index.ts
@@ -0,0 +1 @@
+export { default as TestIdentifierResults } from './test-identifier-results.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/components/test-identifier-results.vue b/packages/_vue3-migration-test/src/x-modules/identifier-results/components/test-identifier-results.vue
new file mode 100644
index 0000000000..62ffbc6dd0
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/components/test-identifier-results.vue
@@ -0,0 +1,10 @@
+<template>
+  <IdentifierResults #default="{ identifierResult }" :maxItemsToRender="3">
+    <IdentifierResult :result="identifierResult" />
+  </IdentifierResults>
+</template>
+
+<script setup>
+  import IdentifierResults from '../../../../../x-components/src/x-modules/identifier-results/components/identifier-results.vue';
+  import IdentifierResult from '../../../../../x-components/src/x-modules/identifier-results/components/identifier-result.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/index.ts b/packages/_vue3-migration-test/src/x-modules/identifier-results/index.ts
new file mode 100644
index 0000000000..38da673ebb
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/index.ts
@@ -0,0 +1,2 @@
+export * from './components';
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
new file mode 100644
index 0000000000..70ba15093a
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
@@ -0,0 +1,21 @@
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { IdentifierResultsXModule } from '../../../../x-components/src/x-modules/identifier-results/x-module';
+import { createResultStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
+
+export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXModule> = {
+  storeModule: {
+    state: {
+      config: {
+        debounceInMs: 600,
+        maxItemsToRequest: 10,
+        identifierDetectionRegexp: '^[0-9]{2,}$',
+        separatorChars: '-/ '
+      },
+      identifierResults: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)),
+      origin: null,
+      query: 'test',
+      params: {},
+      status: 'initial'
+    }
+  }
+};
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index d13eb66456..a78483264e 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -10,3 +10,4 @@ export * from './history-queries';
 export * from './query-suggestions';
 export * from './semantic-queries';
 export * from './recommendations';
+export * from './identifier-results';
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 41baa25128..bb3c969a0c 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
@@ -45,7 +45,7 @@ describe('testing plugin alias', () => {
         search: ''
       },
       status: {
-        identifierResults: undefined,
+        identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
         nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
         popularSearches: undefined,
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
diff --git a/packages/x-components/src/x-modules/identifier-results/components/identifier-result.vue b/packages/x-components/src/x-modules/identifier-results/components/identifier-result.vue
index af62e9e9b6..f4231c6736 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/identifier-result.vue
+++ b/packages/x-components/src/x-modules/identifier-results/components/identifier-result.vue
@@ -9,11 +9,10 @@
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { Getter, State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, ComputedRef, defineComponent, PropType } from 'vue';
   import { identifierResultsXModule } from '../x-module';
+  import { useGetter } from '../../../composables/use-getter';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * This component renders an identifier result value and highlights its matching part with the
@@ -21,52 +20,61 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(identifierResultsXModule)]
-  })
-  export default class IdentifierResult extends Vue {
-    /**
-     * (Required) The {@link @empathyco/x-types#Result} information.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected result!: Result;
+  export default defineComponent({
+    name: 'IdentifierResult',
+    xModule: identifierResultsXModule.name,
+    props: {
+      /**
+       * (Required) The {@link @empathyco/x-types#Result} information.
+       *
+       * @public
+       */
+      result: {
+        type: Object as PropType<Result>,
+        required: true
+      }
+    },
+    setup: function (props) {
+      /**
+       * Query from the module state.
+       *
+       * @public
+       */
+      const { query } = useState('identifierResults', ['query']);
 
-    /**
-     * Query from the module state.
-     *
-     * @public
-     */
-    @State('identifierResults', 'query')
-    public query!: string;
+      /**
+       * The RegExp with the current query from the state adding the separatorChars after each
+       * matching character.
+       *
+       * @public
+       */
+      const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [
+        'identifierHighlightRegexp'
+      ]).identifierHighlightRegexp;
 
-    /**
-     * The RegExp with the current query from the state adding the separatorChars after each
-     * matching character.
-     *
-     * @public
-     */
-    @Getter('identifierResults', 'identifierHighlightRegexp')
-    public identifierHighlightRegexp!: RegExp;
+      /**
+       * Highlights the matching part of the identifier result with the query from the state.
+       *
+       * @returns String - The identifier result s query with the matching part inside a `<span>` tag.
+       * @public
+       */
+      const highlightedQueryHTML = computed(() => {
+        const identifierValue = props.result.identifier?.value ?? '';
+        if (identifierValue && identifierHighlightRegexp.value) {
+          return identifierValue.replace(
+            identifierHighlightRegexp.value,
+            '<span class="x-identifier-result__matching-part">$1</span>'
+          );
+        }
+        return identifierValue;
+      });
 
-    /**
-     * Highlights the matching part of the identifier result with the query from the state.
-     *
-     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.
-     * @public
-     */
-    protected get highlightedQueryHTML(): string {
-      const identifierValue = this.result.identifier?.value ?? '';
-      if (identifierValue && this.identifierHighlightRegexp) {
-        return identifierValue.replace(
-          this.identifierHighlightRegexp,
-          '<span class="x-identifier-result__matching-part">$1</span>'
-        );
-      }
-      return identifierValue;
+      return {
+        query,
+        highlightedQueryHTML
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
index c302154074..dd3ea1f051 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
+++ b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
@@ -17,13 +17,12 @@
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
-  import { Component, Prop, Provide } from 'vue-property-decorator';
-  import Vue from 'vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, defineComponent, provide } from 'vue';
   import { PropsWithType } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { identifierResultsXModule } from '../x-module';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * Paints the list of identifier results stored in the state. Each identifier result should be
@@ -32,55 +31,60 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(identifierResultsXModule)]
-  })
-  export default class IdentifierResults extends Vue {
-    /**
-     * Animation component that will be used to animate the identifier results.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue;
-
-    /**
-     * Number of identifier results to render.
-     *
-     * @public
-     */
-    @Prop()
-    protected maxItemsToRender?: number;
-
-    /**
-     * The module's list of identifier results.
-     *
-     * @public
-     */
-    @State('identifierResults', 'identifierResults')
-    public identifierResults!: Result[];
-
-    /**
-     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
-     *
-     * @public
-     */
-    @Provide()
-    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [
-      'UserClickedAIdentifierResult'
-    ];
-
-    /**
-     * Slices the identifier results from the state.
-     *
-     * @returns - The list of identifier results sliced by the number of items to render.
-     *
-     * @internal
-     */
-    public get identifierResultsToRender(): Result[] {
-      return this.identifierResults.slice(0, this.maxItemsToRender);
+  export default defineComponent({
+    name: 'IdentifierResults',
+    xModule: identifierResultsXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the identifier results.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * Number of identifier results to render.
+       *
+       * @public
+       */
+      maxItemsToRender: Number
+    },
+    setup: function (props) {
+      /**
+       * The module's list of identifier results.
+       *
+       * @public
+       */
+      const { identifierResults } = useState('identifierResults', ['identifierResults']);
+
+      /**
+       * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
+       *
+       * @public
+       */
+      provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [
+        'UserClickedAIdentifierResult'
+      ]);
+
+      /**
+       * Slices the identifier results from the state.
+       *
+       * @returns - The list of identifier results sliced by the number of items to render.
+       *
+       * @internal
+       */
+      const identifierResultsToRender = computed(() =>
+        (identifierResults.value as Result[]).slice(0, props.maxItemsToRender)
+      );
+
+      return {
+        identifierResults,
+        identifierResultsToRender
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/identifier-results/x-module.ts b/packages/x-components/src/x-modules/identifier-results/x-module.ts
index c4ed3a8ce0..59ef81159c 100644
--- a/packages/x-components/src/x-modules/identifier-results/x-module.ts
+++ b/packages/x-components/src/x-modules/identifier-results/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/x-plugin';
 import { identifierResultsEmitters } from './store/emitters';
 import { identifierResultsXStoreModule } from './store/module';
 import { IdentifierResultsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const identifierResultsXModule: IdentifierResultsXModule = {
   storeEmitters: identifierResultsEmitters,
   wiring: identifierResultsWiring
 };
+
+XPlugin.registerXModule(identifierResultsXModule);