@player-tools/dsl 0.0.2-next.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@player-tools/dsl",
+  "version": "0.0.2-next.0",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "dependencies": {
+    "@player-ui/types": "^0.2.0",
+    "@types/mkdirp": "^1.0.2",
+    "@types/signale": "^1.4.2",
+    "chalk": "^4.0.1",
+    "command-line-application": "^0.10.1",
+    "fs-extra": "^10.0.0",
+    "globby": "^11.0.1",
+    "jsonc-parser": "^2.3.1",
+    "mkdirp": "^1.0.4",
+    "react-flatten-children": "^1.1.2",
+    "react-json-reconciler": "^2.0.0",
+    "react-merge-refs": "^1.1.0",
+    "source-map-js": "^1.0.2",
+    "signale": "^1.4.0",
+    "ts-node": "^10.4.0",
+    "typescript": "4.4.4",
+    "tapable-ts": "^0.1.0",
+    "dequal": "^2.0.2",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/player-ui/tools"
+  },
+  "bugs": {
+    "url": "https://github.com/player-ui/tools/issues"
+  },
+  "homepage": "https://player-ui.github.io",
+  "contributors": [
+    {
+      "name": "Ketan Reddy",
+      "url": "https://github.com/KetanReddy"
+    }
+  ]
+}

package/src/auto-id.tsx

@@ -0,0 +1,136 @@
+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');
+
+export const IndexSuffixStopContext = React.createContext<boolean>(false);
+
+/** Get the generated id */
+export const useGetIdPrefix = () => {
+  return React.useContext(IDSuffixContext);
+};
+
+/** Add a suffix to a generated id */
+export const IDSuffixProvider = (
+  props: WithChildren<{
+    /** The suffix to append */
+    suffix: string;
+  }>
+) => {
+  const currentPrefix = useGetIdPrefix();
+
+  return (
+    <IDSuffixContext.Provider
+      value={[
+        currentPrefix === 'root' ? undefined : currentPrefix,
+        props.suffix,
+      ]
+        .filter(Boolean)
+        .join('-')}
+    >
+      {props.children}
+    </IDSuffixContext.Provider>
+  );
+};
+
+/** Override the generated id with the supplied one */
+export const IDProvider = (
+  props: WithChildren<{
+    /** The new id to use  */
+    id?: string;
+  }>
+) => {
+  if (props.id) {
+    return (
+      <IDSuffixContext.Provider value={props.id}>
+        {props.children}
+      </IDSuffixContext.Provider>
+    );
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{props.children}</>;
+};
+
+/** Get the index of an item in a slot */
+export const useIndexInSlot = (ref: React.RefObject<JsonNode>) => {
+  const [index, setIndex] = React.useState(-1);
+  const slotContext = React.useContext(SlotContext);
+
+  React.useEffect(() => {
+    if (!slotContext?.isArray) {
+      throw new Error('Cannot get index in non-array slot');
+    }
+
+    if (ref.current && slotContext?.ref.current?.valueNode?.type === 'array') {
+      const allChildren = flattenNodes(
+        slotContext.ref.current.valueNode.children
+      );
+      const foundIndex = allChildren.indexOf(ref.current);
+
+      if (foundIndex !== index) {
+        setIndex(foundIndex);
+      }
+    }
+  }, [index, ref, slotContext?.isArray, slotContext?.ref]);
+
+  return index;
+};
+
+/** Add the index to the id path when in an array slot */
+export const IDSuffixIndexProvider = (
+  props: WithChildren<{
+    /** The ref to use */
+    wrapperRef: React.RefObject<JsonNode>;
+
+    /** if the suffix is in a template, the id to use */
+    templateIndex?: string;
+  }>
+) => {
+  const slotIndex = useIndexInSlot(props.wrapperRef);
+
+  const stopIndex = React.useContext(IndexSuffixStopContext);
+
+  if (stopIndex) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{props.children}</>;
+  }
+
+  return (
+    <IDSuffixProvider suffix={props.templateIndex ?? String(slotIndex)}>
+      <IndexSuffixStopContext.Provider value>
+        {props.children}
+      </IndexSuffixStopContext.Provider>
+    </IDSuffixProvider>
+  );
+};
+
+/** Wrap a slot with the index if in an array slot */
+export const OptionalIDSuffixProvider = (
+  props: WithChildren<{
+    /** The ref to walk upwards and use as an index */
+    wrapperRef: React.RefObject<JsonNode>;
+
+    /** if the suffix is in a template, the id to use */
+    templateIndex?: string;
+  }>
+) => {
+  const slotContext = React.useContext(SlotContext);
+
+  if (slotContext?.isArray) {
+    return (
+      <IDSuffixIndexProvider
+        wrapperRef={props.wrapperRef}
+        templateIndex={props.templateIndex}
+      >
+        {props.children}
+      </IDSuffixIndexProvider>
+    );
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{props.children}</>;
+};

package/src/compiler/compiler.ts

@@ -0,0 +1,219 @@
+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 { SyncHook } from 'tapable-ts';
+import type { SerializeType } from './types';
+import type { Navigation } from '../types';
+import { SchemaGenerator } from './schema';
+
+/** Recursively find BindingTemplateInstance and call toValue on them */
+const parseNavigationExpressions = (nav: Navigation): PlayerNav => {
+  /** Same as above but signature changed */
+  function replaceExpWithStr(obj: any): any {
+    /** call toValue if BindingTemplateInstance otherwise continue  */
+    function convExp(value: any): any {
+      return value && typeof value === 'object' && value.__type === 'expression'
+        ? value.toValue() // exp, onStart, and onEnd don't need to be wrapped in @[]@
+        : replaceExpWithStr(value);
+    }
+
+    if (Array.isArray(obj)) {
+      return obj.map(convExp);
+    }
+
+    if (typeof obj === 'object') {
+      return Object.fromEntries(
+        Object.entries(obj).map(([key, value]) => [key, convExp(value)])
+      );
+    }
+
+    return obj;
+  }
+
+  return replaceExpWithStr(nav);
+};
+
+type SourceMapList = Array<{
+  /** The mappings of the original */
+  sourceMap: string;
+  /**
+   * The id of the view we're indexing off of
+   * This should be a unique global identifier within the generated code
+   * e.g. `"id": "view_0",`
+   */
+  offsetIndexSearch: string;
+  /** The generated source that produced the map */
+  source: string;
+}>;
+
+/** Given a list of source maps for all generated views, merge them into 1 */
+const mergeSourceMaps = (
+  sourceMaps: SourceMapList,
+  generated: string
+): string => {
+  const generator = new SourceMapGenerator();
+  sourceMaps.forEach(({ sourceMap, offsetIndexSearch, source }) => {
+    const generatedLineOffset = generated
+      .split('\n')
+      .findIndex((line) => line.includes(offsetIndexSearch));
+
+    const sourceLineOffset = source
+      .split('\n')
+      .findIndex((line) => line.includes(offsetIndexSearch));
+
+    const lineOffset = generatedLineOffset - sourceLineOffset;
+
+    const generatedLine = generated.split('\n')[generatedLineOffset];
+    const sourceLine = source.split('\n')[sourceLineOffset];
+
+    const generatedColumn = generatedLine.indexOf(offsetIndexSearch);
+    const sourceColumn = sourceLine.indexOf(offsetIndexSearch);
+    const columnOffset = generatedColumn - sourceColumn;
+
+    const consumer = new SourceMapConsumer(JSON.parse(sourceMap));
+    consumer.eachMapping((mapping) => {
+      generator.addMapping({
+        generated: {
+          line: mapping.generatedLine + lineOffset,
+          column: mapping.generatedColumn + columnOffset,
+        },
+        original: {
+          line: mapping.originalLine,
+          column: mapping.originalColumn,
+        },
+        source: mapping.source,
+      });
+    });
+  });
+
+  return generator.toString();
+};
+
+/** A compiler for transforming DSL content into JSON */
+export class DSLCompiler {
+  public hooks = {
+    schemaGenerator: new SyncHook<[SchemaGenerator]>(),
+  };
+
+  /** Convert an object (flow, view, schema, etc) into it's JSON representation */
+  async serialize(value: unknown): Promise<{
+    /** the JSON value of the source */
+    value: JsonType | undefined;
+
+    /** the fingerprinted content type of the source */
+    contentType: SerializeType;
+
+    /** The sourcemap of the content */
+    sourceMap?: string;
+  }> {
+    if (typeof value !== 'object' || value === null) {
+      throw new Error('Unable to serialize non-object');
+    }
+
+    if (React.isValidElement(value)) {
+      const { jsonValue, sourceMap } = await render(value, {
+        collectSourceMap: true,
+      });
+
+      return {
+        value: jsonValue,
+        sourceMap,
+        contentType: 'view',
+      };
+    }
+
+    if ('navigation' in value) {
+      // 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),
+      };
+
+      copiedValue.views = (await Promise.all(
+        copiedValue?.views?.map(async (node: any) => {
+          const { jsonValue, sourceMap, stringValue } = await render(node, {
+            collectSourceMap: true,
+          });
+
+          if (sourceMap) {
+            // 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')
+              .find((line) =>
+                line.includes(
+                  `"id": "${(jsonValue as Record<string, string>).id}"`
+                )
+              );
+
+            if (searchIdLine) {
+              allSourceMaps.push({
+                sourceMap,
+                offsetIndexSearch: searchIdLine,
+                source: stringValue,
+              });
+            }
+          }
+
+          return jsonValue;
+        }) ?? []
+      )) 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;
+                }
+              }
+            });
+          }
+        });
+
+        copiedValue.navigation = parseNavigationExpressions(
+          copiedValue.navigation
+        );
+      }
+
+      if (value) {
+        return {
+          value: copiedValue as JsonType,
+          contentType: 'flow',
+          sourceMap: mergeSourceMaps(
+            allSourceMaps,
+            JSON.stringify(copiedValue, null, 2)
+          ),
+        };
+      }
+    }
+
+    const schemaGenerator = new SchemaGenerator();
+    this.hooks.schemaGenerator.call(schemaGenerator);
+
+    return {
+      value: schemaGenerator.toSchema(value) as JsonType,
+      contentType: 'schema',
+    };
+  }
+}

package/src/compiler/index.ts

@@ -0,0 +1,2 @@
+export * from './compiler';
+export * from './types';

package/src/compiler/schema.ts

@@ -0,0 +1,250 @@
+import type { Schema, Language } from '@player-ui/types';
+import signale from 'signale';
+import { dequal } from 'dequal';
+import { SyncWaterfallHook } from 'tapable-ts';
+import { binding as b } from '..';
+import type { BindingTemplateInstance } from '../string-templates';
+
+const bindingSymbol = Symbol('binding');
+
+export const SchemaTypeName = Symbol('Schema Rename');
+
+interface SchemaChildren {
+  /** Object property that will be used to create the intermediate type */
+  name: string;
+
+  /** Object properties children that will be parsed */
+  child: object;
+}
+
+type SchemaNode = (Schema.DataType | Language.DataTypeRef) & {
+  /** Overwrite the name of the generated type */
+  [SchemaTypeName]?: string;
+};
+
+/**
+ * Type Guard for the `Schema.DataType` and `Language.DataTypeRef` type
+ * A bit hacky but since `Schema.Schema` must have a `Schema.DataType` as
+ * the final product we have to call it that even if it is a `Language.DataTypeRef`
+ */
+const isTypeDef = (property: SchemaNode): property is Schema.DataType => {
+  return (property as Schema.DataType).type !== undefined;
+};
+
+/**
+ * Generator for `Schema.Schema` Objects
+ */
+export class SchemaGenerator {
+  private children: Array<SchemaChildren>;
+  private generatedDataTypeNames: Map<string, SchemaNode>;
+
+  public hooks = {
+    createSchemaNode: new SyncWaterfallHook<
+      [
+        node: Schema.DataType,
+        originalProperty: Record<string | symbol, unknown>
+      ]
+    >(),
+  };
+
+  constructor() {
+    this.children = [];
+    this.generatedDataTypeNames = new Map();
+  }
+
+  /**
+   * Converts an object to a `Schema.Schema` representation
+   * Note: uses iteration to prevent potentially very deep recursion on large objects
+   */
+  public toSchema = (schema: any): Schema.Schema => {
+    const newSchema: Schema.Schema = {
+      ROOT: {},
+    };
+
+    this.children = [];
+    this.generatedDataTypeNames.clear();
+
+    Object.keys(schema).forEach((property) => {
+      const subType = schema[property] as SchemaNode;
+      newSchema.ROOT[property] = this.hooks.createSchemaNode.call(
+        this.processChildren(property, subType),
+        subType as any
+      );
+    });
+
+    while (this.children.length > 0) {
+      const c = this.children.pop();
+      if (c === undefined) {
+        break;
+      }
+
+      const { name, child } = c;
+      const typeDef = {} as any;
+
+      Object.keys(child).forEach((property) => {
+        const subType = (child as any)[property] as SchemaNode;
+        typeDef[property] = this.hooks.createSchemaNode.call(
+          this.processChildren(property, subType),
+          subType as any
+        );
+      });
+      newSchema[name] = typeDef;
+    }
+
+    return newSchema;
+  };
+
+  /**
+   * Processes the children of an object Node
+   * Newly discovered children get added to the provided array
+   */
+  private processChildren(
+    property: string,
+    subType: SchemaNode
+  ): Schema.DataType {
+    if (isTypeDef(subType)) {
+      return subType;
+    }
+
+    let intermediateType;
+
+    if (Array.isArray(subType)) {
+      if (subType.length > 1) {
+        signale.warn(
+          `Type ${property} has multiple types in array, should only contain one top level object type. Only taking first defined type`
+        );
+      }
+
+      const subTypeName = subType[0][SchemaTypeName] ?? property;
+      intermediateType = this.makePlaceholderArrayType(subTypeName);
+      this.children.push({ name: intermediateType.type, child: subType[0] });
+    } else {
+      const subTypeName = subType[SchemaTypeName] ?? property;
+      intermediateType = this.makePlaceholderType(subTypeName);
+      this.children.push({ name: intermediateType.type, child: subType });
+    }
+
+    if (this.generatedDataTypeNames.has(intermediateType.type)) {
+      if (
+        !dequal(
+          subType,
+          this.generatedDataTypeNames.get(intermediateType.type) as object
+        )
+      ) {
+        throw new Error(
+          `Error: Generated two intermediate types with the name: ${intermediateType.type} that are of different shapes`
+        );
+      }
+
+      // remove last added type since we don't need to reprocess it
+      this.children.pop();
+    }
+
+    this.generatedDataTypeNames.set(intermediateType.type, subType);
+    return intermediateType;
+  }
+
+  /**
+   * Make an intermediate `Schema.DataType` object given a name
+   */
+  private makePlaceholderType = (typeName: string): Schema.DataType => {
+    return {
+      type: `${typeName}Type`,
+    };
+  };
+
+  /**
+   * Make an intermediate `Schema.DataType` object with array support given a name
+   */
+  private makePlaceholderArrayType(typeName: string): Schema.DataType {
+    return {
+      type: `${typeName}Type`,
+      isArray: true,
+    };
+  }
+}
+
+export type MakeArrayIntoIndexRef<T extends any[]> = {
+  [key: number]: MakeBindingRefable<T[0]>;
+  /** Used when referencing bindings from within a template */
+  _index_: MakeBindingRefable<T[0]>;
+} & BindingTemplateInstance;
+
+export type MakeBindingRefable<T> = {
+  [P in keyof T]: T[P] extends any[]
+    ? MakeArrayIntoIndexRef<T[P]>
+    : MakeBindingRefable<T[P]>;
+} & BindingTemplateInstance;
+
+/**
+ * Adds bindings to an object so that the object can be directly used in JSX
+ */
+export function makeBindingsForObject<Type>(
+  obj: Type,
+  arrayAccessorKeys = ['_index_']
+): MakeBindingRefable<Type> {
+  /** Proxy to track binding callbacks */
+  const accessor = (paths: string[]) => {
+    const bindingMap = new WeakMap<any, BindingTemplateInstance>();
+
+    return {
+      ownKeys(target: any) {
+        return Reflect.ownKeys(target);
+      },
+
+      get(target: any, key: any): any {
+        const bindingKeys = Object.keys(target);
+
+        if (!bindingMap.has(target)) {
+          bindingMap.set(target, b`${paths.join('.')}`);
+        }
+
+        if (key === bindingSymbol) {
+          return paths;
+        }
+
+        if (
+          Array.isArray(target) &&
+          (arrayAccessorKeys.includes(key) || typeof key === 'number')
+        ) {
+          return new Proxy(target[0], accessor(paths.concat([key])));
+        }
+
+        if (bindingKeys.includes(key) && typeof target[key] === 'object') {
+          return new Proxy(target[key], accessor(paths.concat([key])));
+        }
+
+        const createdInstance = bindingMap.get(target) as any;
+        return createdInstance?.[key];
+      },
+    };
+  };
+
+  return new Proxy(obj, accessor([])) as MakeBindingRefable<Type>;
+}
+
+/**
+ * Generates binding for an object property
+ */
+export const getBindingFromObject = (obj: any) => {
+  const baseBindings = obj[bindingSymbol] as string[];
+  if (!Array.isArray(baseBindings) || baseBindings.length === 0) {
+    throw new Error(`Unable to get binding for ${obj}`);
+  }
+
+  return b`${baseBindings.join('.')}`;
+};
+
+/**
+ * Returns the binding string from an object path
+ */
+export const getBindingStringFromObject = (obj: any) => {
+  return getBindingFromObject(obj).toString();
+};
+
+/**
+ * Returns the ref string from an object path
+ */
+export const getRefStringFromObject = (obj: any) => {
+  return getBindingFromObject(obj).toRefString();
+};

package/src/compiler/types.ts

@@ -0,0 +1,18 @@
+import type { Schema, Navigation, Flow } from '@player-ui/types';
+import type { RemoveUnknownIndex, AddUnknownIndex } from '../types';
+
+export type FlowWithoutUnknown = RemoveUnknownIndex<Flow>;
+export type FlowWithReactViews = AddUnknownIndex<
+  Omit<FlowWithoutUnknown, 'views'> & {
+    /** An array of JSX view elements */
+    views?: Array<React.ReactElement>;
+  }
+>;
+
+export type SerializeType = 'view' | 'flow' | 'schema' | 'navigation';
+
+export type SerializablePlayerExportTypes =
+  | React.ReactElement
+  | FlowWithReactViews
+  | Schema.Schema
+  | Navigation;