add transform util func to async-node-plugin

plugins/async-node/core/BUILD

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

plugins/async-node/core/package.json

@@ -3,7 +3,14 @@
     "version": "0.0.0-PLACEHOLDER",
     "main": "src/index.ts",
     "peerDependencies": {
-      "@player-ui/player": "workspace:*"
+      "@player-ui/player": "workspace:*",
+      "@player-ui/react": "workspace:*"
+    },
+    "dependencies": {
+      "uuid": "^8.3.2"
+    },
+    "devDependencies": {
+      "@types/uuid": "^8.3.4"
     }
   }
 

plugins/async-node/core/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  */

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

@@ -0,0 +1,32 @@
+import { Builder } from "@player-ui/player";
+import { v4 as uuid } from "uuid";
+import type { AsyncTransformFunc } from "./types";
+
+export const asyncTransform: AsyncTransformFunc = (
+  asset,
+  transformedAssetType,
+  wrapperAssetType,
+) => {
+  const id = uuid();
+
+  const assetNode = Builder.asset({
+    ...asset.value,
+    type: transformedAssetType,
+  });
+
+  const asyncNode = Builder.asyncNode(id);
+  const multiNode = Builder.multiNode(
+    asset.value.flatten,
+    assetNode,
+    asyncNode,
+  );
+
+  const wrapperAsset = Builder.asset({
+    id: wrapperAssetType + "-" + id,
+    type: wrapperAssetType,
+  });
+
+  Builder.addChild(wrapperAsset, ["values"], multiNode);
+
+  return wrapperAsset;
+};

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

@@ -1,6 +1,21 @@
-import type { Node } from "@player-ui/player";
+import type { AssetWrapper, Asset, Node } from "@player-ui/player";
 
 export type AsyncNodeHandler = (
   node: Node.Node,
   update: (object: any) => void,
 ) => void;
+
+export interface AsyncNodeWrapperAsset extends Asset {
+  /** The string value to show */
+  values?: Array<AssetWrapper> | Array<Asset>;
+}
+
+export interface AssetType extends Asset {
+  /** Flatten flag */
+  flatten?: boolean | false;
+}
+
+export type AsyncTransformFunc = (
+  asset: Node.Asset<AssetType> | Node.View<AssetType>,
+  transformedAssetType: string,
+) => Node.Node;

plugins/reference-assets/core/BUILD

@@ -19,12 +19,10 @@ js_xlr_pipeline(
         ":node_modules/@player-ui/asset-testing-library",
         ":node_modules/@player-ui/common-types-plugin",
         "//:vitest_config",
-        ":node_modules/@player-ui/async-node-plugin",
     ],
     deps = [
         ":node_modules/@player-ui/asset-transform-plugin",
         ":node_modules/@player-ui/beacon-plugin",
-        "//:node_modules/uuid",
-        "//:node_modules/@types/uuid",
+        ":node_modules/@player-ui/async-node-plugin",
     ],
 )

plugins/reference-assets/core/package.json

@@ -5,13 +5,11 @@
   "dependencies": {
     "@player-ui/asset-transform-plugin": "workspace:*",
     "@player-ui/beacon-plugin": "workspace:*",
-    "uuid": "^8.3.2"
+    "@player-ui/async-node-plugin": "workspace:*"
   },
   "devDependencies": {
     "@player-ui/asset-testing-library": "workspace:*",
-    "@player-ui/common-types-plugin": "workspace:*",
-    "@types/uuid": "^8.3.4",
-    "@player-ui/async-node-plugin": "workspace:*"
+    "@player-ui/common-types-plugin": "workspace:*"
   },
   "peerDependencies": {
     "@player-ui/player": "workspace:*"

plugins/reference-assets/core/src/assets/chat-message/transform.ts

@@ -2,11 +2,9 @@ import type {
   BeforeTransformFunction,
   TransformFunctions,
 } from "@player-ui/player";
-import { v4 as uuid } from "uuid";
-import { Builder } from "@player-ui/player";
 import { composeBefore, compose } from "@player-ui/asset-transform-plugin";
 import type { ChatMessageAsset } from "./types";
-
+import { asyncTransform } from "@player-ui/async-node-plugin";
 /**
  * In beforeTransform function, pass in flatten marker and call beforeResolve function
  * input: asset
@@ -34,23 +32,7 @@ import type { ChatMessageAsset } from "./types";
  */
 
 export const transform: BeforeTransformFunction<ChatMessageAsset> = (asset) => {
-  const id = uuid();
-
-  const assetNode = Builder.asset({ ...asset.value, type: "text" });
-  const asyncNode = Builder.asyncNode(id);
-  const multiNode = Builder.multiNode(
-    asset.value.flatten,
-    assetNode,
-    asyncNode,
-  );
-
-  const wrapperAsset = Builder.asset({
-    id: "chat-message-wrapper",
-    type: "chat-message-wrapper",
-  });
-
-  Builder.addChild(wrapperAsset, ["values"], multiNode);
-  return wrapperAsset;
+  return asyncTransform(asset, "text", "chat-message-wrapper");
 };
 
 export const chatMessageTransform: TransformFunctions = compose(