feat: bump packages versions and migrate to defineComponent

package.json

@@ -34,7 +34,7 @@
     "@empathyco/x-adapter": "^8.1.0-alpha.0",
     "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
     "@empathyco/x-archetype-utils": "^1.1.0-alpha.2",
-    "@empathyco/x-components": "^5.0.0-alpha.52",
+    "@empathyco/x-components": "^5.0.0-alpha.80",
     "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
     "@empathyco/x-types": "^10.1.0-alpha.3",
     "@empathyco/x-utils": "^1.0.3-alpha.1",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "~5.17.0",
     "@empathyco/eslint-plugin-x": "^2.0.0-alpha.27",
-    "@empathyco/x-tailwindcss": "^1.0.0-alpha.31",
+    "@empathyco/x-tailwindcss": "^1.2.0-alpha.5",
     "@empathyco/x-translations": "^1.1.0-alpha.33",
     "@rollup/plugin-commonjs": "~25.0.7",
     "@rollup/plugin-json": "~6.1.0",

src/App.vue

@@ -14,120 +14,141 @@
     SnippetCallbacks,
     SnippetConfig,
     UrlParams,
-    XOn,
-    XProvide
+    useXBus,
+    XEvent
   } from '@empathyco/x-components';
   import { ExperienceControls } from '@empathyco/x-components/experience-controls';
   import { Tagging } from '@empathyco/x-components/tagging';
   import { QueryPreviewInfo } from '@empathyco/x-components/queries-preview';
   import { UrlHandler } from '@empathyco/x-components/url';
   import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';
   import { InternalSearchRequest, InternalSearchResponse } from '@empathyco/x-components/search';
-  import { Component, Inject, Provide, Vue, Watch } from 'vue-property-decorator';
+  import {
+    computed,
+    ComputedRef,
+    defineComponent,
+    getCurrentInstance,
+    inject,
+    onBeforeUnmount,
+    onMounted,
+    provide,
+    ref,
+    watch
+  } from 'vue';
   import { useDevice } from './composables/use-device.composable';
   import currencies from './i18n/currencies';
   import './tailwind/index.css';
 
-  @Component({
+  export default defineComponent({
     components: {
       SnippetCallbacks,
       SnippetConfigExtraParams,
       Tagging,
       UrlHandler,
       ExperienceControls,
       MainModal: () => import('./components/custom-main-modal.vue').then(m => m.default)
-    }
-  })
-  export default class App extends Vue {
-    protected isOpen = false;
-
-    @XOn(['UserOpenXProgrammatically', 'UserClickedOpenX'])
-    open(): void {
-      this.isOpen = true;
-      window.wysiwyg?.open();
-    }
+    },
+    setup() {
+      const xBus = useXBus();
+      const $x = getCurrentInstance()!.proxy.$root;
+      const device = useDevice();
+      const snippetConfig = inject<SnippetConfig>('snippetConfig')!;
+      const isOpen = ref(false);
 
-    @XOn(['UserClickedCloseX'])
-    close(): void {
-      window.wysiwyg?.close();
-    }
+      const openXEvents = ['UserOpenXProgrammatically', 'UserClickedOpenX'];
 
-    @XOn(['UserAcceptedAQuery'])
-    async goToLoginWysiwyg(query: string): Promise<void> {
-      if (/^::\s*login/.test(query)) {
-        await window.wysiwyg?.goToLogin();
-      }
-    }
+      const open = (): void => {
+        isOpen.value = true;
+        window.wysiwyg?.open();
+      };
 
-    @XOn(['SearchRequestChanged'])
-    onSearchRequestChanged(payload: InternalSearchRequest | null): void {
-      window.wysiwyg?.setContext({ query: payload?.query, spellcheckedQuery: undefined });
-    }
+      openXEvents.forEach(event => xBus.on(event as XEvent, false).subscribe(open));
 
-    @XOn(['SearchResponseChanged'])
-    onSearchResponseChanged(payload: InternalSearchResponse): void {
-      if (payload.spellcheck) {
-        window.wysiwyg?.setContext({ spellcheckedQuery: payload.spellcheck });
-      }
-    }
+      const close = (): void => {
+        window.wysiwyg?.close();
+      };
+
+      xBus.on('UserClickedCloseX', false).subscribe(close);
 
-    @XOn(['ParamsLoadedFromUrl'])
-    async requestAuthWysiwyg(payload: UrlParams): Promise<void> {
-      try {
-        if (window.wysiwyg) {
-          await window.wysiwyg?.requestAuth();
-          window.InterfaceX?.search();
-          window.wysiwyg?.setContext({ query: payload.query });
+      xBus.on('UserAcceptedAQuery', false).subscribe(async (query): Promise<void> => {
+        if (/^::\s*login/.test(query)) {
+          await window.wysiwyg?.goToLogin();
         }
-      } catch (_) {
-        // No error handling
-      }
-    }
+      });
 
-    @Inject('snippetConfig')
-    protected snippetConfig!: SnippetConfig;
-    protected device = useDevice();
+      xBus
+        .on('SearchRequestChanged', false)
+        .subscribe((payload: InternalSearchRequest | null): void => {
+          window.wysiwyg?.setContext({ query: payload?.query, spellcheckedQuery: undefined });
+        });
 
-    protected get documentDirection(): string {
-      return (
-        document.documentElement.dir ||
-        document.body.dir ||
-        (this.snippetConfig.documentDirection ?? 'ltr')
+      xBus.on('SearchResponseChanged', false).subscribe((payload: InternalSearchResponse): void => {
+        if (payload.spellcheck) {
+          window.wysiwyg?.setContext({ spellcheckedQuery: payload.spellcheck });
+        }
+      });
+
+      xBus.on('ParamsLoadedFromUrl', false).subscribe(async (payload: UrlParams): Promise<void> => {
+        try {
+          if (window.wysiwyg) {
+            await window.wysiwyg?.requestAuth();
+            window.InterfaceX?.search();
+            window.wysiwyg?.setContext({ query: payload.query });
+          }
+        } catch (_) {
+          // No error handling
+        }
+      });
+
+      const documentDirection = computed(() => {
+        return (
+          document.documentElement.dir ||
+          document.body.dir ||
+          (snippetConfig.documentDirection ?? 'ltr')
+        );
+      });
+
+      const currencyFormat = computed(() => currencies[snippetConfig.currency!]);
+      provide<string>('currencyFormat', currencyFormat.value);
+
+      const queriesPreviewInfo = computed(() => snippetConfig.queriesPreview ?? []);
+      provide<ComputedRef<QueryPreviewInfo[]> | undefined>(
+        'queriesPreviewInfo',
+        queriesPreviewInfo
       );
-    }
 
-    @Provide('currencyFormat')
-    public get currencyFormat(): string {
-      return currencies[this.snippetConfig.currency!];
-    }
-
-    @XProvide('queriesPreviewInfo')
-    public get queriesPreviewInfo(): QueryPreviewInfo[] | undefined {
-      return this.snippetConfig.queriesPreview ?? [];
-    }
+      watch(
+        () => snippetConfig.uiLang as string,
+        uiLang => {
+          $x.$setLocale(uiLang);
+        }
+      );
 
-    @Watch('snippetConfig.uiLang')
-    syncLang(uiLang: string): void {
-      this.$setLocale(uiLang);
-    }
+      watch(
+        () => device.deviceName,
+        deviceName => {
+          $x.$setLocaleDevice(deviceName.value);
+        }
+      );
 
-    @Watch('device.deviceName')
-    syncDevice(deviceName: string): void {
-      this.$setLocaleDevice(deviceName);
-    }
+      const reloadSearch = (): void => {
+        xBus.emit('ReloadSearchRequested');
+      };
 
-    reloadSearch(): void {
-      this.$x.emit('ReloadSearchRequested');
-    }
+      onMounted(() => {
+        document.addEventListener('wysiwyg:reloadSearch', () => reloadSearch());
+      });
 
-    mounted(): void {
-      document.addEventListener('wysiwyg:reloadSearch', () => this.reloadSearch());
-    }
+      onBeforeUnmount(() => {
+        document.removeEventListener('wysiwyg:reloadSearch', () => reloadSearch());
+      });
 
-    beforeDestroy(): void {
-      document.removeEventListener('wysiwyg:reloadSearch', () => this.reloadSearch());
+      return {
+        isOpen,
+        documentDirection
+      };
     }
-  }
+  });
 </script>
 
 <style scoped>

src/components/custom-header-toggle-panel.vue

@@ -14,22 +14,26 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component } from 'vue-property-decorator';
   import {
     BaseHeaderTogglePanel,
     animateScale,
     ChevronDownIcon,
     ChevronUpIcon
   } from '@empathyco/x-components';
+  import { defineComponent } from 'vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       BaseHeaderTogglePanel,
       ChevronDownIcon,
       ChevronUpIcon
+    },
+    setup() {
+      const animation = animateScale();
+
+      return {
+        animation
+      };
     }
-  })
-  export default class CustomHeaderTogglePanel extends Vue {
-    public animation = animateScale();
-  }
+  });
 </script>