ngx-json-render 0.4.0 → 0.5.1

package/fesm2022/ngx-json-render.mjs

@@ -1091,6 +1091,32 @@ function repeatsItself(path) {
     }
     return false;
 }
+/**
+ * Whether two objects hold the same values under the same keys.
+ *
+ * `objectsByIdentity` decides what the same object or array reference means.
+ * The internal store copies every path it writes and never touches a snapshot
+ * it has handed out, so there the same reference is the same content. An
+ * external store may write into its snapshot in place, so there only
+ * primitives can be trusted to compare equal, and any object value counts as
+ * changed.
+ */
+function sameValues(a, b, objectsByIdentity) {
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    for (const key of keys) {
+        if (!Object.hasOwn(b, key))
+            return false;
+        const value = a[key];
+        if (!Object.is(value, b[key]))
+            return false;
+        if (!objectsByIdentity && typeof value === 'object' && value !== null) {
+            return false;
+        }
+    }
+    return true;
+}
 /** The chain from the root down to `path`, as a line a human can follow. */
 function describePath(path) {
     const keys = [];
@@ -1138,7 +1164,22 @@ class JrElement {
             return true;
         return evaluateVisibility(el.visible, this.resolutionCtx());
     }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    /** The element with all prop expressions resolved. */
+    /**
+     * The element with all prop expressions resolved.
+     *
+     * Resolving builds a new props object on every state write, whatever the
+     * write touched. Handing that on as a change would re-run every catalog
+     * template in the tree for one keystroke, so a result that holds the same
+     * values as the last one counts as unchanged and keeps the old object.
+     *
+     * Two-way bound elements are the exception, and keep treating every
+     * resolution as a change. Their component writes the user's input into the
+     * DOM before it reaches state, so the DOM can differ from a prop whose
+     * value never did: typing and a `clearStatePath` in the same turn take
+     * the prop from '' through 'milk' back to '' with nobody reading 'milk'.
+     * The README tells catalog authors to sync such inputs with an effect on
+     * props, and that effect only gets to put the DOM right if it runs.
+     */
     resolvedElement = computed(() => {
         const el = this.rawElement();
         if (!el)
@@ -1147,14 +1188,24 @@ class JrElement {
             ...el,
             props: resolveElementProps(el.props ?? {}, this.resolutionCtx()),
         };
-    }, ...(ngDevMode ? [{ debugName: "resolvedElement" }] : /* istanbul ignore next */ []));
+    }, { ...(ngDevMode ? { debugName: "resolvedElement" } : /* istanbul ignore next */ {}), equal: (a, b) => {
+            if (a === b)
+                return true;
+            if (!a || !b || untracked(this.bindings))
+                return false;
+            const { props: aProps, ...aRest } = a;
+            const { props: bProps, ...bRest } = b;
+            // Everything but props is the spec element itself, never state.
+            return (sameValues(aRest, bRest, true) &&
+                sameValues(aProps, bProps, !untracked(this.root.store)));
+        } });
     /** Two-way binding paths ($bindState / $bindItem) by prop name. */
     bindings = computed(() => {
         const el = this.rawElement();
         return el
             ? resolveBindings(el.props ?? {}, this.resolutionCtx())
             : undefined;
-    }, ...(ngDevMode ? [{ debugName: "bindings" }] : /* istanbul ignore next */ []));
+    }, { ...(ngDevMode ? { debugName: "bindings" } : /* istanbul ignore next */ {}), equal: (a, b) => a === b || (!!a && !!b && sameValues(a, b, true)) });
     entry = computed(() => {
         const el = this.rawElement();
         return el ? this.root.resolveEntry(el.type) : undefined;
@@ -1290,21 +1341,8 @@ class JrElement {
                         if (!changedPaths.has(path))
                             continue;
                         const binding = watchConfig[path];
-                        if (!binding)
-                            continue;
-                        const bindings = Array.isArray(binding) ? binding : [binding];
-                        for (const b of bindings) {
-                            if (!b.params) {
-                                await this.actions.execute(b);
-                                continue;
-                            }
-                            const liveCtx = this.liveResolutionCtx();
-                            const resolved = {};
-                            for (const [key, val] of Object.entries(b.params)) {
-                                resolved[key] = resolveActionParam(val, liveCtx);
-                            }
-                            await this.actions.execute({ ...b, params: resolved });
-                        }
+                        if (binding)
+                            await this.dispatch(binding);
                     }
                 })().catch(reportActionError);
             });
@@ -1330,12 +1368,17 @@ class JrElement {
         this.emitEvent(eventName).catch(reportActionError);
     }
     async emitEvent(eventName) {
-        const el = untracked(this.rawElement);
-        const binding = el?.on?.[eventName];
-        if (!binding)
-            return;
-        const actionBindings = Array.isArray(binding) ? binding : [binding];
-        for (const b of actionBindings) {
+        const binding = untracked(this.rawElement)?.on?.[eventName];
+        if (binding)
+            await this.dispatch(binding);
+    }
+    /**
+     * Run an `on` or `watch` binding's actions in order. Params are resolved
+     * per action, just before it runs, so a `$state` read in a later action of
+     * the chain sees what an earlier one wrote.
+     */
+    async dispatch(binding) {
+        for (const b of Array.isArray(binding) ? binding : [binding]) {
             if (!b.params) {
                 await this.actions.execute(b);
                 continue;