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

package/src/__tests__/template.test.tsx

@@ -0,0 +1,294 @@
+import { test, expect, describe } from "vitest";
+import React from "react";
+import { render } from "react-json-reconciler";
+import { binding as b } from "..";
+import { Template } from "../template";
+import { Text, Collection } from "./helpers/asset-library";
+
+test("finds output property based on array context", async () => {
+  const element = (
+    <obj>
+      <property name="foo">
+        <array>
+          <value>Foo</value>
+          <Template data={b`foo.output`}>
+            <value>bar</value>
+          </Template>
+        </array>
+      </property>
+    </obj>
+  );
+
+  expect((await render(element)).jsonValue).toStrictEqual({
+    foo: ["Foo"],
+    template: [
+      {
+        data: "foo.output",
+        value: "bar",
+        output: "foo",
+      },
+    ],
+  });
+});
+
+test("finds dynamic property in a template", 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",
+        dynamic: true,
+        value: "bar",
+        output: "foo",
+      },
+    ],
+  });
+});
+
+test("works if already in a template array", async () => {
+  const element = (
+    <obj>
+      <property name="template">
+        <array>
+          <Template output="output" data={b`foo.output`}>
+            <value>bar</value>
+          </Template>
+        </array>
+      </property>
+    </obj>
+  );
+  expect((await render(element)).jsonValue).toStrictEqual({
+    template: [{ output: "output", data: "foo.output", value: "bar" }],
+  });
+});
+
+test("template will delete empty arrays related to the template only", async () => {
+  const element = (
+    <Collection>
+      <Collection.Actions>
+        <Template data={b`foo.bar`}>
+          <Text>Template action</Text>
+        </Template>
+      </Collection.Actions>
+      <Collection.Values>
+        <Template data={b`foo.bar`}>
+          <Text>Template Value 1</Text>
+        </Template>
+        <Collection>
+          <Collection.Actions />
+          {/* "actions": [] will not be deleted since it's not related to template */}
+          <Collection.Values>
+            {/* "values": [] will not be deleted */}
+            <Template data={b`foo.bar`}>
+              <Text>Template Value 2</Text>
+            </Template>
+          </Collection.Values>
+        </Collection>
+        <Collection>
+          <Collection.Actions />
+          <Collection.Values>
+            <Text>This should not be deleted by template</Text>
+            {/* "values" array will have text so it will not be deleted, only empty arrays are deleted */}
+            <Template data={b`foo.bar`}>
+              <Text>Template Value 3</Text>
+            </Template>
+          </Collection.Values>
+        </Collection>
+      </Collection.Values>
+    </Collection>
+  );
+  expect((await render(element)).jsonValue).toStrictEqual({
+    id: "root",
+    type: "collection",
+    template: [
+      {
+        data: "foo.bar",
+        output: "actions",
+        value: {
+          id: "actions-_index_",
+          type: "text",
+          value: "Template action",
+        },
+      },
+      {
+        data: "foo.bar",
+        output: "values",
+        value: {
+          asset: {
+            id: "values-_index_",
+            type: "text",
+            value: "Template Value 1",
+          },
+        },
+      },
+    ],
+    values: [
+      {
+        asset: {
+          actions: [],
+          id: "values-1",
+          type: "collection",
+          template: [
+            {
+              data: "foo.bar",
+              output: "values",
+              value: {
+                asset: {
+                  id: "values-1-values-_index_",
+                  type: "text",
+                  value: "Template Value 2",
+                },
+              },
+            },
+          ],
+        },
+      },
+      {
+        asset: {
+          actions: [],
+          id: "values-2",
+          type: "collection",
+          template: [
+            {
+              data: "foo.bar",
+              output: "values",
+              value: {
+                asset: {
+                  id: "values-2-values-_index_",
+                  type: "text",
+                  value: "Template Value 3",
+                },
+              },
+            },
+          ],
+          values: [
+            {
+              asset: {
+                id: "values-2-values-0",
+                type: "text",
+                value: "This should not be deleted by template",
+              },
+            },
+          ],
+        },
+      },
+    ],
+  });
+});
+
+describe("template auto id", () => {
+  test("s1mple", async () => {
+    const element = (
+      <Collection>
+        <Collection.Values>
+          <Template data={b`foo.bar`}>
+            <Text>Template Value</Text>
+          </Template>
+          <Text id="static">Value 1</Text>
+        </Collection.Values>
+      </Collection>
+    );
+
+    const actual = (await render(element)).jsonValue;
+
+    expect(actual).toStrictEqual({
+      id: "root",
+      type: "collection",
+      values: [
+        {
+          asset: {
+            id: "static",
+            type: "text",
+            value: "Value 1",
+          },
+        },
+      ],
+      template: [
+        {
+          data: "foo.bar",
+          output: "values",
+          value: {
+            asset: {
+              id: "values-_index_",
+              type: "text",
+              value: "Template Value",
+            },
+          },
+        },
+      ],
+    });
+  });
+
+  test("nested", async () => {
+    const element = (
+      <Collection>
+        <Collection.Values>
+          <Template data={b`foo.bar`}>
+            <Collection>
+              <Collection.Values>
+                <Template data={b`foo.baz`}>
+                  <Text>Nested Templates</Text>
+                </Template>
+              </Collection.Values>
+            </Collection>
+          </Template>
+          <Text id="static">Value 1</Text>
+        </Collection.Values>
+      </Collection>
+    );
+
+    const actual = (await render(element)).jsonValue;
+
+    expect(actual).toStrictEqual({
+      id: "root",
+      type: "collection",
+      values: [
+        {
+          asset: {
+            id: "static",
+            type: "text",
+            value: "Value 1",
+          },
+        },
+      ],
+      template: [
+        {
+          data: "foo.bar",
+          output: "values",
+          value: {
+            asset: {
+              id: "values-_index_",
+              template: [
+                {
+                  output: "values",
+                  data: "foo.baz",
+                  value: {
+                    asset: {
+                      id: "values-_index_-values-_index1_",
+                      type: "text",
+                      value: "Nested Templates",
+                    },
+                  },
+                },
+              ],
+              type: "collection",
+            },
+          },
+        },
+      ],
+    });
+  });
+});

package/src/__tests__/view-api.test.tsx

@@ -0,0 +1,46 @@
+import { test, expect, describe } from "vitest";
+import React from "react";
+import { render } from "react-json-reconciler";
+import { binding as b } from "../string-templates";
+import { Info } from "./helpers/asset-library";
+
+describe("View", () => {
+  test("Does not convert ref property to template", async () => {
+    const validationBinding = b`some.binding`;
+    const element = (
+      await render(
+        <Info
+          id="custom-id"
+          validation={[
+            {
+              type: "expression",
+              ref: validationBinding,
+              message: "some validation message",
+            },
+          ]}
+        >
+          <Info.Title>Cool Title</Info.Title>
+        </Info>
+      )
+    ).jsonValue;
+
+    expect(element).toStrictEqual({
+      id: "custom-id",
+      title: {
+        asset: {
+          id: "custom-id-title",
+          type: "text",
+          value: "Cool Title",
+        },
+      },
+      type: "info",
+      validation: [
+        {
+          message: "some validation message",
+          ref: "some.binding",
+          type: "expression",
+        },
+      ],
+    });
+  });
+});

package/src/auto-id.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { JsonNode } from 'react-json-reconciler';
-import { flattenNodes } from 'react-json-reconciler';
-import { SlotContext } from './components';
-import type { WithChildren } from './types';
+import React from "react";
+import type { JsonNode } from "react-json-reconciler";
+import { flattenNodes } from "react-json-reconciler";
+import { SlotContext } from "./components";
+import type { WithChildren } from "./types";
 
-const IDSuffixContext = React.createContext<string>('root');
+const IDSuffixContext = React.createContext<string>("root");
 
 export const IndexSuffixStopContext = React.createContext<boolean>(false);
 
@@ -25,11 +25,11 @@ export const IDSuffixProvider = (
   return (
     <IDSuffixContext.Provider
       value={[
-        currentPrefix === 'root' ? undefined : currentPrefix,
+        currentPrefix === "root" ? undefined : currentPrefix,
         props.suffix,
       ]
         .filter(Boolean)
-        .join('-')}
+        .join("-")}
     >
       {props.children}
     </IDSuffixContext.Provider>
@@ -62,10 +62,10 @@ export const useIndexInSlot = (ref: React.RefObject<JsonNode>) => {
 
   React.useEffect(() => {
     if (!slotContext?.isArray) {
-      throw new Error('Cannot get index in non-array slot');
+      throw new Error("Cannot get index in non-array slot");
     }
 
-    if (ref.current && slotContext?.ref.current?.valueNode?.type === 'array') {
+    if (ref.current && slotContext?.ref.current?.valueNode?.type === "array") {
       const allChildren = flattenNodes(
         slotContext.ref.current.valueNode.children
       );

package/src/compiler/__tests__/compiler.test.tsx

@@ -0,0 +1,264 @@
+import { test, expect } from "vitest";
+import React from "react";
+import { expression as e } from "../../string-templates";
+import { DSLCompiler } from "../compiler";
+import type { Navigation } from "../../types";
+
+test("treats jsx as view", async () => {
+  const compiler = new DSLCompiler();
+
+  const result = await compiler.serialize(
+    <object>
+      <property name="foo">bar</property>
+    </object>
+  );
+  expect(result).toBeDefined();
+  expect(result?.value).toStrictEqual({
+    foo: "bar",
+  });
+});
+
+test("should treat schema type  objects as schema", async () => {
+  const compiler = new DSLCompiler();
+  const result = await compiler.serialize({
+    foo: { bar: { type: "StringType" } },
+  });
+
+  expect(result.value).toStrictEqual({
+    ROOT: {
+      foo: {
+        type: "fooType",
+      },
+    },
+    fooType: {
+      bar: {
+        type: "StringType",
+      },
+    },
+  });
+});
+
+test("expressions in navigation", async () => {
+  const compiler = new DSLCompiler();
+  const navigation: Navigation = {
+    BEGIN: "Flow",
+    onStart: e`foo`,
+    Flow: {
+      startState: "VIEW_page",
+      onStart: [e`foo`, e`foo`],
+      VIEW_page: {
+        onStart: {
+          exp: e`foo`,
+        },
+        state_type: `VIEW`,
+        ref: "test",
+        transitions: {
+          "*": "ShowView1Or2",
+        },
+      },
+      ShowView1Or2: {
+        state_type: "ACTION",
+        exp: e`foo`,
+        transitions: {
+          "*": "VIEW_Other",
+        },
+      },
+      END_back: {
+        state_type: "END",
+        outcome: "BACK",
+      },
+      END_done: {
+        state_type: "END",
+        outcome: "doneWithFlow",
+      },
+    },
+  };
+  const result = await compiler.serialize({ navigation });
+  expect(result.value).toStrictEqual({
+    navigation: {
+      BEGIN: "Flow",
+      onStart: `foo`,
+      Flow: {
+        startState: "VIEW_page",
+        onStart: [`foo`, `foo`],
+        VIEW_page: {
+          onStart: {
+            exp: `foo`,
+          },
+          state_type: `VIEW`,
+          ref: "test",
+          transitions: {
+            "*": "ShowView1Or2",
+          },
+        },
+        ShowView1Or2: {
+          state_type: "ACTION",
+          exp: `foo`,
+          transitions: {
+            "*": "VIEW_Other",
+          },
+        },
+        END_back: {
+          state_type: "END",
+          outcome: "BACK",
+        },
+        END_done: {
+          state_type: "END",
+          outcome: "doneWithFlow",
+        },
+      },
+    },
+    views: [],
+  });
+});
+
+test("compiles schema when added to flow", async () => {
+  const compiler = new DSLCompiler();
+  const result = await compiler.serialize({
+    id: "test-flow",
+    views: [],
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "test",
+          transitions: {
+            "*": "END_Done",
+          },
+        },
+      },
+    },
+    schema: {
+      foo: {
+        bar: {
+          baz: {
+            type: "StringType",
+            validation: [
+              {
+                type: "required",
+              },
+            ],
+          },
+        },
+      },
+    },
+  });
+
+  expect(result).toBeDefined();
+  expect(result?.value).toMatchInlineSnapshot(`
+    {
+      "id": "test-flow",
+      "navigation": {
+        "BEGIN": "FLOW_1",
+        "FLOW_1": {
+          "VIEW_1": {
+            "ref": "test",
+            "state_type": "VIEW",
+            "transitions": {
+              "*": "END_Done",
+            },
+          },
+          "startState": "VIEW_1",
+        },
+      },
+      "schema": {
+        "ROOT": {
+          "foo": {
+            "type": "fooType",
+          },
+        },
+        "barType": {
+          "baz": {
+            "type": "StringType",
+            "validation": [
+              {
+                "type": "required",
+              },
+            ],
+          },
+        },
+        "fooType": {
+          "bar": {
+            "type": "barType",
+          },
+        },
+      },
+      "views": [],
+    }
+  `);
+});
+
+test("compiles mixed DSL and non-DSL views", async () => {
+  const compiler = new DSLCompiler();
+  const dslView = (
+    <object>
+      <property name="foo">bar</property>
+    </object>
+  );
+  const result = await compiler.serialize({
+    id: "test-flow",
+    views: [
+      {
+        id: "foo",
+        type: "bar",
+        info: {
+          asset: {
+            id: "info",
+            type: "baz",
+          },
+        },
+      },
+      dslView,
+    ],
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_1",
+        VIEW_1: {
+          state_type: "VIEW",
+          ref: "test",
+          transitions: {
+            "*": "END_Done",
+          },
+        },
+      },
+    },
+  });
+
+  expect(result).toBeDefined();
+  expect(result?.value).toMatchInlineSnapshot(`
+    {
+      "id": "test-flow",
+      "navigation": {
+        "BEGIN": "FLOW_1",
+        "FLOW_1": {
+          "VIEW_1": {
+            "ref": "test",
+            "state_type": "VIEW",
+            "transitions": {
+              "*": "END_Done",
+            },
+          },
+          "startState": "VIEW_1",
+        },
+      },
+      "views": [
+        {
+          "id": "foo",
+          "info": {
+            "asset": {
+              "id": "info",
+              "type": "baz",
+            },
+          },
+          "type": "bar",
+        },
+        {
+          "foo": "bar",
+        },
+      ],
+    }
+  `);
+});