Feat: Migrate query suggestions module to composition api

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

@@ -2,6 +2,7 @@ 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 { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import App from './App.vue';
 import router from './router';
 import { facetsXModule, nextQueriesXModule, scrollXModule, searchXModule } from './';
@@ -26,7 +27,13 @@ if (VUE_COMPAT_MODE === 2) {
   });
 }
 
-const adapter = {} as XComponentsAdapter;
+const adapter = {
+  querySuggestions: request => {
+    return new Promise(resolve => {
+      resolve({ suggestions: getQuerySuggestionsStub(request.query, 5) });
+    });
+  }
+} as XComponentsAdapter;
 
 const store = createStore({});
 

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

@@ -26,7 +26,8 @@ import {
   TestHighlight,
   TestBaseResultImages,
   TestBasePanel,
-  TestBaseKeyboardNavigation
+  TestBaseKeyboardNavigation,
+  TestQuerySuggestions
 } from './';
 
 const routes = [
@@ -164,6 +165,11 @@ const routes = [
     path: '/base-keyboard-navigation',
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
+  },
+  {
+    path: '/query-suggestions',
+    name: 'QuerySuggestions',
+    component: TestQuerySuggestions
   }
 ];
 

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

@@ -5,3 +5,4 @@ export * from './search';
 export * from './search-box';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
+export * from './query-suggestions';

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

@@ -0,0 +1 @@
+export { default as TestQuerySuggestions } from './test-query-suggestions.vue';

packages/_vue3-migration-test/src/x-modules/query-suggestions/components/test-query-suggestions.vue

@@ -0,0 +1,9 @@
+<template>
+  <SearchInput />
+  <QuerySuggestions />
+</template>
+
+<script setup>
+  import QuerySuggestions from '../../../../../x-components/src/x-modules/query-suggestions/components/query-suggestions.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>

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

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

packages/x-components/src/x-modules/query-suggestions/components/query-suggestion.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseSuggestion
-    v-bind="{ query, suggestion, suggestionSelectedEvents: event }"
+    v-bind="{ query, suggestion, suggestionSelectedEvents }"
     class="x-query-suggestion"
     data-test="query-suggestion"
     feature="query_suggestion"
@@ -17,13 +17,11 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
   import { Suggestion } from '@empathyco/x-types';
-  import { Component, Prop, Vue } from 'vue-property-decorator';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { XEventsTypes } from '../../../wiring/events.types';
   import { querySuggestionsXModule } from '../x-module';
+  import { useGetter, useRegisterXModule } from '../../../composables';
 
   /**
    * This component renders a suggestion for a query. A query suggestion is a recommended query
@@ -32,37 +30,47 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'QuerySuggestion',
     components: { BaseSuggestion },
-    mixins: [xComponentMixin(querySuggestionsXModule)]
-  })
-  export default class QuerySuggestion extends Vue {
-    /**
-     * The normalized query of the query-suggestions module.
-     *
-     * @internal
-     */
-    @Getter('querySuggestions', 'normalizedQuery')
-    public query!: string;
-
-    /**
-     * The suggestion to render.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: Suggestion;
-
-    /**
-     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as
-     * payload when selecting the query suggestion.
-     *
-     * @internal
-     */
-    protected event: Partial<XEventsTypes> = {
-      UserSelectedAQuerySuggestion: this.suggestion
-    };
-  }
+    xModule: querySuggestionsXModule.name,
+    props: {
+      /**
+       * The suggestion to render.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<Suggestion>,
+        required: true
+      }
+    },
+    setup: function (props) {
+      useRegisterXModule(querySuggestionsXModule);
+
+      /**
+       * The normalized query of the query-suggestions module.
+       *
+       * @internal
+       */
+      const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery;
+
+      /**
+       * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as
+       * payload when selecting the query suggestion.
+       *
+       * @internal
+       */
+      const suggestionSelectedEvents = {
+        UserSelectedAQuerySuggestion: props.suggestion
+      };
+
+      return {
+        query,
+        suggestionSelectedEvents
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseSuggestions
     v-bind="$attrs"
-    :suggestions="suggestions"
+    :suggestions="querySuggestions"
     class="x-query-suggestions"
     data-test="query-suggestions"
   >
@@ -32,14 +32,10 @@
 </template>
 
 <script lang="ts">
-  import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import Highlight from '../../../components/highlight.vue';
+  import { defineComponent } 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 { querySuggestionsXModule } from '../x-module';
+  import { useGetter, useRegisterXModule } from '../../../composables';
   import QuerySuggestion from './query-suggestion.vue';
 
   /**
@@ -49,20 +45,24 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'QuerySuggestions',
+    components: { BaseSuggestions, QuerySuggestion },
     inheritAttrs: false,
-    components: { Highlight, BaseSuggestions, QuerySuggestion },
-    mixins: [xComponentMixin(querySuggestionsXModule)]
-  })
-  export default class QuerySuggestions extends Vue {
-    /**
-     * The module's list of suggestions.
-     *
-     * @internal
-     */
-    @Getter('querySuggestions', 'querySuggestions')
-    public suggestions!: Suggestion[];
-  }
+    xModule: querySuggestionsXModule.name,
+    setup: function () {
+      useRegisterXModule(querySuggestionsXModule);
+
+      /**
+       * The module's list of suggestions.
+       *
+       * @internal
+       */
+      const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions']);
+
+      return { querySuggestions };
+    }
+  });
 </script>
 
 <docs lang="mdx">