feat: migrate identifier results components on x module

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

@@ -45,7 +45,7 @@ describe('testing plugin alias', () => {
         search: ''
       },
       status: {
-        identifierResults: undefined,
+        identifierResults: 'initial', // It is already registered by the `relatedTagsXModule` import itself
         nextQueries: undefined,
         popularSearches: undefined,
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself

packages/x-components/src/x-modules/identifier-results/components/identifier-result.vue

@@ -9,64 +9,71 @@
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { Getter, State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, defineComponent, PropType } from 'vue';
   import { identifierResultsXModule } from '../x-module';
+  import { useGetter, useState } from '../../../composables';
 
   /**
    * This component renders an identifier result value and highlights its matching part with the
    * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(identifierResultsXModule)]
-  })
-  export default class IdentifierResult extends Vue {
-    /**
-     * (Required) The {@link @empathyco/x-types#Result} information.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected result!: Result;
+  export default defineComponent({
+    name: 'IdentifierResult',
+    xModule: identifierResultsXModule.name,
+    props: {
+      /**
+       * (Required) The {@link @empathyco/x-types#Result} information.
+       *
+       * @public
+       */
+      result: {
+        type: Object as PropType<Result>,
+        required: true
+      }
+    },
+    setup: function (props) {
+      /**
+       * Query from the module state.
+       *
+       * @public
+       */
+      const { query } = useState('identifierResults', ['query']);
 
-    /**
-     * Query from the module state.
-     *
-     * @public
-     */
-    @State('identifierResults', 'query')
-    public query!: string;
+      /**
+       * The RegExp with the current query from the state adding the separatorChars after each
+       * matching character.
+       *
+       * @public
+       */
+      const { identifierHighlightRegexp } = useGetter('identifierResults', [
+        'identifierHighlightRegexp'
+      ]);
 
-    /**
-     * The RegExp with the current query from the state adding the separatorChars after each
-     * matching character.
-     *
-     * @public
-     */
-    @Getter('identifierResults', 'identifierHighlightRegexp')
-    public identifierHighlightRegexp!: RegExp;
+      /**
+       * Highlights the matching part of the identifier result with the query from the state.
+       *
+       * @returns String - The identifier result s query with the matching part inside a `<span>` tag.
+       * @public
+       */
+      const highlightedQueryHTML = computed((): string => {
+        const identifierValue = props.result.identifier?.value ?? '';
+        if (identifierValue && identifierHighlightRegexp.value) {
+          return identifierValue.replace(
+            identifierHighlightRegexp.value,
+            '<span class="x-identifier-result__matching-part">$1</span>'
+          );
+        }
+        return identifierValue;
+      });
 
-    /**
-     * Highlights the matching part of the identifier result with the query from the state.
-     *
-     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.
-     * @public
-     */
-    protected get highlightedQueryHTML(): string {
-      const identifierValue = this.result.identifier?.value ?? '';
-      if (identifierValue && this.identifierHighlightRegexp) {
-        return identifierValue.replace(
-          this.identifierHighlightRegexp,
-          '<span class="x-identifier-result__matching-part">$1</span>'
-        );
-      }
-      return identifierValue;
+      return {
+        query,
+        highlightedQueryHTML
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue

@@ -17,13 +17,12 @@
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
-  import { Component, Prop, Provide } from 'vue-property-decorator';
-  import Vue from 'vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, defineComponent, provide } from 'vue';
   import { PropsWithType } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { identifierResultsXModule } from '../x-module';
+  import { AnimationProp } from '../../../types';
+  import { useState } from '../../../composables';
 
   /**
    * Paints the list of identifier results stored in the state. Each identifier result should be
@@ -32,55 +31,60 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(identifierResultsXModule)]
-  })
-  export default class IdentifierResults extends Vue {
-    /**
-     * Animation component that will be used to animate the identifier results.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue;
-
-    /**
-     * Number of identifier results to render.
-     *
-     * @public
-     */
-    @Prop()
-    protected maxItemsToRender?: number;
-
-    /**
-     * The module's list of identifier results.
-     *
-     * @public
-     */
-    @State('identifierResults', 'identifierResults')
-    public identifierResults!: Result[];
-
-    /**
-     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
-     *
-     * @public
-     */
-    @Provide()
-    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [
-      'UserClickedAIdentifierResult'
-    ];
-
-    /**
-     * Slices the identifier results from the state.
-     *
-     * @returns - The list of identifier results sliced by the number of items to render.
-     *
-     * @internal
-     */
-    public get identifierResultsToRender(): Result[] {
-      return this.identifierResults.slice(0, this.maxItemsToRender);
+  export default defineComponent({
+    name: 'IdentifierResults',
+    xModule: identifierResultsXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the identifier results.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * Number of identifier results to render.
+       *
+       * @public
+       */
+      maxItemsToRender: Number
+    },
+    setup: function (props) {
+      /**
+       * The module's list of identifier results.
+       *
+       * @public
+       */
+      const { identifierResults } = useState('identifierResults', ['identifierResults']);
+
+      /**
+       * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
+       *
+       * @public
+       */
+      provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [
+        'UserClickedAIdentifierResult'
+      ]);
+
+      /**
+       * Slices the identifier results from the state.
+       *
+       * @returns - The list of identifier results sliced by the number of items to render.
+       *
+       * @internal
+       */
+      const identifierResultsToRender = computed(() =>
+        (identifierResults.value as Result[]).slice(0, props.maxItemsToRender)
+      );
+
+      return {
+        identifierResults,
+        identifierResultsToRender
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>

packages/x-components/src/x-modules/identifier-results/x-module.ts

@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { identifierResultsEmitters } from './store/emitters';
 import { identifierResultsXStoreModule } from './store/module';
 import { IdentifierResultsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const identifierResultsXModule: IdentifierResultsXModule = {
   storeEmitters: identifierResultsEmitters,
   wiring: identifierResultsWiring
 };
+
+XPlugin.registerXModule(identifierResultsXModule);