@player-ui/player 0.3.1-next.1 → 0.3.1

package/src/expressions/utils.ts

@@ -1,4 +1,12 @@
-import type { ExpressionHandler } from './types';
+import { isExpressionNode } from './types';
+import type {
+  ExpressionHandler,
+  ExpressionNode,
+  ExpressionObjectType,
+  ExpressionType,
+  NodeLocation,
+  NodePosition,
+} from './types';
 
 /** Generates a function by removing the first context argument */
 export function withoutContext<T extends unknown[], Return>(
@@ -6,3 +14,137 @@ export function withoutContext<T extends unknown[], Return>(
 ): ExpressionHandler<T, Return> {
   return (_context, ...args) => fn(...args);
 }
+
+/** Checks if the location includes the target position  */
+function isInRange(position: NodePosition, location: NodeLocation) {
+  return (
+    position.character >= location.start.character &&
+    position.character <= location.end.character
+  );
+}
+
+/** Get the node in the expression that's closest to the desired position */
+export function findClosestNodeAtPosition(
+  node: ExpressionNode,
+  position: NodePosition
+): ExpressionNode | undefined {
+  // This is just mapping recursively over nodes in the tree
+
+  // eslint-disable-next-line default-case
+  switch (node.type) {
+    case 'Modification':
+    case 'Assignment':
+    case 'LogicalExpression':
+    case 'BinaryExpression': {
+      const check =
+        findClosestNodeAtPosition(node.left, position) ??
+        findClosestNodeAtPosition(node.right, position);
+      if (check) {
+        return check;
+      }
+
+      break;
+    }
+
+    case 'UnaryExpression': {
+      const checkArg = findClosestNodeAtPosition(node.argument, position);
+      if (checkArg) {
+        return checkArg;
+      }
+
+      break;
+    }
+
+    case 'MemberExpression': {
+      const checkObject =
+        findClosestNodeAtPosition(node.object, position) ??
+        findClosestNodeAtPosition(node.property, position);
+      if (checkObject) {
+        return checkObject;
+      }
+
+      break;
+    }
+
+    case 'ConditionalExpression': {
+      const checkObject =
+        findClosestNodeAtPosition(node.test, position) ??
+        findClosestNodeAtPosition(node.consequent, position) ??
+        findClosestNodeAtPosition(node.alternate, position);
+      if (checkObject) {
+        return checkObject;
+      }
+
+      break;
+    }
+
+    case 'ArrayExpression':
+    case 'Compound': {
+      const elements =
+        node.type === 'ArrayExpression' ? node.elements : node.body;
+
+      const anyElements = elements.find((e) =>
+        findClosestNodeAtPosition(e, position)
+      );
+
+      if (anyElements) {
+        return anyElements;
+      }
+
+      break;
+    }
+
+    case 'Object': {
+      const checkObject = node.attributes.reduce<ExpressionNode | undefined>(
+        (found, next) => {
+          return (
+            found ??
+            findClosestNodeAtPosition(next.key, position) ??
+            findClosestNodeAtPosition(next.value, position)
+          );
+        },
+        undefined
+      );
+
+      if (checkObject) {
+        return checkObject;
+      }
+
+      break;
+    }
+
+    case 'CallExpression': {
+      const anyArgs =
+        node.args.find((arg) => {
+          return findClosestNodeAtPosition(arg, position);
+        }) ?? findClosestNodeAtPosition(node.callTarget, position);
+
+      if (anyArgs) {
+        return anyArgs;
+      }
+
+      break;
+    }
+  }
+
+  // Lastly check for yourself
+  if (node.location && isInRange(position, node.location)) {
+    return node;
+  }
+}
+
+/** Checks if the expression is a simple type */
+export function isObjectExpression(
+  expr: ExpressionType
+): expr is ExpressionObjectType {
+  if (isExpressionNode(expr)) {
+    return false;
+  }
+
+  return (
+    typeof expr === 'object' &&
+    expr !== null &&
+    !Array.isArray(expr) &&
+    'value' in expr
+  );
+}

package/src/player.ts

@@ -1,12 +1,11 @@
 import { setIn } from 'timm';
 import deferred from 'p-defer';
-import queueMicrotask from 'queue-microtask';
 import type { Flow as FlowType, FlowResult } from '@player-ui/types';
 
 import { SyncHook, SyncWaterfallHook } from 'tapable-ts';
 import type { Logger } from './logger';
 import { TapableLogger } from './logger';
-import type { ExpressionHandler } from './expressions';
+import type { ExpressionType } from './expressions';
 import { ExpressionEvaluator } from './expressions';
 import { SchemaController } from './schema';
 import { BindingParser } from './binding';
@@ -21,6 +20,7 @@ import {
   FlowController,
 } from './controllers';
 import { FlowExpPlugin } from './plugins/flow-exp-plugin';
+import { DefaultExpPlugin } from './plugins/default-exp-plugin';
 import type {
   PlayerFlowState,
   InProgressState,
@@ -30,8 +30,8 @@ import type {
 import { NOT_STARTED_STATE } from './types';
 
 // Variables injected at build time
-const PLAYER_VERSION = '0.3.1-next.1';
-const COMMIT = 'b51603be07572111ca68e73d1b710ed2d0aa9412';
+const PLAYER_VERSION = '0.3.1';
+const COMMIT = 'e8392cd5df3c84fb9c68daf149ea88c593ce0428';
 
 export interface PlayerPlugin {
   /**
@@ -49,6 +49,18 @@ export interface PlayerPlugin {
   apply: (player: Player) => void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ExtendedPlayerPlugin<
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Assets = void,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Views = void,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Expressions = void,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  DataTypes = void
+> {}
+
 export interface PlayerConfigOptions {
   /** A set of plugins to load  */
   plugins?: PlayerPlugin[];
@@ -117,17 +129,16 @@ export class Player {
   };
 
   constructor(config?: PlayerConfigOptions) {
-    const initialPlugins: PlayerPlugin[] = [];
-    const flowExpPlugin = new FlowExpPlugin();
-
-    initialPlugins.push(flowExpPlugin);
-
     if (config?.logger) {
       this.logger.addHandler(config.logger);
     }
 
     this.config = config || {};
-    this.config.plugins = [...(this.config.plugins || []), ...initialPlugins];
+    this.config.plugins = [
+      new DefaultExpPlugin(),
+      ...(this.config.plugins || []),
+      new FlowExpPlugin(),
+    ];
     this.config.plugins?.forEach((plugin) => {
       plugin.apply(this);
     });
@@ -277,34 +288,41 @@ export class Player {
     });
 
     /** Resolve any data references in a string */
-    function resolveStrings<T>(val: T) {
+    function resolveStrings<T>(val: T, formatted?: boolean) {
       return resolveDataRefs(val, {
         model: dataController,
         evaluate: expressionEvaluator.evaluate,
+        formatted,
       });
     }
 
     flowController.hooks.flow.tap('player', (flow: FlowInstance) => {
       flow.hooks.beforeTransition.tap('player', (state, transitionVal) => {
-        if (
-          state.onEnd &&
-          (state.transitions[transitionVal] || state.transitions['*'])
-        ) {
+        /** Checks to see if there are any transitions for a specific transition state (i.e. next, back). If not, it will default to * */
+        const computedTransitionVal = state.transitions[transitionVal]
+          ? transitionVal
+          : '*';
+        if (state.onEnd && state.transitions[computedTransitionVal]) {
           if (typeof state.onEnd === 'object' && 'exp' in state.onEnd) {
             expressionEvaluator?.evaluate(state.onEnd.exp);
           } else {
-            expressionEvaluator?.evaluate(state.onEnd);
+            expressionEvaluator?.evaluate(state.onEnd as ExpressionType);
           }
         }
 
-        if (!('transitions' in state) || !state.transitions[transitionVal]) {
+        /** If the transition does not exist, then do not resolve any expressions */
+        if (
+          !('transitions' in state) ||
+          !state.transitions[computedTransitionVal]
+        ) {
           return state;
         }
 
+        /** resolves and sets the transition to the computed exp */
         return setIn(
           state,
-          ['transitions', transitionVal],
-          resolveStrings(state.transitions[transitionVal])
+          ['transitions', computedTransitionVal],
+          resolveStrings(state.transitions[computedTransitionVal])
         ) as any;
       });
 
@@ -335,7 +353,7 @@ export class Player {
           newState = setIn(
             state,
             ['param'],
-            resolveStrings(state.param)
+            resolveStrings(state.param, false)
           ) as any;
         }
 
@@ -343,17 +361,18 @@ export class Player {
       });
 
       flow.hooks.transition.tap('player', (_oldState, newState) => {
-        if (newState.value.state_type === 'ACTION') {
-          const { exp } = newState.value;
-
-          // The nested transition call would trigger another round of the flow transition hooks to be called.
-          // This created a weird timing where this nested transition would happen before the view had a chance to respond to the first one
-          // Use a queueMicrotask to make sure the expression transition is outside the scope of the flow hook
-          queueMicrotask(() => {
-            flowController?.transition(
-              String(expressionEvaluator?.evaluate(exp))
-            );
-          });
+        if (newState.value.state_type !== 'VIEW') {
+          validationController.reset();
+        }
+      });
+
+      flow.hooks.afterTransition.tap('player', (flowInstance) => {
+        const value = flowInstance.currentState?.value;
+        if (value && value.state_type === 'ACTION') {
+          const { exp } = value;
+          flowController?.transition(
+            String(expressionEvaluator?.evaluate(exp))
+          );
         }
 
         expressionEvaluator.reset();
@@ -375,6 +394,11 @@ export class Player {
       parseBinding,
       transition: flowController.transition,
       model: dataController,
+      utils: {
+        findPlugin: <Plugin = unknown>(pluginSymbol: symbol) => {
+          return this.findPlugin(pluginSymbol) as unknown as Plugin;
+        },
+      },
       logger: this.logger,
       flowController,
       schema,
@@ -392,6 +416,7 @@ export class Player {
         ...validationController.forView(parseBinding),
         type: (b) => schema.getType(parseBinding(b)),
       },
+      constants: this.constantsController,
     });
     viewController.hooks.view.tap('player', (view) => {
       validationController.onView(view);
@@ -399,26 +424,13 @@ export class Player {
     });
     this.hooks.viewController.call(viewController);
 
-    /** Gets formatter for given formatName and formats value if found, returns value otherwise */
-    const formatFunction: ExpressionHandler<[unknown, string], any> = (
-      ctx,
-      value,
-      formatName
-    ) => {
-      return (
-        schema.getFormatterForType({ type: formatName })?.format(value) ?? value
-      );
-    };
-
-    expressionEvaluator.addExpressionFunction('format', formatFunction);
-
     return {
       start: () => {
         flowController
           .start()
           .then((endState) => {
             const flowResult: FlowResult = {
-              endState: resolveStrings(endState),
+              endState: resolveStrings(endState, false),
               data: dataController.serialize(),
             };
 
@@ -489,7 +501,9 @@ export class Player {
         ref,
         status: 'completed',
         flow: state.flow,
-        dataModel: state.controllers.data.getModel(),
+        controllers: {
+          data: state.controllers.data.makeReadOnly(),
+        },
       } as const;
 
       return maybeUpdateState({

package/src/plugins/default-exp-plugin.ts

@@ -0,0 +1,57 @@
+import type { ExpressionHandler, ExpressionType } from '../expressions';
+import type { SchemaController } from '../schema';
+import type { Player, PlayerPlugin } from '../player';
+
+/** Gets formatter for given formatName and formats value if found, returns value otherwise */
+const createFormatFunction = (schema: SchemaController) => {
+  /**
+   * The generated handler for the given schema
+   */
+  const handler: ExpressionHandler<[unknown, string], any> = (
+    ctx,
+    value,
+    formatName
+  ) => {
+    return (
+      schema.getFormatterForType({ type: formatName })?.format(value) ?? value
+    );
+  };
+
+  return handler;
+};
+
+/**
+ * A plugin that provides the out-of-the-box expressions for player
+ */
+export class DefaultExpPlugin implements PlayerPlugin {
+  name = 'flow-exp-plugin';
+
+  apply(player: Player) {
+    let formatFunction: ExpressionHandler<[unknown, string]> | undefined;
+
+    player.hooks.schema.tap(this.name, (schemaController) => {
+      formatFunction = createFormatFunction(schemaController);
+    });
+
+    player.hooks.expressionEvaluator.tap(this.name, (expEvaluator) => {
+      if (formatFunction) {
+        expEvaluator.addExpressionFunction('format', formatFunction);
+      }
+
+      expEvaluator.addExpressionFunction('log', (ctx, ...args) => {
+        player.logger.info(...args);
+      });
+
+      expEvaluator.addExpressionFunction('debug', (ctx, ...args) => {
+        player.logger.debug(...args);
+      });
+
+      expEvaluator.addExpressionFunction(
+        'eval',
+        (ctx, ...args: [ExpressionType]) => {
+          return ctx.evaluate(...args);
+        }
+      );
+    });
+  }
+}

package/src/plugins/flow-exp-plugin.ts

@@ -3,7 +3,7 @@ import type {
   ExpressionObject,
   NavigationFlowState,
 } from '@player-ui/types';
-import type { ExpressionEvaluator } from '../expressions';
+import type { ExpressionEvaluator, ExpressionType } from '../expressions';
 import type { FlowInstance } from '../controllers';
 import type { Player, PlayerPlugin } from '../player';
 
@@ -28,7 +28,7 @@ export class FlowExpPlugin implements PlayerPlugin {
         if (typeof exp === 'object' && 'exp' in exp) {
           expressionEvaluator?.evaluate(exp.exp);
         } else {
-          expressionEvaluator?.evaluate(exp);
+          expressionEvaluator?.evaluate(exp as ExpressionType);
         }
       }
     };

package/src/schema/schema.ts

@@ -11,8 +11,8 @@ const identify = (val: any) => val;
 /** Expand the authored schema into a set of paths -> DataTypes */
 export function parse(
   schema: SchemaType.Schema
-): Map<string, SchemaType.DataType> {
-  const expandedPaths = new Map<string, SchemaType.DataType>();
+): Map<string, SchemaType.DataTypes> {
+  const expandedPaths = new Map<string, SchemaType.DataTypes>();
 
   if (!schema.ROOT) {
     return expandedPaths;
@@ -62,6 +62,10 @@ export function parse(
         nestedPath.push('[]');
       }
 
+      if (type.isRecord) {
+        nestedPath.push('{}');
+      }
+
       if (type.type && schema[type.type]) {
         parseQueue.push({
           path: nestedPath,
@@ -85,14 +89,14 @@ export class SchemaController implements ValidationProvider {
     new Map();
 
   private types: Map<string, SchemaType.DataType<any>> = new Map();
-  public readonly schema: Map<string, SchemaType.DataType> = new Map();
+  public readonly schema: Map<string, SchemaType.DataTypes> = new Map();
 
   private bindingSchemaNormalizedCache: Map<BindingInstance, string> =
     new Map();
 
   public readonly hooks = {
     resolveTypeForBinding: new SyncWaterfallHook<
-      [SchemaType.DataType | undefined, BindingInstance]
+      [SchemaType.DataTypes | undefined, BindingInstance]
     >(),
   };
 
@@ -135,17 +139,32 @@ export class SchemaController implements ValidationProvider {
       return cached;
     }
 
-    const normalized = binding
-      .asArray()
+    let bindingArray = binding.asArray();
+    let normalized = bindingArray
       .map((p) => (typeof p === 'number' ? '[]' : p))
       .join('.');
 
-    this.bindingSchemaNormalizedCache.set(binding, normalized);
+    if (normalized) {
+      this.bindingSchemaNormalizedCache.set(binding, normalized);
+      bindingArray = normalized.split('.');
+    }
+
+    bindingArray.forEach((item) => {
+      const recordBinding = bindingArray
+        .map((p) => (p === item ? '{}' : p))
+        .join('.');
+
+      if (this.schema.get(recordBinding)) {
+        this.bindingSchemaNormalizedCache.set(binding, recordBinding);
+        bindingArray = recordBinding.split('.');
+        normalized = recordBinding;
+      }
+    });
 
     return normalized;
   }
 
-  public getType(binding: BindingInstance): SchemaType.DataType | undefined {
+  public getType(binding: BindingInstance): SchemaType.DataTypes | undefined {
     return this.hooks.resolveTypeForBinding.call(
       this.schema.get(this.normalizeBinding(binding)),
       binding
@@ -154,7 +173,7 @@ export class SchemaController implements ValidationProvider {
 
   public getApparentType(
     binding: BindingInstance
-  ): SchemaType.DataType | undefined {
+  ): SchemaType.DataTypes | undefined {
     const schemaType = this.getType(binding);
 
     if (schemaType === undefined) {

package/src/string-resolver/index.ts

@@ -6,11 +6,22 @@ const DOUBLE_OPEN_CURLY = '{{';
 const DOUBLE_CLOSE_CURLY = '}}';
 
 export interface Options {
-  /** The model to use when resolving refs */
-  model: DataModelWithParser;
-
-  /** A function to evaluate an expression */
-  evaluate: (exp: Expression) => any;
+  /**
+   * The model to use when resolving refs
+   * Passing `false` will skip trying to resolve any direct model refs ({{foo}})
+   */
+  model: false | DataModelWithParser;
+
+  /**
+   * A function to evaluate an expression
+   * Passing `false` will skip trying to evaluate any expressions (@[ foo() ]@)
+   */
+  evaluate: false | ((exp: Expression) => any);
+
+  /**
+   * Optionaly resolve binding without formatting in case Type format applies
+   */
+  formatted?: boolean;
 }
 
 /** Search the given string for the coordinates of the next expression to resolve */
@@ -70,6 +81,10 @@ export function resolveExpressionsInString(
   val: string,
   { evaluate }: Options
 ): string {
+  if (!evaluate) {
+    return val;
+  }
+
   const expMatch = /@\[.*?\]@/;
   let newVal = val;
   let match = newVal.match(expMatch);
@@ -106,10 +121,11 @@ export function resolveExpressionsInString(
 
 /** Return a string with all data model references resolved */
 export function resolveDataRefsInString(val: string, options: Options): string {
-  const { model } = options;
+  const { model, formatted = true } = options;
   let workingString = resolveExpressionsInString(val, options);
 
   if (
+    !model ||
     typeof workingString !== 'string' ||
     workingString.indexOf(DOUBLE_OPEN_CURLY) === -1
   ) {
@@ -133,7 +149,7 @@ export function resolveDataRefsInString(val: string, options: Options): string {
       )
       .trim();
 
-    const evaledVal = model.get(binding, { formatted: true });
+    const evaledVal = model.get(binding, { formatted });
 
     // Exit early if the string is _just_ a model lookup
     // If the result is a string, we may need further processing for nested bindings
@@ -160,18 +176,19 @@ function traverseObject<T>(val: T, options: Options): T {
     }
 
     case 'object': {
+      if (!val) return val;
       // TODO: Do we care refs in keys?
       const keys = Object.keys(val);
       let newVal = val;
 
       if (keys.length > 0) {
-        for (const key of keys) {
+        keys.forEach((key) => {
           newVal = setIn(
             newVal as any,
             [key],
             traverseObject((val as any)[key], options)
           ) as any;
-        }
+        });
       }
 
       return newVal;

package/src/types.ts

@@ -1,5 +1,4 @@
 import type { Flow, FlowResult } from '@player-ui/types';
-import type { DataModelWithParser } from './data';
 import type { BindingParser, BindingLike } from './binding';
 import type { SchemaController } from './schema';
 import type { ExpressionEvaluator } from './expressions';
@@ -10,6 +9,7 @@ import type {
   ValidationController,
   FlowController,
 } from './controllers';
+import type { ReadOnlyDataController } from './controllers/data/utils';
 
 /** The status for a flow's execution state */
 export type PlayerFlowStatus =
@@ -86,8 +86,11 @@ export type InProgressState = BaseFlowState<'in-progress'> &
 export type CompletedState = BaseFlowState<'completed'> &
   PlayerFlowExecutionData &
   FlowResult & {
-    /** The top-level data-model for the flow */
-    dataModel: DataModelWithParser;
+    /** Readonly Player controllers to provide Player functionality after the flow has ended */
+    controllers: {
+      /** A read only instance of the Data Controller */
+      data: ReadOnlyDataController;
+    };
   };
 
 /** The flow finished but not successfully */