@player-ui/player 0.8.0--canary.307.9621 → 0.8.0-next.0

package/src/controllers/flow/flow.ts

@@ -1,12 +1,12 @@
-import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable-ts';
-import type { DeferredPromise } from 'p-defer';
-import defer from 'p-defer';
+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';
+} from "@player-ui/types";
+import type { Logger } from "../../logger";
 
 export interface NamedState {
   /** The name of the navigation node */
@@ -22,7 +22,7 @@ export interface TransitionOptions {
 }
 export type TransitionFunction = (
   name: string,
-  options?: TransitionOptions
+  options?: TransitionOptions,
 ) => void;
 
 /** The Content navigation state machine */
@@ -70,7 +70,7 @@ export class FlowInstance {
     options?: {
       /** Logger instance to use */
       logger?: Logger;
-    }
+    },
   ) {
     this.id = id;
     this.flow = flow;
@@ -78,21 +78,21 @@ export class FlowInstance {
     this.history = [];
 
     this.hooks.transition.tap(
-      'startPromise',
+      "startPromise",
       async (_oldState, nextState: NamedState) => {
         const newState = nextState.value;
 
-        if (this.flowPromise && newState.state_type === 'END') {
+        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');
+      this.log?.warn("Already called start for flow");
 
       return this.flowPromise.promise;
     }
@@ -118,13 +118,13 @@ export class FlowInstance {
   public transition(transitionValue: string, options?: TransitionOptions) {
     if (this.isTransitioning) {
       throw new Error(
-        `Transitioning while ongoing transition from ${this.currentState?.name} is in progress is not supported`
+        `Transitioning while ongoing transition from ${this.currentState?.name} is in progress is not supported`,
       );
     }
 
-    if (this.currentState?.value.state_type === 'END') {
+    if (this.currentState?.value.state_type === "END") {
       this.log?.warn(
-        `Skipping transition using ${transitionValue}. Already at and END state`
+        `Skipping transition using ${transitionValue}. Already at and END state`,
       );
 
       return;
@@ -141,7 +141,7 @@ export class FlowInstance {
 
       if (skipTransition) {
         this.log?.debug(
-          `Skipping transition from ${this.currentState.name} b/c hook told us to`
+          `Skipping transition from ${this.currentState.name} b/c hook told us to`,
         );
         return;
       }
@@ -149,26 +149,26 @@ export class FlowInstance {
 
     const state = this.hooks.beforeTransition.call(
       this.currentState.value,
-      transitionValue
+      transitionValue,
     );
 
-    if (!('transitions' in state)) {
+    if (!("transitions" in state)) {
       throw new Error(`No transitions defined for ${this.currentState.value}`);
     }
 
     const { transitions } = state;
-    const nextState = transitions[transitionValue] || transitions['*'];
+    const nextState = transitions[transitionValue] || transitions["*"];
 
     if (nextState === undefined) {
       this.log?.warn(
-        `No transition from ${this.currentState.name} using ${transitionValue} or *`
+        `No transition from ${this.currentState.name} using ${transitionValue} or *`,
       );
 
       return;
     }
 
     this.log?.debug(
-      `Transitioning from ${this.currentState.name} to ${nextState} using ${transitionValue} `
+      `Transitioning from ${this.currentState.name} to ${nextState} using ${transitionValue} `,
     );
 
     return this.pushHistory(nextState, options);
@@ -183,8 +183,8 @@ export class FlowInstance {
 
     if (
       !this.flow[stateName] ||
-      typeof nextState !== 'object' ||
-      !('state_type' in nextState)
+      typeof nextState !== "object" ||
+      !("state_type" in nextState)
     ) {
       this.log?.error(`Flow doesn't contain any states named: ${stateName}`);
 
@@ -205,7 +205,7 @@ export class FlowInstance {
 
     // If the new state is an END state call the `onEnd` if it exists
 
-    if (newCurrentState.value.state_type === 'END' && this.flow.onEnd) {
+    if (newCurrentState.value.state_type === "END" && this.flow.onEnd) {
       this.hooks.onEnd.call(this.flow.onEnd);
     }
 

package/src/controllers/flow/index.ts

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

package/src/controllers/index.ts

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

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

@@ -1,14 +1,15 @@
-import type { Validation } from '@player-ui/types';
-import type { ViewPlugin, Resolver, Node, ViewInstance } from '../../view';
+import type { Validation } from "@player-ui/types";
+import type { ViewPlugin, Resolver, Node, ViewInstance } from "../../view";
+import { NodeType } from "../../view";
 import type {
   BindingInstance,
   BindingLike,
   BindingFactory,
-} from '../../binding';
-import { isBinding } from '../../binding';
-import type { ValidationResponse } from '../../validator';
+} from "../../binding";
+import { isBinding } from "../../binding";
+import type { ValidationResponse } from "../../validator";
 
-const CONTEXT = 'validation-binding-tracker';
+const CONTEXT = "validation-binding-tracker";
 
 export interface BindingTracker {
   /** Get the bindings currently being tracked for validation */
@@ -67,25 +68,15 @@ export class ValidationBindingTrackerViewPlugin
 
     let lastViewUpdateChangeSet: Set<BindingInstance> | undefined;
 
-    const nodeTree = new Map<Node.Node, Set<Node.Node>>();
-
     /** Map of node to all bindings in children */
-    let lastComputedBindingTree = new Map<Node.Node, Set<BindingInstance>>();
+    const lastComputedBindingTree = new Map<Node.Node, Set<BindingInstance>>();
     let currentBindingTree = new Map<Node.Node, Set<BindingInstance>>();
 
     /** Map of registered section nodes to bindings */
     const lastSectionBindingTree = new Map<Node.Node, Set<BindingInstance>>();
 
-    /** Add the given child to the parent's tree. Create the parent entry if none exists */
-    function addToTree(child: Node.Node, parent: Node.Node) {
-      if (nodeTree.has(parent)) {
-        nodeTree.get(parent)?.add(child);
-
-        return;
-      }
-
-      nodeTree.set(parent, new Set([child]));
-    }
+    /** Map of resolved nodes to their original nodes. */
+    const resolvedNodeMap: Map<Node.Node, Node.Node> = new Map();
 
     resolver.hooks.beforeUpdate.tap(CONTEXT, (changes) => {
       lastViewUpdateChangeSet = changes;
@@ -100,8 +91,8 @@ export class ValidationBindingTrackerViewPlugin
 
       const intersection = new Set(
         [...lastViewUpdateChangeSet].filter((b) =>
-          trackedBindingsForNode.has(b)
-        )
+          trackedBindingsForNode.has(b),
+        ),
       );
 
       return intersection.size === 0;
@@ -158,7 +149,8 @@ export class ValidationBindingTrackerViewPlugin
 
             const firstFieldEOW = eows?.find(
               (eow) =>
-                eow.displayTarget === 'field' || eow.displayTarget === undefined
+                eow.displayTarget === "field" ||
+                eow.displayTarget === undefined,
             );
 
             return firstFieldEOW;
@@ -195,7 +187,7 @@ export class ValidationBindingTrackerViewPlugin
                 ?._getValidationForBinding(binding)
                 ?.get();
 
-              if (eow && eow.displayTarget === 'section') {
+              if (eow && eow.displayTarget === "section") {
                 validations.push(eow);
               }
             });
@@ -203,7 +195,7 @@ export class ValidationBindingTrackerViewPlugin
             return validations;
           },
           register: (registerOptions) => {
-            if (registerOptions?.type === 'section') {
+            if (registerOptions?.type === "section") {
               if (!sections.has(node)) {
                 sections.set(node, new Set());
               }
@@ -214,46 +206,66 @@ export class ValidationBindingTrackerViewPlugin
       };
     });
 
-    resolver.hooks.afterNodeUpdate.tap(CONTEXT, (node, parent, update) => {
-      if (parent) {
-        addToTree(node, parent);
-      }
+    resolver.hooks.afterNodeUpdate.tap(
+      CONTEXT,
+      (originalNode, parent, update) => {
+        // Compute the new tree for this node
+        // If it's not-updated, use the last known value
+
+        const { updated, node: resolvedNode } = update;
+        resolvedNodeMap.set(resolvedNode, originalNode);
+
+        if (updated) {
+          const newlyComputed = new Set(tracked.get(originalNode));
+          if (resolvedNode.type === NodeType.MultiNode) {
+            resolvedNode.values.forEach((value) =>
+              currentBindingTree
+                .get(value)
+                ?.forEach((b) => newlyComputed.add(b)),
+            );
+          }
 
-      // Compute the new tree for this node
-      // If it's not-updated, use the last known value
-
-      if (update.updated) {
-        const newlyComputed = new Set(tracked.get(node));
-        nodeTree.get(node)?.forEach((child) => {
-          currentBindingTree.get(child)?.forEach((b) => newlyComputed.add(b));
-        });
-        currentBindingTree.set(node, newlyComputed);
-      } else {
-        currentBindingTree.set(
-          node,
-          lastComputedBindingTree.get(node) ?? new Set()
-        );
-      }
+          if ("children" in resolvedNode && resolvedNode.children) {
+            resolvedNode.children.forEach((child) => {
+              currentBindingTree
+                .get(child.value)
+                ?.forEach((b) => newlyComputed.add(b));
+            });
+          }
 
-      if (node === resolver.root) {
-        this.trackedBindings = new Set(currentBindingTree.get(node));
-        lastComputedBindingTree = currentBindingTree;
+          currentBindingTree.set(resolvedNode, newlyComputed);
+        } else {
+          currentBindingTree.set(
+            resolvedNode,
+            lastComputedBindingTree.get(originalNode) ?? new Set(),
+          );
+        }
 
-        lastSectionBindingTree.clear();
-        sections.forEach((nodeSet, sectionNode) => {
-          const temp = new Set<BindingInstance>();
-          nodeSet.forEach((n) => {
-            tracked.get(n)?.forEach(temp.add, temp);
+        if (originalNode === resolver.root) {
+          this.trackedBindings = new Set(currentBindingTree.get(resolvedNode));
+          lastComputedBindingTree.clear();
+          currentBindingTree.forEach((value, key) => {
+            const node = resolvedNodeMap.get(key);
+            if (node) {
+              lastComputedBindingTree.set(node, value);
+            }
           });
-          lastSectionBindingTree.set(sectionNode, temp);
-        });
 
-        nodeTree.clear();
-        tracked.clear();
-        sections.clear();
-        currentBindingTree = new Map();
-      }
-    });
+          lastSectionBindingTree.clear();
+          sections.forEach((nodeSet, sectionNode) => {
+            const temp = new Set<BindingInstance>();
+            nodeSet.forEach((n) => {
+              tracked.get(n)?.forEach(temp.add, temp);
+            });
+            lastSectionBindingTree.set(sectionNode, temp);
+          });
+
+          tracked.clear();
+          sections.clear();
+          currentBindingTree = new Map();
+        }
+      },
+    );
   }
 
   apply(view: ViewInstance) {