feat: migrate next queries module to composition api

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

@@ -4,6 +4,12 @@ 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 {
+  getBannersStub,
+  getNextQueriesStub,
+  getPromotedsStub,
+  getResultsStub
+} from '../../x-components/src/__stubs__/index';
 import App from './App.vue';
 import router from './router';
 import {
@@ -44,6 +50,31 @@ const adapter = {
   querySuggestions: (request: QuerySuggestionsRequest) =>
     new Promise(resolve => {
       resolve({ suggestions: getQuerySuggestionsStub(request.query, 5) });
+    }),
+  nextQueries: () =>
+    new Promise(resolve => {
+      resolve({
+        nextQueries: [
+          ...getNextQueriesStub(),
+          {
+            facets: [],
+            isCurated: false,
+            modelName: 'NextQuery',
+            query: 'next_query_preview',
+            results: getResultsStub(10),
+            totalResults: 10
+          }
+        ]
+      });
+    }),
+  search: () =>
+    new Promise(resolve => {
+      resolve({
+        results: getResultsStub(10),
+        totalResults: 50,
+        promoteds: getPromotedsStub(),
+        banners: getBannersStub()
+      });
     })
 } as unknown as XComponentsAdapter;
 

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

@@ -36,7 +36,8 @@ import {
   TestSpellcheck,
   TestQuerySuggestions,
   TestSemanticQueries,
-  TestRecommendations
+  TestRecommendations,
+  TestNextQueries
 } from './';
 
 const routes = [
@@ -224,6 +225,11 @@ const routes = [
     path: '/recommendations',
     name: 'Recommendations',
     component: TestRecommendations
+  },
+  {
+    path: '/next-queries',
+    name: 'NextQueries',
+    component: TestNextQueries
   }
 ];
 

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

@@ -0,0 +1 @@
+export { default as TestNextQueries } from './test-next-queries.vue';

packages/_vue3-migration-test/src/x-modules/next-queries/components/test-next-queries.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <SearchInput />
+
+    <NextQueryPreview :suggestion="nextQueries[3]">
+      <h1>Next query preview:</h1>
+      <NextQuery :suggestion="nextQueries[3]" data-test="next-query-preview-name">
+        <span>{{ nextQueries[3].query }}</span>
+      </NextQuery>
+    </NextQueryPreview>
+
+    <NextQueries :max-items-to-render="3">
+      <template #suggestion="{ suggestion }">
+        <NextQuery :suggestion="suggestion">
+          <span>{{ suggestion.query }}</span>
+        </NextQuery>
+      </template>
+    </NextQueries>
+  </div>
+</template>
+
+<script setup>
+  import NextQueryPreview from '../../../../../x-components/src/x-modules/next-queries/components/next-query-preview.vue';
+  import NextQuery from '../../../../../x-components/src/x-modules/next-queries/components/next-query.vue';
+  import NextQueries from '../../../../../x-components/src/x-modules/next-queries/components/next-queries.vue';
+  import { useState } from '../../../../../x-components/src/composables/use-state';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+
+  const { nextQueries } = useState('nextQueries', ['nextQueries']);
+</script>

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

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

packages/_vue3-migration-test/src/x-modules/next-queries/x-module.ts

@@ -1,13 +1,12 @@
-import { getNextQueriesStub } from '../../../../x-components/src/__stubs__/next-queries-stubs.factory';
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
 import { NextQueriesXModule } from '../../../../x-components/src/x-modules/next-queries';
 
 export const nextQueriesXModule = {
   storeModule: {
     state: {
-      query: 'dress',
-      nextQueries: getNextQueriesStub(),
-      status: 'success'
+      config: {
+        hideSessionQueries: false
+      }
     }
   }
 } as PrivateXModuleOptions<NextQueriesXModule>;

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

@@ -46,7 +46,7 @@ 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

packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue

@@ -29,10 +29,9 @@
     LIST_ITEMS_KEY,
     QUERY_KEY
   } from '../../../components/decorators/injection.consts';
-  import { AnimationProp } from '../../../types/index';
+  import { AnimationProp } from '../../../types/animation-prop';
   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';
 
   /**
@@ -103,8 +102,6 @@
       }
     },
     setup(props, { slots }) {
-      useRegisterXModule(nextQueriesXModule);
-
       const $x = use$x();
 
       /**

packages/x-components/src/x-modules/next-queries/components/next-queries.vue

@@ -36,12 +36,10 @@
 
 <script lang="ts">
   import { NextQuery as NextQueryModel } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { nextQueriesXModule } from '../x-module';
+  import { useGetter } from '../../../composables/use-getter';
   import NextQuery from './next-query.vue';
 
   /**
@@ -53,45 +51,49 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'NextQueries',
+    xModule: nextQueriesXModule.name,
+    components: {
+      NextQuery,
+      BaseSuggestions
+    },
     inheritAttrs: false,
-    components: { NextQuery, BaseSuggestions },
-    mixins: [xComponentMixin(nextQueriesXModule)]
-  })
-  export default class NextQueries extends Vue {
-    /**
-     * Flag to indicate if the curated next queries should be displayed different.
-     *
-     * @public
-     */
-    @Prop({ default: false, type: Boolean })
-    public highlightCurated!: boolean;
-
-    /**
-     * NextQueries list to be used instead of state NextQueries.
-     *
-     * @public
-     */
-    @Prop()
-    public suggestions?: NextQueryModel[];
-
-    /**
-     * The list of next queries from the state.
-     *
-     * @internal
-     */
-    @Getter('nextQueries', 'nextQueries')
-    public stateNextQueries!: NextQueryModel[];
-
-    /**.
-     * The list of next queries finally rendered
-     *
-     * @internal
-     */
-    protected get renderedNextQueries(): NextQueryModel[] {
-      return this.suggestions ?? this.stateNextQueries;
+    props: {
+      /**
+       * Flag to indicate if the curated next queries should be displayed different.
+       *
+       * @public
+       */
+      highlightCurated: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * NextQueries list to be used instead of state NextQueries.
+       *
+       * @public
+       */
+      suggestions: Array as PropType<NextQueryModel[]>
+    },
+    setup(props) {
+      /**
+       * The list of next queries from the state.
+       *
+       * @internal
+       */
+      const stateNextQueries = useGetter('nextQueries', ['nextQueries']).nextQueries;
+
+      /**.
+       * The list of next queries finally rendered
+       *
+       * @internal
+       */
+      const renderedNextQueries = computed(() => props.suggestions ?? stateNextQueries.value);
+
+      return { renderedNextQueries };
     }
-  }
+  });
 </script>
 
 <!--eslint-disable max-len -->

packages/x-components/src/x-modules/next-queries/components/next-query-preview.vue

@@ -30,13 +30,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, onMounted, PropType } from 'vue';
   import { NextQuery, PreviewResults } from '@empathyco/x-types';
-  import { Dictionary } from '@empathyco/x-utils';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { nextQueriesXModule } from '../x-module';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * Retrieves a preview of the results of a next query and exposes them in the default slot,
@@ -45,59 +43,59 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(nextQueriesXModule)]
-  })
-  export default class NextQueryPreview extends Vue {
-    /**
-     * The next query to retrieve the results preview.
-     *
-     * @public
-     */
-    @Prop({
-      required: true
-    })
-    protected suggestion!: NextQuery;
-
-    /**
-     * Number of suggestion results to be rendered.
-     *
-     * @public
-     */
-    @Prop()
-    protected maxItemsToRender?: number;
+  export default defineComponent({
+    name: 'NextQueryPreview',
+    xModule: nextQueriesXModule.name,
+    props: {
+      /**
+       * The next query to retrieve the results preview.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<NextQuery>,
+        required: true
+      },
+      /**
+       * Number of suggestion results to be rendered.
+       *
+       * @public
+       */
+      maxItemsToRender: Number
+    },
+    setup(props) {
+      const $x = use$x();
+      /**
+       * The results preview of the next queries mounted.
+       * It is a dictionary, indexed by the next query query.
+       */
+      const { resultsPreview } = useState('nextQueries', ['resultsPreview']);
 
-    /**
-     * The results preview of the next queries mounted.
-     * It is a dictionary, indexed by the next query query.
-     */
-    @State('nextQueries', 'resultsPreview')
-    public previewResults!: Dictionary<PreviewResults>;
+      /**
+       * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview
+       * of the next query.
+       */
+      onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query));
 
-    /**
-     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview
-     * of the next query.
-     */
-    mounted(): void {
-      this.$x.emit('NextQueryPreviewMountedHook', this.suggestion.query);
-    }
+      /**
+       * Gets from the state the results preview of the next query.
+       *
+       * @returns The results preview of the actual next query.
+       */
+      const suggestionResults = computed((): PreviewResults | undefined => {
+        const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults;
 
-    /**
-     * Gets from the state the results preview of the next query.
-     *
-     * @returns The results preview of the actual next query.
-     */
-    public get suggestionResults(): PreviewResults | undefined {
-      const previewResults = this.previewResults[this.suggestion.query];
+        return previewResults
+          ? {
+              ...previewResults,
+              items: previewResults.items.slice(0, props.maxItemsToRender)
+            }
+          : undefined;
+      });
 
-      return previewResults
-        ? {
-            ...previewResults,
-            items: previewResults.items.slice(0, this.maxItemsToRender)
-          }
-        : undefined;
+      return { suggestionResults };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">