ngx-json-render 0.7.4 → 0.7.6

package/README.md

@@ -661,6 +661,12 @@ const bound = injectBoundProp<string>(() => ctx.props().value, () => ctx.binding
 
 Share one store across renderers (or drive it from your own state management) by passing a core `StateStore` — `createStateStore()`, or `createStoreAdapter()` over Redux/NgRx/etc. — via the `store` input. `createStoreSetState(store)` adapts a whole-state updater to fine-grained path writes.
 
+`watch` also fires for writes made on that store from outside the renderer: on
+every store notification the renderer compares the new snapshot with the last
+one, branch by branch by reference, and reports each changed path. A store
+that mutates its snapshot in place therefore re-renders but triggers no
+`watch`; replace objects rather than editing them.
+
 ### What a state write re-renders
 
 A write reaches only the components whose resolved props actually changed. Writing `/user/name` re-runs the template of the text that shows it, not the rest of the tree. So `ctx.props()` and `ctx.element()` are the signals to read: a template that reads anything else, such as a mutable object or `Date.now()`, is no longer refreshed by unrelated writes.
@@ -849,7 +855,9 @@ Spec checking: `checkSpec`, `formatSpecCheckIssues`, and the types
 
 `injectActions().execute()` rejects when the user dismisses a `confirm`
 dialog, which is a normal gesture rather than a failure — `isActionCancelled(error)`
-is how you tell the two apart.
+is how you tell the two apart. One dialog is open at a time: an action with a
+`confirm` dispatched while another is waiting cancels the waiting one, so its
+`execute()` rejects the same way.
 
 Registry & schema: `defineRegistry`, `createStoreSetState`, `schema`.
 

package/fesm2022/ngx-json-render.mjs

@@ -1,9 +1,8 @@
 import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, computed, untracked, effect, isDevMode, DestroyRef, InjectionToken, input, output, viewChild, afterNextRender, ChangeDetectionStrategy, Component, Injector, forwardRef } from '@angular/core';
+import { signal, Injectable, isDevMode, inject, computed, untracked, effect, DestroyRef, InjectionToken, input, output, viewChild, afterNextRender, ChangeDetectionStrategy, Component, Injector, forwardRef } from '@angular/core';
 import { createStateStore, getByPath, runValidation, resolveAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle, executeAction, isDevtoolsActive, subscribeDevtoolsActive, resolveRepeatStatePath, evaluateVisibility, resolveElementProps, resolveBindings, resolveActionParam, autoFixSpec, validateSpec, createDirectiveRegistry, resolveRepeatItemStatePath, removeByPath, addByPath, setByPath, SPEC_DATA_PART_TYPE, nestedToFlat, createMixedStreamParser, defineSchema } from '@json-render/core';
 export { autoFixSpec, createStateStore, formatSpecIssues, nestedToFlat, validateSpec } from '@json-render/core';
-import { flattenToPointers } from '@json-render/core/store-utils';
 
 const EMPTY = signal(undefined, ...(ngDevMode ? [{ debugName: "EMPTY" }] : /* istanbul ignore next */ []));
 /**
@@ -49,6 +48,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             type: Injectable
         }] });
 
+/** Nesting below this is kept as one leaf, the same cut-off core uses. */
+const MAX_FLATTEN_DEPTH = 20;
+/** Escape one key for a JSON Pointer: `~` → `~0`, `/` → `~1`. */
+function escapePointerSegment(key) {
+    return key.replace(/~/g, '~0').replace(/\//g, '~1');
+}
+/**
+ * Flatten plain objects into a `{ pointer: leaf }` map; arrays and anything
+ * that is not a plain object are leaves.
+ *
+ * Core's `flattenToPointers` does the same but joins keys unescaped, so a key
+ * such as `a/b` comes back as `/a/b` and a store write puts it at `a` → `b`.
+ * Every path built here is escaped, so it reads back the key it came from.
+ */
+function flattenToPointers(obj) {
+    const result = {};
+    const seen = new Set();
+    let warned = false;
+    const walk = (value, prefix, depth) => {
+        for (const [key, child] of Object.entries(value)) {
+            const pointer = `${prefix}/${escapePointerSegment(key)}`;
+            if (isPlainObject(child) && !seen.has(child)) {
+                if (depth < MAX_FLATTEN_DEPTH) {
+                    seen.add(child);
+                    walk(child, pointer, depth + 1);
+                    continue;
+                }
+                if (isDevMode() && !warned) {
+                    warned = true;
+                    console.warn(`[ngx-json-render] state nested deeper than ${MAX_FLATTEN_DEPTH} levels is treated as one value.`);
+                }
+            }
+            result[pointer] = child;
+        }
+    };
+    walk(obj, '', 0);
+    return result;
+}
+function isPlainObject(value) {
+    return (value !== null &&
+        typeof value === 'object' &&
+        Object.getPrototypeOf(value) === Object.prototype);
+}
+
 /**
  * The state store of a `<json-render>` subtree.
  *
@@ -63,6 +106,10 @@ class JsonRenderStateService {
     root = inject(JsonRenderRootContext);
     internalStore = createStateStore({});
     changeListeners = new Set();
+    /** The snapshot the change listeners last heard about. */
+    lastSnapshot = {};
+    /** True while this service writes, so the store's echo is not reported. */
+    writing = false;
     _state = signal({}, { ...(ngDevMode ? { debugName: "_state" } : /* istanbul ignore next */ {}), equal: () => false });
     /** The current state model as a signal. */
     state = this._state.asReadonly();
@@ -82,9 +129,23 @@ class JsonRenderStateService {
                     console.warn(`[ngx-json-render] switching from ${initialMode} to ${mode} mode is not supported.`);
                 }
             }
-            untracked(() => this._state.set(store.getSnapshot()));
+            const controlled = store !== this.internalStore;
+            this.lastSnapshot = store.getSnapshot();
+            untracked(() => this._state.set(this.lastSnapshot));
             const unsubscribe = store.subscribe(() => {
-                this._state.set(store.getSnapshot());
+                const prev = this.lastSnapshot;
+                const next = store.getSnapshot();
+                // Recorded before the listeners run: a watch action may write again.
+                this.lastSnapshot = next;
+                this._state.set(next);
+                // A write the host made on its own store reaches no `set`/`update`
+                // here, so the diff is the only way `watch` hears about it. Our own
+                // writes report themselves, with the paths they were given.
+                if (controlled && !this.writing && this.changeListeners.size > 0) {
+                    const changes = diffState(prev, next);
+                    if (changes.length > 0)
+                        this.notifyChanges(changes);
+                }
             });
             onCleanup(unsubscribe);
         });
@@ -124,7 +185,7 @@ class JsonRenderStateService {
         const store = untracked(this.currentStore);
         const prev = store.getSnapshot();
         const prevValue = getByPath(prev, path);
-        store.set(path, value);
+        this.write(store, () => store.set(path, value));
         if (prevValue !== value) {
             const changes = [{ path, value }];
             this.notifyChanges(changes);
@@ -137,7 +198,7 @@ class JsonRenderStateService {
     update(updates) {
         const store = untracked(this.currentStore);
         const prev = store.getSnapshot();
-        store.update(updates);
+        this.write(store, () => store.update(updates));
         const changes = [];
         for (const [path, value] of Object.entries(updates)) {
             if (getByPath(prev, path) !== value) {
@@ -157,8 +218,9 @@ class JsonRenderStateService {
     }
     /**
      * Register a listener called with the list of changed paths whenever state
-     * is written through this service (element `watch` fields rely on this).
-     * Returns an unsubscribe function.
+     * is written through this service, or, in controlled mode, whenever the
+     * external store changes (element `watch` fields rely on this). Returns an
+     * unsubscribe function.
      */
     subscribeChanges(listener) {
         this.changeListeners.add(listener);
@@ -166,6 +228,17 @@ class JsonRenderStateService {
             this.changeListeners.delete(listener);
         };
     }
+    write(store, apply) {
+        const wasWriting = this.writing;
+        this.writing = true;
+        try {
+            apply();
+        }
+        finally {
+            this.writing = wasWriting;
+        }
+        this.lastSnapshot = store.getSnapshot();
+    }
     notifyChanges(changes) {
         for (const listener of this.changeListeners) {
             listener(changes);
@@ -177,6 +250,35 @@ class JsonRenderStateService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderStateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
+/**
+ * Every path whose value differs between two state snapshots, each container
+ * before what it holds, values taken from `next`. Subtrees are compared by
+ * reference, so an unchanged branch costs nothing, and a store that mutates a
+ * snapshot in place reports no change: the same rule as a signal's `set`.
+ */
+function diffState(prev, next) {
+    const changes = [];
+    const walk = (a, b, path) => {
+        if (a === b)
+            return;
+        if (path)
+            changes.push({ path, value: b });
+        const keys = new Set([...childKeys(a), ...childKeys(b)]);
+        for (const key of keys) {
+            walk(child(a, key), child(b, key), `${path}/${escapePointerSegment(key)}`);
+        }
+    };
+    walk(prev, next, '');
+    return changes;
+}
+function childKeys(value) {
+    return value !== null && typeof value === 'object' ? Object.keys(value) : [];
+}
+function child(value, key) {
+    return value !== null && typeof value === 'object'
+        ? value[key]
+        : undefined;
+}
 /**
  * Inject the state store of the nearest `<json-render>` renderer.
  * Must be called from within the renderer's subtree (e.g. a catalog
@@ -348,17 +450,9 @@ class JsonRenderValidationService {
     /** Validate a single field and record the result. */
     validate(path, config) {
         const currentState = this.state.getSnapshot();
-        const segments = path.split('/').filter(Boolean);
-        let value = currentState;
-        for (const seg of segments) {
-            if (value != null && typeof value === 'object') {
-                value = value[seg];
-            }
-            else {
-                value = undefined;
-                break;
-            }
-        }
+        // The store's own pointer walk, so `~1` and `~0` mean what they mean
+        // everywhere else a path is read.
+        const value = getByPath(currentState, path);
         const result = runValidation(config, {
             value,
             stateModel: currentState,
@@ -665,21 +759,19 @@ class JsonRenderActionsService {
                 return;
             }
             if (resolved.confirm) {
+                // One question at a time: a confirm arriving while another is open
+                // cancels that one, so its caller settles instead of waiting forever.
+                untracked(this._pendingConfirmation)?.reject();
                 // Awaited, not returned: a returned promise would let the `finally`
                 // below settle the observers before the user has even answered.
                 await new Promise((resolve, reject) => {
-                    this._pendingConfirmation.set({
+                    const pending = {
                         action: resolved,
                         handler,
-                        resolve: () => {
-                            this._pendingConfirmation.set(null);
-                            resolve();
-                        },
-                        reject: () => {
-                            this._pendingConfirmation.set(null);
-                            reject(new ActionCancelledError());
-                        },
-                    });
+                        resolve: () => this.answer(pending, resolve),
+                        reject: () => this.answer(pending, () => reject(new ActionCancelledError())),
+                    };
+                    this._pendingConfirmation.set(pending);
                 });
             }
             await this.runHandler(resolved, handler);
@@ -709,6 +801,17 @@ class JsonRenderActionsService {
     cancel() {
         untracked(this._pendingConfirmation)?.reject();
     }
+    /**
+     * Close `pending` and run `settle`, but only while it is still the open
+     * question: a late answer to one that was replaced must not close its
+     * successor.
+     */
+    answer(pending, settle) {
+        if (untracked(this._pendingConfirmation) !== pending)
+            return;
+        this._pendingConfirmation.set(null);
+        settle();
+    }
     /**
      * Validate every registered field and write `{ valid, errors }` to the
      * action's `statePath` (default `/formValidation`). Returns null when there