feat: migrate experience controls (#1530)

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

@@ -73,7 +73,25 @@ const adapter = {
   identifierResults: () =>
     new Promise(resolve =>
       resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
-    )
+    ),
+  experienceControls: () => {
+    return new Promise(resolve =>
+      resolve({
+        controls: {
+          semanticQueries: {
+            numberOfCarousels: 2,
+            resultsPerCarousels: 2
+          }
+        },
+        events: {
+          SemanticQueriesConfigProvided: {
+            maxItemsToRequest: 'controls.semanticQueries.numberOfCarousels',
+            resultsPerCarousel: 'controls.semanticQueries.resultsPerCarousels'
+          }
+        }
+      })
+    );
+  }
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});

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

@@ -45,6 +45,7 @@ import {
   TestRedirection,
   TestExtraParams,
   TestSearch,
+  TestExperienceControls,
   TestTagging,
   TestRenderlessExtraParam
 } from './';
@@ -275,6 +276,11 @@ const routes = [
     name: 'SnippetConfigExtraparams',
     component: TestExtraParams
   },
+  {
+    path: '/experience-controls',
+    name: 'ExperienceControls',
+    component: TestExperienceControls
+  },
   {
     path: '/tagging',
     name: 'Tagging',

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

@@ -0,0 +1 @@
+export { default as TestExperienceControls } from './test-experience-controls.vue';

packages/_vue3-migration-test/src/x-modules/experience-controls/components/test-experience-controls.vue

@@ -0,0 +1,27 @@
+<template>
+  <span style="display: block">
+    Controls:
+    <b>{{ controls }}</b>
+  </span>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  <ExperienceControls />
+  SemanticQueriesConfigProvided with {{ message }}
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import ExperienceControls from '../../../../../x-components/src/x-modules/experience-controls/components/experience-controls.vue';
+  import { useState } from '../../../../../x-components/src/composables/use-state';
+  import { useXBus } from '../../../../../x-components/src/composables/use-x-bus';
+  import SnippetConfigExtraParams from '../../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { XEvent } from '../../../../../x-components/src/wiring/events.types';
+
+  const xBus = useXBus();
+  const message = ref('');
+
+  xBus
+    .on('SemanticQueriesConfigProvided' as XEvent, true)
+    .subscribe(event => (message.value = event.eventPayload as string));
+
+  const { controls } = useState('experienceControls', ['controls']);
+</script>

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

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

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

@@ -12,3 +12,4 @@ export * from './semantic-queries';
 export * from './recommendations';
 export * from './popular-searches';
 export * from './identifier-results';
+export * from './experience-controls';

packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue

@@ -1,36 +1,38 @@
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { XOn } from '../../../components/decorators/bus.decorators';
+  import { defineComponent } from 'vue';
   import { XEvent, XEventsTypes } from '../../../wiring/events.types';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { experienceControlsXModule } from '../x-module';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * This component subscribes to changes in the ExperienceControls module to fire the events that
    * propagate the configuration.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(experienceControlsXModule)]
-  })
-  export default class ExperienceControls extends Vue {
-    /**.
-     * Iterates the list of XEvents received and emits them
-     *
-     * @param events - events to be emitted
-     */
-    @XOn('ExperienceControlsEventsChanged')
-    onEventsChanged(events: Partial<XEventsTypes>): void {
-      Object.entries(events).forEach(([eventName, eventPayload]) => {
-        this.$x.emit(eventName as XEvent, eventPayload);
-      });
-    }
+  export default defineComponent({
+    name: 'ExperienceControls',
+    xModule: experienceControlsXModule.name,
+    setup() {
+      const xBus = useXBus();
+
+      /**
+       * Iterates the list of XEvents received and emits them.
+       *
+       * @param events - Events to be emitted.
+       */
+      function onEventsChanged(events: Partial<XEventsTypes>): void {
+        Object.entries(events).forEach(([eventName, eventPayload]) => {
+          xBus.emit(eventName as XEvent, eventPayload);
+        });
+      }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      xBus.on('ExperienceControlsEventsChanged', false).subscribe(event => onEventsChanged(event));
+
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/experience-controls/x-module.ts

@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { experienceControlsEmitters } from './store/emitters';
 import { experienceControlsXStoreModule } from './store/module';
 import { ExperienceControlsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const experienceControlsXModule: ExperienceControlsXModule = {
   storeEmitters: experienceControlsEmitters,
   wiring: experienceControlsWiring
 };
+
+XPlugin.registerXModule(experienceControlsXModule);