Merge remote-tracking branch 'refs/remotes/origin/main' into fix/mino…

…r-vue3-warnings

# Conflicts:
#	packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.35](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.35) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
+## [1.0.0-alpha.34](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.34) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
+## [1.0.0-alpha.33](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.33) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
 ## [1.0.0-alpha.32](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.32) (2024-06-18)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.35",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue

@@ -0,0 +1,13 @@
+<template>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  {{ params }}
+</template>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+  const snippetConfig = window.InterfaceX?.getSnippetConfig();
+  provide('snippetConfig', snippetConfig);
+  const { params } = useState('extraParams', ['params']);
+  window.InterfaceX?.setSnippetConfig({ store: 'demo', lang: 'es', warehouse: 1234 });
+</script>

packages/_vue3-migration-test/src/components/index.ts

@@ -14,3 +14,4 @@ export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
 export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
 export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
+export { default as TestExtraParams } from './extra-params/test-extra-params.vue';

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

@@ -1,20 +1,22 @@
 import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
-import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
+  createResultStub,
   getBannersStub,
   getNextQueriesStub,
   getPromotedsStub,
   getResultsStub
 } from '../../x-components/src/__stubs__/index';
+import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
 import App from './App.vue';
 import router from './router';
 import {
   facetsXModule,
   nextQueriesXModule,
+  popularSearchesXModule,
   queriesPreviewXModule,
   recommendationsXModule,
   scrollXModule,
@@ -75,26 +77,36 @@ const adapter = {
         promoteds: getPromotedsStub(),
         banners: getBannersStub()
       });
-    })
+    }),
+  identifierResults: () =>
+    new Promise(resolve =>
+      resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
+    )
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});
 
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, {
-    adapter,
-    store,
-    __PRIVATE__xModules: {
-      facets: facetsXModule,
-      nextQueries: nextQueriesXModule,
-      scroll: scrollXModule,
-      search: searchXModule,
-      queriesPreview: queriesPreviewXModule,
-      semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule,
-      identifierResults: identifierResultsXModule
-    }
-  })
   .mount('#app');
+
+window.initX = {
+  instance: 'empathy',
+  lang: 'en'
+};
+new XInstaller({
+  adapter,
+  store,
+  __PRIVATE__xModules: {
+    facets: facetsXModule,
+    nextQueries: nextQueriesXModule,
+    scroll: scrollXModule,
+    search: searchXModule,
+    queriesPreview: queriesPreviewXModule,
+    semanticQueries: semanticQueriesXModule,
+    recommendations: recommendationsXModule,
+    identifierResults: identifierResultsXModule,
+    popularSearches: popularSearchesXModule
+  }
+}).init();

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

@@ -38,8 +38,10 @@ import {
   TestQuerySuggestions,
   TestSemanticQueries,
   TestRecommendations,
+  TestPopularSearches,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestExtraParams
 } from './';
 
 const routes = [
@@ -233,6 +235,11 @@ const routes = [
     name: 'Recommendations',
     component: TestRecommendations
   },
+  {
+    path: '/popular-searches',
+    name: 'PopularSearches',
+    component: TestPopularSearches
+  },
   {
     path: '/next-queries',
     name: 'NextQueries',
@@ -242,6 +249,11 @@ const routes = [
     path: '/identifier-results',
     name: 'IdentifierResults',
     component: TestIdentifierResults
+  },
+  {
+    path: '/snippet-config-extraparams',
+    name: 'SnippetConfigExtraparams',
+    component: TestExtraParams
   }
 ];
 

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

@@ -1,6 +1,5 @@
 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: {
@@ -11,7 +10,7 @@ export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXM
         identifierDetectionRegexp: '^[0-9]{2,}$',
         separatorChars: '-/ '
       },
-      identifierResults: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)),
+      identifierResults: [],
       origin: null,
       query: 'test',
       params: {},

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

@@ -10,4 +10,5 @@ export * from './history-queries';
 export * from './query-suggestions';
 export * from './semantic-queries';
 export * from './recommendations';
+export * from './popular-searches';
 export * from './identifier-results';

packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts

@@ -0,0 +1,2 @@
+export * from './x-module';
+export { default as TestPopularSearches } from './test-popular-searches.vue';

packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue

@@ -0,0 +1,23 @@
+<template>
+  <SearchInput />
+  <ClearSearchInput />
+  <div v-if="!query">
+    <h1>Popular searches</h1>
+    <PopularSearches />
+  </div>
+</template>
+
+<script setup>
+  import PopularSearches from '../../../../x-components/src/x-modules/popular-searches/components/popular-searches.vue';
+  import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ClearSearchInput from '../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+
+  const { query } = useState('search', ['query']);
+</script>
+
+<style scoped>
+  .x-popular-searches {
+    width: fit-content;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts

@@ -0,0 +1,16 @@
+import { PopularSearchesXModule } from '../../../../x-components/src/x-modules/popular-searches/x-module';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
+import { createPopularSearch } from '../../../../x-components/src/__stubs__/popular-searches-stubs.factory';
+
+export const popularSearchesXModule: PrivateXModuleOptions<PopularSearchesXModule> = {
+  storeModule: {
+    state: {
+      popularSearches: ['patata', 'salchicón', 'pan', 'queso', 'leche', 'galletas'].map(query =>
+        createPopularSearch(query)
+      ),
+      config: {
+        hideSessionQueries: false
+      }
+    }
+  }
+};

packages/x-components/CHANGELOG.md

@@ -3,6 +3,51 @@
 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.54](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
+## [5.0.0-alpha.53](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
+## [5.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-20)
+
+
+### Features
+
+* migrate `QueryPreviewButton` component to composition API (#1525) ([3eff0c7](https://github.com/empathyco/x/commit/3eff0c7c9479abbebbda59e8cc538af6f55375e1))
+
+
+
+## [5.0.0-alpha.51](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
+## [5.0.0-alpha.50](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-19)
+
+
+### Features
+
+* migrate `facets provider` component to use Composition API (#1523) ([eff7b8d](https://github.com/empathyco/x/commit/eff7b8d92c54aece07061c2d8ce58507a56e7d01))
+
+
+
 ## [5.0.0-alpha.49](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-06-18)
 
 

packages/x-components/package.json

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

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

@@ -47,7 +47,7 @@ describe('testing plugin alias', () => {
       status: {
         identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
         nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
-        popularSearches: undefined,
+        popularSearches: 'initial', // It is already registered by the `popularSearchesXModule` import itself
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
         recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
         relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself

packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts

@@ -40,15 +40,15 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
 
     await wrapper.setProps({ values: { warehouse: 5678 } });
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 5678 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
   });