feat(renderless-extra-param): migrate to composition API

EMP-4432

packages/_vue3-migration-test/src/components/extra-params/test-renderless-extra-param.vue

@@ -0,0 +1,16 @@
+<template>
+  <SnippetConfigExtraParams :values="{ store: 'portugal' }" />
+  <RenderlessExtraParam name="store" #default="{ value, updateValue }">
+    <BaseDropdown @update:modelValue="updateValue" :modelValue="value" :items="items" />
+  </RenderlessExtraParam>
+  {{ params }}
+</template>
+<script setup lang="ts">
+  import RenderlessExtraParam from '../../../../x-components/src/x-modules/extra-params/components/renderless-extra-param.vue';
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import BaseDropdown from '../../../../x-components/src/components/base-dropdown.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+
+  const items = ['spain', 'portugal', 'italy'];
+  const { params } = useState('extraParams', ['params']);
+</script>

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

@@ -17,3 +17,4 @@ export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
 export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
 export { default as TestSearch } from './test-search.vue';
 export { default as TestTagging } from './tagging/test-tagging.vue';
+export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';

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

@@ -45,7 +45,8 @@ import {
   TestRedirection,
   TestExtraParams,
   TestSearch,
-  TestTagging
+  TestTagging,
+  TestRenderlessExtraParam
 } from './';
 
 const routes = [
@@ -278,6 +279,11 @@ const routes = [
     path: '/tagging',
     name: 'Tagging',
     component: TestTagging
+  },
+  {
+    path: '/renderless-extra-param',
+    name: 'RenderlessExtraParam',
+    component: TestRenderlessExtraParam
   }
 ];
 

packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts

@@ -82,7 +82,7 @@ describe('testing RenderlessExtraParam component', () => {
     expect(userChangedExtraParamsCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>(
       {
         eventPayload: { warehouse: 45678 },
-        metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+        metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
       }
     );
 

packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue

@@ -5,63 +5,63 @@
 </template>
 
 <script lang="ts">
-  import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { NoElement, State, xComponentMixin } from '../../../components';
+  import { computed, defineComponent } from 'vue';
+  import { NoElement } from '../../../components/no-element';
   import { extraParamsXModule } from '../x-module';
+  import { useState, useXBus } from '../../../composables';
 
   /**
    * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
    * is called.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(extraParamsXModule)],
+  export default defineComponent({
+    name: 'RenderlessExtraParam',
+    xModule: extraParamsXModule.name,
     components: {
       NoElement
-    }
-  })
-  export default class RenderlessExtraParam extends Vue {
-    /**
-     * The extra param's name.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public name!: string;
+    },
+    props: {
+      name: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      const xBus = useXBus();
+      /**
+       * A dictionary with the extra params in the store state.
+       *
+       * @public
+       */
+      const stateParams = useState('extraParams', ['params']).params;
 
-    /**
-     * A dictionary with the extra params in the store state.
-     *
-     * @public
-     */
-    @State('extraParams', 'params')
-    public stateParams!: Dictionary<unknown>;
+      /**
+       * It returns the value of the extra param from the store.
+       *
+       * @returns - The value from the store.
+       *
+       * @internal
+       */
+      const value = computed(() => {
+        return stateParams.value[props.name];
+      });
 
-    /**
-     * It returns the value of the extra param from the store.
-     *
-     * @returns - The value from the store.
-     *
-     * @internal
-     */
-    protected get value(): unknown {
-      return this.stateParams[this.name];
-    }
+      /**
+       * It sets the new value to the store.
+       *
+       * @param newValue - The new value of the extra param.
+       *
+       * @internal
+       */
+      function updateValue(newValue: unknown) {
+        xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
+      }
 
-    /**
-     * It sets the new value to the store.
-     *
-     * @param newValue - The new value of the extra param.
-     *
-     * @internal
-     */
-    protected updateValue(newValue: unknown): void {
-      this.$x.emit('UserChangedExtraParams', { [this.name]: newValue });
+      return { value, updateValue };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">