@player-tools/dsl 0.5.0--canary.62.1176 → 0.5.0-next.0

package/src/index.ts

@@ -1,11 +1,11 @@
-export * from './components';
-export * from './auto-id';
-export * from './types';
-export * from './string-templates';
-export * from './utils';
-export * from './switch';
-export * from './template';
-export * from 'react-json-reconciler';
-export * from './compiler/schema';
-export * from './compiler';
-export * from './compiler/types';
+export * from "./components";
+export * from "./auto-id";
+export * from "./types";
+export * from "./string-templates";
+export * from "./utils";
+export * from "./switch";
+export * from "./template";
+export * from "react-json-reconciler";
+export * from "./compiler/schema";
+export * from "./compiler";
+export * from "./compiler/types";

package/src/string-templates/__tests__/binding.test.ts

@@ -0,0 +1,87 @@
+import { test, expect, describe } from "vitest";
+import { binding as b, expression as e } from "..";
+
+describe("string template binding", () => {
+  test("returns string versions", () => {
+    expect(b`foo.bar.baz`.toValue()).toBe("foo.bar.baz");
+    expect(b`foo.bar.${b`foo.bar`}`.toValue()).toBe("foo.bar.{{foo.bar}}");
+  });
+
+  test("returns string ref versions", () => {
+    expect(b`foo.bar.baz`.toRefString()).toBe("{{foo.bar.baz}}");
+    expect(b`foo.bar.${b`foo.bar`}`.toRefString()).toBe(
+      "{{foo.bar.{{foo.bar}}}}"
+    );
+  });
+
+  test("works with nested expressions", () => {
+    expect(b`foo.bar.${e`test()`}`.toValue()).toBe("foo.bar.`test()`");
+    expect(b`foo.bar.${e`test()`}`.toRefString()).toBe("{{foo.bar.`test()`}}");
+
+    const expr = e`test() == "foo"`;
+    expect(b`${expr}.${expr}`.toValue()).toBe(
+      '`test() == "foo"`.`test() == "foo"`'
+    );
+  });
+
+  test("works when in a string", () => {
+    expect(`This is a ${b`foo.bar`} reference.`).toBe(
+      "This is a {{foo.bar}} reference."
+    );
+  });
+
+  test("works when template is just a string", () => {
+    const segments = ["foo", "bar", "_index_", "baz"];
+    expect(b`${segments.join(".")}`.toValue()).toBe("foo.bar._index_.baz");
+  });
+
+  test("should provide unique identifiers for each _index_ provided for the binding in the template", () => {
+    const segments = ["some", "_index_", "data", "_index_", "foo", "_index_"];
+    expect(b`${segments.join(".")}`.toValue()).toBe(
+      "some._index_.data._index1_.foo._index2_"
+    );
+
+    expect(b`${segments.join(".")}`.toRefString()).toBe(
+      "{{some._index_.data._index1_.foo._index2_}}"
+    );
+  });
+
+  test("should not place index identifiers if an expression literal is called", () => {
+    const expressionWithBindings =
+      "conditional({{foo.bar._index_.field1._index_.innerField}} == true, {{foo.bar._index_.field1}} = true)";
+
+    expect(e`${expressionWithBindings}`.toValue()).toBe(expressionWithBindings);
+  });
+
+  test("should place index identifiers in binding templates nested in an expression", () => {
+    const segments = ["some", "_index_", "data", "_index_", "foo", "_index_"];
+
+    const expressionNestedBindings = e`test(${b`${segments.join(
+      "."
+    )}`})`.toValue();
+
+    expect(expressionNestedBindings).toBe(
+      "test({{some._index_.data._index1_.foo._index2_}})"
+    );
+  });
+
+  test("should reset index identifiers in multiple binding templates nested in an expression", () => {
+    const segments = [
+      "some",
+      "_index_",
+      "data",
+      "_index_",
+      "foo",
+      "_index_",
+      "bar",
+    ];
+
+    const expressionNestedBindings = e`test(${b`${segments.join(
+      "."
+    )}`} == true, ${b`some._index_.data`} = ${b`some._index_.other._index_.data`})`.toValue();
+
+    expect(expressionNestedBindings).toBe(
+      "test({{some._index_.data._index1_.foo._index2_.bar}} == true, {{some._index_.data}} = {{some._index_.other._index1_.data}})"
+    );
+  });
+});

package/src/string-templates/__tests__/edge-cases.test.ts

@@ -0,0 +1,6 @@
+import { test, expect, describe } from "vitest";
+import { isTemplateStringInstance } from "..";
+
+test("isTemplateStringInstance with null", () => {
+  expect(isTemplateStringInstance(null)).toBe(false);
+});

package/src/string-templates/__tests__/expression.test.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "vitest";
+import { expression as e } from "..";
+
+test("works with nested expressions", () => {
+  const exp1 = e`foo() == bar()`;
+  const exp2 = e`conditional(${exp1})`;
+
+  expect(exp2.toString()).toBe(`@[conditional(foo() == bar())]@`);
+});

package/src/string-templates/__tests__/react.test.tsx

@@ -0,0 +1,75 @@
+import { test, expect } from "vitest";
+import React from "react";
+import { render } from "react-json-reconciler";
+import { binding as b, expression as e } from "..";
+import { Switch } from "../../switch";
+import { Collection } from "../../__tests__/helpers/asset-library";
+
+test("can be used as a react child element", async () => {
+  const content = (
+    await render(
+      <object>
+        <property name="expression">{e`test()`}</property>
+        <property name="binding">{b`foo.bar`}</property>
+      </object>
+    )
+  ).jsonValue;
+
+  expect(content).toStrictEqual({
+    expression: "@[test()]@",
+    binding: "{{foo.bar}}",
+  });
+});
+
+test("Works when used as a child asset", async () => {
+  const content = (
+    await render(
+      <Collection>
+        <Collection.Label>{b`foo.bar`}</Collection.Label>
+      </Collection>
+    )
+  ).jsonValue;
+
+  expect(content).toStrictEqual({
+    id: "root",
+    type: "collection",
+    label: {
+      asset: {
+        id: "label",
+        type: "text",
+        value: "{{foo.bar}}",
+      },
+    },
+  });
+});
+
+test("Works as a switch child", async () => {
+  const content = (
+    await render(
+      <Collection>
+        <Collection.Label>
+          <Switch>
+            <Switch.Case>Testing 123 {b`foo.bar`}</Switch.Case>
+          </Switch>
+        </Collection.Label>
+      </Collection>
+    )
+  ).jsonValue;
+
+  expect(content).toStrictEqual({
+    id: "root",
+    type: "collection",
+    label: {
+      staticSwitch: [
+        {
+          case: true,
+          asset: {
+            id: "label-staticSwitch-0",
+            type: "text",
+            value: "Testing 123 {{foo.bar}}",
+          },
+        },
+      ],
+    },
+  });
+});

package/src/string-templates/index.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { parseExpression } from '@player-ui/player';
+import * as React from "react";
+import { parseExpression } from "@player-ui/player";
 
-export type TemplateInstanceRefStringContext = 'binding' | 'expression';
+export type TemplateInstanceRefStringContext = "binding" | "expression";
 export interface TemplateRefStringOptions {
   /** If this template string is inside of another binding or expression */
   nestedContext?: TemplateInstanceRefStringContext;
 }
 export interface TemplateInstanceRefStringOptions {
   /** The array of strings for the template */
-  strings: TemplateStringsArray;
+  strings: ReadonlyArray<string>;
   /** the other data that's present in the template */
   other: Array<string | TemplateStringType>;
 
@@ -22,7 +22,7 @@ export interface TemplateInstanceRefStringOptions {
   ) => string;
 }
 
-const OpaqueIdentifier = Symbol('TemplateStringType');
+const OpaqueIdentifier = Symbol("TemplateStringType");
 
 export type TemplateStringType = React.ReactElement & {
   /** An identifier to show that this is a template type */
@@ -37,12 +37,12 @@ export type TemplateStringType = React.ReactElement & {
 
 export type BindingTemplateInstance = TemplateStringType & {
   /** An identifier for a binding instance */
-  __type: 'binding';
+  __type: "binding";
 };
 
 export type ExpressionTemplateInstance = TemplateStringType & {
   /** The identifier for an expression instance */
-  __type: 'expression';
+  __type: "expression";
 };
 
 /** A react component for rendering a template string type */
@@ -51,7 +51,7 @@ export const TemplateStringComponent = (props: {
   value: string;
 }) => {
   return React.createElement(
-    'value',
+    "value",
     {
       value: props.value,
     },
@@ -65,15 +65,15 @@ const createTemplateInstance = (
 ): TemplateStringType => {
   const value = options.strings.reduce((sum, next, i) => {
     const element = options.other[i];
-    if (typeof element === 'string') {
+    if (typeof element === "string") {
       return sum + next + element;
     }
 
-    return sum + next + (element?.toRefString(options) ?? '');
-  }, '');
+    return sum + next + (element?.toRefString(options) ?? "");
+  }, "");
 
   /** Try to parse the expression as valid */
-  if (options.nestedContext === 'expression') {
+  if (options.nestedContext === "expression") {
     const parsedExpression = parseExpression(value, { strict: false });
     if (parsedExpression.error) {
       throw parsedExpression.error;
@@ -110,39 +110,57 @@ const createTemplateInstance = (
   };
 };
 
+/** Helper for Iterating the binding to add a dynamic numeric value to each index found */
+const addBindingIndexes = (binding: string): string => {
+  let currentIndex = 0;
+
+  return binding.replace(/_index_/g, () => {
+    const result = `_index${currentIndex > 0 ? currentIndex : ""}_`;
+    currentIndex += 1;
+
+    return result;
+  });
+};
+
 /** Creating an instance of a handler for bindings */
 const createBindingTemplateInstance = (
-  options: Omit<TemplateInstanceRefStringOptions, 'toRefString'>
+  options: Omit<TemplateInstanceRefStringOptions, "toRefString">
 ): BindingTemplateInstance => {
   const templateInstance = createTemplateInstance({
     ...options,
+    strings: options.strings.map((element: string) =>
+      addBindingIndexes(element)
+    ),
+    other: options.other.map((element) =>
+      typeof element === "string" ? addBindingIndexes(element) : element
+    ),
     toRefString: (context, value) => {
       return `{{${value}}}`;
     },
   }) as BindingTemplateInstance;
 
-  templateInstance.__type = 'binding';
+  templateInstance.__type = "binding";
 
   return templateInstance;
 };
 
 /** Creating an instance of a handler for bindings */
 const createExpressionTemplateInstance = (
-  options: Omit<TemplateInstanceRefStringOptions, 'toRefString'>
+  options: Omit<TemplateInstanceRefStringOptions, "toRefString">
 ) => {
   const templateInstance = createTemplateInstance({
     ...options,
     toRefString: (contextOptions, value) => {
-      if (contextOptions?.nestedContext === 'expression') {
+      if (contextOptions?.nestedContext === "expression") {
         return value;
       }
 
-      const inBinding = contextOptions?.nestedContext === 'binding';
-      return `${inBinding ? '`' : '@['}${value}${inBinding ? '`' : ']@'}`;
+      const inBinding = contextOptions?.nestedContext === "binding";
+      return `${inBinding ? "`" : "@["}${value}${inBinding ? "`" : "]@"}`;
     },
   }) as ExpressionTemplateInstance;
 
-  templateInstance.__type = 'expression';
+  templateInstance.__type = "expression";
 
   return templateInstance;
 };
@@ -155,7 +173,7 @@ export const binding = (
   return createBindingTemplateInstance({
     strings,
     other: nested,
-    nestedContext: 'binding',
+    nestedContext: "binding",
   });
 };
 
@@ -169,7 +187,7 @@ export const expression = (
   return createExpressionTemplateInstance({
     strings,
     other: nested,
-    nestedContext: 'expression',
+    nestedContext: "expression",
   });
 };
 
@@ -179,7 +197,7 @@ export const isTemplateStringInstance = (
 ): val is ExpressionTemplateInstance | BindingTemplateInstance => {
   return (
     val !== null &&
-    typeof val === 'object' &&
+    typeof val === "object" &&
     (val as any)[OpaqueIdentifier] === true
   );
 };

package/src/switch.tsx

@@ -1,15 +1,15 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-import type { ArrayNode, JsonNode, ObjectNode } from 'react-json-reconciler';
-import { flattenNodes, PropertyNode } from 'react-json-reconciler';
-import { SlotContext } from '.';
-import { IDSuffixProvider, OptionalIDSuffixProvider } from './auto-id';
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { ArrayNode, JsonNode, ObjectNode } from "react-json-reconciler";
+import { flattenNodes, PropertyNode } from "react-json-reconciler";
+import { SlotContext } from ".";
+import { IDSuffixProvider, OptionalIDSuffixProvider } from "./auto-id";
 import type {
   BindingTemplateInstance,
   ExpressionTemplateInstance,
-} from './string-templates';
-import { isTemplateStringInstance } from './string-templates';
-import { normalizeToCollection, toJsonProperties } from './utils';
+} from "./string-templates";
+import { isTemplateStringInstance } from "./string-templates";
+import { normalizeToCollection, toJsonProperties } from "./utils";
 
 export interface SwitchProps {
   /** defaults to a staticSwitch */
@@ -43,7 +43,7 @@ export const Switch = (props: PropsWithChildren<SwitchProps>) => {
         }}
       >
         <OptionalIDSuffixProvider wrapperRef={propertyNode}>
-          <property name={props.isDynamic ? 'dynamicSwitch' : 'staticSwitch'}>
+          <property name={props.isDynamic ? "dynamicSwitch" : "staticSwitch"}>
             <SlotContext.Provider value={undefined}>
               <array>{props.children}</array>
             </SlotContext.Provider>
@@ -63,7 +63,7 @@ export interface CaseProps {
 
 /** Find the first parent array */
 const findParentArray = (node: JsonNode): ArrayNode => {
-  if (node.type === 'array') {
+  if (node.type === "array") {
     return node;
   }
 
@@ -112,7 +112,7 @@ const Case = (props: PropsWithChildren<CaseProps>) => {
       </property>
       <IDSuffixProvider
         suffix={`${
-          switchContext.isDynamic ? 'dynamicSwitch' : 'staticSwitch'
+          switchContext.isDynamic ? "dynamicSwitch" : "staticSwitch"
         }-${caseIndex}`}
       >
         <SlotContext.Provider

package/src/template.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ObjectNode, JsonNode } from 'react-json-reconciler';
+import React from "react";
+import type { ObjectNode, JsonNode } from "react-json-reconciler";
 import {
   ArrayNode,
   PropertyNode,
@@ -7,11 +7,11 @@ import {
   createPortal,
   ProxyNode,
   toJSON,
-} from 'react-json-reconciler';
-import { OptionalIDSuffixProvider } from './auto-id';
-import type { BindingTemplateInstance } from './string-templates';
-import type { WithChildren } from './types';
-import { toJsonElement } from './utils';
+} from "react-json-reconciler";
+import { OptionalIDSuffixProvider } from "./auto-id";
+import type { BindingTemplateInstance } from "./string-templates";
+import type { WithChildren } from "./types";
+import { toJsonElement } from "./utils";
 
 export interface TemplateContextType {
   /** The number of nested templates */
@@ -46,11 +46,11 @@ function addTemplateToObject(
   // add one if none exists
 
   let templateProp = obj.properties.find(
-    (p) => p.keyNode.value === 'template' && p.valueNode?.type === 'array'
+    (p) => p.keyNode.value === "template" && p.valueNode?.type === "array"
   );
 
   if (!templateProp) {
-    templateProp = new PropertyNode(new ValueNode('template'), new ArrayNode());
+    templateProp = new PropertyNode(new ValueNode("template"), new ArrayNode());
     templateProp.parent = obj;
     obj.properties.push(templateProp);
   }
@@ -64,7 +64,7 @@ function addTemplateToObject(
   const templateParentProp = obj.properties.find(
     (p) =>
       p.keyNode.value === templateParentNodeType &&
-      p.valueNode?.type === 'array'
+      p.valueNode?.type === "array"
   );
 
   if (templateParentProp) {
@@ -108,7 +108,7 @@ const TemplateProvider = (props: WithChildren) => {
 
 /** Find the first object node in the tree */
 const getParentObject = (node: JsonNode): ObjectNode | undefined => {
-  if (node.type === 'object') {
+  if (node.type === "object") {
     return node;
   }
 
@@ -119,7 +119,7 @@ const getParentObject = (node: JsonNode): ObjectNode | undefined => {
 
 /** Find the property of the node on the parent */
 const getParentProperty = (node: JsonNode): PropertyNode | undefined => {
-  if (node.type === 'property') {
+  if (node.type === "property") {
     return node;
   }
 
@@ -154,7 +154,7 @@ export const Template = (props: TemplateProps) => {
       const parentObject = getParentObject(proxyRef.current);
 
       if (!parentObject) {
-        throw new Error('Unable to find parent to add template to');
+        throw new Error("Unable to find parent to add template to");
       }
 
       if (!outputProp) {
@@ -168,27 +168,31 @@ export const Template = (props: TemplateProps) => {
 
   return (
     <proxy ref={proxyRef}>
-      {createPortal(
-        <OptionalIDSuffixProvider
-          wrapperRef={valueRef}
-          templateIndex={`_index${
-            baseContext.depth === 0 ? '' : baseContext.depth
-          }_`}
-        >
-          <TemplateProvider>
-            <object>
-              <property name="data">{props.data.toValue()}</property>
-              <property name="output">{outputProp}</property>
-              <property name="value">{props.children}</property>
-              {dynamicProp && (
-                <property name="dynamic">{toJsonElement(dynamicProp)}</property>
-              )}
-            </object>
-          </TemplateProvider>
-        </OptionalIDSuffixProvider>,
-        outputElement
-      )}
-      <value ref={valueRef} value={undefined} />
+      <>
+        {createPortal(
+          <OptionalIDSuffixProvider
+            wrapperRef={valueRef}
+            templateIndex={`_index${
+              baseContext.depth === 0 ? "" : baseContext.depth
+            }_`}
+          >
+            <TemplateProvider>
+              <object>
+                <property name="data">{props.data.toValue()}</property>
+                <property name="output">{outputProp}</property>
+                <property name="value">{props.children}</property>
+                {dynamicProp && (
+                  <property name="dynamic">
+                    {toJsonElement(dynamicProp)}
+                  </property>
+                )}
+              </object>
+            </TemplateProvider>
+          </OptionalIDSuffixProvider>,
+          outputElement
+        )}
+        <value ref={valueRef} value={undefined} />
+      </>
     </proxy>
   );
 };

package/src/types.ts

@@ -2,11 +2,11 @@ import type {
   Asset,
   Expression,
   Navigation as PlayerNav,
-} from '@player-ui/types';
+} from "@player-ui/types";
 import type {
   BindingTemplateInstance,
   ExpressionTemplateInstance,
-} from './string-templates';
+} from "./string-templates";
 
 export type WithChildren<T = Record<string, unknown>> = T & {
   /** child nodes */
@@ -40,7 +40,7 @@ export interface PlayerApplicability {
 
 export type AssetPropsWithChildren<T extends Asset> = WithChildren<
   WithTemplateTypes<
-    OmitProp<RemoveUnknownIndex<T>, 'id' | 'type'> & Partial<Pick<Asset, 'id'>>
+    OmitProp<RemoveUnknownIndex<T>, "id" | "type"> & Partial<Pick<Asset, "id">>
   > &
     PlayerApplicability
 >;
@@ -55,7 +55,7 @@ export type WithTemplateTypes<T> = T extends Record<any, any>
     }
   : T | BindingTemplateInstance | ExpressionTemplateInstance;
 
-type ValidKeys = 'exp' | 'onStart' | 'onEnd';
+type ValidKeys = "exp" | "onStart" | "onEnd";
 
 type DeepReplace<T, Old, New> = {
   [P in keyof T]: T[P] extends Old
@@ -83,7 +83,7 @@ export type Navigation = DeepReplace<
 export interface toJsonOptions {
   /**
    * List of string keys that should not be parsed in a special way
-   * default is 'applicability'
+   * default is "applicability"
    */
   propertiesToSkip?: string[];
 }

package/src/utils.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   isTemplateStringInstance,
   TemplateStringComponent,
-} from './string-templates';
-import type { toJsonOptions } from './types';
+} from "./string-templates";
+import type { toJsonOptions } from "./types";
 
 /** Get an array version of the value */
 export function toArray<T>(val: T | Array<T>): Array<T> {
@@ -16,7 +16,7 @@ export function toJsonElement(
   indexOrKey?: number | string,
   options?: toJsonOptions
 ): React.ReactElement {
-  const indexProp = typeof indexOrKey === 'number' ? { key: indexOrKey } : null;
+  const indexProp = typeof indexOrKey === "number" ? { key: indexOrKey } : null;
 
   if (Array.isArray(value)) {
     return (
@@ -29,7 +29,7 @@ export function toJsonElement(
   /** Allow users to pass in BindingTemplateInstance and ExpressionTemplateInstance directly without turning them into strings first */
   if (isTemplateStringInstance(value)) {
     if (
-      typeof indexOrKey === 'string' &&
+      typeof indexOrKey === "string" &&
       options?.propertiesToSkip?.includes(indexOrKey)
     ) {
       return <value {...indexProp}>{value.toValue()}</value>;
@@ -38,7 +38,7 @@ export function toJsonElement(
     return <value {...indexProp}>{value.toRefString()}</value>;
   }
 
-  if (typeof value === 'object' && value !== null) {
+  if (typeof value === "object" && value !== null) {
     return (
       <obj {...indexProp}>
         {Object.keys(value).map((key) => (
@@ -56,7 +56,7 @@ export function toJsonElement(
 /** Create a fragment for the properties */
 export function toJsonProperties(
   value: Record<string, any>,
-  options: toJsonOptions = { propertiesToSkip: ['applicability'] }
+  options: toJsonOptions = { propertiesToSkip: ["applicability"] }
 ) {
   return Object.keys(value).map((key) => {
     return (
@@ -111,7 +111,7 @@ export function normalizeToCollection(options: {
 
   if (
     React.Children.count(node) > 1 &&
-    React.Children.toArray(node).every((n) => typeof n !== 'string')
+    React.Children.toArray(node).every((n) => typeof n !== "string")
   ) {
     if (!CollectionComp) {
       throw new Error(