Merge branch 'main' into feature/EMP-3795-migrate-main-scroll-compone…

…nt-x-provide

.github/workflows/prepare-release.yml

@@ -31,7 +31,7 @@ jobs:
         run: pnpm run prepare-release:stable
 
       - name: create Pull Request
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
         with:
           token: ${{ github.token }}
           commit-message: "chore(release): prepare stable release"

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.2](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.2) (2024-05-01)
+
+
+### Testing
+
+* add Sort components to Vue 3 migration test (#1454) ([7ccffb0](https://github.com/empathyco/x/commit/7ccffb084cdf6521c57977eca4d19d93f6586a2d))
+
+
+
+## [1.0.0-alpha.1](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.1) (2024-05-01)
+
+
+### Code Refactoring
+
+* **base-event-button:** migrate base-event-button component to Composition API (#1457) ([39a7a8e](https://github.com/empathyco/x/commit/39a7a8ed4767ae78d447e6ddca530c41f9f681dc))
+
+
+
 ## [1.0.0-alpha.0](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.0) (2024-04-24)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
@@ -15,7 +15,8 @@
     "@vue/compat": "^3.4.22",
     "@vueuse/core": "~10.7.1",
     "vue": "^3.4.22",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

packages/_vue3-migration-test/src/App.vue

@@ -7,7 +7,12 @@
       </RouterLink>
     </nav>
     <main>
-      <RouterView />
+      <RouterView v-slot="{ Component }">
+        <!-- Components are mounted only once with keep-alive -->
+        <KeepAlive>
+          <component :is="Component" />
+        </KeepAlive>
+      </RouterView>
     </main>
   </div>
 </template>

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

@@ -1,3 +1,4 @@
 export * from './animations';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export * from './scroll';
+export { default as TestBaseEventButton } from './test-base-event-button.vue';

packages/_vue3-migration-test/src/components/test-base-event-button.vue

@@ -0,0 +1,27 @@
+<template>
+  <BaseEventButton @focusin="onFocusin" :events="events" data-id="$attrs working on Vue3!">
+    <span>Emit X event!</span>
+  </BaseEventButton>
+</template>
+
+<script setup lang="ts">
+  import BaseEventButton from '../../../x-components/src/components/base-event-button.vue';
+  import { use$x } from '../../../x-components/src/composables/use-$x';
+  import { XEvent, XEventsTypes } from '../../../x-components/src/wiring/events.types';
+
+  // eslint-disable-next-line max-len
+  // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin: https://github.com/empathyco/x/blob/main/packages/x-components/src/plugins/x-plugin.mixin.ts#L55
+  const _$x = use$x();
+
+  const events: Partial<XEventsTypes> = {
+    UserClickedASort: 'price asc',
+    UserClickedPDPAddToCart: 'A012'
+  };
+
+  Object.entries(events).forEach(([event]) =>
+    // eslint-disable-next-line no-console
+    _$x.on(event as XEvent, true).subscribe(args => console.log('BaseEventButton emission:', args))
+  );
+  // eslint-disable-next-line no-console
+  const onFocusin = (): void => console.log('$listeners working on Vue3!');
+</script>

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

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

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

@@ -1,17 +1,34 @@
+import { 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 App from './App.vue';
 import router from './router';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
 if (VUE_COMPAT_MODE === 2) {
   configureCompat({
+    /**
+     * Remove $attrs and $listeners when Vue 3 and `INSTANCE_LISTENERS: false`.
+     * Both $attrs and $listeners are inherited (automatically forwarded) to the root component
+     * by default:
+     * https://vuejs.org/guide/components/attrs#nested-component-inheritance
+     * https://github.com/vuejs/core/issues/4566#issuecomment-917997056.
+     */
     INSTANCE_LISTENERS: 'suppress-warning',
     RENDER_FUNCTION: false,
-    COMPONENT_V_MODEL: false
+    COMPONENT_V_MODEL: false,
+    WATCH_ARRAY: false
   });
 }
 
+const adapter = {} as XComponentsAdapter;
+
+const store = createStore({});
+
 createApp(App as Component)
   .use(router)
+  .use(store)
+  .use(xPlugin, { adapter, store })
   .mount('#app');

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

@@ -1,5 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { TestAnimateWidth, TestBaseDropdown, TestFade, TestScroll } from './';
+import {
+  TestAnimateWidth,
+  TestBaseDropdown,
+  TestBaseEventButton,
+  TestFade,
+  TestSortDropdown,
+  TestSortList,
+  TestSortPickerList,
+  TestScroll
+} from './';
 
 const routes = [
   {
@@ -21,6 +30,26 @@ const routes = [
     path: '/base-dropdown',
     name: 'BaseDropdown',
     component: TestBaseDropdown
+  },
+  {
+    path: '/base-event-button',
+    name: 'BaseEventButton',
+    component: TestBaseEventButton
+  },
+  {
+    path: '/sort-dropdown',
+    name: 'SortDropdown',
+    component: TestSortDropdown
+  },
+  {
+    path: '/sort-list',
+    name: 'SortList',
+    component: TestSortList
+  },
+  {
+    path: '/sort-picker-list',
+    name: 'SortPickerList',
+    component: TestSortPickerList
   }
 ];
 

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

@@ -0,0 +1 @@
+export * from './search';

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

@@ -0,0 +1,3 @@
+export { default as TestSortDropdown } from './test-sort-dropdown.vue';
+export { default as TestSortList } from './test-sort-list.vue';
+export { default as TestSortPickerList } from './test-sort-picker-list.vue';

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue

@@ -0,0 +1,17 @@
+<template>
+  <SortDropdown :items="sortValues">
+    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
+    <template #item="{ item, isHighlighted, isSelected }">
+      <span v-if="isSelected">✅</span>
+      <span v-if="isHighlighted">🟢</span>
+      {{ item }}
+    </template>
+  </SortDropdown>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortDropdown from '../../../../../x-components/src/x-modules/search/components/sort-dropdown.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue

@@ -0,0 +1,14 @@
+<template>
+  <SortList :items="sortValues">
+    <template #default="{ item, isSelected }">
+      <span v-if="isSelected">✅</span>
+      {{ item }}
+    </template>
+  </SortList>
+</template>
+
+<script setup lang="ts">
+  import SortList from '../../../../../x-components/src/x-modules/search/components/sort-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue

@@ -0,0 +1,15 @@
+<template>
+  <SortPickerList :items="sortValues">
+    <template #default="{ item, isSelected }">
+      <span v-if="isSelected">✅</span>
+      {{ item }}
+    </template>
+  </SortPickerList>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortPickerList from '../../../../../x-components/src/x-modules/search/components/sort-picker-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

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

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

packages/_vue3-migration-test/vite.config.ts

@@ -28,7 +28,8 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         '@vueuse/core': resolve(__dirname, 'node_modules/@vueuse/core'),
-        vue: resolve(__dirname, 'node_modules/@vue/compat')
+        vue: resolve(__dirname, 'node_modules/@vue/compat'),
+        vuex: resolve(__dirname, 'node_modules/vuex')
       }
     },
     optimizeDeps: {

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.5](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-01)
+
+
+### Testing
+
+* add Sort components to Vue 3 migration test (#1454) ([7ccffb0](https://github.com/empathyco/x/commit/7ccffb084cdf6521c57977eca4d19d93f6586a2d))
+
+
+
+## [5.0.0-alpha.4](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-01)
+
+
+### Bug Fixes
+
+* **query-preview-list:** enable inherit attrs (#1458) ([1adbfe0](https://github.com/empathyco/x/commit/1adbfe04665e289aa0c325daced40f257669fe2d))
+
+
+
+## [5.0.0-alpha.3](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-01)
+
+
+### Code Refactoring
+
+* **base-event-button:** migrate base-event-button component to Composition API (#1457) ([39a7a8e](https://github.com/empathyco/x/commit/39a7a8ed4767ae78d447e6ddca530c41f9f681dc))
+
+
+
+## [5.0.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-01)
+
+
+### Documentation
+
+* fix typo (#1455) ([44eae35](https://github.com/empathyco/x/commit/44eae359b33f9642eb9af02701fd6a3295a2deb9))
+
+
+
+## [5.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-04-29)
+
+
+### Code Refactoring
+
+* **query-preview:** migrate query preview component x provide (#1452) ([a60c62a](https://github.com/empathyco/x/commit/a60c62a35d7ba3f13e6561583a0af9f5a46c61b2))
+
+
+
 ## [5.0.0-alpha.0](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-04-24)
 
 

packages/x-components/package.json

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