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

package/src/compiler/__tests__/schema.test.ts

@@ -0,0 +1,127 @@
+import { test, expect } from "vitest";
+import { SchemaGenerator } from "../schema";
+
+const BasicDataType = {
+  type: "StringType",
+};
+
+test("generates proper schema", () => {
+  const schemaGenerator = new SchemaGenerator();
+
+  expect(
+    schemaGenerator.toSchema({
+      foo: {
+        bar: {
+          baz: BasicDataType,
+        },
+      },
+      other: [
+        {
+          item1: BasicDataType,
+        },
+      ],
+    })
+  ).toStrictEqual({
+    ROOT: {
+      foo: {
+        type: "fooType",
+      },
+      other: {
+        type: "otherType",
+        isArray: true,
+      },
+    },
+    fooType: {
+      bar: {
+        type: "barType",
+      },
+    },
+    barType: {
+      baz: {
+        type: "StringType",
+      },
+    },
+    otherType: {
+      item1: {
+        type: "StringType",
+      },
+    },
+  });
+});
+
+test("Edge Case - two artificial array nodes", () => {
+  const schemaGenerator = new SchemaGenerator();
+
+  expect(
+    schemaGenerator.toSchema({
+      foo: {
+        bar: [
+          {
+            baa: BasicDataType,
+          },
+        ],
+      },
+      other: {
+        bar: [
+          {
+            bab: BasicDataType,
+          },
+        ],
+      },
+      another: {
+        bar: [
+          {
+            bac: BasicDataType,
+          },
+        ],
+      },
+    })
+  ).toMatchInlineSnapshot(`
+    {
+      "ROOT": {
+        "another": {
+          "type": "anotherType",
+        },
+        "foo": {
+          "type": "fooType",
+        },
+        "other": {
+          "type": "otherType",
+        },
+      },
+      "anotherType": {
+        "bar": {
+          "isArray": true,
+          "type": "barType",
+        },
+      },
+      "barType": {
+        "bac": {
+          "type": "StringType",
+        },
+      },
+      "barType2": {
+        "bab": {
+          "type": "StringType",
+        },
+      },
+      "barType3": {
+        "baa": {
+          "type": "StringType",
+        },
+      },
+      "fooType": {
+        "bar": {
+          "isArray": true,
+          "type": "barType3",
+        },
+      },
+      "otherType": {
+        "bar": {
+          "isArray": true,
+          "type": "barType2",
+        },
+      },
+    }
+  `);
+});

package/src/compiler/compiler.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-import type { JsonType } from 'react-json-reconciler';
-import { SourceMapGenerator, SourceMapConsumer } from 'source-map-js';
-import { render } from 'react-json-reconciler';
-import type { Flow, View, Navigation as PlayerNav } from '@player-ui/types';
+import React from "react";
+import type { JsonType } from "react-json-reconciler";
+import { SourceMapGenerator, SourceMapConsumer } from "source-map-js";
+import { render } from "react-json-reconciler";
+import type { Flow, View, Navigation as PlayerNav } from "@player-ui/types";
 import {
   AsyncSeriesHook,
   AsyncSeriesWaterfallHook,
   SyncHook,
-} from 'tapable-ts';
-import { fingerprintContent } from './utils';
+} from "tapable-ts";
+import { fingerprintContent } from "./utils";
 import type {
   LoggingInterface,
   CompilerReturn,
   SerializeContext,
-} from './types';
-import type { Navigation } from '../types';
-import { SchemaGenerator } from './schema';
+} from "./types";
+import type { Navigation } from "../types";
+import { SchemaGenerator } from "./schema";
 
 /**
  * Argument passed to the DSLCompiler onEnd hook
@@ -32,7 +32,7 @@ const parseNavigationExpressions = (nav: Navigation): PlayerNav => {
   function replaceExpWithStr(obj: any): any {
     /** call toValue if BindingTemplateInstance otherwise continue  */
     function convExp(value: any): any {
-      return value && typeof value === 'object' && value.__type === 'expression'
+      return value && typeof value === "object" && value.__type === "expression"
         ? value.toValue() // exp, onStart, and onEnd don't need to be wrapped in @[]@
         : replaceExpWithStr(value);
     }
@@ -41,10 +41,13 @@ const parseNavigationExpressions = (nav: Navigation): PlayerNav => {
       return obj.map(convExp);
     }
 
-    if (typeof obj === 'object') {
-      return Object.fromEntries(
-        Object.entries(obj).map(([key, value]) => [key, convExp(value)])
-      );
+    if (typeof obj === "object") {
+      const copy = { ...obj };
+      for (const [key, value] of Object.entries(copy)) {
+        copy[key] = convExp(value);
+      }
+
+      return copy;
     }
 
     return obj;
@@ -74,17 +77,17 @@ const mergeSourceMaps = (
   const generator = new SourceMapGenerator();
   sourceMaps.forEach(({ sourceMap, offsetIndexSearch, source }) => {
     const generatedLineOffset = generated
-      .split('\n')
+      .split("\n")
       .findIndex((line) => line.includes(offsetIndexSearch));
 
     const sourceLineOffset = source
-      .split('\n')
+      .split("\n")
       .findIndex((line) => line.includes(offsetIndexSearch));
 
     const lineOffset = generatedLineOffset - sourceLineOffset;
 
-    const generatedLine = generated.split('\n')[generatedLineOffset];
-    const sourceLine = source.split('\n')[sourceLineOffset];
+    const generatedLine = generated.split("\n")[generatedLineOffset];
+    const sourceLine = source.split("\n")[sourceLineOffset];
 
     const generatedColumn = generatedLine.indexOf(offsetIndexSearch);
     const sourceColumn = sourceLine.indexOf(offsetIndexSearch);
@@ -123,6 +126,8 @@ export class DSLCompiler {
     onEnd: new AsyncSeriesHook<[OnEndArg]>(),
   };
 
+  private schemaGenerator?: SchemaGenerator;
+
   constructor(logger?: LoggingInterface) {
     this.logger = logger ?? console;
   }
@@ -131,17 +136,19 @@ export class DSLCompiler {
   async serialize(
     value: unknown,
     context?: SerializeContext
-  ): Promise<CompilerReturn | undefined> {
-    if (typeof value !== 'object' || value === null) {
-      throw new Error('Unable to serialize non-object');
+  ): Promise<CompilerReturn> {
+    if (typeof value !== "object" || value === null) {
+      throw new Error("Unable to serialize non-object");
     }
 
     const type = context?.type ? context.type : fingerprintContent(value);
 
-    const schemaGenerator = new SchemaGenerator(this.logger);
-    this.hooks.schemaGenerator.call(schemaGenerator);
+    if (!this.schemaGenerator) {
+      this.schemaGenerator = new SchemaGenerator(this.logger);
+      this.hooks.schemaGenerator.call(this.schemaGenerator);
+    }
 
-    if (type === 'view') {
+    if (type === "view") {
       const { jsonValue, sourceMap } = await render(value as any, {
         collectSourceMap: true,
       });
@@ -152,7 +159,7 @@ export class DSLCompiler {
       };
     }
 
-    if (type === 'flow') {
+    if (type === "flow") {
       // Source maps from all the nested views
       // Merge these together before returning
       const allSourceMaps: SourceMapList = [];
@@ -173,7 +180,7 @@ export class DSLCompiler {
               // Find the line that is the id of the view
               // Use that as the identifier for the sourcemap offset calc
               const searchIdLine = stringValue
-                .split('\n')
+                .split("\n")
                 .find((line) =>
                   line.includes(
                     `"id": "${(jsonValue as Record<string, string>).id}"`
@@ -197,15 +204,15 @@ export class DSLCompiler {
       )) as View[];
 
       // Go through the flow and sub out any view refs that are react elements w/ the right id
-      if ('navigation' in value) {
+      if ("navigation" in value) {
         Object.entries((value as Flow).navigation).forEach(([navKey, node]) => {
-          if (typeof node === 'object') {
+          if (typeof node === "object") {
             Object.entries(node).forEach(([nodeKey, flowNode]) => {
               if (
                 flowNode &&
-                typeof flowNode === 'object' &&
-                'state_type' in flowNode &&
-                flowNode.state_type === 'VIEW' &&
+                typeof flowNode === "object" &&
+                "state_type" in flowNode &&
+                flowNode.state_type === "VIEW" &&
                 React.isValidElement(flowNode.ref)
               ) {
                 const actualViewIndex = (value as Flow).views?.indexOf?.(
@@ -222,16 +229,16 @@ export class DSLCompiler {
             });
           }
         });
+      }
 
-        if ('schema' in copiedValue) {
-          copiedValue.schema = schemaGenerator.toSchema(copiedValue.schema);
-        }
-
-        copiedValue.navigation = parseNavigationExpressions(
-          copiedValue.navigation
-        );
+      if ("schema" in copiedValue) {
+        copiedValue.schema = this.schemaGenerator.toSchema(copiedValue.schema);
       }
 
+      copiedValue.navigation = parseNavigationExpressions(
+        copiedValue.navigation
+      );
+
       if (value) {
         const postProcessFlow = await this.hooks.postProcessFlow.call(
           copiedValue
@@ -247,12 +254,9 @@ export class DSLCompiler {
       }
     }
 
-    if (type === 'schema') {
-      return {
-        value: schemaGenerator.toSchema(value) as JsonType,
-      };
-    }
-
-    throw Error('DSL Compiler Error: Unable to determine type to compile as');
+    // Type has been set to "schema"
+    return {
+      value: this.schemaGenerator.toSchema(value) as JsonType,
+    };
   }
 }

package/src/compiler/index.ts

@@ -1,3 +1,3 @@
-export * from './compiler';
-export * from './types';
-export * from './utils';
+export * from "./compiler";
+export * from "./types";
+export * from "./utils";

package/src/compiler/schema.ts

@@ -1,20 +1,14 @@
-import type { Schema, Language } from '@player-ui/types';
-import { dequal } from 'dequal';
-import { SyncWaterfallHook } from 'tapable-ts';
-import type { LoggingInterface } from '..';
-import { binding as b } from '..';
-import type { BindingTemplateInstance } from '../string-templates';
+import type { Schema, Language } from "@player-ui/types";
+import { dequal } from "dequal";
+import { SyncWaterfallHook } from "tapable-ts";
+import type { LoggingInterface } from "..";
+import { binding as b } from "..";
+import type { BindingTemplateInstance } from "../string-templates";
 
-const bindingSymbol = Symbol('binding');
+const bindingSymbol = Symbol("binding");
 
-export const SchemaTypeName = Symbol('Schema Rename');
-
-interface GeneratedDataType {
-  /** The SchemaNode that was generated */
-  node: SchemaNode;
-  /** How many times it has been generated */
-  count: number;
-}
+/** Symbol to indicate that a schema node should be generated with a different name */
+export const SchemaTypeName = Symbol("Schema Rename");
 
 interface SchemaChildren {
   /** Object property that will be used to create the intermediate type */
@@ -29,6 +23,13 @@ type SchemaNode = (Schema.DataType | Language.DataTypeRef) & {
   [SchemaTypeName]?: string;
 };
 
+interface GeneratedDataType {
+  /** The SchemaNode that was generated */
+  node: SchemaNode;
+  /** How many times it has been generated */
+  count: number;
+}
+
 /**
  * Type Guard for the `Schema.DataType` and `Language.DataTypeRef` type
  * A bit hacky but since `Schema.Schema` must have a `Schema.DataType` as
@@ -113,6 +114,7 @@ export class SchemaGenerator {
     }
 
     let intermediateType;
+    let child;
 
     if (Array.isArray(subType)) {
       if (subType.length > 1) {
@@ -123,20 +125,22 @@ export class SchemaGenerator {
 
       const subTypeName = subType[0][SchemaTypeName] ?? property;
       intermediateType = this.makePlaceholderArrayType(subTypeName);
-      this.children.push({ name: intermediateType.type, child: subType[0] });
+      [child] = subType;
     } else {
       const subTypeName = subType[SchemaTypeName] ?? property;
       intermediateType = this.makePlaceholderType(subTypeName);
-      this.children.push({ name: intermediateType.type, child: subType });
+      child = subType;
     }
 
+    this.children.push({ name: intermediateType.type, child });
+
     if (this.generatedDataTypes.has(intermediateType.type)) {
       const generatedType = this.generatedDataTypes.get(
         intermediateType.type
       ) as GeneratedDataType;
       if (
         !dequal(
-          subType,
+          child,
           this.generatedDataTypes.get(intermediateType.type)?.node as object
         )
       ) {
@@ -150,7 +154,7 @@ export class SchemaGenerator {
         );
         intermediateType = newIntermediateType;
         this.children.pop();
-        this.children.push({ name: intermediateType.type, child: subType });
+        this.children.push({ name: intermediateType.type, child });
       }
     }
 
@@ -200,7 +204,7 @@ export type MakeBindingRefable<T> = {
  */
 export function makeBindingsForObject<Type>(
   obj: Type,
-  arrayAccessorKeys = ['_index_']
+  arrayAccessorKeys = ["_index_"]
 ): MakeBindingRefable<Type> {
   /** Proxy to track binding callbacks */
   const accessor = (paths: string[]) => {
@@ -218,13 +222,13 @@ export function makeBindingsForObject<Type>(
         if (
           Array.isArray(target[key]) &&
           target[key].length > 0 &&
-          target[key].every((it: any) => typeof it !== 'object')
+          target[key].every((it: any) => typeof it !== "object")
         ) {
           return [...target[key]];
         }
 
         if (!bindingMap.has(target)) {
-          bindingMap.set(target, b`${paths.join('.')}`);
+          bindingMap.set(target, b`${paths.join(".")}`);
         }
 
         if (key === bindingSymbol) {
@@ -233,12 +237,12 @@ export function makeBindingsForObject<Type>(
 
         if (
           Array.isArray(target) &&
-          (arrayAccessorKeys.includes(key) || typeof key === 'number')
+          (arrayAccessorKeys.includes(key) || typeof key === "number")
         ) {
           return new Proxy(target[0], accessor(paths.concat([key])));
         }
 
-        if (bindingKeys.includes(key) && typeof target[key] === 'object') {
+        if (bindingKeys.includes(key) && typeof target[key] === "object") {
           return new Proxy(target[key], accessor(paths.concat([key])));
         }
 
@@ -260,7 +264,7 @@ export const getBindingFromObject = (obj: any) => {
     throw new Error(`Unable to get binding for ${obj}`);
   }
 
-  return b`${baseBindings.join('.')}`;
+  return b`${baseBindings.join(".")}`;
 };
 
 /**

package/src/compiler/types.ts

@@ -7,13 +7,13 @@ import type {
   NavigationFlow,
   NavigationFlowState,
   NavigationFlowViewState,
-} from '@player-ui/types';
-import type { JsonType } from 'react-json-reconciler';
-import type { RemoveUnknownIndex, AddUnknownIndex } from '../types';
+} from "@player-ui/types";
+import type { JsonType } from "react-json-reconciler";
+import type { RemoveUnknownIndex, AddUnknownIndex } from "../types";
 
 export type NavigationFlowReactViewState = Omit<
   NavigationFlowViewState,
-  'ref'
+  "ref"
 > & {
   /** The view element */
   ref: React.ReactElement | string;
@@ -25,7 +25,7 @@ export type NavFlowState =
 
 export type NavigationFlowWithReactView = Pick<
   NavigationFlow,
-  'startState' | 'onStart' | 'onEnd'
+  "startState" | "onStart" | "onEnd"
 > & {
   [key: string]:
     | undefined
@@ -35,12 +35,12 @@ export type NavigationFlowWithReactView = Pick<
     | NavFlowState;
 };
 
-export type NavigationWithReactViews = Pick<Navigation, 'BEGIN'> &
+export type NavigationWithReactViews = Pick<Navigation, "BEGIN"> &
   Record<string, string | NavigationFlowWithReactView>;
 
 export type FlowWithoutUnknown = RemoveUnknownIndex<Flow>;
 export type FlowWithReactViews = AddUnknownIndex<
-  Omit<FlowWithoutUnknown, 'views' | 'navigation'> & {
+  Omit<FlowWithoutUnknown, "views" | "navigation"> & {
     /** An array of JSX view elements */
     views?: Array<React.ReactElement>;
 
@@ -49,13 +49,16 @@ export type FlowWithReactViews = AddUnknownIndex<
   }
 >;
 
-export type DSLFlow = FlowWithReactViews;
+export type DSLFlow = Omit<FlowWithReactViews, "schema"> & {
+  /** A DSL compliant schema */
+  schema?: DSLSchema;
+};
 
 export interface DSLSchema {
   [key: string]: Schema.DataType | DSLSchema;
 }
 
-export type SerializeType = 'view' | 'flow' | 'schema' | 'navigation';
+export type SerializeType = "view" | "flow" | "schema" | "navigation";
 
 export type SerializablePlayerExportTypes =
   | React.ReactElement
@@ -63,7 +66,7 @@ export type SerializablePlayerExportTypes =
   | Schema.Schema
   | Navigation;
 
-export type LoggingInterface = Pick<Console, 'warn' | 'error' | 'log'>;
+export type LoggingInterface = Pick<Console, "warn" | "error" | "log">;
 
 export type CompilationResult = {
   /** What type of file is generated */
@@ -83,10 +86,10 @@ export type CompilerReturn = {
 };
 
 /** The different type of default content items the compiler handles */
-const DefaultCompilerContentTypes = ['view', 'flow', 'schema'] as const;
+const DefaultCompilerContentTypes = ["view", "flow", "schema"] as const;
 
 export type DefaultCompilerContentType =
-  typeof DefaultCompilerContentTypes[number];
+  (typeof DefaultCompilerContentTypes)[number];
 
 /** Helper function to determine whether a content type is compiler default */
 export function isDefaultCompilerContentType(

package/src/compiler/utils.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { DefaultCompilerContentType } from './types';
+import React from "react";
+import type { DefaultCompilerContentType } from "./types";
 
 /** Basic way of identifying the type of file based on the default content export */
 export const fingerprintContent = (
@@ -8,15 +8,15 @@ export const fingerprintContent = (
 ): DefaultCompilerContentType | undefined => {
   if (content !== null || content !== undefined) {
     if (React.isValidElement(content as any)) {
-      return 'view';
+      return "view";
     }
 
-    if (typeof content === 'object' && 'navigation' in (content as any)) {
-      return 'flow';
+    if (typeof content === "object" && "navigation" in (content as any)) {
+      return "flow";
     }
 
-    if (!filename || filename.includes('schema')) {
-      return 'schema';
+    if (!filename || filename.includes("schema")) {
+      return "schema";
     }
   }
 };

package/src/components.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import type { ObjectNode, PropertyNode } from 'react-json-reconciler';
-import mergeRefs from 'react-merge-refs';
-import type { View as ViewType } from '@player-ui/types';
-import type { PlayerApplicability, WithChildren } from './types';
+import React from "react";
+import type { ObjectNode, PropertyNode } from "react-json-reconciler";
+import mergeRefs from "react-merge-refs";
+import type { View as ViewType } from "@player-ui/types";
+import type { PlayerApplicability, WithChildren } from "./types";
 import {
   IDProvider,
   IDSuffixProvider,
   IndexSuffixStopContext,
   OptionalIDSuffixProvider,
   useGetIdPrefix,
-} from './auto-id';
+} from "./auto-id";
 import {
   normalizeText,
   normalizeToCollection,
   toJsonElement,
   toJsonProperties,
   flattenChildren,
-} from './utils';
+} from "./utils";
 
 export type AssetProps = PlayerApplicability & {
   /** id of the asset */
@@ -58,8 +58,8 @@ export const SlotContext = React.createContext<
  */
 export const AssetWrapper = React.forwardRef<
   ObjectNode,
-  WithChildren<{ [key: string]: any }>
->((props, ref) => {
+  WithChildren<{ [key: string]: unknown }>
+>(function AssetWrapper(props, ref) {
   const { children, ...rest } = props;
 
   return (
@@ -109,7 +109,7 @@ export const Asset = React.forwardRef<ObjectNode, AssetProps>((props, ref) => {
                 <property name="applicability">
                   <value
                     value={
-                      typeof applicability === 'boolean'
+                      typeof applicability === "boolean"
                         ? applicability
                         : applicability.toValue()
                     }
@@ -126,6 +126,8 @@ export const Asset = React.forwardRef<ObjectNode, AssetProps>((props, ref) => {
   );
 });
 
+Asset.displayName = "Asset";
+
 Asset.defaultProps = {
   id: undefined,
   children: undefined,
@@ -139,8 +141,8 @@ export const View = React.forwardRef<ObjectNode, AssetProps & ViewType>(
       <Asset ref={ref} {...rest}>
         {validation && (
           <property key="validation" name="validation">
-            {toJsonElement(validation, 'validation', {
-              propertiesToSkip: ['ref'],
+            {toJsonElement(validation, "validation", {
+              propertiesToSkip: ["ref"],
             })}
           </property>
         )}
@@ -150,6 +152,8 @@ export const View = React.forwardRef<ObjectNode, AssetProps & ViewType>(
   }
 );
 
+View.displayName = "View";
+
 View.defaultProps = {
   id: undefined,
   children: undefined,
@@ -243,6 +247,7 @@ export function createSlot<SlotProps = unknown>(options: {
   /** A component to create a collection asset is we get an array but need a single element */
   CollectionComp?: React.ComponentType;
 }) {
+  // eslint-disable-next-line react/display-name
   return (
     props: {
       /** An object to include in this property */