@player-ui/player 0.4.0-next.11 → 0.4.0-next.13

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@player-ui/player",
-  "version": "0.4.0-next.11",
+  "version": "0.4.0-next.13",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {},
   "dependencies": {
-    "@player-ui/partial-match-registry": "0.4.0-next.11",
-    "@player-ui/types": "0.4.0-next.11",
+    "@player-ui/partial-match-registry": "0.4.0-next.13",
+    "@player-ui/types": "0.4.0-next.13",
     "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",

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;

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/validation/controller.ts

@@ -1,5 +1,6 @@
 import type { Validation } from '@player-ui/types';
 import { SyncHook, SyncWaterfallHook } from 'tapable-ts';
+import { setIn } from 'timm';
 
 import type { BindingInstance, BindingFactory } from '../../binding';
 import { isBinding } from '../../binding';
@@ -104,6 +105,13 @@ type StatefulError = {
 
 export type StatefulValidationObject = StatefulWarning | StatefulError;
 
+/** Helper function to determin if the subset is within the containingSet */
+function isSubset<T>(subset: Set<T>, containingSet: Set<T>): boolean {
+  if (subset.size > containingSet.size) return false;
+  for (const entry of subset) if (!containingSet.has(entry)) return false;
+  return true;
+}
+
 /** Helper for initializing a validation object that tracks state */
 function createStatefulValidationObject(
   obj: ValidationObjectWithSource
@@ -207,67 +215,82 @@ class ValidatedBinding {
     canDismiss: boolean
   ) {
     // If the currentState is not load, skip those
-    this.applicableValidations = this.applicableValidations.map((obj) => {
-      if (obj.state === 'dismissed') {
-        // Don't rerun any dismissed warnings
-        return obj;
-      }
+    this.applicableValidations = this.applicableValidations.map(
+      (originalValue) => {
+        if (originalValue.state === 'dismissed') {
+          // Don't rerun any dismissed warnings
+          return originalValue;
+        }
 
-      const blocking =
-        obj.value.blocking ??
-        ((obj.value.severity === 'warning' && 'once') || true);
-
-      const isBlockingNavigation =
-        blocking === true || (blocking === 'once' && !canDismiss);
-
-      const dismissable = canDismiss && blocking === 'once';
-
-      if (
-        this.currentPhase === 'navigation' &&
-        obj.state === 'active' &&
-        dismissable
-      ) {
-        if (obj.value.severity === 'warning') {
-          const warn = obj as ActiveWarning;
-          if (warn.dismissable && warn.response.dismiss) {
-            warn.response.dismiss();
-          } else {
-            warn.dismissable = true;
+        // treat all warnings the same and block it once (unless blocking is true)
+        const blocking =
+          originalValue.value.blocking ??
+          ((originalValue.value.severity === 'warning' && 'once') || true);
+
+        const obj = setIn(
+          originalValue,
+          ['value', 'blocking'],
+          blocking
+        ) as StatefulValidationObject;
+
+        const isBlockingNavigation =
+          blocking === true || (blocking === 'once' && !canDismiss);
+
+        if (
+          this.currentPhase === 'navigation' &&
+          obj.state === 'active' &&
+          obj.value.blocking !== true
+        ) {
+          if (obj.value.severity === 'warning') {
+            const warn = obj as ActiveWarning;
+            if (
+              warn.dismissable &&
+              warn.response.dismiss &&
+              (warn.response.blocking !== 'once' || !warn.response.blocking)
+            ) {
+              warn.response.dismiss();
+            } else {
+              if (warn?.response.blocking === 'once') {
+                warn.response.blocking = false;
+              }
+
+              warn.dismissable = true;
+            }
+
+            return warn as StatefulValidationObject;
           }
+        }
 
-          return obj;
+        const response = runner(obj.value);
+
+        const newState = {
+          type: obj.type,
+          value: obj.value,
+          state: response ? 'active' : 'none',
+          isBlockingNavigation,
+          dismissable:
+            obj.value.severity === 'warning' &&
+            this.currentPhase === 'navigation',
+          response: response
+            ? {
+                ...obj.value,
+                message: response.message ?? 'Something is broken',
+                severity: obj.value.severity,
+                displayTarget: obj.value.displayTarget ?? 'field',
+              }
+            : undefined,
+        } as StatefulValidationObject;
+
+        if (newState.state === 'active' && obj.value.severity === 'warning') {
+          (newState.response as WarningValidationResponse).dismiss = () => {
+            (newState as StatefulWarning).state = 'dismissed';
+            this.onDismiss?.();
+          };
         }
-      }
 
-      const response = runner(obj.value);
-
-      const newState = {
-        type: obj.type,
-        value: obj.value,
-        state: response ? 'active' : 'none',
-        isBlockingNavigation,
-        dismissable:
-          obj.value.severity === 'warning' &&
-          this.currentPhase === 'navigation',
-        response: response
-          ? {
-              ...obj.value,
-              message: response.message ?? 'Something is broken',
-              severity: obj.value.severity,
-              displayTarget: obj.value.displayTarget ?? 'field',
-            }
-          : undefined,
-      } as StatefulValidationObject;
-
-      if (newState.state === 'active' && obj.value.severity === 'warning') {
-        (newState.response as WarningValidationResponse).dismiss = () => {
-          (newState as StatefulWarning).state = 'dismissed';
-          this.onDismiss?.();
-        };
+        return newState;
       }
-
-      return newState;
-    });
+    );
   }
 
   public update(
@@ -275,6 +298,8 @@ class ValidatedBinding {
     canDismiss: boolean,
     runner: ValidationRunner
   ) {
+    const newApplicableValidations: StatefulValidationObject[] = [];
+
     if (phase === 'load' && this.currentPhase !== undefined) {
       // Tried to run the 'load' phase twice. Aborting
       return;
@@ -301,8 +326,23 @@ class ValidatedBinding {
       (this.currentPhase === 'load' || this.currentPhase === 'change')
     ) {
       // Can transition to a nav state from a change or load
+
+      // if there is an non-blocking error that is active then remove the error from applicable validations so it can no longer be shown
+      // which is needed if there are additional warnings to become active for that binding after the error is shown
+      this.applicableValidations.forEach((element) => {
+        if (
+          !(
+            element.type === 'error' &&
+            element.state === 'active' &&
+            element.isBlockingNavigation === false
+          )
+        ) {
+          newApplicableValidations.push(element);
+        }
+      });
+
       this.applicableValidations = [
-        ...this.applicableValidations,
+        ...newApplicableValidations,
         ...(this.currentPhase === 'load' ? this.validationsByState.change : []),
         ...this.validationsByState.navigation,
       ];
@@ -712,18 +752,12 @@ export class ValidationController implements BindingTracker {
     if (isNavigationTrigger) {
       // If validations didn't change since last update, dismiss all dismissible validations.
       const { activeBindings } = this;
-      if (this.setCompare(lastActiveBindings, activeBindings)) {
+      if (isSubset(activeBindings, lastActiveBindings)) {
         updateValidations(true);
       }
     }
   }
 
-  private setCompare<T>(set1: Set<T>, set2: Set<T>): boolean {
-    if (set1.size !== set2.size) return false;
-    for (const entry of set1) if (!set2.has(entry)) return false;
-    return true;
-  }
-
   private get activeBindings(): Set<BindingInstance> {
     return new Set(
       Array.from(this.getBindings()).filter(

package/src/player.ts

@@ -30,8 +30,8 @@ import type {
 import { NOT_STARTED_STATE } from './types';
 
 // Variables injected at build time
-const PLAYER_VERSION = '0.4.0-next.11';
-const COMMIT = '843876eed97f2f08d6ade9a2d86984fc9e4bd916';
+const PLAYER_VERSION = '0.4.0-next.13';
+const COMMIT = '80a0ff72b097eff2e227c7effef17923655c7499';
 
 export interface PlayerPlugin {
   /**