@domql/element 3.6.4 → 3.6.6

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) {