@player-ui/async-node-plugin 0.10.4-next.2 → 0.10.4

package/src/__tests__/index.test.ts

@@ -3,6 +3,7 @@ import { Node, InProgressState, ViewInstance } from "@player-ui/player";
 import { Player, Parser } from "@player-ui/player";
 import { waitFor } from "@testing-library/react";
 import { AsyncNodePlugin, AsyncNodePluginPlugin } from "../index";
+import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin";
 
 describe("view", () => {
   const basicFRFWithActions = {
@@ -38,6 +39,40 @@ describe("view", () => {
     },
   };
 
+  const chatMessageContent = {
+    id: "chat",
+    views: [
+      {
+        id: "1",
+        type: "chat-message",
+        value: {
+          asset: {
+            id: "2",
+            type: "text",
+            value: "chat message",
+          },
+        },
+      },
+    ],
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "1",
+          transitions: {
+            "*": "END_Done",
+          },
+        },
+        END_Done: {
+          state_type: "END",
+          outcome: "DONE",
+        },
+      },
+    },
+  };
+
   const asyncNodeTest = async (resolvedValue: any) => {
     const plugin = new AsyncNodePlugin({
       plugins: [new AsyncNodePluginPlugin()],
@@ -548,6 +583,300 @@ describe("view", () => {
       expect(localNode.type).toStrictEqual("async");
     });
   });
+
+  test("chat-message asset - replaces async nodes with multi node flattened", 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 plugins = [plugin, new ReferenceAssetsPlugin()];
+
+    const player = new Player({
+      plugins: plugins,
+    });
+
+    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(chatMessageContent as any);
+
+    let view = (player.getState() as InProgressState).controllers.view
+      .currentView?.lastUpdate;
+
+    expect(view).toBeDefined();
+    expect(view?.values[0].asset.type).toBe("text");
+    expect(updateNumber).toBe(1);
+
+    await waitFor(() => {
+      expect(deferredResolve).toBeDefined();
+    });
+
+    if (deferredResolve) {
+      deferredResolve([
+        {
+          asset: {
+            id: "2",
+            type: "text",
+            value: "Hello World!",
+          },
+        },
+        {
+          asset: {
+            id: "3",
+            type: "text",
+            value: "Hello World!",
+          },
+        },
+      ]);
+    }
+
+    await waitFor(() => {
+      expect(updateNumber).toBe(2);
+    });
+
+    view = (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+    expect(view?.values[1][0].asset.type).toBe("text");
+    expect(view?.values[1][1].asset.type).toBe("text");
+  });
+
+  test("chat-message asset - 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) => {
+      return new Promise((resolve) => {
+        deferredResolve = resolve;
+      });
+    });
+
+    let updateNumber = 0;
+
+    const plugins = [plugin, new ReferenceAssetsPlugin()];
+
+    const player = new Player({
+      plugins: plugins,
+    });
+
+    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(chatMessageContent as any);
+
+    let view = (player.getState() as InProgressState).controllers.view
+      .currentView?.lastUpdate;
+
+    expect(view).toBeDefined();
+    expect(view?.values[0].asset.type).toBe("text");
+    expect(view?.values[0].asset.value).toBe("chat message");
+    expect(updateNumber).toBe(1);
+
+    await waitFor(() => {
+      expect(deferredResolve).toBeDefined();
+    });
+
+    if (deferredResolve) {
+      deferredResolve({
+        asset: {
+          id: "2",
+          type: "text",
+          value: "async content",
+        },
+      });
+    }
+
+    await waitFor(() => {
+      expect(updateNumber).toBe(2);
+    });
+
+    view = (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+    expect(view?.values[1].asset.type).toBe("text");
+    expect(view?.values[1].asset.value).toBe("async content");
+  });
+
+  test("chat-message asset - replaces async nodes with chat-message asset", 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, new ReferenceAssetsPlugin()],
+    });
+
+    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(chatMessageContent as any);
+
+    let view = (player.getState() as InProgressState).controllers.view
+      .currentView?.lastUpdate;
+
+    expect(view).toBeDefined();
+    expect(view?.values[0].asset.type).toBe("text");
+    expect(view?.values[0].asset.value).toBe("chat message");
+    expect(updateNumber).toBe(1);
+
+    await waitFor(() => {
+      expect(deferredResolve).toBeDefined();
+    });
+
+    if (deferredResolve) {
+      deferredResolve({
+        asset: {
+          id: "3",
+          type: "chat-message",
+          value: {
+            asset: {
+              id: "4",
+              type: "text",
+              value: "async content",
+            },
+          },
+        },
+      });
+    }
+
+    await waitFor(() => {
+      expect(updateNumber).toBe(2);
+    });
+
+    view = (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+    expect(view?.values[1].asset.type).toBe("text");
+    expect(view?.values[1].asset.value).toBe("async content");
+  });
+
+  test("chat-message asset - resolve chained chat-message", 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 plugins = [plugin, new ReferenceAssetsPlugin()];
+
+    const player = new Player({
+      plugins: plugins,
+    });
+
+    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(chatMessageContent as any);
+
+    let view = (player.getState() as InProgressState).controllers.view
+      .currentView?.lastUpdate;
+
+    expect(view).toBeDefined();
+    expect(view?.values[0].asset.type).toBe("text");
+    expect(view?.values[0].asset.value).toBe("chat message");
+    expect(updateNumber).toBe(1);
+
+    await waitFor(() => {
+      expect(deferredResolve).toBeDefined();
+    });
+
+    if (deferredResolve) {
+      deferredResolve({
+        asset: {
+          id: "3",
+          type: "chat-message",
+          value: {
+            asset: {
+              id: "4",
+              type: "text",
+              value: "async content",
+            },
+          },
+        },
+      });
+    }
+
+    await waitFor(() => {
+      expect(updateNumber).toBe(2);
+    });
+
+    view = (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+    expect(view?.values[1].asset.type).toBe("text");
+    expect(view?.values[1].asset.value).toBe("async content");
+
+    if (deferredResolve) {
+      deferredResolve({
+        asset: {
+          id: "5",
+          type: "text",
+          value: "chained async content",
+        },
+      });
+    }
+
+    await waitFor(() => {
+      expect(updateNumber).toBe(3);
+    });
+
+    view = (player.getState() as InProgressState).controllers.view.currentView
+      ?.lastUpdate;
+
+    expect(view?.values[2].asset.type).toBe("text");
+    expect(view?.values[2].asset.value).toBe("chained async content");
+  });
 });
 
 describe("parser", () => {

package/src/__tests__/transform.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from "vitest";
+import { asyncTransform } from "..";
+import { Builder } from "@player-ui/player";
+
+describe("asyncTransform", () => {
+  const asset = Builder.asset({
+    id: "2",
+    type: "text",
+    value: "chat message",
+  });
+
+  it("generates wrapper asset with asset", async () => {
+    const transformedAsset = asyncTransform("1", "collection", asset);
+
+    expect(transformedAsset).toMatchSnapshot();
+  });
+
+  it("generates wrapper asset with flatten is false", async () => {
+    const transformedAsset = asyncTransform("1", "collection", asset, false);
+
+    expect(transformedAsset?.children?.[0]?.value.values[1].flatten).toBe(
+      false,
+    );
+  });
+});

package/src/index.ts

@@ -16,6 +16,7 @@ import queueMicrotask from "queue-microtask";
 import { omit } from "timm";
 
 export * from "./types";
+export * from "./transform";
 
 export interface AsyncNodePluginOptions {
   /** A set of plugins to load  */

package/src/transform.ts

@@ -0,0 +1,40 @@
+import { Builder, NodeType } from "@player-ui/player";
+import type { AsyncTransformFunc } from "./types";
+
+/**
+ * Util function to generate transform function for async asset
+ * @param asset - async asset to apply beforeResolve transform
+ * @param transformedAssetType: transformed asset type for rendering
+ * @param wrapperAssetType: container asset type
+ * @param flatten: flatten the streamed in content
+ * @returns - wrapper asset with children of transformed asset and async node
+ */
+
+export const asyncTransform: AsyncTransformFunc = (
+  assetId,
+  wrapperAssetType,
+  asset,
+  flatten,
+) => {
+  const id = "async-" + assetId;
+
+  const asyncNode = Builder.asyncNode(id, flatten);
+  let multiNode;
+  let assetNode;
+
+  if (asset) {
+    assetNode = Builder.assetWrapper(asset);
+    multiNode = Builder.multiNode(assetNode, asyncNode);
+  } else {
+    multiNode = Builder.multiNode(asyncNode);
+  }
+
+  const wrapperAsset = Builder.asset({
+    id: wrapperAssetType + "-" + id,
+    type: wrapperAssetType,
+  });
+
+  Builder.addChild(wrapperAsset, ["values"], multiNode);
+
+  return wrapperAsset;
+};

package/src/types.ts

@@ -4,3 +4,10 @@ export type AsyncNodeHandler = (
   node: Node.Node,
   update: (object: any) => void,
 ) => void;
+
+export type AsyncTransformFunc = (
+  id: string,
+  wrapperAssetType: string,
+  asset?: Node.Node,
+  flatten?: boolean,
+) => Node.Asset;

package/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { Player, PlayerPlugin, Node, ViewInstance, Parser, ViewPlugin, Resolver } from "@player-ui/player";
 import { AsyncParallelBailHook } from "tapable-ts";
 export * from "./types";
+export * from "./transform";
 export interface AsyncNodePluginOptions {
     /** A set of plugins to load  */
     plugins?: AsyncNodeViewPlugin[];

package/types/transform.d.ts

@@ -0,0 +1,11 @@
+import type { AsyncTransformFunc } from "./types";
+/**
+ * Util function to generate transform function for async asset
+ * @param asset - async asset to apply beforeResolve transform
+ * @param transformedAssetType: transformed asset type for rendering
+ * @param wrapperAssetType: container asset type
+ * @param flatten: flatten the streamed in content
+ * @returns - wrapper asset with children of transformed asset and async node
+ */
+export declare const asyncTransform: AsyncTransformFunc;
+//# sourceMappingURL=transform.d.ts.map

package/types/types.d.ts

@@ -1,3 +1,4 @@
 import type { Node } from "@player-ui/player";
 export type AsyncNodeHandler = (node: Node.Node, update: (object: any) => void) => void;
+export type AsyncTransformFunc = (id: string, wrapperAssetType: string, asset?: Node.Node, flatten?: boolean) => Node.Asset;
 //# sourceMappingURL=types.d.ts.map