@player-ui/player 0.11.0-next.2 → 0.11.0-next.4

package/package.json

@@ -6,12 +6,12 @@
     "types"
   ],
   "name": "@player-ui/player",
-  "version": "0.11.0-next.2",
+  "version": "0.11.0-next.4",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@player-ui/partial-match-registry": "0.11.0-next.2",
-    "@player-ui/make-flow": "0.11.0-next.2",
-    "@player-ui/types": "0.11.0-next.2",
+    "@player-ui/partial-match-registry": "0.11.0-next.4",
+    "@player-ui/make-flow": "0.11.0-next.4",
+    "@player-ui/types": "0.11.0-next.4",
     "@types/dlv": "^1.1.4",
     "dequal": "^2.0.2",
     "dlv": "^1.1.3",

package/src/view/builder/index.test.ts

@@ -102,6 +102,34 @@ describe("addChild", () => {
     const value = Builder.value({ id: 2 });
     Builder.addChild(asset, ["path1", "path2"], value);
 
-    expect(asset.children?.[0].path).toStrictEqual(["path1", "path2"]);
+    expect(asset.children?.[0]?.path).toStrictEqual(["path1", "path2"]);
+  });
+});
+
+describe("updateChildrenByPath", () => {
+  test("updates children with matching path in the same order", () => {
+    const parent = Builder.value();
+    const child1 = Builder.value({ foo: "child1Value" });
+    const child2 = Builder.value({ foo: "child2Value" });
+    const child3 = Builder.value({ foo: "child3Value" });
+
+    Builder.addChild(parent, "child1", child1);
+    // Child 2 has the same path as child 1
+    Builder.addChild(parent, "child1", child2);
+    Builder.addChild(parent, "child3", child3);
+
+    // Update matching children
+    const updated = Builder.updateChildrenByPath(parent, ["child1"], (child) =>
+      Builder.value({
+        transformed: true,
+        original: (child as any).value?.foo,
+      }),
+    );
+
+    expect(updated.children).toHaveLength(3);
+    // Verify children are in the correct order
+    expect(updated.children?.[0]?.path).toStrictEqual(["child1"]);
+    expect(updated.children?.[1]?.path).toStrictEqual(["child1"]);
+    expect(updated.children?.[2]?.path).toStrictEqual(["child3"]);
   });
 });

package/src/view/builder/index.ts

@@ -87,7 +87,7 @@ export class Builder {
     node: N,
     path: Node.PathSegment | Node.PathSegment[],
     child: Node.Node,
-  ) {
+  ): N {
     child.parent = node as Node.Node;
 
     const newChild: Node.Child = {
@@ -100,4 +100,32 @@ export class Builder {
 
     return node;
   }
+
+  /**
+   * Updates children of a node of the same path and preserves order
+   *
+   * @param node - The node to update children for
+   * @param pathToMatch - The path to match against child paths
+   * @param mapFn - Function to transform matching children
+   */
+  static updateChildrenByPath<T extends Node.ViewOrAsset | Node.Value>(
+    node: T,
+    pathToMatch: Node.PathSegment[],
+    updateFn: (child: Node.Child) => Node.Node,
+  ): T {
+    if (!node.children) return node;
+
+    // Use map to preserve original order
+    const updatedChildren = node.children.map((child) =>
+      // Check if paths match exactly
+      child.path.join() === pathToMatch.join()
+        ? { ...child, value: updateFn(child) }
+        : child,
+    );
+
+    return {
+      ...node,
+      children: updatedChildren,
+    };
+  }
 }

package/src/view/parser/types.ts

@@ -74,8 +74,11 @@ export declare namespace Node {
     /** The number of nested templates so far */
     depth: number;
 
-    /** should the template recomputed when data changes */
+    /** Should the template recompute when data changes */
     dynamic?: boolean;
+
+    /** Specifies the template placement in relation to existing elements*/
+    placement?: "prepend" | "append";
   }
 
   export interface Value

package/src/view/plugins/__tests__/__snapshots__/template.test.ts.snap

@@ -1,6 +1,119 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`dynamic templates > Works with template items plus value items > Should show template item first when coming before values on lexical order 1`] = `
+exports[`templates > Should preserve order when multiple templates have the same placement 1`] = `
+[
+  {
+    "asset": {
+      "id": "static-value",
+      "type": "text",
+      "value": "Static value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "first-0",
+      "type": "text",
+      "value": "first A",
+    },
+  },
+  {
+    "asset": {
+      "id": "first-1",
+      "type": "text",
+      "value": "first B",
+    },
+  },
+  {
+    "asset": {
+      "id": "second-0",
+      "type": "text",
+      "value": "second C",
+    },
+  },
+  {
+    "asset": {
+      "id": "second-1",
+      "type": "text",
+      "value": "second D",
+    },
+  },
+]
+`;
+
+exports[`templates > Works with template items plus value items > Should show dynamic template items first when using placement prepend 1`] = `
+[
+  {
+    "asset": {
+      "id": "dynamic-0",
+      "type": "text",
+      "value": "item Ginger",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-1",
+      "type": "text",
+      "value": "item Vokey",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-1",
+      "type": "text",
+      "value": "First value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-2",
+      "type": "text",
+      "value": "Second value in the collection",
+    },
+  },
+]
+`;
+
+exports[`templates > Works with template items plus value items > Should show dynamic template items first when using placement prepend 2`] = `
+[
+  {
+    "asset": {
+      "id": "dynamic-0",
+      "type": "text",
+      "value": "item Louis",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-1",
+      "type": "text",
+      "value": "item Bob",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-2",
+      "type": "text",
+      "value": "item Nuri",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-1",
+      "type": "text",
+      "value": "First value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-2",
+      "type": "text",
+      "value": "Second value in the collection",
+    },
+  },
+]
+`;
+
+exports[`templates > Works with template items plus value items > Should show static template item first when coming before values on lexical order 1`] = `
 [
   {
     "asset": {
@@ -33,7 +146,7 @@ exports[`dynamic templates > Works with template items plus value items > Should
 ]
 `;
 
-exports[`dynamic templates > Works with template items plus value items > Should show template item last when coming after values on lexical order 1`] = `
+exports[`templates > Works with template items plus value items > Should show static template item last when coming after values on lexical order 1`] = `
 [
   {
     "asset": {
@@ -66,7 +179,219 @@ exports[`dynamic templates > Works with template items plus value items > Should
 ]
 `;
 
-exports[`templates > works with nested templates 1`] = `
+exports[`templates > Works with template items plus value items > Should show static template items first when using placement prepend 1`] = `
+[
+  {
+    "asset": {
+      "id": "value-0",
+      "type": "text",
+      "value": "item 1",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-1",
+      "type": "text",
+      "value": "item 2",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-2",
+      "type": "text",
+      "value": "First value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-3",
+      "type": "text",
+      "value": "Second value in the collection",
+    },
+  },
+]
+`;
+
+exports[`templates > Works with template items plus value items > Should show static template items last when using placement append 1`] = `
+[
+  {
+    "asset": {
+      "id": "value-2",
+      "type": "text",
+      "value": "First value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-3",
+      "type": "text",
+      "value": "Second value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-0",
+      "type": "text",
+      "value": "item 1",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-1",
+      "type": "text",
+      "value": "item 2",
+    },
+  },
+]
+`;
+
+exports[`templates > Works with template items plus value items > Should support placement for both static and dynamic templates 1`] = `
+[
+  {
+    "asset": {
+      "id": "static-0",
+      "type": "text",
+      "value": "static Ginger",
+    },
+  },
+  {
+    "asset": {
+      "id": "static-1",
+      "type": "text",
+      "value": "static Vokey",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-1",
+      "type": "text",
+      "value": "First value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-2",
+      "type": "text",
+      "value": "Second value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-0",
+      "type": "text",
+      "value": "dynamic Ginger",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-1",
+      "type": "text",
+      "value": "dynamic Vokey",
+    },
+  },
+]
+`;
+
+exports[`templates > Works with template items plus value items > Should support placement for both static and dynamic templates 2`] = `
+[
+  {
+    "asset": {
+      "id": "static-0",
+      "type": "text",
+      "value": "static Louis",
+    },
+  },
+  {
+    "asset": {
+      "id": "static-1",
+      "type": "text",
+      "value": "static Bob",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-1",
+      "type": "text",
+      "value": "First value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "value-2",
+      "type": "text",
+      "value": "Second value in the collection",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-0",
+      "type": "text",
+      "value": "dynamic Louis",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-1",
+      "type": "text",
+      "value": "dynamic Bob",
+    },
+  },
+  {
+    "asset": {
+      "id": "dynamic-2",
+      "type": "text",
+      "value": "dynamic Nuri",
+    },
+  },
+]
+`;
+
+exports[`templates > works with simple ones 1`] = `
+{
+  "children": [
+    {
+      "path": [
+        "values",
+      ],
+      "value": {
+        "override": false,
+        "parent": [Circular],
+        "type": "multi-node",
+        "values": [
+          {
+            "parent": [Circular],
+            "type": "value",
+            "value": {
+              "value": "{{foo.bar.0}}",
+            },
+          },
+          {
+            "parent": [Circular],
+            "type": "value",
+            "value": {
+              "value": "{{foo.bar.1}}",
+            },
+          },
+          {
+            "parent": [Circular],
+            "type": "value",
+            "value": {
+              "value": "{{foo.bar.2}}",
+            },
+          },
+        ],
+      },
+    },
+  ],
+  "type": "value",
+  "value": {
+    "id": "foo",
+    "type": "collection",
+  },
+}
+`;
+
+exports[`templates > works with static nested templates 1`] = `
 {
   "children": [
     {
@@ -233,48 +558,3 @@ exports[`templates > works with nested templates 1`] = `
   },
 }
 `;
-
-exports[`templates > works with simple ones 1`] = `
-{
-  "children": [
-    {
-      "path": [
-        "values",
-      ],
-      "value": {
-        "override": false,
-        "parent": [Circular],
-        "type": "multi-node",
-        "values": [
-          {
-            "parent": [Circular],
-            "type": "value",
-            "value": {
-              "value": "{{foo.bar.0}}",
-            },
-          },
-          {
-            "parent": [Circular],
-            "type": "value",
-            "value": {
-              "value": "{{foo.bar.1}}",
-            },
-          },
-          {
-            "parent": [Circular],
-            "type": "value",
-            "value": {
-              "value": "{{foo.bar.2}}",
-            },
-          },
-        ],
-      },
-    },
-  ],
-  "type": "value",
-  "value": {
-    "id": "foo",
-    "type": "collection",
-  },
-}
-`;