@domql/element 3.6.3 → 3.6.6

package/README.md

@@ -34,4 +34,60 @@ const MyComponent = {
 }
 ```
 
-`el.html` takes priority when both are set. `props.html` is used as a fallback when `el.html` is not defined.
+`el.html` takes priority when both are set. `props.html` is used as a fallback when `el.html` is not defined.
+
+## REGISTRY (`mixins/registry.js`)
+
+The `REGISTRY` object defines which keys are recognized as framework properties (rather than child elements). Any key **not** in REGISTRY and starting with an uppercase letter is treated as a child element.
+
+**Every framework-level key must be listed here.** If a key like `childExtend` is missing from REGISTRY, it gets interpreted as a child element name, causing silent rendering failures (e.g., cart components not rendering in Archy).
+
+Current framework keys that must remain in REGISTRY:
+
+```
+extends, children, content,
+childExtend (deprecated), childExtends,
+childExtendRecursive (deprecated), childExtendsRecursive,
+props, if, define,
+__name, __ref, __hash, __text, key, tag, query, parent, node,
+variables, on, component, context
+```
+
+Plus mixin handlers: `attr`, `style`, `text`, `html`, `data`, `classlist`, `state`, `scope`, `deps`.
+
+> **v3 note:** `childExtend` (singular) is deprecated v2 syntax — use `childExtends` (plural) in new code. The singular forms remain in REGISTRY for backwards compatibility with older projects. If a key is missing from REGISTRY, it gets interpreted as a child element name, causing silent rendering failures.
+
+## set.js — Content Setting
+
+### Fragment forwarding
+
+When `set()` receives content with `tag: 'fragment'`, the fragment itself doesn't create a DOM node — its children are inserted directly. This means:
+
+1. **childExtends forwarding** — The parent's `childExtends` must be forwarded to the fragment's params so that fragment children inherit the correct extends:
+   ```javascript
+   if (tag === 'fragment') {
+     const elementChildExtends = element.childExtends || element.childExtend
+     if (!childExtends && elementChildExtends) {
+       params.childExtends = elementChildExtends
+     }
+   }
+   ```
+   (Also checks deprecated `childExtend` for backwards compatibility with v2 projects.)
+
+2. **childProps forwarding** — Similarly, `childProps` from the parent must be explicitly passed through the fragment to its children.
+
+3. **ignoreChildProps** — When forwarding `childProps` through a fragment, set `props.ignoreChildProps = true` on the fragment itself to prevent the fragment from inheriting the parent's `childProps` via `inheritParentProps`. The `childProps` are already forwarded explicitly for the fragment's children.
+
+### Infinite loop guard
+
+`set()` includes a re-entrancy guard via `ref.__settingContent`. Without this, define handlers (like `$router`) that call `el.set()` can trigger infinite recursion when content-setting triggers another content-set cycle.
+
+```javascript
+if (ref.__settingContent) return element
+ref.__settingContent = true
+try {
+  return _setInner(params, options, element)
+} finally {
+  ref.__settingContent = false
+}
+```

package/children.js

@@ -5,6 +5,8 @@ import {
   deepClone,
   exec,
   getChildStateInKey,
+  getParentStateInKey,
+  getRootStateInKey,
   isArray,
   isDefined,
   isNot,
@@ -45,6 +47,32 @@ const deepChildrenEqual = (a, b) => {
   return a === b
 }
 
+const SELF_STATE_PATHS = new Set(['.', '/', './'])
+
+const resolveChildrenFromState = (path, state) => {
+  if (!isString(path) || !state) return
+
+  // children: 'state' | '/' | './' → current state
+  if (SELF_STATE_PATHS.has(path)) return state.parse ? state.parse() : state
+
+  // children: '~/path' → from root state
+  const rootState = getRootStateInKey(path, state)
+  if (rootState) {
+    const cleanKey = path.replaceAll('~/', '')
+    return getChildStateInKey(cleanKey, rootState)
+  }
+
+  // children: '../path' → from ancestor state
+  const parentState = getParentStateInKey(path, state)
+  if (parentState) {
+    const cleanKey = path.replaceAll('../', '')
+    return getChildStateInKey(cleanKey, parentState)
+  }
+
+  // children: 'key' or 'key/nested' → from current state
+  return getChildStateInKey(path, state)
+}
+
 /**
  * Apply data parameters on the DOM nodes
  * this should only work if `showOnNode: true` is passed
@@ -57,18 +85,20 @@ export function setChildren (param, element, opts) {
   let execChildren = exec(children, element, state)
   children = execParam || execChildren
 
+  let childrenStatePath
+
   if (children) {
-    if (isState(children)) children = children.parse()
+    if (isState(children)) {
+      childrenAs = childrenAs || 'state'
+      children = children.parse()
+    }
     if (isString(children) || isNumber(children)) {
-      if (children === 'state') children = state.parse()
-      else {
-        const pathInState = getChildStateInKey(children, state)
-        if (pathInState) {
-          childrenAs = 'state'
-          children = getChildStateInKey(children, state) || { value: children }
-        } else {
-          children = { text: children }
-        }
+      const resolved = resolveChildrenFromState(children, state)
+      if (resolved !== undefined) {
+        childrenStatePath = SELF_STATE_PATHS.has(children) ? '' : children
+        children = isState(resolved) ? resolved.parse() : resolved
+      } else {
+        children = { text: children }
       }
     }
 
@@ -124,13 +154,19 @@ export function setChildren (param, element, opts) {
   for (const key in children) {
     const value = Object.prototype.hasOwnProperty.call(children, key) && children[key]
     if (isDefined(value) && value !== null && value !== false) {
-      content[key] = isObjectLike(value)
-        ? childrenAs
-          ? { [childrenAs]: value }
-          : value
-        : childrenAs
-        ? { [childrenAs]: childrenAs === 'state' ? { value } : { text: value } }
-        : { text: value }
+      if (childrenStatePath !== undefined && childrenAs !== 'props') {
+        // Set inherited state path so DOMQL resolves at runtime with hoisting
+        const statePath = childrenStatePath ? `${childrenStatePath}/${key}` : key
+        content[key] = { state: statePath }
+      } else {
+        content[key] = isObjectLike(value)
+          ? childrenAs
+            ? { [childrenAs]: value }
+            : value
+          : childrenAs
+          ? { [childrenAs]: childrenAs === 'state' ? { value } : { text: value } }
+          : { text: value }
+      }
     }
   }
 

package/create.js

@@ -22,6 +22,7 @@ import {
 
 import { applyAnimationFrame, triggerEventOn } from './event/index.js'
 import { assignNode } from './render/index.js'
+import { detectTag } from './render/cache.js'
 import { createState } from '@domql/state'
 
 import { REGISTRY } from './mixins/index.js'
@@ -98,6 +99,8 @@ export const create = (
   initProps(element, parent, options)
   // Re-pickup component-named properties that entered props via childProps/inheritParentProps
   pickupElementFromProps.call(element, element, { cachedKeys: [] })
+  // Detect tag early so applyPropsAsAttrs can filter by tag
+  if (!element.tag) element.tag = detectTag(element)
   // Populate element.attr from props matching the tag's HTML spec
   applyPropsAsAttrs(element)
   if (element.scope === 'props' || element.scope === true) {

package/dist/cjs/children.js

@@ -49,24 +49,41 @@ const deepChildrenEqual = (a, b) => {
   }
   return a === b;
 };
+const SELF_STATE_PATHS = /* @__PURE__ */ new Set([".", "/", "./"]);
+const resolveChildrenFromState = (path, state) => {
+  if (!(0, import_utils.isString)(path) || !state) return;
+  if (SELF_STATE_PATHS.has(path)) return state.parse ? state.parse() : state;
+  const rootState = (0, import_utils.getRootStateInKey)(path, state);
+  if (rootState) {
+    const cleanKey = path.replaceAll("~/", "");
+    return (0, import_utils.getChildStateInKey)(cleanKey, rootState);
+  }
+  const parentState = (0, import_utils.getParentStateInKey)(path, state);
+  if (parentState) {
+    const cleanKey = path.replaceAll("../", "");
+    return (0, import_utils.getChildStateInKey)(cleanKey, parentState);
+  }
+  return (0, import_utils.getChildStateInKey)(path, state);
+};
 function setChildren(param, element, opts) {
   let { children, __ref: ref, state } = element;
   let { childrenAs } = element.props || {};
   let execParam = (0, import_utils.exec)(param, element, state);
   let execChildren = (0, import_utils.exec)(children, element, state);
   children = execParam || execChildren;
+  let childrenStatePath;
   if (children) {
-    if ((0, import_utils.isState)(children)) children = children.parse();
+    if ((0, import_utils.isState)(children)) {
+      childrenAs = childrenAs || "state";
+      children = children.parse();
+    }
     if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
-      if (children === "state") children = state.parse();
-      else {
-        const pathInState = (0, import_utils.getChildStateInKey)(children, state);
-        if (pathInState) {
-          childrenAs = "state";
-          children = (0, import_utils.getChildStateInKey)(children, state) || { value: children };
-        } else {
-          children = { text: children };
-        }
+      const resolved = resolveChildrenFromState(children, state);
+      if (resolved !== void 0) {
+        childrenStatePath = SELF_STATE_PATHS.has(children) ? "" : children;
+        children = (0, import_utils.isState)(resolved) ? resolved.parse() : resolved;
+      } else {
+        children = { text: children };
       }
     }
     if ((0, import_utils.isObject)(children)) {
@@ -113,7 +130,12 @@ function setChildren(param, element, opts) {
   for (const key in children) {
     const value = Object.prototype.hasOwnProperty.call(children, key) && children[key];
     if ((0, import_utils.isDefined)(value) && value !== null && value !== false) {
-      content[key] = (0, import_utils.isObjectLike)(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
+      if (childrenStatePath !== void 0 && childrenAs !== "props") {
+        const statePath = childrenStatePath ? `${childrenStatePath}/${key}` : key;
+        content[key] = { state: statePath };
+      } else {
+        content[key] = (0, import_utils.isObjectLike)(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
+      }
     }
   }
   return content;

package/dist/cjs/create.js

@@ -27,6 +27,7 @@ var import_tree = require("./tree.js");
 var import_utils = require("@domql/utils");
 var import_event = require("./event/index.js");
 var import_render = require("./render/index.js");
+var import_cache = require("./render/cache.js");
 var import_state = require("@domql/state");
 var import_mixins = require("./mixins/index.js");
 var import_set = require("./methods/set.js");
@@ -75,6 +76,7 @@ const create = (props, parentEl, passedKey, options = import_utils.OPTIONS.creat
   (0, import_utils.createIfConditionFlag)(element, parent);
   (0, import_utils.initProps)(element, parent, options);
   import_utils.pickupElementFromProps.call(element, element, { cachedKeys: [] });
+  if (!element.tag) element.tag = (0, import_cache.detectTag)(element);
   applyPropsAsAttrs(element);
   if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;

package/dist/cjs/methods/set.js

@@ -39,7 +39,9 @@ const addMethods = (element, parent, options = {}) => {
     lookdown: import_methods.lookdown,
     lookdownAll: import_methods.lookdownAll,
     getRef: import_methods.getRef,
+    getDB: import_methods.getDB,
     getPath: import_methods.getPath,
+    getQuery: import_methods.getQuery,
     getRootState: import_methods.getRootState,
     getRoot: import_methods.getRoot,
     getRootData: import_methods.getRootData,

package/dist/cjs/mixins/registry.js

@@ -49,6 +49,7 @@ const REGISTRY = {
   classlist: import_classList.classList,
   state: import_state.default,
   scope: import_scope.default,
+  fetch: {},
   deps: (param, el) => param || el.parent.deps,
   extends: {},
   children: {},

package/dist/cjs/update.js

@@ -214,6 +214,9 @@ const update = function(params = {}, opts) {
   if (!preventUpdateListener && !options.preventListeners) {
     (0, import_event.triggerEventOn)("update", element, options);
   }
+  if (!options.preventFetch && ref.__fetchOnStateChange) {
+    ref.__fetchOnStateChange();
+  }
 };
 const findSiblingAttachOptions = (element, parent) => {
   const { __children } = parent.__ref || {};
@@ -302,24 +305,13 @@ const checkIfOnUpdate = (element, parent, options) => {
 const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element;
   const stateKey = ref.__state;
-  const { parent, state } = element;
-  const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
+  const { parent } = element;
+  const { preventUpdateTriggerStateUpdate } = options;
   if (preventUpdateTriggerStateUpdate) return;
   if (!stateKey && !ref.__hasRootState) {
     element.state = parent?.state || {};
     return;
   }
-  const shouldForceFunctionState = (0, import_utils.isFunction)(stateKey) && !isHoisted && execStateFunction;
-  if (shouldForceFunctionState) {
-    const execState = (0, import_utils.exec)(stateKey, element);
-    state.set(execState, {
-      ...options,
-      preventUpdate: true,
-      preventStateUpdateListener: false,
-      updatedByStateFunction: true
-    });
-    return;
-  }
   const keyInParentState = (0, import_utils.findInheritedState)(element, element.parent);
   if (!keyInParentState || options.preventInheritedStateUpdate) return;
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {

package/dist/esm/children.js

@@ -3,6 +3,8 @@ import {
   deepClone,
   exec,
   getChildStateInKey,
+  getParentStateInKey,
+  getRootStateInKey,
   isArray,
   isDefined,
   isNot,
@@ -39,24 +41,41 @@ const deepChildrenEqual = (a, b) => {
   }
   return a === b;
 };
+const SELF_STATE_PATHS = /* @__PURE__ */ new Set([".", "/", "./"]);
+const resolveChildrenFromState = (path, state) => {
+  if (!isString(path) || !state) return;
+  if (SELF_STATE_PATHS.has(path)) return state.parse ? state.parse() : state;
+  const rootState = getRootStateInKey(path, state);
+  if (rootState) {
+    const cleanKey = path.replaceAll("~/", "");
+    return getChildStateInKey(cleanKey, rootState);
+  }
+  const parentState = getParentStateInKey(path, state);
+  if (parentState) {
+    const cleanKey = path.replaceAll("../", "");
+    return getChildStateInKey(cleanKey, parentState);
+  }
+  return getChildStateInKey(path, state);
+};
 function setChildren(param, element, opts) {
   let { children, __ref: ref, state } = element;
   let { childrenAs } = element.props || {};
   let execParam = exec(param, element, state);
   let execChildren = exec(children, element, state);
   children = execParam || execChildren;
+  let childrenStatePath;
   if (children) {
-    if (isState(children)) children = children.parse();
+    if (isState(children)) {
+      childrenAs = childrenAs || "state";
+      children = children.parse();
+    }
     if (isString(children) || isNumber(children)) {
-      if (children === "state") children = state.parse();
-      else {
-        const pathInState = getChildStateInKey(children, state);
-        if (pathInState) {
-          childrenAs = "state";
-          children = getChildStateInKey(children, state) || { value: children };
-        } else {
-          children = { text: children };
-        }
+      const resolved = resolveChildrenFromState(children, state);
+      if (resolved !== void 0) {
+        childrenStatePath = SELF_STATE_PATHS.has(children) ? "" : children;
+        children = isState(resolved) ? resolved.parse() : resolved;
+      } else {
+        children = { text: children };
       }
     }
     if (isObject(children)) {
@@ -103,7 +122,12 @@ function setChildren(param, element, opts) {
   for (const key in children) {
     const value = Object.prototype.hasOwnProperty.call(children, key) && children[key];
     if (isDefined(value) && value !== null && value !== false) {
-      content[key] = isObjectLike(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
+      if (childrenStatePath !== void 0 && childrenAs !== "props") {
+        const statePath = childrenStatePath ? `${childrenStatePath}/${key}` : key;
+        content[key] = { state: statePath };
+      } else {
+        content[key] = isObjectLike(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
+      }
     }
   }
   return content;

package/dist/esm/create.js

@@ -18,6 +18,7 @@ import {
 } from "@domql/utils";
 import { applyAnimationFrame, triggerEventOn } from "./event/index.js";
 import { assignNode } from "./render/index.js";
+import { detectTag } from "./render/cache.js";
 import { createState } from "@domql/state";
 import { REGISTRY } from "./mixins/index.js";
 import { addMethods } from "./methods/set.js";
@@ -66,6 +67,7 @@ const create = (props, parentEl, passedKey, options = OPTIONS.create || {}, atta
   createIfConditionFlag(element, parent);
   initProps(element, parent, options);
   pickupElementFromProps.call(element, element, { cachedKeys: [] });
+  if (!element.tag) element.tag = detectTag(element);
   applyPropsAsAttrs(element);
   if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;

package/dist/esm/methods/set.js

@@ -5,7 +5,9 @@ import {
   call,
   error,
   getContext,
+  getDB,
   getPath,
+  getQuery,
   getRef,
   getRoot,
   getRootContext,
@@ -42,7 +44,9 @@ const addMethods = (element, parent, options = {}) => {
     lookdown,
     lookdownAll,
     getRef,
+    getDB,
     getPath,
+    getQuery,
     getRootState,
     getRoot,
     getRootData,

package/dist/esm/mixins/registry.js

@@ -15,6 +15,7 @@ const REGISTRY = {
   classlist: classList,
   state,
   scope,
+  fetch: {},
   deps: (param, el) => param || el.parent.deps,
   extends: {},
   children: {},

package/dist/esm/update.js

@@ -1,6 +1,5 @@
 import {
   window,
-  exec,
   isArray,
   isFunction,
   isNumber,
@@ -201,6 +200,9 @@ const update = function(params = {}, opts) {
   if (!preventUpdateListener && !options.preventListeners) {
     triggerEventOn("update", element, options);
   }
+  if (!options.preventFetch && ref.__fetchOnStateChange) {
+    ref.__fetchOnStateChange();
+  }
 };
 const findSiblingAttachOptions = (element, parent) => {
   const { __children } = parent.__ref || {};
@@ -289,24 +291,13 @@ const checkIfOnUpdate = (element, parent, options) => {
 const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element;
   const stateKey = ref.__state;
-  const { parent, state } = element;
-  const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
+  const { parent } = element;
+  const { preventUpdateTriggerStateUpdate } = options;
   if (preventUpdateTriggerStateUpdate) return;
   if (!stateKey && !ref.__hasRootState) {
     element.state = parent?.state || {};
     return;
   }
-  const shouldForceFunctionState = isFunction(stateKey) && !isHoisted && execStateFunction;
-  if (shouldForceFunctionState) {
-    const execState = exec(stateKey, element);
-    state.set(execState, {
-      ...options,
-      preventUpdate: true,
-      preventStateUpdateListener: false,
-      updatedByStateFunction: true
-    });
-    return;
-  }
   const keyInParentState = findInheritedState(element, element.parent);
   if (!keyInParentState || options.preventInheritedStateUpdate) return;
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {