feat: migrating global-x-bus (apart from $listeners) and adding defau…

…lt value to location in useXBus

packages/x-components/src/components/global-x-bus.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { reduce } from '@empathyco/x-utils';
-  import { Component } from 'vue-property-decorator';
   import { Observable, Subscription } from 'rxjs';
   import { EventPayload, SubjectPayload } from '@empathyco/x-bus';
-  import { XEventListeners } from '../x-installer/api/api.types';
+  import { defineComponent, getCurrentInstance, onBeforeUnmount } from 'vue';
   import { WireMetadata } from '../wiring/wiring.types';
   import { XEventsTypes } from '../wiring/events.types';
+  import { useXBus } from '../composables/use-x-bus';
+  import { XEventListeners } from '../x-installer/api/api.types';
   import { NoElement } from './no-element';
 
   /**
@@ -14,48 +15,50 @@
    *
    * @public
    */
-  @Component
-  export default class GlobalXBus extends NoElement {
-    /**
-     * Object with the {@link XEvent} listeners.
-     *
-     * @internal
-     */
-    public $listeners!: XEventListeners;
+  export default defineComponent({
+    name: 'GlobalXBus',
+    extends: NoElement,
 
-    created(): void {
-      this.handleXEventSubscription();
-    }
+    setup() {
+      /**
+       * Object with the {@link XEvent} listeners.
+       *
+       * @internal
+       */
+      //TODO: When we get to vue 3 remove $listeners and use $attrs instead
+      const listeners: XEventListeners = getCurrentInstance()?.proxy?.$listeners ?? {};
 
-    /**
-     * Handles a subscription to all the events provided in the listeners with the function that
-     * will execute the callback. Also unsubscribes on beforeDestroy.
-     *
-     * @internal
-     */
-    protected handleXEventSubscription(): void {
-      const subscription = reduce(
-        this.$listeners,
-        (subscription, eventName, callback) => {
-          subscription.add(
-            (
-              this.$x.on(eventName, true) as unknown as Observable<
-                SubjectPayload<EventPayload<XEventsTypes, typeof eventName>, WireMetadata>
-              >
-            ).subscribe(({ eventPayload, metadata }) => {
-              callback(eventPayload as never, metadata);
-            })
-          );
-          return subscription;
-        },
-        new Subscription()
-      );
+      /**
+       * Handles a subscription to all the events provided in the listeners with the function that
+       * will execute the callback. Also unsubscribes on beforeDestroy.
+       *
+       * @internal
+       */
+      const handleXEventSubscription = (): void => {
+        const subscription = reduce(
+          listeners,
+          (subscription, eventName, callback) => {
+            subscription.add(
+              (
+                useXBus().on(eventName, true) as unknown as Observable<
+                  SubjectPayload<EventPayload<XEventsTypes, typeof eventName>, WireMetadata>
+                >
+              ).subscribe(({ eventPayload, metadata }: any) => {
+                callback(eventPayload as never, metadata);
+              })
+            );
+            return subscription;
+          },
+          new Subscription()
+        );
 
-      this.$on('hook:beforeDestroy', () => {
-        subscription.unsubscribe();
-      });
+        onBeforeUnmount(() => {
+          subscription.unsubscribe();
+        });
+      };
+      handleXEventSubscription();
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/composables/use-x-bus.ts

@@ -14,7 +14,7 @@ import { PropsWithType } from '../utils/index';
  * @returns An object with the `on` and `emit` functions.
  */
 export function useXBus(): UseXBusAPI {
-  const location = inject<FeatureLocation>('location');
+  const location = inject<FeatureLocation>('location', undefined as any);
 
   const currentComponent: PrivateExtendedVueComponent | undefined | null =
     getCurrentInstance()?.proxy;