@domql/element 2.31.37 → 2.32.0

package/dist/cjs/iterate.js

@@ -66,7 +66,7 @@ const throughUpdatedExec = async (element, options = { excludes: import_utils2.M
   }
   return changes;
 };
-const throughExecProps = (element) => {
+const throughExecProps = (element, opts) => {
   const { __ref: ref } = element;
   const { props } = element;
   for (const k in props) {
@@ -75,14 +75,20 @@ const throughExecProps = (element) => {
       return import_methods.warn.call(element, "Element was not initiated to execute props");
     const cachedExecProp = ref.__execProps[k];
     if ((0, import_utils.isFunction)(cachedExecProp)) {
-      props[k] = (0, import_utils.exec)(cachedExecProp, element);
+      props[k] = (0, import_utils.exec)(
+        cachedExecProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      );
     } else if (isDefine && (0, import_utils.isFunction)(props[k])) {
       ref.__execProps[k] = props[k];
-      props[k] = (0, import_utils.exec)(props[k], element);
+      props[k] = (0, import_utils.exec)(props[k], element, element.state, element.context, opts);
     }
   }
 };
-const throughInitialDefine = async (element) => {
+const throughInitialDefine = async (element, opts) => {
   const { define, context, __ref: ref } = element;
   let defineObj = {};
   const hasGlobalDefine = context && (0, import_utils.isObject)(context.define);
@@ -92,7 +98,13 @@ const throughInitialDefine = async (element) => {
     let elementProp = element[param];
     if ((0, import_utils.isFunction)(elementProp) && !(0, import_methods.isMethod)(param, element) && !(0, import_utils.isVariant)(param)) {
       ref.__exec[param] = elementProp;
-      const execParam2 = elementProp = await (0, import_utils.exec)(elementProp, element);
+      const execParam2 = elementProp = await (0, import_utils.exec)(
+        elementProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      );
       if (execParam2) {
         elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
         ref.__defineCache[param] = elementProp;
@@ -108,7 +120,7 @@ const throughInitialDefine = async (element) => {
   }
   return element;
 };
-const throughUpdatedDefine = async (element) => {
+const throughUpdatedDefine = async (element, opts) => {
   const { context, define, __ref: ref } = element;
   const changes = {};
   let obj = {};
@@ -122,7 +134,13 @@ const throughUpdatedDefine = async (element) => {
         element.state,
         element.context
       );
-    const cached = await (0, import_utils.exec)(ref.__defineCache[param], element);
+    const cached = await (0, import_utils.exec)(
+      ref.__defineCache[param],
+      element,
+      element.state,
+      element.context,
+      opts
+    );
     const newExecParam = await obj[param](
       cached,
       element,

package/dist/cjs/mixins/attr.js

@@ -25,16 +25,25 @@ module.exports = __toCommonJS(attr_exports);
 var import_utils = require("@domql/utils");
 var import_report = require("@domql/report");
 var import_utils2 = require("../utils/index.js");
-function attr(params, element, node) {
+function attr(params, element, node, opts) {
   const { __ref: ref, props } = element;
   const { __attr } = ref;
   if ((0, import_utils.isNot)("object")) (0, import_report.report)("HTMLInvalidAttr", params);
   if (params) {
     if (props.attr) (0, import_utils2.deepMerge)(params, props.attr);
     for (const attr2 in params) {
-      const val = (0, import_utils.exec)(params[attr2], element);
+      const val = (0, import_utils.exec)(
+        params[attr2],
+        element,
+        element.state,
+        element.context,
+        opts
+      );
       if (val !== false && !(0, import_utils.isUndefined)(val) && !(0, import_utils.isNull)(val) && node.setAttribute)
-        node.setAttribute(attr2, (0, import_utils.exec)(val, element));
+        node.setAttribute(
+          attr2,
+          (0, import_utils.exec)(val, element, element.state, element.context, opts)
+        );
       else if (node.removeAttribute) node.removeAttribute(attr2);
       __attr[attr2] = val;
     }

package/dist/cjs/mixins/classList.js

@@ -34,34 +34,34 @@ const assignKeyAsClassname = (element) => {
     element.class = key.slice(1);
   }
 };
-const classify = (obj, element) => {
+const classify = (obj, element, opts) => {
   let className = "";
   for (const item in obj) {
     const param = obj[item];
     if (typeof param === "boolean" && param) className += ` ${item}`;
     else if (typeof param === "string") className += ` ${param}`;
     else if (typeof param === "function") {
-      className += ` ${(0, import_utils.exec)(param, element)}`;
+      className += ` ${(0, import_utils.exec)(param, element, element.state, element.context, opts)}`;
     }
   }
   return className;
 };
-const classList = (params, element) => {
+const classList = (params, element, opts) => {
   if (!params) return;
   const { key } = element;
   if (params === true) params = element.class = { key };
   if ((0, import_utils.isString)(params)) params = element.class = { default: params };
-  if ((0, import_utils.isObject)(params)) params = classify(params, element);
+  if ((0, import_utils.isObject)(params)) params = classify(params, element, opts);
   const className = params.replace(/\s+/g, " ").trim();
   if (element.ref) element.ref.class = className;
   return className;
 };
-const applyClassListOnNode = (params, element, node) => {
-  const className = classList(params, element);
+const applyClassListOnNode = (params, element, node, opts) => {
+  const className = classList(params, element, opts);
   node.classList = className;
   return className;
 };
-function applyClasslist(params, element, node) {
-  applyClassListOnNode(params, element, node);
+function applyClasslist(params, element, node, opts) {
+  applyClassListOnNode(params, element, node, opts);
 }
 var classList_default = applyClasslist;

package/dist/cjs/mixins/html.js

@@ -23,9 +23,9 @@ __export(html_exports, {
 });
 module.exports = __toCommonJS(html_exports);
 var import_utils = require("@domql/utils");
-function html(param, element, node) {
+function html(param, element, node, opts) {
   var _a;
-  const prop = (0, import_utils.exec)(param, element) || (0, import_utils.exec)((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element);
+  const prop = (0, import_utils.exec)(param, element, element.state, element.context, opts) || (0, import_utils.exec)((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element, element.state, element.context, opts);
   const { __ref } = element;
   if (prop !== __ref.__html) {
     if (node.nodeName === "SVG") node.textContent = prop;

package/dist/cjs/mixins/state.js

@@ -24,8 +24,8 @@ __export(state_exports, {
 module.exports = __toCommonJS(state_exports);
 var import_state = require("@domql/state");
 var import_utils = require("@domql/utils");
-async function state(params, element, node) {
-  const state2 = (0, import_utils.exec)(params, element);
+async function state(params, element, node, opts) {
+  const state2 = (0, import_utils.exec)(params, element, element.state, element.context, opts);
   if ((0, import_utils.isObject)(state2)) {
     for (const param in state2) {
       if (import_state.IGNORE_STATE_PARAMS.includes(param)) continue;

package/dist/cjs/mixins/text.js

@@ -24,8 +24,8 @@ __export(text_exports, {
 module.exports = __toCommonJS(text_exports);
 var import_create = require("../create.js");
 var import_utils = require("@domql/utils");
-function text(param, element, node) {
-  let prop = (0, import_utils.exec)(param, element);
+function text(param, element, node, opts) {
+  let prop = (0, import_utils.exec)(param, element, element.state, element.context, opts);
   if ((0, import_utils.isString)(prop) && prop.includes("{{")) {
     prop = element.call("replaceLiteralsWithObjectFields", prop);
   }

package/dist/cjs/node.js

@@ -31,7 +31,6 @@ var import_iterate = require("./iterate.js");
 var import_mixins = require("./mixins/index.js");
 var import_applyParam = require("./utils/applyParam.js");
 var import_propEvents = require("./utils/propEvents.js");
-var import_env = require("@domql/utils/env.js");
 const createNode = async (element, options) => {
   let { node, tag, __ref: ref } = element;
   let isNewNode;
@@ -48,8 +47,8 @@ const createNode = async (element, options) => {
   }
   node.ref = element;
   if ((0, import_utils.isFunction)(node.setAttribute)) node.setAttribute("key", element.key);
-  (0, import_iterate.throughExecProps)(element);
-  await (0, import_iterate.throughInitialDefine)(element);
+  (0, import_iterate.throughExecProps)(element, options);
+  await (0, import_iterate.throughInitialDefine)(element, options);
   await (0, import_iterate.throughInitialExec)(element);
   if (element.tag !== "string" && element.tag !== "fragment") {
     (0, import_propEvents.propagateEventsFromProps)(element);

package/dist/cjs/props/create.js

@@ -46,7 +46,7 @@ const syncProps = async (props, element, opts) => {
     if (import_ignore.IGNORE_PROPS_PARAMS.includes(v)) return;
     let execProps;
     try {
-      execProps = (0, import_utils.exec)(v, element);
+      execProps = (0, import_utils.exec)(v, element, element.state, element.context, opts);
     } catch (e) {
       element.error(e, opts);
     }
@@ -57,7 +57,10 @@ const syncProps = async (props, element, opts) => {
     );
   });
   element.props = mergedProps;
-  const methods = { update: await update.bind(element.props), __element: element };
+  const methods = {
+    update: await update.bind(element.props),
+    __element: element
+  };
   Object.setPrototypeOf(element.props, methods);
   return element.props;
 };
@@ -67,7 +70,7 @@ const createProps = function(element, parent, options) {
     const propsStack = options.cachedProps || createPropsStack(element, parent);
     if (propsStack.length) {
       ref.__props = propsStack;
-      syncProps(propsStack, element);
+      syncProps(propsStack, element, options);
     } else {
       ref.__props = options.cachedProps || [];
       element.props = {};
@@ -80,7 +83,7 @@ const createProps = function(element, parent, options) {
     } catch (e) {
       element.props = {};
       ref.__props = options.cachedProps || [];
-      element.error("Error applying props", e);
+      element.error("Error applying props", e, options);
     }
   }
   const methods = { update: update.bind(element.props), __element: element };

package/dist/cjs/props/update.js

@@ -23,12 +23,13 @@ __export(update_exports, {
 module.exports = __toCommonJS(update_exports);
 var import_create = require("./create.js");
 var import_inherit = require("./inherit.js");
-const updateProps = (newProps, element, parent) => {
+const updateProps = (newProps, element, parent, opts) => {
   const { __ref } = element;
   let propsStack = __ref.__props;
   const parentProps = (0, import_inherit.inheritParentProps)(element, parent);
-  if (parentProps.length) propsStack = __ref.__props = [].concat(parentProps, propsStack);
+  if (parentProps.length)
+    propsStack = __ref.__props = [].concat(parentProps, propsStack);
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack);
-  if (propsStack) (0, import_create.syncProps)(propsStack, element);
+  if (propsStack) (0, import_create.syncProps)(propsStack, element, opts);
   return element;
 };

package/dist/cjs/set.js

@@ -52,14 +52,34 @@ const reset = async (options) => {
 const set = async function(params, options = {}, el) {
   var _a, _b, _c;
   const element = el || this;
+  const { __ref: ref } = element;
+  console.warn(params);
   if (options.preventContentUpdate || options.preventUpdate && ((_b = (_a = options.preventUpdate).includes) == null ? void 0 : _b.call(_a, "content")))
     return;
   if (options.routerContentElement && options.lastElement) {
     if (options.routerContentElement !== options.lastElement.content) return;
   }
+  const contentKey = (0, import_utils.setContentKey)(element, options);
+  const content = element[contentKey];
+  const __contentRef = content && content.__ref;
   const lazyLoad = element.props && element.props.lazyLoad;
   const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
   if (options.preventContentUpdate === true && !hasCollection) return;
+  if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils.deepContains)(params, content)) {
+    if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+      const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)(
+        "beforeUpdate",
+        params,
+        element,
+        options
+      );
+      if (beforeUpdateReturns === false) return element;
+    }
+    if (content == null ? void 0 : content.update) await content.update();
+    if (!options.preventUpdateListener)
+      await (0, import_event.triggerEventOn)("update", element, options);
+    return;
+  }
   if (params) {
     let { childExtend, props } = params;
     if (!props) props = params.props = {};

package/dist/cjs/update.js

@@ -80,7 +80,7 @@ const update = async function(params = {}, opts) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
     const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils.isFunction)(v));
     const props = params.props || hasParentProps || hasFunctionInProps.length;
-    if (props) (0, import_props.updateProps)(props, element, parent);
+    if (props) (0, import_props.updateProps)(props, element, parent, options);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
     const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)(
@@ -92,9 +92,9 @@ const update = async function(params = {}, opts) {
     if (beforeUpdateReturns === false) return element;
   }
   (0, import_utils.overwriteDeep)(element, params, { exclude: import_utils2.METHODS_EXL });
-  (0, import_iterate.throughExecProps)(element);
+  (0, import_iterate.throughExecProps)(element, options);
   await (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
-  await (0, import_iterate.throughUpdatedDefine)(element);
+  await (0, import_iterate.throughUpdatedDefine)(element, options);
   if (!options.isForced && !options.preventListeners) {
     await (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   }

package/dist/cjs/utils/applyParam.js

@@ -25,7 +25,13 @@ var import_utils = require("@domql/utils");
 var import_mixins = require("../mixins/index.js");
 const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element;
-  const prop = await (0, import_utils.exec)(element[param], element);
+  const prop = await (0, import_utils.exec)(
+    element[param],
+    element,
+    element.state,
+    element.context,
+    options
+  );
   const { onlyUpdate } = options;
   const DOMQLProperty = import_mixins.REGISTRY[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];

package/dist/esm/iterate.js

@@ -48,7 +48,7 @@ const throughUpdatedExec = async (element, options = { excludes: METHODS_EXL })
   }
   return changes;
 };
-const throughExecProps = (element) => {
+const throughExecProps = (element, opts) => {
   const { __ref: ref } = element;
   const { props } = element;
   for (const k in props) {
@@ -57,14 +57,20 @@ const throughExecProps = (element) => {
       return warn.call(element, "Element was not initiated to execute props");
     const cachedExecProp = ref.__execProps[k];
     if (isFunction(cachedExecProp)) {
-      props[k] = exec(cachedExecProp, element);
+      props[k] = exec(
+        cachedExecProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      );
     } else if (isDefine && isFunction(props[k])) {
       ref.__execProps[k] = props[k];
-      props[k] = exec(props[k], element);
+      props[k] = exec(props[k], element, element.state, element.context, opts);
     }
   }
 };
-const throughInitialDefine = async (element) => {
+const throughInitialDefine = async (element, opts) => {
   const { define, context, __ref: ref } = element;
   let defineObj = {};
   const hasGlobalDefine = context && isObject(context.define);
@@ -74,7 +80,13 @@ const throughInitialDefine = async (element) => {
     let elementProp = element[param];
     if (isFunction(elementProp) && !isMethod(param, element) && !isVariant(param)) {
       ref.__exec[param] = elementProp;
-      const execParam2 = elementProp = await exec(elementProp, element);
+      const execParam2 = elementProp = await exec(
+        elementProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      );
       if (execParam2) {
         elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
         ref.__defineCache[param] = elementProp;
@@ -90,7 +102,7 @@ const throughInitialDefine = async (element) => {
   }
   return element;
 };
-const throughUpdatedDefine = async (element) => {
+const throughUpdatedDefine = async (element, opts) => {
   const { context, define, __ref: ref } = element;
   const changes = {};
   let obj = {};
@@ -104,7 +116,13 @@ const throughUpdatedDefine = async (element) => {
         element.state,
         element.context
       );
-    const cached = await exec(ref.__defineCache[param], element);
+    const cached = await exec(
+      ref.__defineCache[param],
+      element,
+      element.state,
+      element.context,
+      opts
+    );
     const newExecParam = await obj[param](
       cached,
       element,

package/dist/esm/mixins/attr.js

@@ -1,16 +1,25 @@
 import { exec, isNot, isNull, isUndefined } from "@domql/utils";
 import { report } from "@domql/report";
 import { deepMerge } from "../utils/index.js";
-function attr(params, element, node) {
+function attr(params, element, node, opts) {
   const { __ref: ref, props } = element;
   const { __attr } = ref;
   if (isNot("object")) report("HTMLInvalidAttr", params);
   if (params) {
     if (props.attr) deepMerge(params, props.attr);
     for (const attr2 in params) {
-      const val = exec(params[attr2], element);
+      const val = exec(
+        params[attr2],
+        element,
+        element.state,
+        element.context,
+        opts
+      );
       if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute)
-        node.setAttribute(attr2, exec(val, element));
+        node.setAttribute(
+          attr2,
+          exec(val, element, element.state, element.context, opts)
+        );
       else if (node.removeAttribute) node.removeAttribute(attr2);
       __attr[attr2] = val;
     }

package/dist/esm/mixins/classList.js

@@ -6,35 +6,35 @@ const assignKeyAsClassname = (element) => {
     element.class = key.slice(1);
   }
 };
-const classify = (obj, element) => {
+const classify = (obj, element, opts) => {
   let className = "";
   for (const item in obj) {
     const param = obj[item];
     if (typeof param === "boolean" && param) className += ` ${item}`;
     else if (typeof param === "string") className += ` ${param}`;
     else if (typeof param === "function") {
-      className += ` ${exec(param, element)}`;
+      className += ` ${exec(param, element, element.state, element.context, opts)}`;
     }
   }
   return className;
 };
-const classList = (params, element) => {
+const classList = (params, element, opts) => {
   if (!params) return;
   const { key } = element;
   if (params === true) params = element.class = { key };
   if (isString(params)) params = element.class = { default: params };
-  if (isObject(params)) params = classify(params, element);
+  if (isObject(params)) params = classify(params, element, opts);
   const className = params.replace(/\s+/g, " ").trim();
   if (element.ref) element.ref.class = className;
   return className;
 };
-const applyClassListOnNode = (params, element, node) => {
-  const className = classList(params, element);
+const applyClassListOnNode = (params, element, node, opts) => {
+  const className = classList(params, element, opts);
   node.classList = className;
   return className;
 };
-function applyClasslist(params, element, node) {
-  applyClassListOnNode(params, element, node);
+function applyClasslist(params, element, node, opts) {
+  applyClassListOnNode(params, element, node, opts);
 }
 var classList_default = applyClasslist;
 export {

package/dist/esm/mixins/html.js

@@ -1,7 +1,7 @@
 import { exec } from "@domql/utils";
-function html(param, element, node) {
+function html(param, element, node, opts) {
   var _a;
-  const prop = exec(param, element) || exec((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element);
+  const prop = exec(param, element, element.state, element.context, opts) || exec((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element, element.state, element.context, opts);
   const { __ref } = element;
   if (prop !== __ref.__html) {
     if (node.nodeName === "SVG") node.textContent = prop;

package/dist/esm/mixins/state.js

@@ -1,7 +1,7 @@
 import { IGNORE_STATE_PARAMS } from "@domql/state";
 import { exec, isObject } from "@domql/utils";
-async function state(params, element, node) {
-  const state2 = exec(params, element);
+async function state(params, element, node, opts) {
+  const state2 = exec(params, element, element.state, element.context, opts);
   if (isObject(state2)) {
     for (const param in state2) {
       if (IGNORE_STATE_PARAMS.includes(param)) continue;

package/dist/esm/mixins/text.js

@@ -1,10 +1,7 @@
 import { create } from "../create.js";
-import {
-  exec,
-  isString
-} from "@domql/utils";
-function text(param, element, node) {
-  let prop = exec(param, element);
+import { exec, isString } from "@domql/utils";
+function text(param, element, node, opts) {
+  let prop = exec(param, element, element.state, element.context, opts);
   if (isString(prop) && prop.includes("{{")) {
     prop = element.call("replaceLiteralsWithObjectFields", prop);
   }

package/dist/esm/node.js

@@ -17,7 +17,6 @@ import {
 import { REGISTRY } from "./mixins/index.js";
 import { applyParam } from "./utils/applyParam.js";
 import { propagateEventsFromProps } from "./utils/propEvents.js";
-import { isNotProduction } from "@domql/utils/env.js";
 const createNode = async (element, options) => {
   let { node, tag, __ref: ref } = element;
   let isNewNode;
@@ -34,8 +33,8 @@ const createNode = async (element, options) => {
   }
   node.ref = element;
   if (isFunction(node.setAttribute)) node.setAttribute("key", element.key);
-  throughExecProps(element);
-  await throughInitialDefine(element);
+  throughExecProps(element, options);
+  await throughInitialDefine(element, options);
   await throughInitialExec(element);
   if (element.tag !== "string" && element.tag !== "fragment") {
     propagateEventsFromProps(element);

package/dist/esm/props/create.js

@@ -22,7 +22,7 @@ const syncProps = async (props, element, opts) => {
     if (IGNORE_PROPS_PARAMS.includes(v)) return;
     let execProps;
     try {
-      execProps = exec(v, element);
+      execProps = exec(v, element, element.state, element.context, opts);
     } catch (e) {
       element.error(e, opts);
     }
@@ -33,7 +33,10 @@ const syncProps = async (props, element, opts) => {
     );
   });
   element.props = mergedProps;
-  const methods = { update: await update.bind(element.props), __element: element };
+  const methods = {
+    update: await update.bind(element.props),
+    __element: element
+  };
   Object.setPrototypeOf(element.props, methods);
   return element.props;
 };
@@ -43,7 +46,7 @@ const createProps = function(element, parent, options) {
     const propsStack = options.cachedProps || createPropsStack(element, parent);
     if (propsStack.length) {
       ref.__props = propsStack;
-      syncProps(propsStack, element);
+      syncProps(propsStack, element, options);
     } else {
       ref.__props = options.cachedProps || [];
       element.props = {};
@@ -56,7 +59,7 @@ const createProps = function(element, parent, options) {
     } catch (e) {
       element.props = {};
       ref.__props = options.cachedProps || [];
-      element.error("Error applying props", e);
+      element.error("Error applying props", e, options);
     }
   }
   const methods = { update: update.bind(element.props), __element: element };

package/dist/esm/props/update.js

@@ -1,12 +1,13 @@
 import { syncProps } from "./create.js";
 import { inheritParentProps } from "./inherit.js";
-const updateProps = (newProps, element, parent) => {
+const updateProps = (newProps, element, parent, opts) => {
   const { __ref } = element;
   let propsStack = __ref.__props;
   const parentProps = inheritParentProps(element, parent);
-  if (parentProps.length) propsStack = __ref.__props = [].concat(parentProps, propsStack);
+  if (parentProps.length)
+    propsStack = __ref.__props = [].concat(parentProps, propsStack);
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack);
-  if (propsStack) syncProps(propsStack, element);
+  if (propsStack) syncProps(propsStack, element, opts);
   return element;
 };
 export {

package/dist/esm/set.js

@@ -26,14 +26,34 @@ const reset = async (options) => {
 const set = async function(params, options = {}, el) {
   var _a, _b, _c;
   const element = el || this;
+  const { __ref: ref } = element;
+  console.warn(params);
   if (options.preventContentUpdate || options.preventUpdate && ((_b = (_a = options.preventUpdate).includes) == null ? void 0 : _b.call(_a, "content")))
     return;
   if (options.routerContentElement && options.lastElement) {
     if (options.routerContentElement !== options.lastElement.content) return;
   }
+  const contentKey = setContentKey(element, options);
+  const content = element[contentKey];
+  const __contentRef = content && content.__ref;
   const lazyLoad = element.props && element.props.lazyLoad;
   const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
   if (options.preventContentUpdate === true && !hasCollection) return;
+  if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && deepContains(params, content)) {
+    if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+      const beforeUpdateReturns = await triggerEventOnUpdate(
+        "beforeUpdate",
+        params,
+        element,
+        options
+      );
+      if (beforeUpdateReturns === false) return element;
+    }
+    if (content == null ? void 0 : content.update) await content.update();
+    if (!options.preventUpdateListener)
+      await triggerEventOn("update", element, options);
+    return;
+  }
   if (params) {
     let { childExtend, props } = params;
     if (!props) props = params.props = {};

package/dist/esm/update.js

@@ -74,7 +74,7 @@ const update = async function(params = {}, opts) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
     const hasFunctionInProps = ref.__props.filter((v) => isFunction(v));
     const props = params.props || hasParentProps || hasFunctionInProps.length;
-    if (props) updateProps(props, element, parent);
+    if (props) updateProps(props, element, parent, options);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
     const beforeUpdateReturns = await triggerEventOnUpdate(
@@ -86,9 +86,9 @@ const update = async function(params = {}, opts) {
     if (beforeUpdateReturns === false) return element;
   }
   overwriteDeep(element, params, { exclude: METHODS_EXL });
-  throughExecProps(element);
+  throughExecProps(element, options);
   await throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS });
-  await throughUpdatedDefine(element);
+  await throughUpdatedDefine(element, options);
   if (!options.isForced && !options.preventListeners) {
     await triggerEventOn("beforeClassAssign", element, options);
   }

package/dist/esm/utils/applyParam.js

@@ -2,7 +2,13 @@ import { exec, isFunction } from "@domql/utils";
 import { REGISTRY } from "../mixins/index.js";
 const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element;
-  const prop = await exec(element[param], element);
+  const prop = await exec(
+    element[param],
+    element,
+    element.state,
+    element.context,
+    options
+  );
   const { onlyUpdate } = options;
   const DOMQLProperty = REGISTRY[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];

package/iterate.js

@@ -65,7 +65,7 @@ export const throughUpdatedExec = async (
   return changes
 }
 
-export const throughExecProps = (element) => {
+export const throughExecProps = (element, opts) => {
   const { __ref: ref } = element
   const { props } = element
   for (const k in props) {
@@ -75,15 +75,21 @@ export const throughExecProps = (element) => {
       return warn.call(element, 'Element was not initiated to execute props')
     const cachedExecProp = ref.__execProps[k]
     if (isFunction(cachedExecProp)) {
-      props[k] = exec(cachedExecProp, element)
+      props[k] = exec(
+        cachedExecProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      )
     } else if (isDefine && isFunction(props[k])) {
       ref.__execProps[k] = props[k]
-      props[k] = exec(props[k], element)
+      props[k] = exec(props[k], element, element.state, element.context, opts)
     }
   }
 }
 
-export const throughInitialDefine = async (element) => {
+export const throughInitialDefine = async (element, opts) => {
   const { define, context, __ref: ref } = element
 
   let defineObj = {}
@@ -100,7 +106,13 @@ export const throughInitialDefine = async (element) => {
       !isVariant(param)
     ) {
       ref.__exec[param] = elementProp
-      const execParam = (elementProp = await exec(elementProp, element))
+      const execParam = (elementProp = await exec(
+        elementProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      ))
 
       if (execParam) {
         elementProp = element[param] = execParam.parse
@@ -121,7 +133,7 @@ export const throughInitialDefine = async (element) => {
   return element
 }
 
-export const throughUpdatedDefine = async (element) => {
+export const throughUpdatedDefine = async (element, opts) => {
   const { context, define, __ref: ref } = element
   const changes = {}
 
@@ -137,7 +149,13 @@ export const throughUpdatedDefine = async (element) => {
         element.state,
         element.context
       )
-    const cached = await exec(ref.__defineCache[param], element)
+    const cached = await exec(
+      ref.__defineCache[param],
+      element,
+      element.state,
+      element.context,
+      opts
+    )
     const newExecParam = await obj[param](
       cached,
       element,

package/mixins/attr.js

@@ -7,14 +7,20 @@ import { deepMerge } from '../utils/index.js'
 /**
  * Recursively add attributes to a DOM node
  */
-export function attr(params, element, node) {
+export function attr(params, element, node, opts) {
   const { __ref: ref, props } = element
   const { __attr } = ref
   if (isNot('object')) report('HTMLInvalidAttr', params)
   if (params) {
     if (props.attr) deepMerge(params, props.attr)
     for (const attr in params) {
-      const val = exec(params[attr], element)
+      const val = exec(
+        params[attr],
+        element,
+        element.state,
+        element.context,
+        opts
+      )
       // if (__attr[attr] === val) return
       if (
         val !== false &&
@@ -22,7 +28,10 @@ export function attr(params, element, node) {
         !isNull(val) &&
         node.setAttribute
       )
-        node.setAttribute(attr, exec(val, element))
+        node.setAttribute(
+          attr,
+          exec(val, element, element.state, element.context, opts)
+        )
       else if (node.removeAttribute) node.removeAttribute(attr)
       __attr[attr] = val
     }

package/mixins/classList.js

@@ -5,31 +5,36 @@ import { exec, isObject, isString } from '@domql/utils'
 export const assignKeyAsClassname = (element) => {
   const { key } = element
   if (element.class === true) element.class = key
-  else if (!element.class && typeof key === 'string' && key.charAt(0) === '_' && key.charAt(1) !== '_') {
+  else if (
+    !element.class &&
+    typeof key === 'string' &&
+    key.charAt(0) === '_' &&
+    key.charAt(1) !== '_'
+  ) {
     element.class = key.slice(1)
   }
 }
 
 // stringifies class object
-export const classify = (obj, element) => {
+export const classify = (obj, element, opts) => {
   let className = ''
   for (const item in obj) {
     const param = obj[item]
     if (typeof param === 'boolean' && param) className += ` ${item}`
     else if (typeof param === 'string') className += ` ${param}`
     else if (typeof param === 'function') {
-      className += ` ${exec(param, element)}`
+      className += ` ${exec(param, element, element.state, element.context, opts)}`
     }
   }
   return className
 }
 
-export const classList = (params, element) => {
+export const classList = (params, element, opts) => {
   if (!params) return
   const { key } = element
   if (params === true) params = element.class = { key }
   if (isString(params)) params = element.class = { default: params }
-  if (isObject(params)) params = classify(params, element)
+  if (isObject(params)) params = classify(params, element, opts)
   // TODO: fails on string
   const className = params.replace(/\s+/g, ' ').trim()
   if (element.ref) element.ref.class = className // TODO: this check is NOT needed in new DOMQL
@@ -37,14 +42,14 @@ export const classList = (params, element) => {
 }
 
 // LEGACY (still needed in old domql)
-export const applyClassListOnNode = (params, element, node) => {
-  const className = classList(params, element)
+export const applyClassListOnNode = (params, element, node, opts) => {
+  const className = classList(params, element, opts)
   node.classList = className
   return className
 }
 
-export function applyClasslist (params, element, node) {
-  applyClassListOnNode(params, element, node)
+export function applyClasslist(params, element, node, opts) {
+  applyClassListOnNode(params, element, node, opts)
 }
 
 export default applyClasslist

package/mixins/html.js

@@ -6,8 +6,10 @@ import { exec } from '@domql/utils'
  * Appends raw HTML as content
  * an original one as a child
  */
-export function html (param, element, node) {
-  const prop = exec(param, element) || exec(element?.props?.html, element)
+export function html(param, element, node, opts) {
+  const prop =
+    exec(param, element, element.state, element.context, opts) ||
+    exec(element?.props?.html, element, element.state, element.context, opts)
   const { __ref } = element
   if (prop !== __ref.__html) {
     // const parser = new window.DOMParser()

package/mixins/state.js

@@ -3,8 +3,8 @@
 import { IGNORE_STATE_PARAMS } from '@domql/state'
 import { exec, isObject } from '@domql/utils'
 
-export async function state (params, element, node) {
-  const state = exec(params, element)
+export async function state(params, element, node, opts) {
+  const state = exec(params, element, element.state, element.context, opts)
 
   if (isObject(state)) {
     for (const param in state) {

package/mixins/text.js

@@ -1,17 +1,14 @@
 'use strict'
 
 import { create } from '../create.js'
-import {
-  exec,
-  isString
-} from '@domql/utils'
+import { exec, isString } from '@domql/utils'
 
 /**
  * Creates a text node and appends into
  * an original one as a child
  */
-export function text (param, element, node) {
-  let prop = exec(param, element)
+export function text(param, element, node, opts) {
+  let prop = exec(param, element, element.state, element.context, opts)
   if (isString(prop) && prop.includes('{{')) {
     prop = element.call('replaceLiteralsWithObjectFields', prop)
   }

package/node.js

@@ -20,7 +20,7 @@ import {
 import { REGISTRY } from './mixins/index.js'
 import { applyParam } from './utils/applyParam.js'
 import { propagateEventsFromProps } from './utils/propEvents.js'
-import { isNotProduction } from '@domql/utils/env.js'
+// import { isNotProduction } from '@domql/utils/env.js'
 // import { defineSetter } from './methods'
 
 export const createNode = async (element, options) => {
@@ -54,10 +54,10 @@ export const createNode = async (element, options) => {
   // }
 
   // iterate through exec props
-  throughExecProps(element)
+  throughExecProps(element, options)
 
   // iterate through define
-  await throughInitialDefine(element)
+  await throughInitialDefine(element, options)
 
   // iterate through exec
   await throughInitialExec(element)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.31.37",
+  "version": "2.32.0",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -27,12 +27,12 @@
     "prepublish": "npx rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/event": "^2.31.37",
-    "@domql/render": "^2.31.37",
-    "@domql/state": "^2.31.37",
-    "@domql/utils": "^2.31.37"
+    "@domql/event": "^2.32.0",
+    "@domql/render": "^2.32.0",
+    "@domql/state": "^2.32.0",
+    "@domql/utils": "^2.32.0"
   },
-  "gitHead": "4a0a9c683f742b8d81fe3c8c4022939b93058971",
+  "gitHead": "6f087b0fe036c41c8f7d620ed67c24d25e371cc6",
   "devDependencies": {
     "@babel/core": "^7.27.1"
   }

package/props/create.js

@@ -7,14 +7,14 @@ import { inheritParentProps } from './inherit.js'
 
 const createPropsStack = (element, parent) => {
   const { props, __ref: ref } = element
-  const propsStack = ref.__props = inheritParentProps(element, parent)
+  const propsStack = (ref.__props = inheritParentProps(element, parent))
 
   if (isObject(props)) propsStack.push(props)
   else if (props === 'inherit' && parent.props) propsStack.push(parent.props)
   else if (props) propsStack.push(props)
 
   if (isArray(ref.__extend)) {
-    ref.__extend.forEach(extend => {
+    ref.__extend.forEach((extend) => {
       if (extend.props && extend.props !== props) propsStack.push(extend.props)
     })
   }
@@ -28,12 +28,14 @@ export const syncProps = async (props, element, opts) => {
   element.props = {}
   const mergedProps = {}
 
-  props.forEach(v => {
+  props.forEach((v) => {
     if (IGNORE_PROPS_PARAMS.includes(v)) return
     let execProps
     try {
-      execProps = exec(v, element)
-    } catch (e) { element.error(e, opts) }
+      execProps = exec(v, element, element.state, element.context, opts)
+    } catch (e) {
+      element.error(e, opts)
+    }
     // TODO: check if this failing the function props merge
     // if (isObject(execProps) && execProps.__element) return
     // it was causing infinite loop at early days
@@ -45,7 +47,10 @@ export const syncProps = async (props, element, opts) => {
   })
   element.props = mergedProps
 
-  const methods = { update: await update.bind(element.props), __element: element }
+  const methods = {
+    update: await update.bind(element.props),
+    __element: element
+  }
   Object.setPrototypeOf(element.props, methods)
 
   return element.props
@@ -58,7 +63,7 @@ export const createProps = function (element, parent, options) {
     const propsStack = options.cachedProps || createPropsStack(element, parent)
     if (propsStack.length) {
       ref.__props = propsStack
-      syncProps(propsStack, element)
+      syncProps(propsStack, element, options)
     } else {
       ref.__props = options.cachedProps || []
       element.props = {}
@@ -72,7 +77,7 @@ export const createProps = function (element, parent, options) {
     } catch (e) {
       element.props = {}
       ref.__props = options.cachedProps || []
-      element.error('Error applying props', e)
+      element.error('Error applying props', e, options)
     }
   }
 
@@ -82,7 +87,7 @@ export const createProps = function (element, parent, options) {
   return element
 }
 
-async function update (props, options) {
+async function update(props, options) {
   const element = this.__element
   await element.update({ props }, options)
 }

package/props/update.js

@@ -3,15 +3,16 @@
 import { syncProps } from './create.js'
 import { inheritParentProps } from './inherit.js'
 
-export const updateProps = (newProps, element, parent) => {
+export const updateProps = (newProps, element, parent, opts) => {
   const { __ref } = element
   let propsStack = __ref.__props
 
   const parentProps = inheritParentProps(element, parent)
-  if (parentProps.length) propsStack = __ref.__props = [].concat(parentProps, propsStack)
+  if (parentProps.length)
+    propsStack = __ref.__props = [].concat(parentProps, propsStack)
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
 
-  if (propsStack) syncProps(propsStack, element)
+  if (propsStack) syncProps(propsStack, element, opts)
 
   return element
 }

package/set.js

@@ -31,7 +31,9 @@ export const reset = async (options) => {
 
 export const set = async function (params, options = {}, el) {
   const element = el || this
-  // const { __ref: ref } = element
+  const { __ref: ref } = element
+
+  console.warn(params)
 
   if (
     options.preventContentUpdate ||
@@ -43,9 +45,9 @@ export const set = async function (params, options = {}, el) {
     if (options.routerContentElement !== options.lastElement.content) return
   }
 
-  // const contentKey = setContentKey(element, options)
-  // const content = element[contentKey]
-  // const __contentRef = content && content.__ref
+  const contentKey = setContentKey(element, options)
+  const content = element[contentKey]
+  const __contentRef = content && content.__ref
   const lazyLoad = element.props && element.props.lazyLoad
 
   const hasCollection =
@@ -55,24 +57,24 @@ export const set = async function (params, options = {}, el) {
   // console.log(deepClone(params), deepClone(content))
   // console.log(deepContains(params, content))
 
-  // if (
-  //   ref.__noCollectionDifference ||
-  //   (__contentRef && __contentRef.__cached && deepContains(params, content))
-  // ) {
-  //   // if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-  //   //   const beforeUpdateReturns = await triggerEventOnUpdate(
-  //   //     'beforeUpdate',
-  //   //     params,
-  //   //     element,
-  //   //     options
-  //   //   )
-  //   //   if (beforeUpdateReturns === false) return element
-  //   // }
-  //   // if (content?.update) await content.update()
-  //   // if (!options.preventUpdateListener)
-  //   //   await triggerEventOn('update', element, options)
-  //   return
-  // }
+  if (
+    ref.__noCollectionDifference ||
+    (__contentRef && __contentRef.__cached && deepContains(params, content))
+  ) {
+    if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+      const beforeUpdateReturns = await triggerEventOnUpdate(
+        'beforeUpdate',
+        params,
+        element,
+        options
+      )
+      if (beforeUpdateReturns === false) return element
+    }
+    if (content?.update) await content.update()
+    if (!options.preventUpdateListener)
+      await triggerEventOn('update', element, options)
+    return
+  }
 
   if (params) {
     let { childExtend, props } = params

package/update.js

@@ -102,7 +102,7 @@ export const update = async function (params = {}, opts) {
       parent.props && (parent.props[key] || parent.props.childProps)
     const hasFunctionInProps = ref.__props.filter((v) => isFunction(v))
     const props = params.props || hasParentProps || hasFunctionInProps.length
-    if (props) updateProps(props, element, parent)
+    if (props) updateProps(props, element, parent, options)
   }
 
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
@@ -119,9 +119,9 @@ export const update = async function (params = {}, opts) {
   overwriteDeep(element, params, { exclude: METHODS_EXL })
 
   // exec updates
-  throughExecProps(element)
+  throughExecProps(element, options)
   await throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS })
-  await throughUpdatedDefine(element)
+  await throughUpdatedDefine(element, options)
 
   if (!options.isForced && !options.preventListeners) {
     await triggerEventOn('beforeClassAssign', element, options)

package/utils/applyParam.js

@@ -5,7 +5,13 @@ import { REGISTRY } from '../mixins/index.js'
 
 export const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element
-  const prop = await exec(element[param], element)
+  const prop = await exec(
+    element[param],
+    element,
+    element.state,
+    element.context,
+    options
+  )
 
   const { onlyUpdate } = options