fix(x-module): deprecate useRegisterXModule composable in favour of r…

…egister the x-module itself in the import
empathyco · Jun 14, 2024 · bf482e1 · bf482e1
1 parent 2d93900
commit bf482e1
Show file tree

Hide file tree

Showing 40 changed files with 39 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...es/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
 
       /**