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,146 @@ test("should return current node view when the resolved node is undefined", asyn
   await asyncNodeTest(undefined);
 });
 
+test("can handle multiple updates through callback mechanism", 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("should not proceed with async node resolution if basePlugin is not set", async () => {
+  const plugin = new AsyncNodePlugin({
+    plugins: [new AsyncNodePluginPlugin()],
+  });
+
+  plugin.apply(new Player());
+
+  let updateNumber = 0;
+  let deferredResolve: ((value: any) => void) | undefined;
+
+  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++;
+      });
+    });
+  });
+
+  // Define a basic flow that includes an async node
+  const basicFRFWithAsyncNode = {
+    id: "test-flow",
+    views: [
+      {
+        id: "my-view",
+        actions: [
+          {
+            id: "asyncNodeId",
+            async: "true",
+          },
+        ],
+      },
+    ],
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "my-view",
+          transitions: {},
+        },
+      },
+    },
+  };
+
+  player.start(basicFRFWithAsyncNode as any);
+
+  // Wait for any asynchronous operations to potentially complete
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  expect(updateNumber).toBe(1);
+  expect(deferredResolve).toBeUndefined();
+});
+
 test("replaces async nodes with provided node", async () => {
   const plugin = new AsyncNodePlugin({
     plugins: [new AsyncNodePluginPlugin()],

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 handleAsyncUpdate(
+    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,14 +149,16 @@
       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();
+          if (!this.basePlugin) {
+            return;
           }
+          const result = await this.basePlugin?.hooks.onAsyncNode.call(
+            node,
+            (result) => {
+              this.handleAsyncUpdate(node, result, options, this.currentView);
+            },
+          );
+          this.handleAsyncUpdate(node, result, options, this.currentView);
         });
 
         return node;
@@ -161,19 +185,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.handleAsyncUpdate(node, result, options, view);
+              },
+            );
+            this.handleAsyncUpdate(node, result, options, view);
           });
 
           return node;
         }
-
         return newNode;
       });
     });