@player-ui/async-node-plugin 0.8.0--canary.307.9645 → 0.8.0-next.1

package/src/index.ts

@@ -1,107 +1,185 @@
-import { NodeType, getNodeID } from '@player-ui/player';
+import { NodeType, getNodeID } from "@player-ui/player";
 import type {
   Player,
   PlayerPlugin,
   Node,
   ParseObjectOptions,
-} from '@player-ui/player';
-import { AsyncParallelBailHook } from 'tapable-ts';
-import queueMicrotask from 'queue-microtask';
-import { omit } from 'timm';
+  ViewInstance,
+  Parser,
+  ViewPlugin,
+  Resolver,
+} from "@player-ui/player";
+import { AsyncParallelBailHook } from "tapable-ts";
+import queueMicrotask from "queue-microtask";
+import { omit } from "timm";
 
-export * from './types';
+export * from "./types";
+
+export interface AsyncNodePluginOptions {
+  /** A set of plugins to load  */
+  plugins?: AsyncNodeViewPlugin[];
+}
+
+export interface AsyncNodeViewPlugin extends ViewPlugin {
+  /** Use this to tap into the async node plugin hooks */
+  applyPlugin: (asyncNodePlugin: AsyncNodePlugin) => void;
+
+  asyncNode: AsyncParallelBailHook<[Node.Async], any>;
+}
 
 /**
  * Async node plugin used to resolve async nodes in the content
  * If an async node is present, allow users to provide a replacement node to be rendered when ready
  */
 export class AsyncNodePlugin implements PlayerPlugin {
+  private plugins: AsyncNodeViewPlugin[] | undefined;
+
+  constructor(options: AsyncNodePluginOptions) {
+    if (options?.plugins) {
+      this.plugins = options.plugins;
+      options.plugins.forEach((plugin) => {
+        plugin.applyPlugin(this);
+      });
+    }
+  }
+
   public readonly hooks = {
-    onAsyncNode: new AsyncParallelBailHook<[Node.Node], Node.Node>(),
+    onAsyncNode: new AsyncParallelBailHook<[Node.Async], any>(),
   };
 
-  name = 'AsyncNode';
+  name = "AsyncNode";
+
+  apply(player: Player) {
+    player.hooks.viewController.tap(this.name, (viewController) => {
+      viewController.hooks.view.tap(this.name, (view) => {
+        this.plugins?.forEach((plugin) => {
+          plugin.apply(view);
+        });
+      });
+    });
+  }
+}
+
+export class AsyncNodePluginPlugin implements AsyncNodeViewPlugin {
+  public asyncNode = new AsyncParallelBailHook<[Node.Async], any>();
+  private basePlugin: AsyncNodePlugin | undefined;
+
+  name = "AsyncNode";
+
+  private resolvedMapping = new Map<string, any>();
 
-  private resolvedMapping = new Map<string, Node.Node>();
+  private currentView: ViewInstance | undefined;
 
   private isAsync(node: Node.Node | null): node is Node.Async {
     return node?.type === NodeType.Async;
   }
 
-  apply(player: Player) {
-    player.hooks.viewController.tap(this.name, (viewController) => {
-      viewController.hooks.view.tap(this.name, (view) => {
-        view.hooks.parser.tap(this.name, (parser) => {
-          parser.hooks.determineNodeType.tap(this.name, (obj) => {
-            if (Object.prototype.hasOwnProperty.call(obj, 'async')) {
-              return NodeType.Async;
-            }
-          });
-          parser.hooks.parseNode.tap(
-            this.name,
-            (
-              obj: any,
-              nodeType: Node.ChildrenTypes,
-              options: ParseObjectOptions,
-              determinedNodeType: null | NodeType
-            ) => {
-              if (determinedNodeType === NodeType.Async) {
-                const parsedAsync = parser.parseObject(
-                  omit(obj, 'async'),
-                  nodeType,
-                  options
-                );
-                const parsedNodeId = getNodeID(parsedAsync);
-                if (parsedAsync !== null && parsedNodeId) {
-                  return parser.createASTNode(
-                    {
-                      id: parsedNodeId,
-                      type: NodeType.Async,
-                      value: parsedAsync,
-                    },
-                    obj
-                  );
-                }
-
-                return null;
-              }
-            }
+  applyParser(parser: Parser) {
+    parser.hooks.determineNodeType.tap(this.name, (obj) => {
+      if (Object.prototype.hasOwnProperty.call(obj, "async")) {
+        return NodeType.Async;
+      }
+    });
+    parser.hooks.parseNode.tap(
+      this.name,
+      (
+        obj: any,
+        nodeType: Node.ChildrenTypes,
+        options: ParseObjectOptions,
+        determinedNodeType: null | NodeType,
+      ) => {
+        if (determinedNodeType === NodeType.Async) {
+          const parsedAsync = parser.parseObject(
+            omit(obj, "async"),
+            nodeType,
+            options,
           );
+          const parsedNodeId = getNodeID(parsedAsync);
+          if (parsedAsync !== null && parsedNodeId) {
+            return parser.createASTNode(
+              {
+                id: parsedNodeId,
+                type: NodeType.Async,
+                value: parsedAsync,
+              },
+              obj,
+            );
+          }
+
+          return null;
+        }
+      },
+    );
+  }
+
+  applyResolverHooks(resolver: Resolver) {
+    resolver.hooks.beforeResolve.tap(this.name, (node, options) => {
+      let resolvedNode;
+      if (this.isAsync(node)) {
+        const mappedValue = this.resolvedMapping.get(node.id);
+        if (mappedValue) {
+          resolvedNode = mappedValue;
+        }
+      } else {
+        resolvedNode = null;
+      }
+
+      const newNode = resolvedNode || node;
+      if (!resolvedNode && node?.type === NodeType.Async) {
+        queueMicrotask(async () => {
+          const result = await this.basePlugin?.hooks.onAsyncNode.call(node);
+          const parsedNode =
+            options.parseNode && result ? options.parseNode(result) : undefined;
+
+          if (parsedNode) {
+            this.resolvedMapping.set(node.id, parsedNode);
+            this.currentView?.updateAsync();
+          }
         });
 
-        view.hooks.resolver.tap(this.name, (resolver) => {
-          resolver.hooks.beforeResolve.tap(this.name, (node, options) => {
-            let resolvedNode;
-            if (this.isAsync(node)) {
-              const mappedValue = this.resolvedMapping.get(node.id);
-              if (mappedValue) {
-                resolvedNode = mappedValue;
-              }
-            } else {
-              resolvedNode = null;
-            }
-
-            const newNode = resolvedNode || node;
-            if (!resolvedNode && node?.type === NodeType.Async) {
-              queueMicrotask(async () => {
-                const result = await this.hooks.onAsyncNode.call(node);
-                const parsedNode = options.parseNode
-                  ? options.parseNode(result)
-                  : undefined;
-
-                if (parsedNode) {
-                  this.resolvedMapping.set(node.id, parsedNode);
-                  viewController.currentView?.updateAsync();
-                }
-              });
-
-              return node;
-            }
-
-            return newNode;
+        return node;
+      }
+
+      return newNode;
+    });
+  }
+
+  apply(view: ViewInstance): void {
+    view.hooks.parser.tap("template", this.applyParser.bind(this));
+    view.hooks.resolver.tap("template", (resolver) => {
+      resolver.hooks.beforeResolve.tap(this.name, (node, options) => {
+        let resolvedNode;
+        if (this.isAsync(node)) {
+          const mappedValue = this.resolvedMapping.get(node.id);
+          if (mappedValue) {
+            resolvedNode = mappedValue;
+          }
+        } else {
+          resolvedNode = null;
+        }
+
+        const newNode = resolvedNode || node;
+        if (!resolvedNode && node?.type === NodeType.Async) {
+          queueMicrotask(async () => {
+            const result = await this.basePlugin?.hooks.onAsyncNode.call(node);
+            const parsedNode =
+              options.parseNode && result
+                ? options.parseNode(result)
+                : undefined;
+
+            this.resolvedMapping.set(node.id, parsedNode ? parsedNode : node);
+            view.updateAsync();
           });
-        });
+
+          return node;
+        }
+
+        return newNode;
       });
     });
   }
+
+  applyPlugin(asyncNodePlugin: AsyncNodePlugin): void {
+    this.basePlugin = asyncNodePlugin;
+  }
 }

package/src/types.ts

@@ -1,6 +1,6 @@
-import type { Node } from '@player-ui/player';
+import type { Node } from "@player-ui/player";
 
 export type AsyncNodeHandler = (
   node: Node.Node,
-  update: (object: any) => void
+  update: (object: any) => void,
 ) => void;

package/types/index.d.ts

@@ -0,0 +1,38 @@
+import type { Player, PlayerPlugin, Node, ViewInstance, Parser, ViewPlugin, Resolver } from "@player-ui/player";
+import { AsyncParallelBailHook } from "tapable-ts";
+export * from "./types";
+export interface AsyncNodePluginOptions {
+    /** A set of plugins to load  */
+    plugins?: AsyncNodeViewPlugin[];
+}
+export interface AsyncNodeViewPlugin extends ViewPlugin {
+    /** Use this to tap into the async node plugin hooks */
+    applyPlugin: (asyncNodePlugin: AsyncNodePlugin) => void;
+    asyncNode: AsyncParallelBailHook<[Node.Async], any>;
+}
+/**
+ * Async node plugin used to resolve async nodes in the content
+ * If an async node is present, allow users to provide a replacement node to be rendered when ready
+ */
+export declare class AsyncNodePlugin implements PlayerPlugin {
+    private plugins;
+    constructor(options: AsyncNodePluginOptions);
+    readonly hooks: {
+        onAsyncNode: AsyncParallelBailHook<[Node.Async], any, Record<string, any>>;
+    };
+    name: string;
+    apply(player: Player): void;
+}
+export declare class AsyncNodePluginPlugin implements AsyncNodeViewPlugin {
+    asyncNode: AsyncParallelBailHook<[Node.Async], any, Record<string, any>>;
+    private basePlugin;
+    name: string;
+    private resolvedMapping;
+    private currentView;
+    private isAsync;
+    applyParser(parser: Parser): void;
+    applyResolverHooks(resolver: Resolver): void;
+    apply(view: ViewInstance): void;
+    applyPlugin(asyncNodePlugin: AsyncNodePlugin): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,3 @@
+import type { Node } from "@player-ui/player";
+export type AsyncNodeHandler = (node: Node.Node, update: (object: any) => void) => void;
+//# sourceMappingURL=types.d.ts.map