@player-ui/async-node-plugin 0.7.4-next.4 → 0.7.5--canary.432.14776

package/src/index.test.ts

@@ -0,0 +1,453 @@
+import { expect, test } from "vitest";
+import { Node, InProgressState, ViewInstance } from "@player-ui/player";
+import { Player } from "@player-ui/player";
+import { waitFor } from "@testing-library/react";
+import { AsyncNodePlugin, AsyncNodePluginPlugin } from "./index";
+
+const basicFRFWithActions = {
+  id: "test-flow",
+  views: [
+    {
+      id: "my-view",
+      actions: [
+        {
+          asset: {
+            id: "action-0",
+            type: "action",
+            value: "{{foo.bar}}",
+          },
+        },
+        {
+          id: "nodeId",
+          async: "true",
+        },
+      ],
+    },
+  ],
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "my-view",
+        transitions: {},
+      },
+    },
+  },
+};
+
+const asyncNodeTest = async (resolvedValue: any) => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Async) => {
+    return new Promise((resolve) => {
+      deferredResolve = resolve; // Promise would be resolved only once
+    });
+  });
+
+  let updateNumber = 0;
+
+  const player = new Player({ plugins: [plugin] });
+
+  let viewInstance: ViewInstance | undefined;
+
+  player.hooks.viewController.tap("async-node-test", (vc) => {
+    vc.hooks.view.tap("async-node-test", (view) => {
+      viewInstance = view;
+      view.hooks.onUpdate.tap("async-node-test", () => {
+        updateNumber++;
+      });
+    });
+  });
+
+  player.start(basicFRFWithActions as any);
+
+  let view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view).toBeDefined();
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1]).toBeUndefined();
+
+  await waitFor(() => {
+    expect(deferredResolve).toBeDefined();
+  });
+
+  // Consumer responds with null/undefined
+  if (deferredResolve) {
+    deferredResolve(resolvedValue);
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(2);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions.length).toBe(1);
+
+  viewInstance?.update();
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(3);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions.length).toBe(1);
+};
+
+test("should return current node view when the resolved node is null", async () => {
+  await asyncNodeTest(null);
+});
+
+test("should return current node view when the resolved node is undefined", async () => {
+  await asyncNodeTest(undefined);
+});
+
+test("replaces async nodes with provided node", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Async) => {
+    return new Promise((resolve) => {
+      deferredResolve = resolve;
+    });
+  });
+  let updateNumber = 0;
+
+  const player = new Player({ plugins: [plugin] });
+
+  player.hooks.viewController.tap("async-node-test", (vc) => {
+    vc.hooks.view.tap("async-node-test", (view) => {
+      view.hooks.onUpdate.tap("async-node-test", (update) => {
+        updateNumber++;
+      });
+    });
+  });
+
+  player.start(basicFRFWithActions as any);
+
+  let view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view).toBeDefined();
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1]).toBeUndefined();
+  expect(updateNumber).toBe(1);
+
+  await waitFor(() => {
+    expect(deferredResolve).toBeDefined();
+  });
+
+  if (deferredResolve) {
+    deferredResolve({
+      asset: {
+        id: "next-label-action",
+        type: "action",
+        value: "dummy value",
+      },
+    });
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(2);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1].asset.type).toBe("action");
+});
+
+test("replaces async nodes with multi node", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  plugin.hooks.onAsyncNode.tap("test", async (node) => {
+    return new Promise((resolve) => {
+      deferredResolve = resolve;
+    });
+  });
+
+  let updateNumber = 0;
+
+  const player = new Player({ plugins: [plugin] });
+
+  player.hooks.viewController.tap("async-node-test", (vc) => {
+    vc.hooks.view.tap("async-node-test", (view) => {
+      view.hooks.onUpdate.tap("async-node-test", (update) => {
+        updateNumber++;
+      });
+    });
+  });
+
+  player.start(basicFRFWithActions as any);
+
+  let view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view).toBeDefined();
+  expect(view?.actions[1]).toBeUndefined();
+  expect(updateNumber).toBe(1);
+
+  await waitFor(() => {
+    expect(deferredResolve).toBeDefined();
+  });
+
+  if (deferredResolve) {
+    deferredResolve([
+      {
+        asset: {
+          id: "value-1",
+          type: "text",
+          value: "1st value in the multinode",
+        },
+      },
+      {
+        asset: {
+          id: "value-2",
+          type: "text",
+          value: "2nd value in the multinode",
+        },
+      },
+    ]);
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(2);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1].asset.type).toBe("text");
+  expect(view?.actions[2].asset.type).toBe("text");
+});
+
+test("replaces async nodes with chained multiNodes", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Async) => {
+    return new Promise((resolve) => {
+      deferredResolve = resolve;
+    });
+  });
+  let updateNumber = 0;
+
+  const player = new Player({ plugins: [plugin] });
+
+  player.hooks.viewController.tap("async-node-test", (vc) => {
+    vc.hooks.view.tap("async-node-test", (view) => {
+      view.hooks.onUpdate.tap("async-node-test", (update) => {
+        updateNumber++;
+      });
+    });
+  });
+
+  player.start(basicFRFWithActions as any);
+
+  let view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view).toBeDefined();
+  expect(view?.actions[1]).toBeUndefined();
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(1);
+    expect(deferredResolve).toBeDefined();
+  });
+
+  if (deferredResolve) {
+    deferredResolve([
+      {
+        asset: {
+          id: "value-1",
+          type: "text",
+          value: "1st value in the multinode",
+        },
+      },
+      {
+        id: "another-async",
+        async: true,
+      },
+    ]);
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(2);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1].asset.type).toBe("text");
+  expect(view?.actions[2]).toBeUndefined();
+  expect(updateNumber).toBe(2);
+
+  if (deferredResolve) {
+    deferredResolve([
+      {
+        asset: {
+          id: "value-2",
+          type: "text",
+          value: "2nd value in the multinode",
+        },
+      },
+      {
+        asset: {
+          id: "value-3",
+          type: "text",
+          value: "3rd value in the multinode",
+        },
+      },
+    ]);
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(3);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1].asset.type).toBe("text");
+  expect(view?.actions[2].asset.type).toBe("text");
+  expect(view?.actions[3].asset.type).toBe("text");
+});
+
+test("replaces async nodes with chained multiNodes singular", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Async) => {
+    return new Promise((resolve) => {
+      deferredResolve = resolve;
+    });
+  });
+  let updateNumber = 0;
+
+  const player = new Player({ plugins: [plugin] });
+
+  player.hooks.viewController.tap("async-node-test", (vc) => {
+    vc.hooks.view.tap("async-node-test", (view) => {
+      view.hooks.onUpdate.tap("async-node-test", (update) => {
+        updateNumber++;
+      });
+    });
+  });
+
+  player.start(basicFRFWithActions as any);
+
+  let view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view).toBeDefined();
+  expect(view?.actions[1]).toBeUndefined();
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(1);
+    expect(deferredResolve).toBeDefined();
+  });
+
+  if (deferredResolve) {
+    deferredResolve([
+      {
+        asset: {
+          id: "value-1",
+          type: "text",
+          value: "1st value in the multinode",
+        },
+      },
+      {
+        id: "another-async",
+        async: true,
+      },
+    ]);
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(2);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1].asset.type).toBe("text");
+  expect(view?.actions[2]).toBeUndefined();
+
+  if (deferredResolve) {
+    deferredResolve({
+      asset: {
+        id: "value-2",
+        type: "text",
+        value: "2nd value in the multinode",
+      },
+    });
+  }
+
+  await waitFor(() => {
+    expect(updateNumber).toBe(3);
+  });
+
+  view = (player.getState() as InProgressState).controllers.view.currentView
+    ?.lastUpdate;
+
+  expect(view?.actions[0].asset.type).toBe("action");
+  expect(view?.actions[1].asset.type).toBe("text");
+  expect(view?.actions[2].asset.type).toBe("text");
+});
+
+test("should call onAsyncNode hook when async node is encountered", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let localNode: Node.Async;
+  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Async) => {
+    if (node !== null) {
+      // assigns node value to a local variable
+      localNode = node;
+    }
+
+    return new Promise((resolve) => {
+      resolve("Promise resolved");
+    });
+  });
+
+  const player = new Player({ plugins: [plugin] });
+
+  player.start(basicFRFWithActions as any);
+
+  await waitFor(() => {
+    expect(localNode.id).toStrictEqual("nodeId");
+    expect(localNode.type).toStrictEqual("async");
+  });
+});

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.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;
+  }
 }