@adobe-commerce/event-bus 1.0.0-alpha1

package/.eslintrc.js

@@ -0,0 +1,5 @@
+const baseConfig = require('@adobe/elsie/config/eslint');
+
+module.exports = {
+  ...baseConfig,
+};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@adobe-commerce/event-bus",
+  "version": "1.0.0-alpha1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "An event bus for storefront packages to communicate in the browser",
+  "engines": {
+    "node": ">=16"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "lint": "eslint",
+    "test": "jest",
+    "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
+    "build": " "
+  },
+  "dependencies": {
+    "@adobe/event-bus": "file:../../packages/event-bus"
+  }
+}

package/src/events-catalog.ts

@@ -0,0 +1,17 @@
+export interface Events {
+  authenticated: boolean;
+  locale: string;
+  'cart/data': Cart | null;
+}
+
+// Cart Domain
+export interface Cart {
+  id: string;
+  totalQuantity: number;
+  items: Array<{
+    uid: string;
+    quantity: number;
+    sku: string;
+    name: string;
+  }>;
+}

package/src/index.ts

@@ -0,0 +1,133 @@
+import { Events } from './events-catalog';
+
+export * from './events-catalog';
+
+const hash = Date.now().toString(36).substring(2);
+
+/**
+ * The `events` class provides static methods for event handling.
+ * It allows subscribing to events, emitting events, and enabling or disabling event logging.
+ *
+ * @class
+ * @extends {Events}
+ *
+ * @property {Function} on - Subscribes to an event.
+ * @property {Function} emit - Emits an event.
+ * @property {Function} enableLogger - Enables or disables event logging.
+ * @property {Function} lastPayload - Returns the last payload of the event.
+ */
+export class events {
+  static _identifier = hash;
+
+  static _logger: BroadcastChannel | null = null;
+
+  static _lastEvent: { [key: string]: { payload: any } } = {};
+
+  /**
+   * Returns the last payload of the event.
+   * @param event – The event to get the last payload from.
+   * @returns – The last payload of the event.
+   */
+  static lastPayload(event: string) {
+    return this._lastEvent[event]?.payload;
+  }
+
+  /**
+   * Subscribes to an event.
+   * @param event - The event to subscribe to.
+   * @param handler - The event handler.
+   * @param options - Optional configuration for the event handler.
+   */
+  static on<K extends keyof Events>(
+    event: K,
+    handler: (payload: Events[K]) => void,
+    options?: { eager?: boolean }
+  ) {
+    if (typeof BroadcastChannel === 'undefined') {
+      return;
+    }
+
+    const subscriber = new BroadcastChannel('ElsieSDK/EventBus');
+
+    if (options?.eager) {
+      const lastEvent = this._lastEvent[event];
+
+      if (lastEvent) {
+        handler(lastEvent.payload);
+      }
+    }
+
+    subscriber.addEventListener('message', ({ data }) => {
+      // ignore events from other instances (only if identifier is set)
+      if (this._identifier && this._identifier !== data.identifier) return;
+
+      if (data.event === event) {
+        handler(data.payload);
+      }
+    });
+
+    // NOTE: disabled as it causes loading issues with "bfcache"
+    // unsubscribe if leaving page
+    // window.addEventListener('beforeunload', () => {
+    //   subscriber.close();
+    // });
+
+    return {
+      off() {
+        subscriber.close();
+      },
+    };
+  }
+  /**
+   * Emits an event.
+   * @param event - The event to emit.
+   * @param payload - The event payload.
+   */
+
+  static emit<K extends keyof Events>(event: K, payload: Events[K]) {
+    if (typeof BroadcastChannel === 'undefined') {
+      return;
+    }
+
+    const publisher = new BroadcastChannel('ElsieSDK/EventBus');
+
+    publisher.postMessage({ event, identifier: this._identifier, payload });
+
+    this._lastEvent[event] = {
+      payload,
+    };
+
+    publisher.close();
+  }
+  /**
+   * Enables or disables event logging.
+   * @param enabled - Whether to enable or disable event logging.
+   */
+  static enableLogger(enabled: boolean) {
+    if (typeof BroadcastChannel === 'undefined') {
+      return;
+    }
+
+    // reset logger
+    this._logger?.close();
+    this._logger = null;
+
+    if (enabled === false) return;
+
+    // create new logger
+    this._logger = new BroadcastChannel('ElsieSDK/EventBus');
+
+    this._logger.addEventListener('message', ({ data }) => {
+      if (this._identifier && this._identifier !== data.identifier) return;
+      console.group(`📡 Event (${data.identifier}) ➡ ${data.event}`);
+      console.log(data.payload);
+      console.groupEnd();
+    });
+
+    // NOTE: disabled as it causes loading issues with "bfcache"
+    // unsubscribe if leaving page
+    // window.addEventListener('beforeunload', () => {
+    //   this._logger?.close();
+    // });
+  }
+}