feat: migrate next-queries module to composition API

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">

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

@@ -21,10 +21,8 @@
 
 <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 BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { nextQueriesXModule } from '../x-module';
 
@@ -35,50 +33,58 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'NextQuery',
+    xModule: nextQueriesXModule.name,
     components: { BaseSuggestion },
-    mixins: [xComponentMixin(nextQueriesXModule)]
-  })
-  export default class NextQuery extends Vue {
-    /**
-     * The suggestion to render and use in the default slot.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: NextQueryModel;
-
-    /**
-     * Indicates if the curated next query should be highlighted.
-     *
-     * @public
-     */
-    @Prop({ default: false, type: Boolean })
-    protected highlightCurated!: boolean;
-
-    /**
-     * Events list which are going to be emitted when a next query is selected.
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get events(): Partial<XEventsTypes> {
+    props: {
+      /**
+       * The suggestion to render and use in the default slot.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<NextQueryModel>,
+        required: true
+      },
+      /**
+       * Indicates if the curated next query should be highlighted.
+       *
+       * @public
+       */
+      highlightCurated: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup(props) {
+      /**
+       * Events list which are going to be emitted when a next query is selected.
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserSelectedANextQuery: props.suggestion })
+      );
+
+      /**
+       * Checks if the next query is curated and if it should be highlighted.
+       *
+       * @returns True if the next query is curated and should be highlighted.
+       *
+       * @internal
+       */
+      const shouldHighlightCurated = computed(
+        () => props.highlightCurated && (props.suggestion.isCurated ?? false)
+      );
+
       return {
-        UserSelectedANextQuery: this.suggestion
+        events,
+        shouldHighlightCurated
       };
     }
-
-    /**
-     * Checks if the next query is curated and if it should be highlighted.
-     *
-     * @returns True if the next query is curated and should be highlighted.
-     *
-     * @internal
-     */
-    protected get shouldHighlightCurated(): boolean {
-      return this.highlightCurated && (this.suggestion.isCurated ?? false);
-    }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/next-queries/x-module.ts

@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/x-plugin';
 import { nextQueriesEmitters } from './store/emitters';
 import { nextQueriesXStoreModule } from './store/module';
 import { NextQueriesXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const nextQueriesXModule: NextQueriesXModule = {
   storeEmitters: nextQueriesEmitters,
   wiring: nextQueriesWiring
 };
+
+XPlugin.registerXModule(nextQueriesXModule);