@domql/element 3.4.0 → 3.4.1

package/children.js

@@ -16,13 +16,19 @@ import {
   matchesComponentNaming
 } from '@domql/utils'
 
-const shallowChildrenEqual = (a, b) => {
+const deepChildrenEqual = (a, b) => {
   if (a === b) return true
   if (!a || !b) return false
+  const typeA = typeof a
+  const typeB = typeof b
+  // Functions in children data are structural definitions (event handlers,
+  // conditions) that get new references each call but are logically equal
+  if (typeA === 'function' && typeB === 'function') return true
+  if (typeA !== typeB) return false
   if (isArray(a) && isArray(b)) {
     if (a.length !== b.length) return false
     for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) return false
+      if (!deepChildrenEqual(a[i], b[i])) return false
     }
     return true
   }
@@ -32,7 +38,7 @@ const shallowChildrenEqual = (a, b) => {
     if (keysA.length !== keysB.length) return false
     for (let i = 0; i < keysA.length; i++) {
       const key = keysA[i]
-      if (a[key] !== b[key]) return false
+      if (!deepChildrenEqual(a[key], b[key])) return false
     }
     return true
   }
@@ -95,7 +101,7 @@ export function setChildren (param, element, opts) {
 
   let cloned
   if (ref.__childrenCache) {
-    if (shallowChildrenEqual(children, ref.__childrenCache)) {
+    if (deepChildrenEqual(children, ref.__childrenCache)) {
       ref.__noChildrenDifference = true
     } else {
       cloned = deepClone(children)
@@ -105,6 +111,8 @@ export function setChildren (param, element, opts) {
   } else {
     cloned = deepClone(children)
     ref.__childrenCache = cloned
+    // First evaluation during update - no cache to compare against, so don't
+    // assume children match. State-dependent children may have changed since creation.
   }
 
   if (isObject(children) || isArray(children)) {

package/dist/cjs/children.js

@@ -23,13 +23,17 @@ __export(children_exports, {
 });
 module.exports = __toCommonJS(children_exports);
 var import_utils = require("@domql/utils");
-const shallowChildrenEqual = (a, b) => {
+const deepChildrenEqual = (a, b) => {
   if (a === b) return true;
   if (!a || !b) return false;
+  const typeA = typeof a;
+  const typeB = typeof b;
+  if (typeA === "function" && typeB === "function") return true;
+  if (typeA !== typeB) return false;
   if ((0, import_utils.isArray)(a) && (0, import_utils.isArray)(b)) {
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) return false;
+      if (!deepChildrenEqual(a[i], b[i])) return false;
     }
     return true;
   }
@@ -39,7 +43,7 @@ const shallowChildrenEqual = (a, b) => {
     if (keysA.length !== keysB.length) return false;
     for (let i = 0; i < keysA.length; i++) {
       const key = keysA[i];
-      if (a[key] !== b[key]) return false;
+      if (!deepChildrenEqual(a[key], b[key])) return false;
     }
     return true;
   }
@@ -91,7 +95,7 @@ function setChildren(param, element, opts) {
   }
   let cloned;
   if (ref.__childrenCache) {
-    if (shallowChildrenEqual(children, ref.__childrenCache)) {
+    if (deepChildrenEqual(children, ref.__childrenCache)) {
       ref.__noChildrenDifference = true;
     } else {
       cloned = (0, import_utils.deepClone)(children);

package/dist/cjs/update.js

@@ -87,6 +87,7 @@ const update = function(params = {}, opts) {
     const hasBeforeUpdate = element.on?.beforeUpdate || element.props?.onBeforeUpdate;
     if (hasBeforeUpdate) {
       const simulate = { ...params, ...element };
+      Object.setPrototypeOf(simulate, Object.getPrototypeOf(element));
       const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)(
         "beforeUpdate",
         params,
@@ -145,12 +146,15 @@ const update = function(params = {}, opts) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
       const childParams = params[param];
-      if (childParams === void 0 && !options.isForced) continue;
-      const childUpdateCall = () => update.call(prop, childParams, {
-        ...options,
-        currentSnapshot: snapshotOnCallee,
-        calleeElement
-      });
+      if (childParams === void 0 && !options.isForced) {
+        if (options.onlyUpdate) {
+          if (param !== options.onlyUpdate) continue;
+        } else if (!options.updateByState) {
+          continue;
+        }
+      }
+      const childOptions = options.onlyUpdate && param === options.onlyUpdate ? { ...options, onlyUpdate: void 0, currentSnapshot: snapshotOnCallee, calleeElement } : { ...options, currentSnapshot: snapshotOnCallee, calleeElement };
+      const childUpdateCall = () => update.call(prop, childParams, childOptions);
       if (lazyLoad) {
         import_utils.window.requestAnimationFrame(() => {
           childUpdateCall();
@@ -164,7 +168,7 @@ const update = function(params = {}, opts) {
   if (!preventContentUpdate) {
     const contentKey = ref.contentElementKey || "content";
     const existingContent = element[contentKey];
-    const childrenProp = params.children || element.children;
+    const childrenProp = options.updateByState ? params.children || (ref.__exec?.children ? element.children : void 0) : params.children || element.children;
     if (childrenProp) {
       const content = (0, import_children.default)(childrenProp, element, opts);
       if (content && !ref.__noChildrenDifference) {
@@ -202,7 +206,7 @@ const update = function(params = {}, opts) {
       } else contentUpdateCall();
     } else {
       const content = element.children || params.content;
-      if (content) {
+      if (content && !options.updateByState) {
         (0, import_set.setContent)(content, element, options);
       }
     }

package/dist/esm/children.js

@@ -13,13 +13,17 @@ import {
   isString,
   matchesComponentNaming
 } from "@domql/utils";
-const shallowChildrenEqual = (a, b) => {
+const deepChildrenEqual = (a, b) => {
   if (a === b) return true;
   if (!a || !b) return false;
+  const typeA = typeof a;
+  const typeB = typeof b;
+  if (typeA === "function" && typeB === "function") return true;
+  if (typeA !== typeB) return false;
   if (isArray(a) && isArray(b)) {
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) return false;
+      if (!deepChildrenEqual(a[i], b[i])) return false;
     }
     return true;
   }
@@ -29,7 +33,7 @@ const shallowChildrenEqual = (a, b) => {
     if (keysA.length !== keysB.length) return false;
     for (let i = 0; i < keysA.length; i++) {
       const key = keysA[i];
-      if (a[key] !== b[key]) return false;
+      if (!deepChildrenEqual(a[key], b[key])) return false;
     }
     return true;
   }
@@ -81,7 +85,7 @@ function setChildren(param, element, opts) {
   }
   let cloned;
   if (ref.__childrenCache) {
-    if (shallowChildrenEqual(children, ref.__childrenCache)) {
+    if (deepChildrenEqual(children, ref.__childrenCache)) {
       ref.__noChildrenDifference = true;
     } else {
       cloned = deepClone(children);

package/dist/esm/update.js

@@ -74,6 +74,7 @@ const update = function(params = {}, opts) {
     const hasBeforeUpdate = element.on?.beforeUpdate || element.props?.onBeforeUpdate;
     if (hasBeforeUpdate) {
       const simulate = { ...params, ...element };
+      Object.setPrototypeOf(simulate, Object.getPrototypeOf(element));
       const beforeUpdateReturns = triggerEventOnUpdate(
         "beforeUpdate",
         params,
@@ -132,12 +133,15 @@ const update = function(params = {}, opts) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
       const childParams = params[param];
-      if (childParams === void 0 && !options.isForced) continue;
-      const childUpdateCall = () => update.call(prop, childParams, {
-        ...options,
-        currentSnapshot: snapshotOnCallee,
-        calleeElement
-      });
+      if (childParams === void 0 && !options.isForced) {
+        if (options.onlyUpdate) {
+          if (param !== options.onlyUpdate) continue;
+        } else if (!options.updateByState) {
+          continue;
+        }
+      }
+      const childOptions = options.onlyUpdate && param === options.onlyUpdate ? { ...options, onlyUpdate: void 0, currentSnapshot: snapshotOnCallee, calleeElement } : { ...options, currentSnapshot: snapshotOnCallee, calleeElement };
+      const childUpdateCall = () => update.call(prop, childParams, childOptions);
       if (lazyLoad) {
         window.requestAnimationFrame(() => {
           childUpdateCall();
@@ -151,7 +155,7 @@ const update = function(params = {}, opts) {
   if (!preventContentUpdate) {
     const contentKey = ref.contentElementKey || "content";
     const existingContent = element[contentKey];
-    const childrenProp = params.children || element.children;
+    const childrenProp = options.updateByState ? params.children || (ref.__exec?.children ? element.children : void 0) : params.children || element.children;
     if (childrenProp) {
       const content = setChildren(childrenProp, element, opts);
       if (content && !ref.__noChildrenDifference) {
@@ -189,7 +193,7 @@ const update = function(params = {}, opts) {
       } else contentUpdateCall();
     } else {
       const content = element.children || params.content;
-      if (content) {
+      if (content && !options.updateByState) {
         setContent(content, element, options);
       }
     }

package/dist/iife/index.js

@@ -2640,13 +2640,17 @@ ${element}` : "";
   };
 
   // children.js
-  var shallowChildrenEqual = (a, b) => {
+  var deepChildrenEqual = (a, b) => {
     if (a === b) return true;
     if (!a || !b) return false;
+    const typeA = typeof a;
+    const typeB = typeof b;
+    if (typeA === "function" && typeB === "function") return true;
+    if (typeA !== typeB) return false;
     if (isArray(a) && isArray(b)) {
       if (a.length !== b.length) return false;
       for (let i = 0; i < a.length; i++) {
-        if (a[i] !== b[i]) return false;
+        if (!deepChildrenEqual(a[i], b[i])) return false;
       }
       return true;
     }
@@ -2656,7 +2660,7 @@ ${element}` : "";
       if (keysA.length !== keysB.length) return false;
       for (let i = 0; i < keysA.length; i++) {
         const key = keysA[i];
-        if (a[key] !== b[key]) return false;
+        if (!deepChildrenEqual(a[key], b[key])) return false;
       }
       return true;
     }
@@ -2708,7 +2712,7 @@ ${element}` : "";
     }
     let cloned;
     if (ref.__childrenCache) {
-      if (shallowChildrenEqual(children, ref.__childrenCache)) {
+      if (deepChildrenEqual(children, ref.__childrenCache)) {
         ref.__noChildrenDifference = true;
       } else {
         cloned = deepClone(children);
@@ -3326,6 +3330,7 @@ ${element}` : "";
       const hasBeforeUpdate = element.on?.beforeUpdate || element.props?.onBeforeUpdate;
       if (hasBeforeUpdate) {
         const simulate = { ...params, ...element };
+        Object.setPrototypeOf(simulate, Object.getPrototypeOf(element));
         const beforeUpdateReturns = triggerEventOnUpdate(
           "beforeUpdate",
           params,
@@ -3384,12 +3389,15 @@ ${element}` : "";
           options.onEachUpdate(param, element, element.state, element.context);
         }
         const childParams = params[param];
-        if (childParams === void 0 && !options.isForced) continue;
-        const childUpdateCall = () => update2.call(prop, childParams, {
-          ...options,
-          currentSnapshot: snapshotOnCallee,
-          calleeElement
-        });
+        if (childParams === void 0 && !options.isForced) {
+          if (options.onlyUpdate) {
+            if (param !== options.onlyUpdate) continue;
+          } else if (!options.updateByState) {
+            continue;
+          }
+        }
+        const childOptions = options.onlyUpdate && param === options.onlyUpdate ? { ...options, onlyUpdate: void 0, currentSnapshot: snapshotOnCallee, calleeElement } : { ...options, currentSnapshot: snapshotOnCallee, calleeElement };
+        const childUpdateCall = () => update2.call(prop, childParams, childOptions);
         if (lazyLoad) {
           window2.requestAnimationFrame(() => {
             childUpdateCall();
@@ -3403,7 +3411,7 @@ ${element}` : "";
     if (!preventContentUpdate) {
       const contentKey = ref.contentElementKey || "content";
       const existingContent = element[contentKey];
-      const childrenProp = params.children || element.children;
+      const childrenProp = options.updateByState ? params.children || (ref.__exec?.children ? element.children : void 0) : params.children || element.children;
       if (childrenProp) {
         const content = children_default(childrenProp, element, opts);
         if (content && !ref.__noChildrenDifference) {
@@ -3441,7 +3449,7 @@ ${element}` : "";
         } else contentUpdateCall();
       } else {
         const content = element.children || params.content;
-        if (content) {
+        if (content && !options.updateByState) {
           setContent(content, element, options);
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -47,10 +47,10 @@
     "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlElement --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV"
   },
   "dependencies": {
-    "@domql/report": "^3.4.0",
-    "@domql/state": "^3.4.0",
-    "@domql/utils": "^3.4.0",
-    "attrs-in-props": "^3.4.0"
+    "@domql/report": "^3.4.1",
+    "@domql/state": "^3.4.1",
+    "@domql/utils": "^3.4.1",
+    "attrs-in-props": "^3.4.1"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {

package/update.js

@@ -99,6 +99,7 @@ export const update = function (params = {}, opts) {
     const hasBeforeUpdate = element.on?.beforeUpdate || element.props?.onBeforeUpdate
     if (hasBeforeUpdate) {
       const simulate = { ...params, ...element }
+      Object.setPrototypeOf(simulate, Object.getPrototypeOf(element))
       const beforeUpdateReturns = triggerEventOnUpdate(
         'beforeUpdate',
         params,
@@ -195,14 +196,21 @@ export const update = function (params = {}, opts) {
       }
 
       const childParams = params[param]
-      if (childParams === undefined && !options.isForced) continue
+      if (childParams === undefined && !options.isForced) {
+        if (options.onlyUpdate) {
+          if (param !== options.onlyUpdate) continue
+        } else if (!options.updateByState) {
+          continue
+        }
+      }
+
+      // Once we reach the onlyUpdate target, clear it so its children update normally
+      const childOptions = options.onlyUpdate && param === options.onlyUpdate
+        ? { ...options, onlyUpdate: undefined, currentSnapshot: snapshotOnCallee, calleeElement }
+        : { ...options, currentSnapshot: snapshotOnCallee, calleeElement }
 
       const childUpdateCall = () =>
-        update.call(prop, childParams, {
-          ...options,
-          currentSnapshot: snapshotOnCallee,
-          calleeElement
-        })
+        update.call(prop, childParams, childOptions)
 
       if (lazyLoad) {
         window.requestAnimationFrame(() => {
@@ -218,12 +226,16 @@ export const update = function (params = {}, opts) {
   }
 
   if (!preventContentUpdate) {
-    // Update existing content element if it's a live DOMQL element
     const contentKey = ref.contentElementKey || 'content'
     const existingContent = element[contentKey]
 
-    // Re-evaluate children if the element has a children property
-    const childrenProp = params.children || element.children
+    // During state-triggered cascading updates (updateByState), skip static
+    // children but still re-process dynamic children (originally functions, already
+    // re-evaluated by throughUpdatedExec). Check ref.__exec.children to detect these.
+    const childrenProp = options.updateByState
+      ? (params.children || (ref.__exec?.children ? element.children : undefined))
+      : (params.children || element.children)
+
     if (childrenProp) {
       const content = setChildren(childrenProp, element, opts)
       if (content && !ref.__noChildrenDifference) {
@@ -265,7 +277,7 @@ export const update = function (params = {}, opts) {
       } else contentUpdateCall()
     } else {
       const content = element.children || params.content
-      if (content) {
+      if (content && !options.updateByState) {
         setContent(content, element, options)
       }
     }