@player-tools/dsl 0.9.1-next.2 → 0.10.0--canary.196.4206

package/src/__tests__/template.test.tsx

@@ -26,6 +26,7 @@ test("finds output property based on array context", async () => {
         data: "foo.output",
         value: "bar",
         output: "foo",
+        placement: "append",
       },
     ],
   });
@@ -53,6 +54,7 @@ test("finds dynamic property in a template", async () => {
         dynamic: true,
         value: "bar",
         output: "foo",
+        placement: "append",
       },
     ],
   });
@@ -75,7 +77,7 @@ test("works if already in a template array", async () => {
   });
 });
 
-test("Template Order is preserved", async () => {
+test("Template order is preserved", async () => {
   const element = (
     <Collection id="view-1">
       <Collection.Values>
@@ -105,7 +107,8 @@ test("Template Order is preserved", async () => {
       </Collection.Values>
     </Collection>
   );
-  expect((await render(element)).jsonValue).toStrictEqual({
+
+  const expectedOutput = {
     id: "view-1",
     type: "collection",
     values: [
@@ -131,6 +134,7 @@ test("Template Order is preserved", async () => {
                   value: "Dynamic Item _index_",
                 },
               },
+              placement: "prepend",
             },
           ],
           values: [
@@ -175,11 +179,99 @@ test("Template Order is preserved", async () => {
                   value: "Dynamic Item _index_",
                 },
               },
+              placement: "append",
             },
           ],
         },
       },
     ],
+  };
+
+  expect(JSON.stringify((await render(element)).jsonValue)).toBe(
+    JSON.stringify(expectedOutput)
+  );
+});
+
+test("Template placement is inferred as prepend", async () => {
+  const element = (
+    <obj>
+      <property name="foo">
+        <array>
+          <Template dynamic data={b`foo.output`}>
+            <value>bar</value>
+          </Template>
+          <value>Foo</value>
+        </array>
+      </property>
+    </obj>
+  );
+  expect((await render(element)).jsonValue).toStrictEqual({
+    foo: ["Foo"],
+    template: [
+      {
+        data: "foo.output",
+        placement: "prepend",
+        dynamic: true,
+        value: "bar",
+        output: "foo",
+      },
+    ],
+  });
+});
+
+test("Template placement is inferred as append", async () => {
+  const element = (
+    <obj>
+      <property name="foo">
+        <array>
+          <value>Foo</value>
+          <Template dynamic data={b`foo.output`}>
+            <value>bar</value>
+          </Template>
+        </array>
+      </property>
+    </obj>
+  );
+
+  expect((await render(element)).jsonValue).toStrictEqual({
+    foo: ["Foo"],
+    template: [
+      {
+        data: "foo.output",
+        placement: "append",
+        dynamic: true,
+        value: "bar",
+        output: "foo",
+      },
+    ],
+  });
+});
+
+test("Template with explicit placement is respected", async () => {
+  const element = (
+    <obj>
+      <property name="foo">
+        <array>
+          <value>Foo</value>
+          <Template dynamic data={b`foo.output`} placement="prepend">
+            <value>bar</value>
+          </Template>
+        </array>
+      </property>
+    </obj>
+  );
+
+  expect((await render(element)).jsonValue).toStrictEqual({
+    foo: ["Foo"],
+    template: [
+      {
+        data: "foo.output",
+        placement: "prepend",
+        dynamic: true,
+        value: "bar",
+        output: "foo",
+      },
+    ],
   });
 });
 
@@ -234,6 +326,7 @@ test("template will delete empty arrays related to the template only", async ()
       {
         data: "foo.bar",
         output: "values",
+        placement: "prepend",
         value: {
           asset: {
             id: "values-_index_",
@@ -269,10 +362,20 @@ test("template will delete empty arrays related to the template only", async ()
           actions: [],
           id: "values-2",
           type: "collection",
+          values: [
+            {
+              asset: {
+                id: "values-2-values-0",
+                type: "text",
+                value: "This should not be deleted by template",
+              },
+            },
+          ],
           template: [
             {
               data: "foo.bar",
               output: "values",
+              placement: "append",
               value: {
                 asset: {
                   id: "values-2-values-_index_",
@@ -282,15 +385,6 @@ test("template will delete empty arrays related to the template only", async ()
               },
             },
           ],
-          values: [
-            {
-              asset: {
-                id: "values-2-values-0",
-                type: "text",
-                value: "This should not be deleted by template",
-              },
-            },
-          ],
         },
       },
     ],
@@ -298,7 +392,7 @@ test("template will delete empty arrays related to the template only", async ()
 });
 
 describe("template auto id", () => {
-  test("s1mple", async () => {
+  test("simple", async () => {
     const element = (
       <Collection>
         <Collection.Values>
@@ -315,15 +409,6 @@ describe("template auto id", () => {
     expect(actual).toStrictEqual({
       id: "root",
       type: "collection",
-      values: [
-        {
-          asset: {
-            id: "static",
-            type: "text",
-            value: "Value 1",
-          },
-        },
-      ],
       template: [
         {
           data: "foo.bar",
@@ -335,6 +420,16 @@ describe("template auto id", () => {
               value: "Template Value",
             },
           },
+          placement: "prepend",
+        },
+      ],
+      values: [
+        {
+          asset: {
+            id: "static",
+            type: "text",
+            value: "Value 1",
+          },
         },
       ],
     });
@@ -363,15 +458,6 @@ describe("template auto id", () => {
     expect(actual).toStrictEqual({
       id: "root",
       type: "collection",
-      values: [
-        {
-          asset: {
-            id: "static",
-            type: "text",
-            value: "Value 1",
-          },
-        },
-      ],
       template: [
         {
           data: "foo.bar",
@@ -395,6 +481,16 @@ describe("template auto id", () => {
               type: "collection",
             },
           },
+          placement: "prepend",
+        },
+      ],
+      values: [
+        {
+          asset: {
+            id: "static",
+            type: "text",
+            value: "Value 1",
+          },
         },
       ],
     });

package/src/template.tsx

@@ -18,9 +18,10 @@ export interface TemplateContextType {
   depth: number;
 }
 
-export const TemplateContext = React.createContext<TemplateContextType>({
-  depth: 0,
-});
+export const TemplateContext: React.Context<TemplateContextType> =
+  React.createContext<TemplateContextType>({
+    depth: 0,
+  });
 
 export interface TemplateProps {
   /** The source binding */
@@ -34,6 +35,73 @@ export interface TemplateProps {
 
   /** boolean that specifies whether template should recompute when data changes */
   dynamic?: boolean;
+
+  /** Specifies the expanded template placement in relation to existing elements*/
+  placement?: "append" | "prepend";
+}
+
+/**
+ * Represents the position information for template insertion
+ */
+interface PositionInfo {
+  placement?: "append" | "prepend";
+  insertionIndex?: number;
+}
+
+/**
+ * Determines placement based on its proxy node and uses that for AST parity
+ */
+function determinePositionInfo(proxyNode: ProxyNode | null): PositionInfo {
+  const result: PositionInfo = {
+    placement: undefined,
+    insertionIndex: undefined,
+  };
+
+  if (!proxyNode || !proxyNode.parent) {
+    return result;
+  }
+
+  if (proxyNode.parent.type === "array") {
+    const parentArray = proxyNode.parent;
+    const proxyIndex = parentArray.items.indexOf(proxyNode);
+
+    // Check if there are any non-proxy items before this proxy
+    const hasNonProxyBefore = parentArray.items
+      .slice(0, proxyIndex)
+      .some((item) => item.type !== "proxy");
+
+    const hasNonProxyAfter = parentArray.items
+      .slice(proxyIndex + 1)
+      .some((item) => item.type !== "proxy");
+
+    if (hasNonProxyBefore) {
+      result.placement = "append";
+    } else if (hasNonProxyAfter) {
+      result.placement = "prepend";
+    }
+  }
+
+  const containingSlot = proxyNode.parent?.parent;
+  if (
+    containingSlot &&
+    containingSlot.type === "property" &&
+    containingSlot.keyNode.type === "value"
+  ) {
+    const parentObject = getParentObject(proxyNode);
+    if (parentObject) {
+      const index = parentObject.properties.findIndex((properties) => {
+        return properties.keyNode.value === containingSlot.keyNode.value;
+      });
+
+      // Assigns AST ordering based on placement
+      if (index !== -1) {
+        result.insertionIndex =
+          result.placement === "prepend" ? index : index + 1;
+      }
+    }
+  }
+
+  return result;
 }
 
 /** Add a template instance to the object */
@@ -134,7 +202,7 @@ const getParentProperty = (node: JsonNode): PropertyNode | undefined => {
 };
 
 /** A template allows users to dynamically map over an array of data */
-export const Template = (props: TemplateProps) => {
+export const Template = (props: TemplateProps): React.JSX.Element => {
   const baseContext = React.useContext(TemplateContext);
   const dynamicProp = props.dynamic ?? false;
   const [outputProp, setOutputProp] = React.useState<string | undefined>(
@@ -166,27 +234,7 @@ export const Template = (props: TemplateProps) => {
         return;
       }
 
-      let prefix = false;
-      if (
-        proxyRef.current.parent &&
-        proxyRef.current.parent.type === "array" &&
-        proxyRef.current.parent.items[0].type === "proxy"
-      ) {
-        prefix = true;
-      }
-
-      const containingSlot = proxyRef.current.parent?.parent;
-      let insertionIndex = undefined;
-      if (
-        containingSlot &&
-        containingSlot.type === "property" &&
-        containingSlot.keyNode.type === "value"
-      ) {
-        insertionIndex = parentObject.properties.findIndex((properties) => {
-          return properties.keyNode.value === containingSlot.keyNode.value;
-        });
-        insertionIndex = prefix ? insertionIndex : insertionIndex + 1;
-      }
+      const { insertionIndex } = determinePositionInfo(proxyRef.current);
 
       // remove the template when unmounted
       return addTemplateToObject(
@@ -198,6 +246,14 @@ export const Template = (props: TemplateProps) => {
     }
   }, [proxyRef, outputProp, outputElement.items]);
 
+  // Get position information for the template
+  const { placement: inferredPlacement } = determinePositionInfo(
+    proxyRef.current
+  );
+
+  // Use the explicitly provided placement or the inferred one
+  const resolvedPlacement = props.placement || inferredPlacement;
+
   return (
     <proxy ref={proxyRef}>
       <>
@@ -218,6 +274,11 @@ export const Template = (props: TemplateProps) => {
                     {toJsonElement(dynamicProp)}
                   </property>
                 )}
+                {resolvedPlacement && (
+                  <property name="placement">
+                    {toJsonElement(resolvedPlacement)}
+                  </property>
+                )}
               </object>
             </TemplateProvider>
           </OptionalIDSuffixProvider>,

package/types/template.d.ts

@@ -14,6 +14,8 @@ export interface TemplateProps {
     children: React.ReactNode;
     /** boolean that specifies whether template should recompute when data changes */
     dynamic?: boolean;
+    /** Specifies the expanded template placement in relation to existing elements*/
+    placement?: "append" | "prepend";
 }
 /** A template allows users to dynamically map over an array of data */
 export declare const Template: (props: TemplateProps) => React.JSX.Element;