@player-ui/pubsub-plugin 0.4.0-next.7 → 0.4.0-next.9

package/src/handler.ts

@@ -0,0 +1,41 @@
+import type { Player, PlayerPlugin, InProgressState } from '@player-ui/player';
+import { getPubSubPlugin } from './utils';
+
+export type PubSubHandler<T extends unknown[]> = (
+  context: InProgressState,
+  ...args: T
+) => void;
+
+export type SubscriptionMap = Map<string, PubSubHandler<any>>;
+
+/**
+ * Plugin to easily add subscribers to the PubSubPlugin
+ */
+export class PubSubHandlerPlugin implements PlayerPlugin {
+  name = 'pubsub-handler';
+  private subscriptions: SubscriptionMap;
+
+  constructor(subscriptions: SubscriptionMap) {
+    this.subscriptions = subscriptions;
+  }
+
+  apply(player: Player) {
+    const pubsub = getPubSubPlugin(player);
+
+    player.hooks.onStart.tap(this.name, () => {
+      this.subscriptions.forEach((handler, key) => {
+        pubsub.subscribe(key, (_, ...args) => {
+          const state = player.getState();
+
+          if (state.status === 'in-progress') {
+            return handler(state, ...args);
+          }
+
+          player.logger.info(
+            `[PubSubHandlerPlugin] subscriber for ${key} was called when player was not in-progress`
+          );
+        });
+      });
+    });
+  }
+}

package/src/index.ts

@@ -1,2 +1,3 @@
-export * from './pubsub';
+export * from './plugin';
 export * from './symbols';
+export * from './handler';

package/src/plugin.ts

@@ -0,0 +1,102 @@
+import type {
+  Player,
+  PlayerPlugin,
+  ExpressionContext,
+} from '@player-ui/player';
+import type { SubscribeHandler } from './pubsub';
+import { pubsub } from './pubsub';
+import { PubSubPluginSymbol } from './symbols';
+
+export interface PubSubConfig {
+  /** A custom expression name to register  */
+  expressionName: string;
+}
+
+/**
+ * The PubSubPlugin is a great way to enable your FRF content to publish events back to your app
+ * It injects a publish() function into the expression language, and will forward all events back to any subscribers.
+ *
+ * Published/Subscribed events support a hierarchy:
+ * - publish('foo', 'data') -- will trigger any listeners for 'foo'
+ * - publish('foo.bar', 'data') -- will trigger any listeners for 'foo' or 'foo.bar'
+ *
+ */
+export class PubSubPlugin implements PlayerPlugin {
+  name = 'pub-sub';
+
+  static Symbol = PubSubPluginSymbol;
+  public readonly symbol = PubSubPlugin.Symbol;
+
+  private expressionName: string;
+
+  constructor(config?: PubSubConfig) {
+    this.expressionName = config?.expressionName ?? 'publish';
+  }
+
+  apply(player: Player) {
+    player.hooks.expressionEvaluator.tap(this.name, (expEvaluator) => {
+      const existingExpression = expEvaluator.operators.expressions.get(
+        this.expressionName
+      );
+
+      if (existingExpression) {
+        player.logger.warn(
+          `[PubSubPlugin] expression ${this.expressionName} is already registered.`
+        );
+      } else {
+        expEvaluator.addExpressionFunction(
+          this.expressionName,
+          (_ctx: ExpressionContext, event: unknown, ...args: unknown[]) => {
+            if (typeof event === 'string') {
+              this.publish(event, ...args);
+            }
+          }
+        );
+      }
+    });
+
+    player.hooks.onEnd.tap(this.name, () => {
+      this.clear();
+    });
+  }
+
+  /**
+   * A way of publishing an event, notifying any listeners
+   *
+   * @param event - The name of the event to publish. Can take sub-topics like: foo.bar
+   * @param data - Any additional data to attach to the event
+   */
+  publish(event: string, ...args: unknown[]) {
+    pubsub.publish(event, ...args);
+  }
+
+  /**
+   * Subscribe to an event with the given name. The handler will get called for any published event
+   *
+   * @param event - The name of the event to subscribe to
+   * @param handler - A function to be called when the event is triggered
+   * @returns A token to be used to unsubscribe from the event
+   */
+  subscribe<T extends string, A extends unknown[]>(
+    event: T,
+    handler: SubscribeHandler<T, A>
+  ) {
+    return pubsub.subscribe(event, handler);
+  }
+
+  /**
+   * Remove any subscriptions using the given token
+   *
+   * @param token - A token from a `subscribe` call
+   */
+  unsubscribe(token: string) {
+    pubsub.unsubscribe(token);
+  }
+
+  /**
+   * Remove all subscriptions
+   */
+  clear() {
+    pubsub.clear();
+  }
+}

package/src/pubsub.ts

@@ -1,77 +1,173 @@
-import pubsub from 'pubsub-js';
-import type {
-  Player,
-  PlayerPlugin,
-  ExpressionContext,
-} from '@player-ui/player';
-import { PubSubPluginSymbol } from './symbols';
-
-export interface PubSubConfig {
-  /** A custom expression name to register  */
-  expressionName: string;
-}
+/**
+ * Based off the pubsub-js library and rewritten to match the same used APIs but modified so that
+ * multiple arguments could be passed into the publish and subscription handlers.
+ */
+
+export type SubscribeHandler<T extends string, A extends unknown[]> = (
+  type: T,
+  ...args: A
+) => void;
+
+export type PubSubUUID = `uuid_${number}`;
 
 /**
- * The PubSubPlugin is a great way to enable your Content content to publish events back to your app
- * It injects a publish() function into the expression language, and will forward all events back to any subscribers.
- *
- * Published/Subscribed events support a hierarchy:
- * - publish('foo', 'data') -- will trigger any listeners for 'foo'
- * - publish('foo.bar', 'data') -- will trigger any listeners for 'foo' or 'foo.bar'
- *
+ * Split a string into an array of event layers
  */
-export class PubSubPlugin implements PlayerPlugin {
-  name = 'pub-sub';
+function splitEvent(event: string) {
+  return event.split('.').reduce<string[]>((prev, curr, index) => {
+    if (index === 0) {
+      return [curr];
+    }
 
-  static Symbol = PubSubPluginSymbol;
-  public readonly symbol = PubSubPlugin.Symbol;
+    return [...prev, `${prev[index - 1]}.${curr}`];
+  }, []);
+}
 
-  private expressionName: string;
+let count = 1;
 
-  constructor(config?: PubSubConfig) {
-    this.expressionName = config?.expressionName ?? 'publish';
+/**
+ * Tiny pubsub maker
+ */
+class TinyPubSub {
+  private events: Map<string, Map<PubSubUUID, SubscribeHandler<any, any>>>;
+  private tokens: Map<PubSubUUID, string>;
+
+  constructor() {
+    this.events = new Map();
+    this.tokens = new Map();
   }
 
-  apply(player: Player) {
-    player.hooks.expressionEvaluator.tap(this.name, (expEvaluator) => {
-      expEvaluator.addExpressionFunction(
-        this.expressionName,
-        (_ctx: ExpressionContext, event: unknown, data: unknown) => {
-          if (typeof event === 'string') {
-            this.publish(event, data);
-          }
-        }
-      );
-    });
+  /**
+   * Publish an event with any number of additional arguments
+   */
+  publish(event: string, ...args: unknown[]) {
+    if (typeof event !== 'string') {
+      return;
+    }
+
+    if (event.includes('.')) {
+      const eventKeys = splitEvent(event);
+
+      eventKeys.forEach((key) => {
+        this.deliver(key, event, ...args);
+      });
+    } else {
+      this.deliver(event, event, ...args);
+    }
+
+    this.deliver('*', event, ...args);
   }
 
   /**
-   * A way of publishing an event, notifying any listeners
+   * Subscribe to an event
+   *
+   * Events are also heirarchical when separated by a period. Given the following:
    *
-   * @param event - The name of the event to publish. Can take sub-topics like: foo.bar
-   * @param data - Any additional data to attach to the event
+   * publish('a.b.c', 'one', 'two', 'three)
+   *
+   * The subscribe event will be called when the event is passed as 'a', 'a.b', or 'a.b.c'.
+   *
+   * @example
+   * // subscribes to the top level 'a' publish
+   * subscribe('a', (event, ...args) => console.log(event, ...args))
    */
-  publish(event: string, data: unknown) {
-    pubsub.publishSync(event, data);
+  subscribe(event: string, handler: SubscribeHandler<any, any>) {
+    const uuid = `uuid_${++count}`;
+
+    if (typeof event === 'string') {
+      if (!this.events.has(event)) {
+        this.events.set(event, new Map());
+      }
+
+      const handlers = this.events.get(event);
+      handlers!.set(uuid as PubSubUUID, handler);
+      this.tokens.set(uuid as PubSubUUID, event);
+    }
+
+    return uuid;
   }
 
   /**
-   * Subscribe to an event with the given name. The handler will get called for any published event
+   * Unsubscribes to a specific subscription given it's symbol or an entire
+   * event when passed as a string.
    *
-   * @param event - The name of the event to subscribe to
-   * @param handler - A function to be called when the event is triggered
-   * @returns A token to be used to unsubscribe from the event
+   * When existing subscriptions exist for heirarchical events such as 'a.b.c',
+   * when passing an event 'a' to unsubscribe, all subscriptions for 'a', 'a.b',
+   * & 'a.b.c' will be unsubscribed as well.
    */
-  subscribe(event: string, handler: (e: string, data: unknown) => void) {
-    return pubsub.subscribe(event, handler);
+  unsubscribe(value: string | symbol) {
+    if (typeof value === 'string' && value.startsWith('uuid')) {
+      const path = this.tokens.get(value as PubSubUUID);
+
+      if (typeof path === 'undefined') {
+        return;
+      }
+
+      const innerPath = this.events.get(path);
+      innerPath?.delete(value as PubSubUUID);
+      this.tokens.delete(value as PubSubUUID);
+      return;
+    }
+
+    if (typeof value === 'string') {
+      for (const key of this.events.keys()) {
+        if (key.indexOf(value) === 0) {
+          const tokens = this.events.get(key);
+
+          if (tokens && tokens.size) {
+            // eslint-disable-next-line max-depth
+            for (const token of tokens.keys()) {
+              this.tokens.delete(token);
+            }
+          }
+
+          this.events.delete(key);
+        }
+      }
+    }
   }
 
   /**
-   * Remove any subscriptions using the given token
-   *
-   * @param token - A token from a `subscribe` call
+   * Get the number of subscriptions for a specific event, or when left blank
+   * will return the overall number of subscriptions for the entire pubsub.
    */
-  unsubscribe(token: string) {
-    pubsub.unsubscribe(token);
+  count(event?: string) {
+    let counter = 0;
+
+    if (typeof event === 'undefined') {
+      for (const handlers of this.events.values()) {
+        counter += handlers.size;
+      }
+
+      return counter;
+    }
+
+    const handlers = this.events.get(event);
+
+    if (handlers?.size) {
+      return handlers.size;
+    }
+
+    return counter;
+  }
+
+  /**
+   * Deletes all existing subscriptions
+   */
+  clear() {
+    this.events.clear();
+    this.tokens.clear();
+  }
+
+  private deliver(path: string, event: string, ...args: unknown[]) {
+    const handlers = this.events.get(path);
+
+    if (handlers && handlers.size) {
+      for (const handler of handlers.values()) {
+        handler(event, ...args);
+      }
+    }
   }
 }
+
+export const pubsub = new TinyPubSub();

package/src/utils.ts

@@ -0,0 +1,17 @@
+import type { Player } from '@player-ui/player';
+import { PubSubPlugin } from './plugin';
+import { PubSubPluginSymbol } from './symbols';
+
+/**
+ * Returns the existing PubSubPlugin or creates and registers a new plugin
+ */
+export function getPubSubPlugin(player: Player) {
+  const existing = player.findPlugin<PubSubPlugin>(PubSubPluginSymbol);
+  const plugin = existing || new PubSubPlugin();
+
+  if (!existing) {
+    player.registerPlugin(plugin);
+  }
+
+  return plugin;
+}