chore: update branch

packages/_vue3-migration-test/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.
 
+## [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)
 
 

packages/_vue3-migration-test/package.json

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

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

@@ -3,3 +3,4 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
 export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
+export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';

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

@@ -0,0 +1,11 @@
+<template>
+  <FadeAndSlide tag="ul">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </FadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+</script>

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,15 +1,16 @@
 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 {
@@ -40,8 +41,7 @@ if (VUE_COMPAT_MODE === 2) {
     INSTANCE_LISTENERS: 'suppress-warning',
     INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
     RENDER_FUNCTION: false,
-    COMPONENT_V_MODEL: false,
-    WATCH_ARRAY: false
+    COMPONENT_V_MODEL: false
   });
 }
 
@@ -78,28 +78,37 @@ 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,
-      popularSearches: popularSearchesXModule,
-      experienceControls: experienceControlsXModule
-    }
-  })
   .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,
+    experienceControls: experienceControlsXModule
+  }
+}).init();

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

@@ -11,6 +11,7 @@ import {
   TestElementsList,
   TestFacets,
   TestFade,
+  TestFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
@@ -40,6 +41,7 @@ import {
   TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
+  TestExtraParams,
   TestExperienceControls
 } from './';
 
@@ -74,6 +76,11 @@ const routes = [
     name: 'BaseModal',
     component: TestBaseModal
   },
+  {
+    path: '/fade-and-slide',
+    name: 'FadeAndSlide',
+    component: TestFadeAndSlide
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
@@ -248,6 +255,11 @@ const routes = [
     path: '/experience-controls',
     name: 'ExperienceControls',
     component: TestExperienceControls
+  },
+  {
+    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/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.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)
 
 

packages/x-components/package.json

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

packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts → packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts

@@ -1,46 +1,41 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop, Provide } from 'vue-property-decorator';
-import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
-import DisableAnimationMixin from '../disable-animation.mixin';
+import { mount } from '@vue/test-utils';
+import { defineComponent, provide, ref } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+import { useDisableAnimation } from '../use-disable-animation';
 
-@Component
-class Provider extends Vue {
-  @Prop()
-  @Provide(DISABLE_ANIMATIONS_KEY as string)
-  public disableAnimation!: boolean;
-
-  render(h: CreateElement): VNode {
+const Provider = defineComponent({
+  props: {
+    disableAnimation: Boolean
+  },
+  setup(props) {
+    provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
+  },
+  render(h) {
     return this.$slots.default?.[0] ?? h();
   }
-}
+});
 
 /**
  * Animation component.
  */
-const Animation: ComponentOptions<Vue> = {
-  mixins: [DisableAnimationMixin],
+const Animation = defineComponent({
+  setup() {
+    return useDisableAnimation('x-animation');
+  },
   template: `
     <transition-group :name="name">
      <p>Animation</p>
     </transition-group>
-  `,
-  data() {
-    return {
-      animationName: 'x-animation'
-    };
-  }
-};
+  `
+});
 
 /**
  * Function that returns an Animation wrapper.
  *
  * @param disableAnimation - Flag to disable the animation.
  * @returns Animation wrapper.
  */
-function renderDisableAnimation({
-  disableAnimation = true
-}: DisableAnimationOptions = {}): DisableAnimationAPI {
+function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
   const wrapper = mount({
     template: `
         <Provider :disableAnimation="disableAnimation">
@@ -78,8 +73,3 @@ interface DisableAnimationOptions {
   /** Flag to disable the animation. */
   disableAnimation?: boolean;
 }
-
-interface DisableAnimationAPI {
-  /** The wrapper of the mounted component. */
-  wrapper: Wrapper<Vue>;
-}

packages/x-components/src/components/animations/collapse-height.vue

@@ -1,11 +1,12 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-height-"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) to add content to the transition -->

packages/x-components/src/components/animations/collapse-width.vue

@@ -1,11 +1,12 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-width-"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) to add content to the transition -->

packages/x-components/src/components/animations/cross-fade.vue

@@ -1,5 +1,6 @@
 <template>
-  <transition v-on="$listeners" name="x-cross-fade-" v-bind="$attrs" :appear="appear">
+  <!-- eslint-disable-next-line vue/attributes-order -->
+  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>