Ability to remove a resolved async node

plugins/async-node/core/src/index.test.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "vitest";
+import { expect, test, vi } from "vitest";
 import { Node, InProgressState, ViewInstance } from "@player-ui/player";
 import { Player } from "@player-ui/player";
 import { waitFor } from "@testing-library/react";
@@ -44,11 +44,20 @@ const asyncNodeTest = async (resolvedValue: any) => {
 
   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 updateContent: any;
+
+  plugin.hooks.onAsyncNode.tap(
+    "test",
+    async (node: Node.Async, update: (content: any) => void) => {
+      const result = new Promise((resolve) => {
+        deferredResolve = resolve; // Promise would be resolved only once
+      });
+
+      updateContent = update;
+      // Return the result to follow the same mechanism as before
+      return result;
+    },
+  );
 
   let updateNumber = 0;
 
@@ -84,7 +93,7 @@ const asyncNodeTest = async (resolvedValue: any) => {
   }
 
   await waitFor(() => {
-    expect(updateNumber).toBe(2);
+    expect(updateNumber).toBe(1);
   });
 
   view = (player.getState() as InProgressState).controllers.view.currentView
@@ -93,10 +102,14 @@ const asyncNodeTest = async (resolvedValue: any) => {
   expect(view?.actions[0].asset.type).toBe("action");
   expect(view?.actions.length).toBe(1);
 
-  viewInstance?.update();
+  // Consumer responds with null/undefined
+  if (deferredResolve) {
+    updateContent(resolvedValue);
+  }
 
+  //Even after an update, the view should not change as we are deleting the resolved node if there is no view update
   await waitFor(() => {
-    expect(updateNumber).toBe(3);
+    expect(updateNumber).toBe(1);
   });
 
   view = (player.getState() as InProgressState).controllers.view.currentView
@@ -114,6 +127,90 @@ test("should return current node view when the resolved node is undefined", asyn
   await asyncNodeTest(undefined);
 });
 
+test("should handle the promise using .then", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  let updateContent: any;
+
+  plugin.hooks.onAsyncNode.tap(
+    "test",
+    async (node: Node.Async, update: (content: any) => void) => {
+      const result = new Promise((resolve) => {
+        deferredResolve = resolve; // Promise would be resolved only once
+      });
+
+      updateContent = update;
+      // Return the result to follow the same mechanism as before
+      return result;
+    },
+  );
+
+  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: "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");
+  expect(view?.actions[2]).toBeUndefined();
+  expect(updateNumber).toBe(2);
+
+  if (deferredResolve) {
+    updateContent(null);
+  }
+
+  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]).toBeUndefined();
+});
+
 test("replaces async nodes with provided node", async () => {
   const plugin = new AsyncNodePlugin({
     plugins: [new AsyncNodePluginPlugin()],
@@ -346,7 +443,7 @@ test("replaces async nodes with chained multiNodes singular", async () => {
 
   let deferredResolve: ((value: any) => void) | undefined;
 
-  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Async) => {
+  plugin.hooks.onAsyncNode.tap("test", async (node: Node.Node) => {
     return new Promise((resolve) => {
       deferredResolve = resolve;
     });
@@ -424,30 +521,3 @@ test("replaces async nodes with chained multiNodes singular", async () => {
   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");
-  });
-});

plugins/async-node/core/src/index.ts

@@ -8,6 +8,7 @@
   Parser,
   ViewPlugin,
   Resolver,
+  Resolve,
 } from "@player-ui/player";
 import { AsyncParallelBailHook } from "tapable-ts";
 import queueMicrotask from "queue-microtask";
@@ -24,7 +25,7 @@
   /** Use this to tap into the async node plugin hooks */
   applyPlugin: (asyncNodePlugin: AsyncNodePlugin) => void;
 
-  asyncNode: AsyncParallelBailHook<[Node.Async], any>;
+  asyncNode: AsyncParallelBailHook<[Node.Async, (result: any) => void], any>;
 }
 
 /**
@@ -44,7 +45,10 @@
   }
 
   public readonly hooks = {
-    onAsyncNode: new AsyncParallelBailHook<[Node.Async], any>(),
+    onAsyncNode: new AsyncParallelBailHook<
+      [Node.Async, (result: any) => void],
+      any
+    >(),
   };
 
   name = "AsyncNode";
@@ -61,7 +65,10 @@
 }
 
 export class AsyncNodePluginPlugin implements AsyncNodeViewPlugin {
-  public asyncNode = new AsyncParallelBailHook<[Node.Async], any>();
+  public asyncNode = new AsyncParallelBailHook<
+    [Node.Async, (result: any) => void],
+    any
+  >();
   private basePlugin: AsyncNodePlugin | undefined;
 
   name = "AsyncNode";
@@ -70,6 +77,21 @@
 
   private currentView: ViewInstance | undefined;
 
+  private updateAsyncFunc(
+    node: Node.Async,
+    result: any,
+    options: Resolve.NodeResolveOptions,
+    view: ViewInstance | undefined,
+  ) {
+    const parsedNode =
+      options.parseNode && result ? options.parseNode(result) : undefined;
+
+    if (this.resolvedMapping.get(node.id) !== parsedNode) {
+      this.resolvedMapping.set(node.id, parsedNode ? parsedNode : node);
+      view?.updateAsync();
+    }
+  }
+
   private isAsync(node: Node.Node | null): node is Node.Async {
     return node?.type === NodeType.Async;
   }
@@ -127,7 +149,12 @@
       const newNode = resolvedNode || node;
       if (!resolvedNode && node?.type === NodeType.Async) {
         queueMicrotask(async () => {
-          const result = await this.basePlugin?.hooks.onAsyncNode.call(node);
+          const result = await this.basePlugin?.hooks.onAsyncNode.call(
+            node,
+            (result) => {
+              this.updateAsyncFunc(node, result, options, this.currentView);
+            },
+          );
           const parsedNode =
             options.parseNode && result ? options.parseNode(result) : undefined;
 
@@ -161,19 +188,20 @@
         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();
+            if (!this.basePlugin) {
+              return;
+            }
+            const result = await this.basePlugin?.hooks.onAsyncNode.call(
+              node,
+              (result) => {
+                this.updateAsyncFunc(node, result, options, view);
+              },
+            );
+            this.updateAsyncFunc(node, result, options, view);
           });
 
           return node;
         }
-
         return newNode;
       });
     });