[Android] Create example asset for async content streaming

core/player/src/view/builder/index.test.ts

@@ -34,6 +34,34 @@ describe("multiNode", () => {
   });
 });
 
+test("async node", () => {
+  const result = Builder.asyncNode("1", false);
+  expect(result.type).toBe(NodeType.Async);
+  expect(result.id).toBe("1");
+  expect(result.flatten).toBe(false);
+
+  const result2 = Builder.asyncNode("2");
+  expect(result2.type).toBe(NodeType.Async);
+  expect(result2.id).toBe("2");
+  expect(result2.flatten).toBe(true);
+});
+
+test("asset wrapper", () => {
+  const result = Builder.assetWrapper({ id: "asset", type: "text" });
+
+  expect(result.type).toBe(NodeType.Value);
+  expect(result.children?.[0]?.value.type).toBe("asset");
+  expect(result.children?.[0]?.value.value.id).toBe("asset");
+});
+
+test("asset wrapper", () => {
+  const result = Builder.assetWrapper({ id: "asset", type: "text" });
+
+  expect(result.type).toBe(NodeType.Value);
+  expect(result.children?.[0]?.value.type).toBe("asset");
+  expect(result.children?.[0]?.value.value.id).toBe("asset");
+});
+
 describe("addChild", () => {
   test("sets the parent on the child node", () => {
     const asset = Builder.asset({ id: "asset", type: "text" });

core/player/src/view/builder/index.ts

@@ -17,6 +17,13 @@ export class Builder {
     };
   }
 
+  static assetWrapper<T extends AnyAssetType>(value: T): Node.Value {
+    const asset = Builder.asset(value);
+    const valueNode = Builder.value();
+    Builder.addChild(valueNode, "asset", asset);
+    return valueNode;
+  }
+
   /**
    * Creates a value node
    *
@@ -36,11 +43,12 @@ export class Builder {
    * @param values - the value or applicability nodes to put in the multinode
    */
   static multiNode(
-    ...values: (Node.Value | Node.Applicability)[]
+    ...values: (Node.Value | Node.Applicability | Node.Asset | Node.Async)[]
   ): Node.MultiNode {
     const m: Node.MultiNode = {
       type: NodeType.MultiNode,
       override: true,
+      flatten: true,
       values,
     };
 
@@ -52,6 +60,25 @@ export class Builder {
     return m;
   }
 
+  /**
+   * Creates an async node
+   *
+   * @param id - the id of async node. It should be identical for each async node
+   */
+  static asyncNode(id: string, flatten = true): Node.Async {
+    return {
+      id,
+      type: NodeType.Async,
+      flatten: flatten,
+      value: {
+        type: NodeType.Value,
+        value: {
+          id,
+        },
+      },
+    };
+  }
+
   /**
    * Adds a child node to a node
    *

core/player/src/view/parser/types.ts

@@ -94,6 +94,8 @@ export declare namespace Node {
 
     /** A list of values that comprise this node */
     values: Array<Node>;
+
+    flatten?: boolean;
   }
 
   export interface Switch extends Base<NodeType.Switch> {
@@ -116,6 +118,10 @@ export declare namespace Node {
     id: string;
     /** The value representing the node */
     value: Node;
+    /**
+     * Should this list be flattened in resolver
+     */
+    flatten?: boolean;
   }
 
   export interface PluginOptions {

core/player/src/view/resolver/index.ts

@@ -12,7 +12,11 @@ import { DependencyModel, withParser } from "../../data";
 import type { Logger } from "../../logger";
 import type { Node } from "../parser";
 import { NodeType } from "../parser";
-import { caresAboutDataChanges, toNodeResolveOptions } from "./utils";
+import {
+  caresAboutDataChanges,
+  toNodeResolveOptions,
+  unpackAndPush,
+} from "./utils";
 import type { Resolve } from "./types";
 import { getNodeID } from "../parser/utils";
 
@@ -163,7 +167,6 @@ export class Resolver {
     );
     this.resolveCache = resolveCache;
     this.hooks.afterUpdate.call(updated.value);
-
     return updated.value;
   }
 
@@ -408,7 +411,27 @@ export class Resolver {
         );
 
         if (mTree.value !== undefined && mTree.value !== null) {
-          childValue.push(mTree.value);
+          if (
+            mValue.type === NodeType.Async &&
+            mValue.flatten &&
+            Array.isArray(mTree.value)
+          ) {
+            if (Array.isArray(mTree.value)) {
+              mTree.value.forEach((v: any) => {
+                unpackAndPush(v, childValue);
+              });
+            }
+          } else if (
+            mValue.type === NodeType.Async &&
+            mValue.flatten &&
+            Array.isArray(mTree.value.asset.values)
+          ) {
+            mTree.value.asset.values.forEach((v: any) => {
+              unpackAndPush(v, childValue);
+            });
+          } else {
+            childValue.push(mTree.value);
+          }
         }
 
         mTree.dependencies.forEach((bindingDep) =>

docs/storybook/src/reference-assets/ChatMessage.mdx

@@ -0,0 +1,9 @@
+import * as ChatMessageStories from "./ChatMessage.stories";
+
+# ChatMessage Asset
+
+The `ChatMessage` asset is used as an example of async node.
+
+## Basic Use Case
+
+The example below shows the basic usage of async node. Transform the `ChatMessage` asset and render the `text` asset with given value

docs/storybook/src/reference-assets/ChatMessage.stories.tsx

@@ -0,0 +1,14 @@
+import { PlayerStory } from "@player-ui/storybook";
+import { Meta } from "@storybook/react";
+
+const meta: Meta = {
+  title: "Reference Assets/ChatMessage",
+};
+
+export default meta;
+
+export const Basic = () => (
+  <PlayerStory
+    flow={() => import("@player-ui/mocks/chat-message/chat-message-basic.json")}
+  />
+);

package.json

@@ -167,6 +167,7 @@
     "seamless-scroll-polyfill": "^2.3.4",
     "sharp": "^0.33.5",
     "signale": "^1.4.0",
+    "snowflake-id": "^1.0.0",
     "sorted-array": "^2.0.4",
     "source-map-js": "^1.0.2",
     "starlight-package-managers": "^0.7.0",

plugins/async-node/core/BUILD

@@ -14,10 +14,15 @@ js_pipeline(
     native_bundle = "AsyncNodePlugin",
     peer_deps = [
         ":node_modules/@player-ui/player",
+        "//:node_modules/react",
+        "//:node_modules/@types/react",
     ],
     deps = [
         "//:node_modules/queue-microtask",
         "//:node_modules/tapable-ts",
         "//:node_modules/timm",
     ],
+    test_deps = [
+	    ":node_modules/@player-ui/reference-assets-plugin",
+    ]
 )

plugins/async-node/core/package.json

@@ -3,7 +3,8 @@
     "version": "0.0.0-PLACEHOLDER",
     "main": "src/index.ts",
     "peerDependencies": {
-      "@player-ui/player": "workspace:*"
+      "@player-ui/player": "workspace:*",
+      "@player-ui/react": "workspace:*"
     }
   }