@player-ui/player 0.4.0 → 0.4.1-next.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@player-ui/player",
-  "version": "0.4.0",
+  "version": "0.4.1-next.0",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {},
   "dependencies": {
-    "@player-ui/partial-match-registry": "0.4.0",
-    "@player-ui/types": "0.4.0",
+    "@player-ui/partial-match-registry": "0.4.1-next.0",
+    "@player-ui/types": "0.4.1-next.0",
     "dequal": "^2.0.2",
     "p-defer": "^3.0.0",
     "queue-microtask": "^1.2.3",
@@ -21,6 +21,7 @@
     "ebnf": "^1.9.0",
     "timm": "^1.6.2",
     "error-polyfill": "^0.1.3",
+    "ts-nested-error": "^1.2.1",
     "@babel/runtime": "7.15.4"
   },
   "main": "dist/index.cjs.js",
@@ -64,6 +65,14 @@
     {
       "name": "Kelly Harrop",
       "url": "https://github.com/kharrop"
+    },
+    {
+      "name": "Alejandro Fimbres",
+      "url": "https://github.com/lexfm"
+    },
+    {
+      "name": "Rafael Campos",
+      "url": "https://github.com/rafbcampos"
     }
   ],
   "bundle": "./dist/player.prod.js"

package/src/binding/binding.ts

@@ -14,6 +14,14 @@ export interface BindingParserOptions {
    * Get the result of evaluating an expression
    */
   evaluate: (exp: string) => any;
+
+  /**
+   * Without readOnly, if a binding such as this is used: arr[key='does not exist'],
+   * then an object with that key will be created.
+   * This is done to make assignment such as arr[key='abc'].val = 'foo' work smoothly.
+   * Setting readOnly to true will prevent this behavior, avoiding unintended data changes.
+   */
+  readOnly?: boolean;
 }
 
 export type Getter = (path: BindingInstance) => any;

package/src/binding/index.ts

@@ -1,5 +1,5 @@
 import { SyncBailHook, SyncWaterfallHook } from 'tapable-ts';
-import NestedError from 'nested-error-stacks';
+import { NestedError } from 'ts-nested-error';
 import type { ParserResult, AnyNode } from '../binding-grammar';
 import {
   // We can swap this with whichever parser we want to use
@@ -15,6 +15,8 @@ export * from './utils';
 export * from './binding';
 
 export const SIMPLE_BINDING_REGEX = /^[\w\-@]+(\.[\w\-@]+)*$/;
+export const BINDING_BRACKETS_REGEX = /[\s()*=`{}'"[\]]/;
+const LAZY_BINDING_REGEX = /^[^.]+(\..+)*$/;
 
 const DEFAULT_OPTIONS: BindingParserOptions = {
   get: () => {
@@ -28,6 +30,9 @@ const DEFAULT_OPTIONS: BindingParserOptions = {
   },
 };
 
+type BeforeResolveNodeContext = Required<NormalizedResult> &
+  ResolveBindingASTOptions;
+
 /** A parser for creating bindings from a string */
 export class BindingParser {
   private cache: Record<string, BindingInstance>;
@@ -37,7 +42,7 @@ export class BindingParser {
   public hooks = {
     skipOptimization: new SyncBailHook<[string], boolean>(),
     beforeResolveNode: new SyncWaterfallHook<
-      [AnyNode, Required<NormalizedResult> & ResolveBindingASTOptions]
+      [AnyNode, BeforeResolveNodeContext]
     >(),
   };
 
@@ -56,8 +61,13 @@ export class BindingParser {
     path: string,
     resolveOptions: ResolveBindingASTOptions
   ) {
+    /**
+     * Ensure no binding characters exist in path and the characters remaining
+     * look like a binding format.
+     */
     if (
-      path.match(SIMPLE_BINDING_REGEX) &&
+      !BINDING_BRACKETS_REGEX.test(path) &&
+      LAZY_BINDING_REGEX.test(path) &&
       this.hooks.skipOptimization.call(path) !== true
     ) {
       return { path: path.split('.'), updates: undefined } as NormalizedResult;
@@ -172,7 +182,7 @@ export class BindingParser {
 
     const updateKeys = Object.keys(updates);
 
-    if (updateKeys.length > 0) {
+    if (!options.readOnly && updateKeys.length > 0) {
       const updateTransaction = updateKeys.map<[BindingInstance, any]>(
         (updatedBinding) => [
           this.parse(updatedBinding),

package/src/binding/resolver.ts

@@ -1,4 +1,4 @@
-import NestedError from 'nested-error-stacks';
+import { NestedError } from 'ts-nested-error';
 import type { SyncWaterfallHook } from 'tapable-ts';
 import type { PathNode, AnyNode } from '../binding-grammar';
 import { findInArray, maybeConvertToNum } from './utils';

package/src/binding-grammar/custom/index.ts

@@ -26,7 +26,7 @@ const DOUBLE_QUOTE = '"';
 const BACK_TICK = '`';
 // const IDENTIFIER_REGEX = /[\w\-@]+/;
 
-/** A _faster_ way to match chars instead of a regex (/[\w\-@]+/) */
+/** A _faster_ way to match chars instead of a regex. */
 const isIdentifierChar = (char?: string): boolean => {
   if (!char) {
     return false;
@@ -34,14 +34,22 @@ const isIdentifierChar = (char?: string): boolean => {
 
   const charCode = char.charCodeAt(0);
 
-  return (
-    (charCode >= 48 && charCode <= 57) || // 0 - 9
-    (charCode >= 65 && charCode <= 90) || // A-Z
-    (charCode >= 97 && charCode <= 122) || // a-z
-    charCode === 95 || // _
-    charCode === 45 || // -
-    charCode === 64 // @
-  );
+  const matches =
+    charCode === 32 || // ' '
+    charCode === 34 || // "
+    charCode === 39 || // '
+    charCode === 40 || // (
+    charCode === 41 || // )
+    charCode === 42 || // *
+    charCode === 46 || // .
+    charCode === 61 || // =
+    charCode === 91 || // [
+    charCode === 93 || // ]
+    charCode === 96 || // `
+    charCode === 123 || // {
+    charCode === 125; // }
+
+  return !matches;
 };
 
 /** Parse out a binding AST from a path */

package/src/controllers/constants/index.ts

@@ -10,7 +10,7 @@ export interface ConstantsProvider {
   addConstants(data: Record<string, any>, namespace: string): void;
 
   /**
-   * Function to retreive constants from the providers store
+   * Function to retrieve constants from the providers store
    *  - @param key Key used for the store access
    *  - @param namespace namespace values were loaded under (defined in the plugin)
    *  - @param fallback Optional - if key doesn't exist in namespace what to return (will return unknown if not provided)
@@ -77,9 +77,13 @@ export class ConstantsController implements ConstantsProvider {
     }
   }
 
-  clearTemporaryValues(): void {
-    this.tempStore.forEach((value: LocalModel) => {
-      value.reset();
-    });
+  clearTemporaryValues(namespace?: string): void {
+    if (namespace) {
+      this.tempStore.get(namespace)?.reset();
+    } else {
+      this.tempStore.forEach((value: LocalModel) => {
+        value.reset();
+      });
+    }
   }
 }

package/src/controllers/{data.ts → data/controller.ts}

@@ -1,9 +1,8 @@
 import { SyncHook, SyncWaterfallHook, SyncBailHook } from 'tapable-ts';
-import { omit, removeAt } from 'timm';
 import { dequal } from 'dequal';
-import type { Logger } from '../logger';
-import type { BindingParser, BindingLike } from '../binding';
-import { BindingInstance } from '../binding';
+import type { Logger } from '../../logger';
+import type { BindingParser, BindingLike } from '../../binding';
+import { BindingInstance } from '../../binding';
 import type {
   BatchSetTransaction,
   Updates,
@@ -11,9 +10,10 @@ import type {
   DataModelWithParser,
   DataPipeline,
   DataModelMiddleware,
-} from '../data';
-import { PipelinedDataModel, LocalModel } from '../data';
-import type { RawSetTransaction } from '../types';
+} from '../../data';
+import { PipelinedDataModel, LocalModel } from '../../data';
+import type { RawSetTransaction } from '../../types';
+import { ReadOnlyDataController } from './utils';
 
 /** The orchestrator for player data */
 export class DataController implements DataModelWithParser<DataModelOptions> {
@@ -25,11 +25,15 @@ export class DataController implements DataModelWithParser<DataModelOptions> {
     resolveDefaultValue: new SyncBailHook<[BindingInstance], any>(),
 
     onDelete: new SyncHook<[any]>(),
+
     onSet: new SyncHook<[BatchSetTransaction]>(),
+
     onGet: new SyncHook<[any, any]>(),
+
     onUpdate: new SyncHook<[Updates, DataModelOptions | undefined]>(),
 
     format: new SyncWaterfallHook<[any, BindingInstance]>(),
+
     deformat: new SyncWaterfallHook<[any, BindingInstance]>(),
 
     serialize: new SyncWaterfallHook<[any]>(),
@@ -119,18 +123,24 @@ export class DataController implements DataModelWithParser<DataModelOptions> {
       (updates, [binding, newVal]) => {
         const oldVal = this.get(binding, { includeInvalid: true });
 
-        if (!dequal(oldVal, newVal)) {
-          updates.push({
-            binding,
-            newValue: newVal,
-            oldValue: oldVal,
-          });
+        const update = {
+          binding,
+          newValue: newVal,
+          oldValue: oldVal,
+        };
+
+        if (dequal(oldVal, newVal)) {
+          this.logger?.debug(
+            `Skipping update for path: ${binding.asString()}. Value was unchanged: ${oldVal}`
+          );
+        } else {
+          updates.push(update);
+
+          this.logger?.debug(
+            `Setting path: ${binding.asString()} from: ${oldVal} to: ${newVal}`
+          );
         }
 
-        this.logger?.debug(
-          `Setting path: ${binding.asString()} from: ${oldVal} to: ${newVal}`
-        );
-
         return updates;
       },
       []
@@ -157,8 +167,6 @@ export class DataController implements DataModelWithParser<DataModelOptions> {
 
     this.hooks.onSet.call(normalizedTransaction);
 
-    this.hooks.onSet.call(normalizedTransaction);
-
     if (setUpdates.length > 0) {
       this.hooks.onUpdate.call(setUpdates, options);
     }
@@ -166,15 +174,17 @@ export class DataController implements DataModelWithParser<DataModelOptions> {
     return result;
   }
 
-  private resolve(binding: BindingLike): BindingInstance {
+  private resolve(binding: BindingLike, readOnly: boolean): BindingInstance {
     return Array.isArray(binding) || typeof binding === 'string'
-      ? this.pathResolver.parse(binding)
+      ? this.pathResolver.parse(binding, { readOnly })
       : binding;
   }
 
   public get(binding: BindingLike, options?: DataModelOptions) {
     const resolved =
-      binding instanceof BindingInstance ? binding : this.resolve(binding);
+      binding instanceof BindingInstance
+        ? binding
+        : this.resolve(binding, true);
     let result = this.getModel().get(resolved, options);
 
     if (result === undefined && !options?.ignoreDefaultValue) {
@@ -187,6 +197,8 @@ export class DataController implements DataModelWithParser<DataModelOptions> {
 
     if (options?.formatted) {
       result = this.hooks.format.call(result, resolved);
+    } else if (options?.formatted === false) {
+      result = this.hooks.deformat.call(result, resolved);
     }
 
     this.hooks.onGet.call(binding, result);
@@ -194,56 +206,43 @@ export class DataController implements DataModelWithParser<DataModelOptions> {
     return result;
   }
 
-  public delete(binding: BindingLike) {
-    if (binding === undefined || binding === null) {
-      throw new Error(`Invalid arguments: delete expects a data path (string)`);
+  public delete(binding: BindingLike, options?: DataModelOptions) {
+    if (
+      typeof binding !== 'string' &&
+      !Array.isArray(binding) &&
+      !(binding instanceof BindingInstance)
+    ) {
+      throw new Error('Invalid arguments: delete expects a data path (string)');
     }
 
-    const resolved = this.resolve(binding);
-    this.hooks.onDelete.call(resolved);
-    this.deleteData(resolved);
-  }
-
-  public getTrash(): Set<BindingInstance> {
-    return this.trash;
-  }
-
-  private addToTrash(binding: BindingInstance) {
-    this.trash.add(binding);
-  }
+    const resolved =
+      binding instanceof BindingInstance
+        ? binding
+        : this.resolve(binding, false);
 
-  private deleteData(binding: BindingInstance) {
-    const parentBinding = binding.parent();
-    const parentPath = parentBinding.asString();
-    const property = binding.key();
+    const parentBinding = resolved.parent();
+    const property = resolved.key();
+    const parentValue = this.get(parentBinding);
 
-    const existedBeforeDelete = Object.prototype.hasOwnProperty.call(
-      this.get(parentBinding),
-      property
-    );
+    const existedBeforeDelete =
+      typeof parentValue === 'object' &&
+      parentValue !== null &&
+      Object.prototype.hasOwnProperty.call(parentValue, property);
 
-    if (property !== undefined) {
-      const parent = parentBinding ? this.get(parentBinding) : undefined;
+    this.getModel().delete(resolved, options);
 
-      // If we're deleting an item in an array, we just splice it out
-      // Don't add it to the trash
-      if (parentPath && Array.isArray(parent)) {
-        if (parent.length > property) {
-          this.set([[parentBinding, removeAt(parent, property as number)]]);
-        }
-      } else if (parentPath && parent[property]) {
-        this.set([[parentBinding, omit(parent, property as string)]]);
-      } else if (!parentPath) {
-        this.getModel().reset(omit(this.get(''), property as string));
-      }
+    if (existedBeforeDelete && !this.get(resolved)) {
+      this.trash.add(resolved);
     }
 
-    if (existedBeforeDelete && !this.get(binding)) {
-      this.addToTrash(binding);
-    }
+    this.hooks.onDelete.call(resolved);
   }
 
   public serialize(): object {
     return this.hooks.serialize.call(this.get(''));
   }
+
+  public makeReadOnly(): ReadOnlyDataController {
+    return new ReadOnlyDataController(this, this.logger);
+  }
 }

package/src/controllers/data/index.ts

@@ -0,0 +1 @@
+export * from './controller';

package/src/controllers/data/utils.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { DataController } from '.';
+import type { Logger } from '../../logger';
+import type { BindingLike } from '../../binding';
+import type {
+  DataModelWithParser,
+  DataModelOptions,
+  Updates,
+} from '../../data';
+
+/** Wrapper for the Data Controller Class that prevents writes */
+export class ReadOnlyDataController
+  implements DataModelWithParser<DataModelOptions>
+{
+  private controller: DataController;
+  private logger?: Logger;
+
+  constructor(controller: DataController, logger?: Logger) {
+    this.controller = controller;
+    this.logger = logger;
+  }
+
+  get(binding: BindingLike, options?: DataModelOptions | undefined) {
+    return this.controller.get(binding, options);
+  }
+
+  set(
+    transaction: [BindingLike, any][],
+    options?: DataModelOptions | undefined
+  ): Updates {
+    this.logger?.error(
+      'Error: Tried to set in a read only instance of the DataController'
+    );
+    return [];
+  }
+
+  delete(binding: BindingLike, options?: DataModelOptions | undefined): void {
+    this.logger?.error(
+      'Error: Tried to delete in a read only instance of the DataController'
+    );
+  }
+}

package/src/controllers/flow/controller.ts

@@ -29,6 +29,7 @@ export class FlowController {
     this.start = this.start.bind(this);
     this.run = this.run.bind(this);
     this.transition = this.transition.bind(this);
+    this.addNewFlow = this.addNewFlow.bind(this);
   }
 
   /** Navigate to another state in the state-machine */
@@ -40,20 +41,9 @@ export class FlowController {
     this.current.transition(stateTransition, options);
   }
 
-  private async addNewFlow(flow: FlowInstance) {
+  private addNewFlow(flow: FlowInstance) {
     this.navStack.push(flow);
     this.current = flow;
-    flow.hooks.transition.tap(
-      'flow-controller',
-      async (_oldState, newState: NamedState) => {
-        if (newState.value.state_type === 'FLOW') {
-          this.log?.debug(`Got FLOW state. Loading flow ${newState.value.ref}`);
-          const endState = await this.run(newState.value.ref);
-          this.log?.debug(`Flow ended. Using outcome: ${endState.outcome}`);
-          flow.transition(endState.outcome);
-        }
-      }
-    );
     this.hooks.flow.call(flow);
   }
 
@@ -74,6 +64,20 @@ export class FlowController {
 
     const flow = new FlowInstance(startState, startFlow, { logger: this.log });
     this.addNewFlow(flow);
+
+    flow.hooks.afterTransition.tap('flow-controller', (flowInstance) => {
+      if (flowInstance.currentState?.value.state_type === 'FLOW') {
+        const subflowId = flowInstance.currentState?.value.ref;
+        this.log?.debug(`Loading subflow ${subflowId}`);
+        this.run(subflowId).then((subFlowEndState) => {
+          this.log?.debug(
+            `Subflow ended. Using outcome: ${subFlowEndState.outcome}`
+          );
+          flowInstance.transition(subFlowEndState?.outcome);
+        });
+      }
+    });
+
     const end = await flow.start();
     this.navStack.pop();
 

package/src/controllers/flow/flow.ts

@@ -58,6 +58,9 @@ export class FlowInstance {
 
     /** A callback when a transition from 1 state to another was made */
     transition: new SyncHook<[NamedState | undefined, NamedState]>(),
+
+    /** A callback to run actions after a transition occurs */
+    afterTransition: new SyncHook<[FlowInstance]>(),
   };
 
   constructor(
@@ -131,7 +134,7 @@ export class FlowInstance {
 
       if (skipTransition) {
         this.log?.debug(
-          `Skipping transition from ${this.currentState} b/c hook told us to`
+          `Skipping transition from ${this.currentState.name} b/c hook told us to`
         );
         return;
       }
@@ -201,5 +204,7 @@ export class FlowInstance {
     this.hooks.transition.call(prevState, {
       ...newCurrentState,
     });
+
+    this.hooks.afterTransition.call(this);
   }
 }

package/src/controllers/index.ts

@@ -1,5 +1,5 @@
 export * from './flow';
 export * from './validation';
 export * from './view';
-export * from './data';
+export * from './data/controller';
 export * from './constants';

package/src/controllers/validation/binding-tracker.ts

@@ -13,6 +13,9 @@ const CONTEXT = 'validation-binding-tracker';
 export interface BindingTracker {
   /** Get the bindings currently being tracked for validation */
   getBindings(): Set<BindingInstance>;
+
+  /** Add a binding to the tracked set */
+  trackBinding(binding: BindingInstance): void;
 }
 interface Options {
   /** Parse a binding from a view */
@@ -42,6 +45,16 @@ export class ValidationBindingTrackerViewPlugin
     return this.trackedBindings;
   }
 
+  /** Add a binding to the tracked set */
+  trackBinding(binding: BindingInstance) {
+    if (this.trackedBindings.has(binding)) {
+      return;
+    }
+
+    this.trackedBindings.add(binding);
+    this.options.callbacks?.onAdd?.(binding);
+  }
+
   /** Attach hooks to the given resolver */
   applyResolver(resolver: Resolver) {
     this.trackedBindings.clear();
@@ -52,9 +65,6 @@ export class ValidationBindingTrackerViewPlugin
     /** Each Node is a registered section or page that maps to a set of nodes in its section */
     const sections = new Map<Node.Node, Set<Node.Node>>();
 
-    /** Keep track of all seen bindings so we can notify people when we hit one for the first time */
-    const seenBindings = new Set<BindingInstance>();
-
     let lastViewUpdateChangeSet: Set<BindingInstance> | undefined;
 
     const nodeTree = new Map<Node.Node, Set<Node.Node>>();
@@ -129,10 +139,8 @@ export class ValidationBindingTrackerViewPlugin
           }
         }
 
-        if (!seenBindings.has(parsed)) {
-          seenBindings.add(parsed);
-          this.options.callbacks?.onAdd?.(parsed);
-        }
+        this.trackedBindings.add(parsed);
+        this.options.callbacks?.onAdd?.(parsed);
       };
 
       return {
@@ -144,23 +152,36 @@ export class ValidationBindingTrackerViewPlugin
               track(binding);
             }
 
-            const eow = options.validation?._getValidationForBinding(binding);
+            const eows = options.validation
+              ?._getValidationForBinding(binding)
+              ?.getAll(getOptions);
+
+            const firstFieldEOW = eows?.find(
+              (eow) =>
+                eow.displayTarget === 'field' || eow.displayTarget === undefined
+            );
 
-            if (
-              eow?.displayTarget === undefined ||
-              eow?.displayTarget === 'field'
-            ) {
-              return eow;
+            return firstFieldEOW;
+          },
+          getValidationsForBinding(binding, getOptions) {
+            if (getOptions?.track) {
+              track(binding);
             }
 
-            return undefined;
+            return (
+              options.validation
+                ?._getValidationForBinding(binding)
+                ?.getAll(getOptions) ?? []
+            );
           },
-          getChildren: (type: Validation.DisplayTarget) => {
+          getChildren: (type?: Validation.DisplayTarget) => {
             const validations = new Array<ValidationResponse>();
             lastComputedBindingTree.get(node)?.forEach((binding) => {
-              const eow = options.validation?._getValidationForBinding(binding);
+              const eow = options.validation
+                ?._getValidationForBinding(binding)
+                ?.get();
 
-              if (eow && type === eow.displayTarget) {
+              if (eow && (type === undefined || type === eow.displayTarget)) {
                 validations.push(eow);
               }
             });
@@ -170,7 +191,9 @@ export class ValidationBindingTrackerViewPlugin
           getValidationsForSection: () => {
             const validations = new Array<ValidationResponse>();
             lastSectionBindingTree.get(node)?.forEach((binding) => {
-              const eow = options.validation?._getValidationForBinding(binding);
+              const eow = options.validation
+                ?._getValidationForBinding(binding)
+                ?.get();
 
               if (eow && eow.displayTarget === 'section') {
                 validations.push(eow);
@@ -213,7 +236,7 @@ export class ValidationBindingTrackerViewPlugin
       }
 
       if (node === resolver.root) {
-        this.trackedBindings = currentBindingTree.get(node) ?? new Set();
+        this.trackedBindings = new Set(currentBindingTree.get(node));
         lastComputedBindingTree = currentBindingTree;
 
         lastSectionBindingTree.clear();