@player-ui/player 0.3.0-next.2 → 0.3.0-next.4

package/src/controllers/constants/index.ts

@@ -0,0 +1,85 @@
+import { LocalModel } from '../../data';
+import { BindingInstance } from '../../binding';
+import { objectToBatchSet } from './utils';
+
+export interface ConstantsProvider {
+  /**
+   * Function to add constants to the providers store
+   * - @param data values to add to the constants store
+   */
+  addConstants(data: Record<string, any>, namespace: string): void;
+
+  /**
+   * Function to retreive 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)
+   */
+  getConstants(key: any, namespace: string, fallback?: any): any;
+
+  /**
+   * Function to set values to temporarily override certain keys in the perminant store
+   * - @param data values to override store with
+   * - @param namespace namespace to override
+   */
+  setTemporaryValues(data: any, namespace: string): void;
+
+  /**
+   * Clears any temporary values that were previously set
+   */
+  clearTemporaryValues(): void;
+}
+
+/**
+ * Key/Value store for constants and context for Player
+ */
+export class ConstantsController implements ConstantsProvider {
+  /**
+   * Data store is basically a map of namespaces to DataModels to provide some data isolation
+   */
+  private store: Map<string, LocalModel>;
+
+  /**
+   * Separate store for temporary flow specific overrides.
+   * They are kept in a separate data model to make clearing it easier between flows
+   * and so there is no confusion on what is static and what is temporary
+   */
+  private tempStore: Map<string, LocalModel>;
+
+  constructor() {
+    this.store = new Map();
+    this.tempStore = new Map();
+  }
+
+  addConstants(data: any, namespace: string): void {
+    if (this.store.has(namespace)) {
+      this.store.get(namespace)?.set(objectToBatchSet(data));
+    } else {
+      this.store.set(namespace, new LocalModel(data));
+    }
+  }
+
+  getConstants(key: string, namespace: string, fallback?: any): any {
+    const path = new BindingInstance(key);
+
+    return (
+      this.tempStore.get(namespace)?.get(path) ??
+      this.store.get(namespace)?.get(path) ??
+      fallback
+    );
+  }
+
+  setTemporaryValues(data: any, namespace: string): void {
+    if (this.tempStore.has(namespace)) {
+      this.tempStore.get(namespace)?.set(objectToBatchSet(data));
+    } else {
+      this.tempStore.set(namespace, new LocalModel(data));
+    }
+  }
+
+  clearTemporaryValues(): void {
+    this.tempStore.forEach((value: LocalModel) => {
+      value.reset();
+    });
+  }
+}

package/src/controllers/constants/utils.ts

@@ -0,0 +1,37 @@
+import { BindingInstance } from '../../binding';
+
+/** Recursively flattens a nested object to be an object of depth 1 with keys being the full path in the orginal object */
+export function flatten(obj: any, roots: [string][] = [], sep = '.'): any {
+  return (
+    Object
+      // find props of given object
+      .keys(obj)
+      // return an object by iterating props
+      .reduce(
+        (memo, prop) => ({
+          // create a new object
+
+          // include previously returned object
+          ...memo,
+          ...(Object.prototype.toString.call(obj[prop]) === '[object Object]'
+            ? // keep working if value is an object
+              flatten(obj[prop], roots.concat([prop]))
+            : // include current prop and value and prefix prop with the roots
+              { [roots.concat([prop]).join(sep)]: obj[prop] }),
+        }),
+        {}
+      )
+  );
+}
+
+/** Converts an object into a list of binding/value tuples to use with a LocalModel object */
+export function objectToBatchSet(obj: any): [BindingInstance, any][] {
+  const flattenedObj = flatten(obj);
+  const batchTxn: [BindingInstance, any][] = [];
+
+  Object.keys(flattenedObj).forEach((key) => {
+    batchTxn.push([new BindingInstance(key), flattenedObj[key]]);
+  });
+
+  return batchTxn;
+}

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

@@ -1,9 +1,9 @@
 import { SyncHook, SyncWaterfallHook, SyncBailHook } from 'tapable-ts';
-import type { Logger } from '@player-ui/logger';
 import { omit, removeAt } from 'timm';
 import { dequal } from 'dequal';
-import type { BindingParser, BindingLike } from '@player-ui/binding';
-import { BindingInstance } from '@player-ui/binding';
+import type { Logger } from '../logger';
+import type { BindingParser, BindingLike } from '../binding';
+import { BindingInstance } from '../binding';
 import type {
   BatchSetTransaction,
   Updates,
@@ -11,9 +11,9 @@ import type {
   DataModelWithParser,
   DataPipeline,
   DataModelMiddleware,
-} from '@player-ui/data';
-import { PipelinedDataModel, LocalModel } from '@player-ui/data';
-import type { RawSetTransaction } from './types';
+} from '../data';
+import { PipelinedDataModel, LocalModel } from '../data';
+import type { RawSetTransaction } from '../types';
 
 /** The orchestrator for player data */
 export class DataController implements DataModelWithParser<DataModelOptions> {

package/src/controllers/flow/controller.ts

@@ -0,0 +1,95 @@
+import { SyncHook } from 'tapable-ts';
+import type { Navigation, NavigationFlowEndState } from '@player-ui/types';
+import type { Logger } from '../../logger';
+import type { NamedState, TransitionOptions } from './flow';
+import { FlowInstance } from './flow';
+
+/** A manager for the navigation section of a Content blob */
+export class FlowController {
+  public readonly hooks = {
+    flow: new SyncHook<[FlowInstance]>(),
+  };
+
+  private readonly log?: Logger;
+  private navigation: Navigation;
+  private navStack: FlowInstance[];
+  public current?: FlowInstance;
+
+  constructor(
+    navigation: Navigation,
+    options?: {
+      /** A logger instance to use */
+      logger?: Logger;
+    }
+  ) {
+    this.navigation = navigation;
+    this.navStack = [];
+    this.log = options?.logger;
+
+    this.start = this.start.bind(this);
+    this.run = this.run.bind(this);
+    this.transition = this.transition.bind(this);
+  }
+
+  /** Navigate to another state in the state-machine */
+  public transition(stateTransition: string, options?: TransitionOptions) {
+    if (this.current === undefined) {
+      throw new Error('Not currently in a flow. Cannot transition.');
+    }
+
+    this.current.transition(stateTransition, options);
+  }
+
+  private async 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);
+  }
+
+  private async run(startState: string): Promise<NavigationFlowEndState> {
+    if (!Object.prototype.hasOwnProperty.call(this.navigation, startState)) {
+      return Promise.reject(new Error(`No flow defined for: ${startState}`));
+    }
+
+    const startFlow = this.navigation[startState];
+
+    if (startFlow === null || typeof startFlow !== 'object') {
+      return Promise.reject(
+        new Error(`Flow: ${startState} needs to be an object`)
+      );
+    }
+
+    this.log?.debug(`Starting flow: ${startState}`);
+
+    const flow = new FlowInstance(startState, startFlow, { logger: this.log });
+    this.addNewFlow(flow);
+    const end = await flow.start();
+    this.navStack.pop();
+
+    if (this.navStack.length > 0) {
+      const firstItem = 0;
+      this.current = this.navStack[firstItem];
+    }
+
+    return end;
+  }
+
+  public async start(): Promise<NavigationFlowEndState> {
+    if (!this.navigation.BEGIN) {
+      return Promise.reject(new Error('Must supply a BEGIN state'));
+    }
+
+    return this.run(this.navigation.BEGIN);
+  }
+}

package/src/controllers/flow/flow.ts

@@ -0,0 +1,205 @@
+import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable-ts';
+import type { DeferredPromise } from 'p-defer';
+import defer from 'p-defer';
+import type {
+  NavigationFlow,
+  NavigationFlowState,
+  NavigationFlowEndState,
+} from '@player-ui/types';
+import type { Logger } from '../../logger';
+
+export interface NamedState {
+  /** The name of the navigation node */
+  name: string;
+
+  /** The nav node */
+  value: NavigationFlowState;
+}
+
+export interface TransitionOptions {
+  /** Ignore any validations or other signals preventing the transition from taking place  */
+  force?: boolean;
+}
+export type TransitionFunction = (
+  name: string,
+  options?: TransitionOptions
+) => void;
+
+/** The Content navigation state machine */
+export class FlowInstance {
+  private flow: NavigationFlow;
+  private log?: Logger;
+  private history: string[];
+  private flowPromise?: DeferredPromise<NavigationFlowEndState>;
+  public readonly id: string;
+  public currentState?: NamedState;
+  public readonly hooks = {
+    beforeStart: new SyncBailHook<[NavigationFlow], NavigationFlow>(),
+
+    /** A callback when the onStart node was present */
+    onStart: new SyncHook<[any]>(),
+
+    /** A callback when the onEnd node was present */
+    onEnd: new SyncHook<[any]>(),
+
+    /** A hook to intercept and block a transition */
+    skipTransition: new SyncBailHook<
+      [NamedState | undefined],
+      boolean | undefined
+    >(),
+
+    /** A chance to manipulate the flow-node used to calculate the given transition used  */
+    beforeTransition: new SyncWaterfallHook<
+      [Exclude<NavigationFlowState, NavigationFlowEndState>, string]
+    >(),
+
+    /** A chance to manipulate the flow-node calculated after a transition */
+    resolveTransitionNode: new SyncWaterfallHook<[NavigationFlowState]>(),
+
+    /** A callback when a transition from 1 state to another was made */
+    transition: new SyncHook<[NamedState | undefined, NamedState]>(),
+  };
+
+  constructor(
+    id: string,
+    flow: NavigationFlow,
+    options?: {
+      /** Logger instance to use */
+      logger?: Logger;
+    }
+  ) {
+    this.id = id;
+    this.flow = flow;
+    this.log = options?.logger;
+    this.history = [];
+
+    this.hooks.transition.tap(
+      'startPromise',
+      async (_oldState, nextState: NamedState) => {
+        const newState = nextState.value;
+
+        if (this.flowPromise && newState.state_type === 'END') {
+          this.flowPromise.resolve(newState);
+        }
+      }
+    );
+  }
+
+  /** Start the state machine */
+  public async start(): Promise<NavigationFlowEndState> {
+    if (this.flowPromise) {
+      this.log?.warn('Already called start for flow');
+
+      return this.flowPromise.promise;
+    }
+
+    this.flow = this.hooks.beforeStart.call(this.flow) || this.flow;
+
+    if (this.flow.onStart) {
+      this.hooks.onStart.call(this.flow.onStart);
+    }
+
+    const initialState = this.flow.startState;
+
+    if (!initialState) {
+      return Promise.reject(new Error("No 'startState' defined for flow"));
+    }
+
+    this.flowPromise = defer();
+    this.pushHistory(initialState);
+
+    return this.flowPromise.promise;
+  }
+
+  public transition(transitionValue: string, options?: TransitionOptions) {
+    if (this.currentState?.value.state_type === 'END') {
+      this.log?.warn(
+        `Skipping transition using ${transitionValue}. Already at and END state`
+      );
+
+      return;
+    }
+
+    if (this.currentState === undefined) {
+      throw new Error("Cannot transition when there's no current state");
+    }
+
+    if (options?.force) {
+      this.log?.debug(`Forced transition. Skipping validation checks`);
+    } else {
+      const skipTransition = this.hooks.skipTransition.call(this.currentState);
+
+      if (skipTransition) {
+        this.log?.debug(
+          `Skipping transition from ${this.currentState} b/c hook told us to`
+        );
+        return;
+      }
+    }
+
+    const state = this.hooks.beforeTransition.call(
+      this.currentState.value,
+      transitionValue
+    );
+
+    if (!('transitions' in state)) {
+      throw new Error(`No transitions defined for ${this.currentState.value}`);
+    }
+
+    const { transitions } = state;
+    const nextState = transitions[transitionValue] || transitions['*'];
+
+    if (nextState === undefined) {
+      this.log?.warn(
+        `No transition from ${this.currentState.name} using ${transitionValue} or *`
+      );
+
+      return;
+    }
+
+    this.log?.debug(
+      `Transitioning from ${this.currentState.name} to ${nextState} using ${transitionValue} `
+    );
+
+    return this.pushHistory(nextState, options);
+  }
+
+  private pushHistory(stateName: string, options?: TransitionOptions) {
+    if (!Object.prototype.hasOwnProperty.call(this.flow, stateName)) {
+      throw new Error(`No flow definition for: ${stateName} was found.`);
+    }
+
+    let nextState = this.flow[stateName];
+
+    if (
+      !this.flow[stateName] ||
+      typeof nextState !== 'object' ||
+      !('state_type' in nextState)
+    ) {
+      this.log?.error(`Flow doesn't contain any states named: ${stateName}`);
+
+      return;
+    }
+
+    const prevState = this.currentState;
+
+    nextState = this.hooks.resolveTransitionNode.call(nextState);
+
+    const newCurrentState = {
+      name: stateName,
+      value: nextState,
+    } as NamedState;
+    this.currentState = newCurrentState;
+    this.history.push(stateName);
+
+    // If the new state is an END state call the `onEnd` if it exists
+
+    if (newCurrentState.value.state_type === 'END' && this.flow.onEnd) {
+      this.hooks.onEnd.call(this.flow.onEnd);
+    }
+
+    this.hooks.transition.call(prevState, {
+      ...newCurrentState,
+    });
+  }
+}

package/src/controllers/flow/index.ts

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

package/src/controllers/index.ts

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

package/src/{validation → controllers/validation}/binding-tracker.ts

@@ -1,12 +1,12 @@
-import type { ViewPlugin, Resolver, Node, ViewInstance } from '@player-ui/view';
+import type { Validation } from '@player-ui/types';
+import type { ViewPlugin, Resolver, Node, ViewInstance } from '../../view';
 import type {
   BindingInstance,
   BindingLike,
   BindingFactory,
-} from '@player-ui/binding';
-import { isBinding } from '@player-ui/binding';
-import type { ValidationResponse } from '@player-ui/validator';
-import type { Validation } from '@player-ui/types';
+} from '../../binding';
+import { isBinding } from '../../binding';
+import type { ValidationResponse } from '../../validator';
 
 const CONTEXT = 'validation-binding-tracker';
 

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

@@ -1,8 +1,10 @@
-import type { BindingInstance, BindingFactory } from '@player-ui/binding';
-import { isBinding } from '@player-ui/binding';
-import type { DataModelWithParser, DataModelMiddleware } from '@player-ui/data';
-import type { SchemaController } from '@player-ui/schema';
 import type { Validation } from '@player-ui/types';
+import { SyncHook, SyncWaterfallHook } from 'tapable-ts';
+
+import type { BindingInstance, BindingFactory } from '../../binding';
+import { isBinding } from '../../binding';
+import type { DataModelWithParser, DataModelMiddleware } from '../../data';
+import type { SchemaController } from '../../schema';
 import type {
   ErrorValidationResponse,
   ValidationObject,
@@ -10,19 +12,18 @@ import type {
   ValidationProvider,
   ValidationResponse,
   WarningValidationResponse,
-} from '@player-ui/validator';
-import { ValidationMiddleware, ValidatorRegistry } from '@player-ui/validator';
-import type { Logger } from '@player-ui/logger';
-import { ProxyLogger } from '@player-ui/logger';
-import type { Resolve, ViewInstance } from '@player-ui/view';
-import { caresAboutDataChanges } from '@player-ui/view';
-import { replaceParams } from '@player-ui/utils';
-import { resolveDataRefs } from '@player-ui/string-resolver';
+} from '../../validator';
+import { ValidationMiddleware, ValidatorRegistry } from '../../validator';
+import type { Logger } from '../../logger';
+import { ProxyLogger } from '../../logger';
+import type { Resolve, ViewInstance } from '../../view';
+import { caresAboutDataChanges } from '../../view';
+import { replaceParams } from '../../utils';
+import { resolveDataRefs } from '../../string-resolver';
 import type {
   ExpressionEvaluatorOptions,
   ExpressionType,
-} from '@player-ui/expressions';
-import { SyncHook, SyncWaterfallHook } from 'tapable-ts';
+} from '../../expressions';
 import type { BindingTracker } from './binding-tracker';
 import { ValidationBindingTrackerViewPlugin } from './binding-tracker';
 

package/src/{view → controllers/view}/asset-transform.ts

@@ -1,9 +1,8 @@
-import type { Node } from '@player-ui/view';
-import { NodeType } from '@player-ui/view';
+import type { Node } from '../../view';
+import { NodeType } from '../../view';
 import { LocalStateStore } from './store';
 import type { TransformRegistry } from './types';
 import type { ViewController } from './controller';
-import { PlayerPlugin } from '..';
 
 /** Traverse up the nodes until the target is found */
 function findUp(node: Node.Node, target: Node.Node): boolean {

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

@@ -1,16 +1,17 @@
 import { SyncHook, SyncWaterfallHook } from 'tapable-ts';
-import type { Resolve } from '@player-ui/view';
-import { ViewInstance } from '@player-ui/view';
-import type { Logger } from '@player-ui/logger';
-import type { FlowInstance, FlowController } from '@player-ui/flow';
-import type { View, NavigationFlowViewState } from '@player-ui/types';
-import { resolveDataRefsInString } from '@player-ui/string-resolver';
-import { Registry } from '@player-ui/partial-match-registry';
 import queueMicrotask from 'queue-microtask';
+import { Registry } from '@player-ui/partial-match-registry';
+import type { View, NavigationFlowViewState } from '@player-ui/types';
+
+import { resolveDataRefsInString } from '../../string-resolver';
+import type { Resolve } from '../../view';
+import { ViewInstance } from '../../view';
+import type { Logger } from '../../logger';
+import type { FlowInstance, FlowController } from '../flow';
 import type { DataController } from '../data';
 import { AssetTransformCorePlugin } from './asset-transform';
 import type { TransformRegistry } from './types';
-import type { BindingInstance } from '..';
+import type { BindingInstance } from '../../binding';
 
 export interface ViewControllerOptions {
   /** Where to get data from */

package/src/controllers/view/index.ts

@@ -0,0 +1,4 @@
+export * from './asset-transform';
+export * from './controller';
+export * from './store';
+export * from './types';

package/src/{view → controllers/view}/types.ts

@@ -1,6 +1,7 @@
 import type { Asset } from '@player-ui/types';
-import type { Resolve, Node } from '@player-ui/view';
 import type { Registry } from '@player-ui/partial-match-registry';
+
+import type { Resolve, Node } from '../../view';
 import type { Store } from './store';
 
 /** Transform function that is ran on the Asset before it's resolved */