ngx-json-render 0.7.4 → 0.7.5

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

@@ -63,6 +63,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 +86,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 +142,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 +155,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 +175,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 +185,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 +207,38 @@ 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}/${escapePointer(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;
+}
+function escapePointer(key) {
+    return key.replace(/~/g, '~0').replace(/\//g, '~1');
+}
 /**
  * Inject the state store of the nearest `<json-render>` renderer.
  * Must be called from within the renderer's subtree (e.g. a catalog
@@ -665,21 +727,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 +769,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