@player-ui/player 0.15.5-next.0 → 0.15.6

package/package.json

@@ -6,12 +6,12 @@
     "types"
   ],
   "name": "@player-ui/player",
-  "version": "0.15.5-next.0",
+  "version": "0.15.6",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@player-ui/partial-match-registry": "0.15.5-next.0",
-    "@player-ui/make-flow": "0.15.5-next.0",
-    "@player-ui/types": "0.15.5-next.0",
+    "@player-ui/partial-match-registry": "0.15.6",
+    "@player-ui/make-flow": "0.15.6",
+    "@player-ui/types": "0.15.6",
     "@types/dlv": "^1.1.4",
     "dequal": "^2.0.2",
     "dlv": "^1.1.3",

package/src/__tests__/player.test.ts

@@ -8,6 +8,7 @@ import type { ViewController } from "..";
 import actionsFlow from "./helpers/actions.flow";
 import type { InProgressState } from "../types";
 import { ActionExpPlugin } from "./helpers/action-exp.plugin";
+import TrackBindingPlugin from "./helpers/binding.plugin";
 
 const minimal = {
   id: "minimal-player-content-response-format",
@@ -722,3 +723,175 @@ test("view trigger once when moving between views", async () => {
     expect(viewTap).toHaveBeenCalledOnce();
   });
 });
+
+test("prevents invalid data from being committed during action-driven backward navigation", async () => {
+  const player = new Player({
+    plugins: [new TrackBindingPlugin()],
+  });
+
+  player.hooks.validationController.tap("test", (validationProvider) => {
+    validationProvider.hooks.createValidatorRegistry.tap("test", (registry) => {
+      registry.register("minValue", (_context, value) => {
+        if (typeof value === "number" && value < 0) {
+          return {
+            message: "Amount must be non-negative",
+            severity: "error",
+          };
+        }
+      });
+    });
+  });
+
+  const flow = {
+    id: "schema-invalid-force-navigation",
+    schema: {
+      ROOT: {
+        someValue: {
+          type: "SomeType",
+          validation: [
+            {
+              type: "minValue",
+              severity: "error",
+              trigger: "change",
+            },
+          ],
+        },
+      },
+    },
+    views: [
+      {
+        id: "input-view",
+        type: "info",
+        fields: {
+          asset: {
+            id: "input-fields",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "some-input",
+                  type: "input",
+                  binding: "someValue",
+                },
+              },
+            ],
+          },
+        },
+        actions: [
+          {
+            asset: {
+              id: "back-action",
+              type: "action",
+              value: "previous",
+              label: {
+                asset: {
+                  id: "back-label",
+                  type: "text",
+                  value: "Back",
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        id: "result-view",
+        type: "info",
+        title: {
+          asset: {
+            id: "result-title",
+            type: "text",
+            value: "Result",
+          },
+        },
+        primaryInfo: {
+          asset: {
+            id: "result-text",
+            type: "text",
+            value: "Leaked value: {{someValue}}",
+          },
+        },
+      },
+    ],
+    navigation: {
+      BEGIN: "FLOW_1",
+      FLOW_1: {
+        startState: "VIEW_INPUT",
+        VIEW_INPUT: {
+          state_type: "VIEW",
+          ref: "input-view",
+          transitions: {
+            previous: "ACTION_BACK",
+          },
+        },
+        ACTION_BACK: {
+          state_type: "ACTION",
+          exp: "{{unrelated}} = 'touched'",
+          transitions: {
+            "*": "VIEW_RESULT",
+          },
+        },
+        VIEW_RESULT: {
+          state_type: "VIEW",
+          ref: "result-view",
+          transitions: {
+            "*": "END_done",
+          },
+        },
+        END_done: {
+          state_type: "END",
+          outcome: "done",
+        },
+      },
+    },
+  };
+
+  player.start(flow as any);
+
+  await vitest.waitFor(() => {
+    const state = player.getState() as InProgressState;
+    return (
+      state?.controllers?.flow?.current?.currentState?.name === "VIEW_INPUT"
+    );
+  });
+
+  let state = player.getState() as InProgressState;
+  expect(state.controllers.flow.current?.currentState?.name).toBe("VIEW_INPUT");
+
+  // Simulate entering invalid data
+  state.controllers.data.set([["someValue", -1]]);
+
+  // The invalid data should be rejected and only available in the shadow model
+  expect(state.controllers.data.get("someValue")).toBeUndefined();
+  expect(
+    state.controllers.data.get("someValue", { includeInvalid: true }),
+  ).toBe(-1);
+
+  // Ensure normal navigation is blocked
+  state.controllers.flow.current?.transition("previous");
+
+  let currentState = player.getState() as InProgressState;
+  expect(currentState?.controllers?.flow?.current?.currentState?.name).toBe(
+    "VIEW_INPUT",
+  );
+
+  // Simulate forcing back navigation (bypassing validation)
+  state.controllers.flow.current?.transition("previous", { force: true });
+
+  currentState = player.getState() as InProgressState;
+  expect(currentState?.controllers?.flow?.current?.currentState?.name).toBe(
+    "VIEW_RESULT",
+  );
+
+  state = player.getState() as InProgressState;
+
+  // The invalid data should NOT be committed to the main model because of the transition
+  const finalValue = state.controllers.data.get("someValue");
+  expect(finalValue).toBeUndefined();
+  // The transition should have dropped the invalid data entirely, not just
+  // hidden it from the main model
+  const shadowValue = state.controllers.data.get("someValue", {
+    includeInvalid: true,
+  });
+  expect(shadowValue).toBeUndefined();
+});

package/src/controllers/validation/controller.ts

@@ -420,6 +420,7 @@ export class ValidationController implements BindingTracker {
   private viewValidationProvider?: ValidationProvider;
   private options?: SimpleValidatorContext;
   private weakBindingTracker = new Set<BindingInstance>();
+  private validationMiddleware?: ValidationMiddleware;
 
   constructor(schema: SchemaController, options?: SimpleValidatorContext) {
     this.schema = schema;
@@ -433,6 +434,55 @@ export class ValidationController implements BindingTracker {
 
   /** Return the middleware for the data-model to stop propagation of invalid data */
   public getDataMiddleware(): Array<DataModelMiddleware> {
+    const validationMiddleware = new ValidationMiddleware(
+      (binding) => {
+        if (!this.options) {
+          return;
+        }
+
+        this.updateValidationsForBinding(binding, "change", this.options);
+        const strongValidation = this.getValidationForBinding(binding);
+
+        // return validation issues directly on bindings first
+        if (strongValidation?.get()?.severity === "error") {
+          return strongValidation.get();
+        }
+
+        // if none, check to see any validations this binding may be a weak ref of and return
+        const newInvalidBindings: Set<StrongOrWeakBinding> = new Set();
+        this.validations.forEach((weakValidation, strongBinding) => {
+          if (
+            caresAboutDataChanges(
+              new Set([binding]),
+              weakValidation.weakBindings,
+            ) &&
+            weakValidation?.get()?.severity === "error"
+          ) {
+            weakValidation?.weakBindings.forEach((weakBinding) => {
+              if (weakBinding === strongBinding) {
+                newInvalidBindings.add({
+                  binding: weakBinding,
+                  isStrong: true,
+                });
+              } else {
+                newInvalidBindings.add({
+                  binding: weakBinding,
+                  isStrong: false,
+                });
+              }
+            });
+          }
+        });
+
+        if (newInvalidBindings.size > 0) {
+          return newInvalidBindings;
+        }
+      },
+      { logger: new ProxyLogger(() => this.options?.logger) },
+    );
+
+    this.validationMiddleware = validationMiddleware;
+
     return [
       {
         set: (transaction, options, next) => {
@@ -450,52 +500,7 @@ export class ValidationController implements BindingTracker {
           return next?.delete(binding, options);
         },
       },
-      new ValidationMiddleware(
-        (binding) => {
-          if (!this.options) {
-            return;
-          }
-
-          this.updateValidationsForBinding(binding, "change", this.options);
-          const strongValidation = this.getValidationForBinding(binding);
-
-          // return validation issues directly on bindings first
-          if (strongValidation?.get()?.severity === "error") {
-            return strongValidation.get();
-          }
-
-          // if none, check to see any validations this binding may be a weak ref of and return
-          const newInvalidBindings: Set<StrongOrWeakBinding> = new Set();
-          this.validations.forEach((weakValidation, strongBinding) => {
-            if (
-              caresAboutDataChanges(
-                new Set([binding]),
-                weakValidation.weakBindings,
-              ) &&
-              weakValidation?.get()?.severity === "error"
-            ) {
-              weakValidation?.weakBindings.forEach((weakBinding) => {
-                if (weakBinding === strongBinding) {
-                  newInvalidBindings.add({
-                    binding: weakBinding,
-                    isStrong: true,
-                  });
-                } else {
-                  newInvalidBindings.add({
-                    binding: weakBinding,
-                    isStrong: false,
-                  });
-                }
-              });
-            }
-          });
-
-          if (newInvalidBindings.size > 0) {
-            return newInvalidBindings;
-          }
-        },
-        { logger: new ProxyLogger(() => this.options?.logger) },
-      ),
+      validationMiddleware,
     ];
   }
 
@@ -533,10 +538,11 @@ export class ValidationController implements BindingTracker {
   public reset() {
     this.validations.clear();
     this.tracker = undefined;
+    this.validationMiddleware?.reset();
   }
 
   public onView(view: ViewInstance): void {
-    this.validations.clear();
+    this.reset();
     if (!this.options) {
       return;
     }

package/src/validator/validation-middleware.ts

@@ -163,4 +163,9 @@ export class ValidationMiddleware implements DataModelMiddleware {
 
     return next?.delete(binding, options);
   }
+
+  /** Clears any invalid values staged in the shadow model */
+  public reset(): void {
+    this.shadowModelPaths.clear();
+  }
 }

package/src/view/plugins/__tests__/template.test.ts

@@ -845,4 +845,94 @@ describe("templates", () => {
     // Make sure the ordering is preserved in the snapshot
     expect(resolved.asset.values).toMatchSnapshot();
   });
+
+  it("Should respect placement for a template nested under a non-asset/view value node (e.g. topicGroup.values[x].topics)", () => {
+    const model = withParser(new LocalModel({}), parseBinding);
+    const evaluator = new ExpressionEvaluator({ model });
+    const schema = new SchemaController();
+
+    // "values" here is generated by an outer template, so each item (e.g. the object
+    // at topicGroup.values[x]) is parsed as a plain NodeType.Value node rather than an
+    // Asset/View node. That item has its own static "topics" array plus a nested
+    // template targeting "topics" with a placement - which needs to be sorted just like
+    // it would be on an Asset/View node.
+    const view = new ViewInstance(
+      {
+        id: "my-view",
+        asset: {
+          id: "topicGroup",
+          type: "collection",
+          template: [
+            {
+              dynamic: false,
+              data: "groups",
+              output: "values",
+              value: {
+                id: "group-_index_",
+                topics: [
+                  {
+                    asset: {
+                      id: "static-topic-1-_index_",
+                      type: "text",
+                      value: "static topic 1",
+                    },
+                  },
+                  {
+                    asset: {
+                      id: "static-topic-2-_index_",
+                      type: "text",
+                      value: "static topic 2",
+                    },
+                  },
+                ],
+                template: [
+                  {
+                    dynamic: false,
+                    data: "foo.topics",
+                    output: "topics",
+                    placement: "prepend",
+                    value: {
+                      asset: {
+                        id: "topic-_index1_",
+                        type: "text",
+                        value: "topic {{foo.topics._index1_}}",
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      } as any,
+      {
+        model,
+        parseBinding,
+        evaluator,
+        schema,
+      },
+    );
+
+    const pluginOptions = toNodeResolveOptions(view.resolverOptions);
+    new TemplatePlugin(pluginOptions).apply(view);
+    new StringResolverPlugin().apply(view);
+    new AssetPlugin().apply(view);
+    new MultiNodePlugin().apply(view);
+
+    model.set([
+      ["groups", [{}]],
+      ["foo.topics", ["A", "B"]],
+    ]);
+
+    const resolved: any = view.update();
+    const topics = resolved.asset.values[0].topics;
+
+    expect(topics).toHaveLength(4);
+    // Prepend placement means the templated topics should come before the static ones,
+    // even though "topics" is declared before "template" in the source.
+    expect(topics[0].asset.value).toBe("topic A");
+    expect(topics[1].asset.value).toBe("topic B");
+    expect(topics[2].asset.value).toBe("static topic 1");
+    expect(topics[3].asset.value).toBe("static topic 2");
+  });
 });

package/src/view/plugins/template.ts

@@ -146,7 +146,9 @@ export class TemplatePlugin implements ViewPlugin {
 
       if (
         node &&
-        (node.type === NodeType.View || node.type === NodeType.Asset) &&
+        (node.type === NodeType.View ||
+          node.type === NodeType.Asset ||
+          node.type === NodeType.Value) &&
         Array.isArray(node.children)
       ) {
         node.children = node.children.sort((a, b) => {

package/types/controllers/validation/controller.d.ts

@@ -120,6 +120,7 @@ export declare class ValidationController implements BindingTracker {
     private viewValidationProvider?;
     private options?;
     private weakBindingTracker;
+    private validationMiddleware?;
     constructor(schema: SchemaController, options?: SimpleValidatorContext);
     setOptions(options: SimpleValidatorContext): void;
     /** Return the middleware for the data-model to stop propagation of invalid data */

package/types/validator/validation-middleware.d.ts

@@ -32,5 +32,7 @@ export declare class ValidationMiddleware implements DataModelMiddleware {
     set(transaction: BatchSetTransaction, options?: DataModelOptions, next?: DataModelImpl): Updates;
     get(binding: BindingInstance, options?: DataModelOptions, next?: DataModelImpl): any;
     delete(binding: BindingInstance, options?: DataModelOptions, next?: DataModelImpl): void | undefined;
+    /** Clears any invalid values staged in the shadow model */
+    reset(): void;
 }
 //# sourceMappingURL=validation-middleware.d.ts.map