Merge branch 'main' into feature/EMP-4309-migrate-next-queries-x-modu…

…le-yo-composition-api

packages/_vue3-migration-test/src/main.ts

@@ -19,7 +19,8 @@ import {
   recommendationsXModule,
   scrollXModule,
   searchXModule,
-  semanticQueriesXModule
+  semanticQueriesXModule,
+  identifierResultsXModule
 } from './';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
@@ -93,7 +94,8 @@ createApp(App as Component)
       search: searchXModule,
       queriesPreview: queriesPreviewXModule,
       semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule
+      recommendations: recommendationsXModule,
+      identifierResults: identifierResultsXModule
     }
   })
   .mount('#app');

packages/_vue3-migration-test/src/router.ts

@@ -37,7 +37,8 @@ import {
   TestQuerySuggestions,
   TestSemanticQueries,
   TestRecommendations,
-  TestNextQueries
+  TestNextQueries,
+  TestIdentifierResults
 } from './';
 
 const routes = [
@@ -230,6 +231,11 @@ const routes = [
     path: '/next-queries',
     name: 'NextQueries',
     component: TestNextQueries
+  },
+  {
+    path: '/identifier-results',
+    name: 'IdentifierResults',
+    component: TestIdentifierResults
   }
 ];
 

packages/_vue3-migration-test/src/x-modules/identifier-results/components/index.ts

@@ -0,0 +1 @@
+export { default as TestIdentifierResults } from './test-identifier-results.vue';

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>

packages/_vue3-migration-test/src/x-modules/identifier-results/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './x-module';

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'
+    }
+  }
+};

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';

packages/x-components/CHANGELOG.md

@@ -3,6 +3,24 @@
 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/[email protected]...@empathyco/[email protected]) (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/[email protected]...@empathyco/[email protected]) (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/[email protected]...@empathyco/[email protected]) (2024-06-14)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.45",
+  "version": "5.0.0-alpha.47",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

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 };
     },

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 };
     },

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);

packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts

@@ -45,11 +45,11 @@ 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
-        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,

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>();

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);

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);
 
       /**

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 {

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);
 
       /**

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);
 
       /**

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('');

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);
 
       /**

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 {

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);
 

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);
 
       /**

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.

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);