@player-tools/dsl 0.4.0-next.2 → 0.4.0-next.4

package/src/compiler/compiler.ts

@@ -3,11 +3,24 @@ 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 { SyncHook } from 'tapable-ts';
-import type { SerializeType } from './types';
+import {
+  AsyncSeriesHook,
+  AsyncSeriesWaterfallHook,
+  SyncHook,
+} from 'tapable-ts';
+import type { LoggingInterface, SerializeType } from './types';
 import type { Navigation } from '../types';
 import { SchemaGenerator } from './schema';
 
+/**
+ * Argument passed to the DSLCompiler onEnd hook
+ * Defined as an object so additional fields can be added later without breaking API
+ * */
+export interface OnEndArg {
+  /** target output directory **/
+  output: string;
+}
+
 /** Recursively find BindingTemplateInstance and call toValue on them */
 const parseNavigationExpressions = (nav: Navigation): PlayerNav => {
   /** Same as above but signature changed */
@@ -93,10 +106,22 @@ const mergeSourceMaps = (
 
 /** A compiler for transforming DSL content into JSON */
 export class DSLCompiler {
+  public readonly logger: LoggingInterface;
   public hooks = {
+    // Hook to access the schema generator instance when initialized
     schemaGenerator: new SyncHook<[SchemaGenerator]>(),
+    // Hook to access pre-compilation object
+    preProcessFlow: new AsyncSeriesWaterfallHook<[object]>(),
+    // Hook to access post-compilation Flow before output is written
+    postProcessFlow: new AsyncSeriesWaterfallHook<[Flow]>(),
+    // Hook called after all files are compiled. Revives the output directory
+    onEnd: new AsyncSeriesHook<[OnEndArg]>(),
   };
 
+  constructor(logger?: LoggingInterface) {
+    this.logger = logger ?? console;
+  }
+
   /** Convert an object (flow, view, schema, etc) into it's JSON representation */
   async serialize(value: unknown): Promise<{
     /** the JSON value of the source */
@@ -112,6 +137,9 @@ export class DSLCompiler {
       throw new Error('Unable to serialize non-object');
     }
 
+    const schemaGenerator = new SchemaGenerator(this.logger);
+    this.hooks.schemaGenerator.call(schemaGenerator);
+
     if (React.isValidElement(value)) {
       const { jsonValue, sourceMap } = await render(value, {
         collectSourceMap: true,
@@ -124,14 +152,16 @@ export class DSLCompiler {
       };
     }
 
-    if ('navigation' in value) {
+    const preProcessedValue = await this.hooks.preProcessFlow.call(value);
+
+    if ('navigation' in preProcessedValue) {
       // Source maps from all the nested views
       // Merge these together before returning
       const allSourceMaps: SourceMapList = [];
 
       // Assume this is a flow
       const copiedValue: Flow = {
-        ...(value as any),
+        ...(preProcessedValue as any),
       };
 
       copiedValue.views = (await Promise.all(
@@ -165,31 +195,37 @@ 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) {
-        Object.entries((value as Flow).navigation).forEach(([navKey, node]) => {
-          if (typeof node === 'object') {
-            Object.entries(node).forEach(([nodeKey, flowNode]) => {
-              if (
-                flowNode &&
-                typeof flowNode === 'object' &&
-                'state_type' in flowNode &&
-                flowNode.state_type === 'VIEW' &&
-                React.isValidElement(flowNode.ref)
-              ) {
-                const actualViewIndex = (value as Flow).views?.indexOf?.(
-                  flowNode.ref as any
-                );
-
-                if (actualViewIndex !== undefined && actualViewIndex > -1) {
-                  const actualId = copiedValue.views?.[actualViewIndex]?.id;
-
-                  (copiedValue as any).navigation[navKey][nodeKey].ref =
-                    actualId;
+      if ('navigation' in preProcessedValue) {
+        Object.entries((preProcessedValue as Flow).navigation).forEach(
+          ([navKey, node]) => {
+            if (typeof node === 'object') {
+              Object.entries(node).forEach(([nodeKey, flowNode]) => {
+                if (
+                  flowNode &&
+                  typeof flowNode === 'object' &&
+                  'state_type' in flowNode &&
+                  flowNode.state_type === 'VIEW' &&
+                  React.isValidElement(flowNode.ref)
+                ) {
+                  const actualViewIndex = (
+                    preProcessedValue as Flow
+                  ).views?.indexOf?.(flowNode.ref as any);
+
+                  if (actualViewIndex !== undefined && actualViewIndex > -1) {
+                    const actualId = copiedValue.views?.[actualViewIndex]?.id;
+
+                    (copiedValue as any).navigation[navKey][nodeKey].ref =
+                      actualId;
+                  }
                 }
-              }
-            });
+              });
+            }
           }
-        });
+        );
+
+        if ('schema' in preProcessedValue) {
+          copiedValue.schema = schemaGenerator.toSchema(copiedValue.schema);
+        }
 
         copiedValue.navigation = parseNavigationExpressions(
           copiedValue.navigation
@@ -197,8 +233,12 @@ export class DSLCompiler {
       }
 
       if (value) {
+        const postProcessFlow = await this.hooks.postProcessFlow.call(
+          copiedValue
+        );
+
         return {
-          value: copiedValue as JsonType,
+          value: postProcessFlow as JsonType,
           contentType: 'flow',
           sourceMap: mergeSourceMaps(
             allSourceMaps,
@@ -208,11 +248,8 @@ export class DSLCompiler {
       }
     }
 
-    const schemaGenerator = new SchemaGenerator();
-    this.hooks.schemaGenerator.call(schemaGenerator);
-
     return {
-      value: schemaGenerator.toSchema(value) as JsonType,
+      value: schemaGenerator.toSchema(preProcessedValue) as JsonType,
       contentType: 'schema',
     };
   }

package/src/compiler/schema.ts

@@ -1,7 +1,7 @@
 import type { Schema, Language } from '@player-ui/types';
-import signale from 'signale';
 import { dequal } from 'dequal';
 import { SyncWaterfallHook } from 'tapable-ts';
+import type { LoggingInterface } from '..';
 import { binding as b } from '..';
 import type { BindingTemplateInstance } from '../string-templates';
 
@@ -9,6 +9,13 @@ 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;
+}
+
 interface SchemaChildren {
   /** Object property that will be used to create the intermediate type */
   name: string;
@@ -36,7 +43,8 @@ const isTypeDef = (property: SchemaNode): property is Schema.DataType => {
  */
 export class SchemaGenerator {
   private children: Array<SchemaChildren>;
-  private generatedDataTypeNames: Map<string, SchemaNode>;
+  private generatedDataTypes: Map<string, GeneratedDataType>;
+  private logger: LoggingInterface;
 
   public hooks = {
     createSchemaNode: new SyncWaterfallHook<
@@ -47,9 +55,10 @@ export class SchemaGenerator {
     >(),
   };
 
-  constructor() {
+  constructor(logger?: LoggingInterface) {
     this.children = [];
-    this.generatedDataTypeNames = new Map();
+    this.generatedDataTypes = new Map();
+    this.logger = logger ?? console;
   }
 
   /**
@@ -62,12 +71,12 @@ export class SchemaGenerator {
     };
 
     this.children = [];
-    this.generatedDataTypeNames.clear();
+    this.generatedDataTypes.clear();
 
     Object.keys(schema).forEach((property) => {
       const subType = schema[property] as SchemaNode;
       newSchema.ROOT[property] = this.hooks.createSchemaNode.call(
-        this.processChildren(property, subType),
+        this.processChild(property, subType),
         subType as any
       );
     });
@@ -84,7 +93,7 @@ export class SchemaGenerator {
       Object.keys(child).forEach((property) => {
         const subType = (child as any)[property] as SchemaNode;
         typeDef[property] = this.hooks.createSchemaNode.call(
-          this.processChildren(property, subType),
+          this.processChild(property, subType),
           subType as any
         );
       });
@@ -98,10 +107,7 @@ export class SchemaGenerator {
    * Processes the children of an object Node
    * Newly discovered children get added to the provided array
    */
-  private processChildren(
-    property: string,
-    subType: SchemaNode
-  ): Schema.DataType {
+  private processChild(property: string, subType: SchemaNode): Schema.DataType {
     if (isTypeDef(subType)) {
       return subType;
     }
@@ -110,7 +116,7 @@ export class SchemaGenerator {
 
     if (Array.isArray(subType)) {
       if (subType.length > 1) {
-        signale.warn(
+        this.logger.warn(
           `Type ${property} has multiple types in array, should only contain one top level object type. Only taking first defined type`
         );
       }
@@ -124,23 +130,34 @@ export class SchemaGenerator {
       this.children.push({ name: intermediateType.type, child: subType });
     }
 
-    if (this.generatedDataTypeNames.has(intermediateType.type)) {
+    if (this.generatedDataTypes.has(intermediateType.type)) {
+      const generatedType = this.generatedDataTypes.get(
+        intermediateType.type
+      ) as GeneratedDataType;
       if (
         !dequal(
           subType,
-          this.generatedDataTypeNames.get(intermediateType.type) as object
+          this.generatedDataTypes.get(intermediateType.type)?.node as object
         )
       ) {
-        throw new Error(
-          `Error: Generated two intermediate types with the name: ${intermediateType.type} that are of different shapes`
+        generatedType.count += 1;
+        const newIntermediateType = {
+          ...intermediateType,
+          type: `${intermediateType.type}${generatedType.count}`,
+        };
+        this.logger.warn(
+          `WARNING: Generated two intermediate types with the name: ${intermediateType.type} that are of different shapes, using artificial type ${newIntermediateType.type}`
         );
+        intermediateType = newIntermediateType;
+        this.children.pop();
+        this.children.push({ name: intermediateType.type, child: subType });
       }
-
-      // remove last added type since we don't need to reprocess it
-      this.children.pop();
     }
 
-    this.generatedDataTypeNames.set(intermediateType.type, subType);
+    this.generatedDataTypes.set(intermediateType.type, {
+      node: subType,
+      count: 1,
+    });
     return intermediateType;
   }
 

package/src/compiler/types.ts

@@ -1,14 +1,59 @@
-import type { Schema, Navigation, Flow } from '@player-ui/types';
+import type {
+  Schema,
+  Navigation,
+  Flow,
+  Expression,
+  ExpressionObject,
+  NavigationFlow,
+  NavigationFlowState,
+  NavigationFlowViewState,
+} from '@player-ui/types';
 import type { RemoveUnknownIndex, AddUnknownIndex } from '../types';
 
+export type NavigationFlowReactViewState = Omit<
+  NavigationFlowViewState,
+  'ref'
+> & {
+  /** The view element */
+  ref: React.ReactElement | string;
+};
+
+export type NavFlowState =
+  | Exclude<NavigationFlowState, NavigationFlowViewState>
+  | NavigationFlowReactViewState;
+
+export type NavigationFlowWithReactView = Pick<
+  NavigationFlow,
+  'startState' | 'onStart' | 'onEnd'
+> & {
+  [key: string]:
+    | undefined
+    | string
+    | Expression
+    | ExpressionObject
+    | NavFlowState;
+};
+
+export type NavigationWithReactViews = Pick<Navigation, 'BEGIN'> &
+  Record<string, string | NavigationFlowWithReactView>;
+
 export type FlowWithoutUnknown = RemoveUnknownIndex<Flow>;
 export type FlowWithReactViews = AddUnknownIndex<
-  Omit<FlowWithoutUnknown, 'views'> & {
+  Omit<FlowWithoutUnknown, 'views' | 'navigation'> & {
     /** An array of JSX view elements */
     views?: Array<React.ReactElement>;
+
+    /** The navigation element */
+    navigation?: NavigationWithReactViews;
   }
 >;
 
+export type DSLFlow = FlowWithReactViews;
+
+export interface DSLSchema {
+  [key: string]: Schema.DataType | DSLSchema;
+}
+
 export type SerializeType = 'view' | 'flow' | 'schema' | 'navigation';
 
 export type SerializablePlayerExportTypes =
@@ -16,3 +61,5 @@ export type SerializablePlayerExportTypes =
   | FlowWithReactViews
   | Schema.Schema
   | Navigation;
+
+export type LoggingInterface = Pick<Console, 'warn' | 'error' | 'log'>;

package/src/components.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import flattenChildren from 'react-flatten-children';
 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,
@@ -13,9 +14,24 @@ import {
 import {
   normalizeText,
   normalizeToCollection,
+  toJsonElement,
   toJsonProperties,
 } from './utils';
 
+export type AssetProps = PlayerApplicability & {
+  /** id of the asset */
+  id?: string;
+
+  /** the asset type */
+  type: string;
+
+  /** Any other properties on the asset */
+  children?: React.ReactNode;
+
+  /** other things that we don't know about */
+  [key: string]: unknown;
+};
+
 export const SlotContext = React.createContext<
   | {
       /** The property name for the slot */
@@ -64,22 +80,7 @@ export const GeneratedIDProperty = (props: {
 };
 
 /** An asset */
-export const Asset = React.forwardRef<
-  ObjectNode,
-  {
-    /** id of the asset */
-    id?: string;
-
-    /** the asset type */
-    type: string;
-
-    /** Any other properties on the asset */
-    children?: React.ReactNode;
-
-    /** other things that we don't know about */
-    [key: string]: unknown;
-  } & PlayerApplicability
->((props, ref) => {
+export const Asset = React.forwardRef<ObjectNode, AssetProps>((props, ref) => {
   const { id, type, applicability, children, ...rest } = props;
   const slotContext = React.useContext(SlotContext);
   const localRef = React.useRef<ObjectNode>(null);
@@ -110,7 +111,7 @@ export const Asset = React.forwardRef<
                     value={
                       typeof applicability === 'boolean'
                         ? applicability
-                        : applicability.toRefString()
+                        : applicability.toValue()
                     }
                   />
                 </property>
@@ -130,6 +131,30 @@ Asset.defaultProps = {
   children: undefined,
 };
 
+export const View = React.forwardRef<ObjectNode, AssetProps & ViewType>(
+  (props, ref) => {
+    const { validation, children, ...rest } = props;
+
+    return (
+      <Asset ref={ref} {...rest}>
+        {validation && (
+          <property key="validation" name="validation">
+            {toJsonElement(validation, 'validation', {
+              propertiesToSkip: ['ref'],
+            })}
+          </property>
+        )}
+        {children}
+      </Asset>
+    );
+  }
+);
+
+View.defaultProps = {
+  id: undefined,
+  children: undefined,
+};
+
 /** A component to generate a named property slot */
 export const Slot = (props: {
   /** The name of the slot */

package/src/string-templates/index.ts

@@ -177,5 +177,9 @@ export const expression = (
 export const isTemplateStringInstance = (
   val: unknown
 ): val is ExpressionTemplateInstance | BindingTemplateInstance => {
-  return typeof val === 'object' && (val as any)[OpaqueIdentifier] === true;
+  return (
+    val !== null &&
+    typeof val === 'object' &&
+    (val as any)[OpaqueIdentifier] === true
+  );
 };

package/src/template.tsx

@@ -11,6 +11,7 @@ import {
 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 */
@@ -30,6 +31,9 @@ export interface TemplateProps {
 
   /** The template value */
   children: React.ReactNode;
+
+  /** boolean that specifies whether template should recompute when data changes */
+  dynamic?: boolean;
 }
 
 /** Add a template instance to the object */
@@ -127,6 +131,7 @@ const getParentProperty = (node: JsonNode): PropertyNode | undefined => {
 /** A template allows users to dynamically map over an array of data */
 export const Template = (props: TemplateProps) => {
   const baseContext = React.useContext(TemplateContext);
+  const dynamicProp = props.dynamic ?? false;
   const [outputProp, setOutputProp] = React.useState<string | undefined>(
     props.output
   );
@@ -175,6 +180,9 @@ export const Template = (props: TemplateProps) => {
               <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>,

package/src/types.ts

@@ -79,3 +79,11 @@ export type Navigation = DeepReplace<
   Expression,
   ExpressionTemplateInstance | ExpressionTemplateInstance[] | Expression
 >;
+
+export interface toJsonOptions {
+  /**
+   * List of string keys that should not be parsed in a special way
+   * default is 'applicability'
+   */
+  propertiesToSkip?: string[];
+}

package/src/utils.tsx

@@ -3,6 +3,7 @@ import {
   isTemplateStringInstance,
   TemplateStringComponent,
 } 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> {
@@ -10,44 +11,60 @@ export function toArray<T>(val: T | Array<T>): Array<T> {
 }
 
 /** Create a component version  */
-export function toJsonElement(value: any, index?: number): React.ReactElement {
-  const keyProp = index === undefined ? null : { key: index };
+export function toJsonElement(
+  value: any,
+  indexOrKey?: number | string,
+  options?: toJsonOptions
+): React.ReactElement {
+  const indexProp = typeof indexOrKey === 'number' ? { key: indexOrKey } : null;
 
   if (Array.isArray(value)) {
     return (
-      <array {...keyProp}>
-        {value.map((item, idx) => toJsonElement(item, idx))}
+      <array {...indexProp}>
+        {value.map((item, idx) => toJsonElement(item, idx, options))}
       </array>
     );
   }
 
   /** Allow users to pass in BindingTemplateInstance and ExpressionTemplateInstance directly without turning them into strings first */
   if (isTemplateStringInstance(value)) {
-    return <value {...keyProp}>{value.toRefString()}</value>;
+    if (
+      typeof indexOrKey === 'string' &&
+      options?.propertiesToSkip?.includes(indexOrKey)
+    ) {
+      return <value {...indexProp}>{value.toValue()}</value>;
+    }
+
+    return <value {...indexProp}>{value.toRefString()}</value>;
   }
 
   if (typeof value === 'object' && value !== null) {
     return (
-      <obj {...keyProp}>
+      <obj {...indexProp}>
         {Object.keys(value).map((key) => (
           <property key={key} name={key}>
-            {toJsonElement(value[key])}
+            {toJsonElement(value[key], key, options)}
           </property>
         ))}
       </obj>
     );
   }
 
-  return <value {...keyProp} value={value} />;
+  return <value {...indexProp} value={value} />;
 }
 
 /** Create a fragment for the properties */
-export function toJsonProperties(value: Record<string, any>) {
-  return Object.keys(value).map((key) => (
-    <property key={key} name={key}>
-      {toJsonElement(value[key])}
-    </property>
-  ));
+export function toJsonProperties(
+  value: Record<string, any>,
+  options: toJsonOptions = { propertiesToSkip: ['applicability'] }
+) {
+  return Object.keys(value).map((key) => {
+    return (
+      <property key={key} name={key}>
+        {toJsonElement(value[key], key, options)}
+      </property>
+    );
+  });
 }
 
 /** Create a text asset if needed */