@domql/element 2.27.18 → 2.28.2

package/create.js

@@ -112,6 +112,8 @@ export const create = async (
   // apply variants
   applyVariant(element, parent)
 
+  addChildrenIfNotInOriginal(element, parent, key)
+
   const onInit = await triggerEventOn('init', element, options)
   if (onInit === false) return element
 
@@ -120,8 +122,6 @@ export const create = async (
   // generate a CLASS name
   assignKeyAsClassname(element)
 
-  addChildrenIfNotInOriginal(element, parent, key)
-
   await renderElement(element, parent, options, attachOptions)
 
   addElementIntoParentChildren(element, parent)

package/dist/cjs/create.js

@@ -73,11 +73,11 @@ const create = async (element, parent, key, options = import_options.OPTIONS.cre
     return (0, import_render.assignNode)(element, parent, key, attachOptions);
   }
   (0, import_component.applyVariant)(element, parent);
+  (0, import_utils.addChildrenIfNotInOriginal)(element, parent, key);
   const onInit = await (0, import_event.triggerEventOn)("init", element, options);
   if (onInit === false) return element;
   await (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   (0, import_classList.assignKeyAsClassname)(element);
-  (0, import_utils.addChildrenIfNotInOriginal)(element, parent, key);
   await renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
   await (0, import_event.triggerEventOn)("complete", element, options);

package/dist/cjs/extend.js

@@ -32,7 +32,7 @@ const applyExtend = (element, parent, options = {}) => {
   const context = element.context || parent.context;
   extend = (0, import_utils2.fallbackStringExtend)(extend, context, options, variant);
   const extendStack = (0, import_utils2.getExtendStack)(extend, context);
-  if ((0, import_utils.isProduction)()) delete element.extend;
+  delete element.extend;
   let childExtendStack = [];
   if (parent) {
     element.parent = parent;

package/dist/cjs/methods/index.js

@@ -288,9 +288,19 @@ function variables(obj = {}) {
   };
 }
 function call(fnKey, ...args) {
-  var _a;
-  const context = this.context;
-  return (_a = context.utils[fnKey] || context.functions[fnKey] || context.methods[fnKey] || context.snippets[fnKey]) == null ? void 0 : _a.call(this, ...args);
+  var _a, _b, _c, _d;
+  const fn = ((_a = this.context.utils) == null ? void 0 : _a[fnKey]) || ((_b = this.context.functions) == null ? void 0 : _b[fnKey]) || ((_c = this.context.methods) == null ? void 0 : _c[fnKey]) || ((_d = this.context.snippets) == null ? void 0 : _d[fnKey]);
+  if (!fn) return void 0;
+  try {
+    const result = fn.call(this, ...args);
+    if (result && typeof result.then === "function") {
+      return result;
+    }
+    return result;
+  } catch (error2) {
+    console.error(`Error calling '${fnKey}':`, error2);
+    throw error2;
+  }
 }
 const METHODS = [
   "set",

package/dist/cjs/mixins/content.js

@@ -26,12 +26,13 @@ __export(content_exports, {
 module.exports = __toCommonJS(content_exports);
 var import_utils = require("@domql/utils");
 var import_set = require("../set.js");
-const updateContent = function(params, options) {
+const updateContent = async function(params, options) {
   const element = this;
   const ref = element.__ref;
   const contentKey = ref.contentElementKey;
   if (!element[contentKey]) return;
-  if (element[contentKey].update) element[contentKey].update(params, options);
+  if (element[contentKey].update)
+    await element[contentKey].update(params, options);
 };
 const removeContent = function(el, opts = {}) {
   const element = el || this;
@@ -40,16 +41,20 @@ const removeContent = function(el, opts = {}) {
   if (opts.contentElementKey !== "content") opts.contentElementKey = "content";
   if (element[contentElementKey]) {
     if (element[contentElementKey].node && element.node) {
-      if (element[contentElementKey].tag === "fragment") element.node.innerHTML = "";
+      if (element[contentElementKey].tag === "fragment")
+        element.node.innerHTML = "";
       else {
         const contentNode = element[contentElementKey].node;
-        if (contentNode.parentNode === element.node) element.node.removeChild(element[contentElementKey].node);
+        if (contentNode.parentNode === element.node)
+          element.node.removeChild(element[contentElementKey].node);
       }
     }
     const { __cached } = ref;
     if (__cached && __cached[contentElementKey]) {
-      if (__cached[contentElementKey].tag === "fragment") __cached[contentElementKey].parent.node.innerHTML = "";
-      else if (__cached[contentElementKey] && (0, import_utils.isFunction)(__cached[contentElementKey].remove)) __cached[contentElementKey].remove();
+      if (__cached[contentElementKey].tag === "fragment")
+        __cached[contentElementKey].parent.node.innerHTML = "";
+      else if (__cached[contentElementKey] && (0, import_utils.isFunction)(__cached[contentElementKey].remove))
+        __cached[contentElementKey].remove();
     }
     delete element[contentElementKey];
   }
@@ -58,7 +63,7 @@ async function setContent(param, element, node, opts) {
   const contentElementKey = (0, import_utils.setContentKey)(element, opts);
   if (param && element) {
     if (element[contentElementKey].update) {
-      element[contentElementKey].update({}, opts);
+      await element[contentElementKey].update({}, opts);
     } else {
       await import_set.set.call(element, param, opts);
     }

package/dist/cjs/mixins/registry.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var registry_exports = {};
 __export(registry_exports, {
@@ -34,25 +24,25 @@ __export(registry_exports, {
   parseFilters: () => parseFilters
 });
 module.exports = __toCommonJS(registry_exports);
-var import_attr = __toESM(require("./attr.js"), 1);
+var import_attr = require("./attr.js");
 var import_classList = require("./classList.js");
-var import_content = __toESM(require("./content.js"), 1);
-var import_data = __toESM(require("./data.js"), 1);
-var import_html = __toESM(require("./html.js"), 1);
-var import_scope = __toESM(require("./scope.js"), 1);
-var import_state = __toESM(require("./state.js"), 1);
-var import_style = __toESM(require("./style.js"), 1);
-var import_text = __toESM(require("./text.js"), 1);
+var import_content = require("./content.js");
+var import_data = require("./data.js");
+var import_html = require("./html.js");
+var import_scope = require("./scope.js");
+var import_state = require("./state.js");
+var import_style = require("./style.js");
+var import_text = require("./text.js");
 const REGISTRY = {
-  attr: import_attr.default,
-  style: import_style.default,
-  text: import_text.default,
-  html: import_html.default,
-  content: import_content.default,
-  data: import_data.default,
+  attr: import_attr.attr,
+  style: import_style.style,
+  text: import_text.text,
+  html: import_html.html,
+  content: import_content.setContent,
+  data: import_data.data,
   class: import_classList.classList,
-  state: import_state.default,
-  scope: import_scope.default,
+  state: import_state.state,
+  scope: import_scope.scope,
   deps: (param, el) => param || el.parent.deps,
   extend: {},
   childExtend: {},
@@ -132,4 +122,8 @@ const parseFilters = {
   propsKeys: ["__element", "update"],
   stateKeys: []
 };
-const collectionFilters = ["$collection", "$stateCollection", "$propsCollection"];
+const collectionFilters = [
+  "$collection",
+  "$stateCollection",
+  "$propsCollection"
+];

package/dist/cjs/node.js

@@ -62,21 +62,20 @@ const createNode = async (element, options) => {
     if ((0, import_utils.isUndefined)(value) || (0, import_methods.isMethod)(param, element) || (0, import_utils.isVariant)(param) || (0, import_utils.isObject)(import_mixins.REGISTRY[param]))
       continue;
     const isElement = await (0, import_applyParam.applyParam)(param, element, options);
-    if (isElement) {
-      const { hasDefine, hasContextDefine } = isElement;
-      if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = async () => {
-          await (0, import_create.create)((0, import_utils.exec)(value, element), element, param, options);
-        };
-        if (element.props && element.props.lazyLoad || options.lazyLoad) {
-          window.requestAnimationFrame(async () => {
-            await createAsync();
-            if (!options.preventUpdateListener) {
-              await (0, import_event.triggerEventOn)("lazyLoad", element, options);
-            }
-          });
-        } else await createAsync();
-      }
+    if (!isElement) continue;
+    const { hasDefine, hasContextDefine } = isElement;
+    if (value && isElement && !hasDefine && !hasContextDefine) {
+      const createAsync = async () => {
+        await (0, import_create.create)(await (0, import_utils.exec)(value, element), element, param, options);
+      };
+      if (element.props && element.props.lazyLoad || options.lazyLoad) {
+        window.requestAnimationFrame(async () => {
+          await createAsync();
+          if (!options.preventUpdateListener) {
+            await (0, import_event.triggerEventOn)("lazyLoad", element, options);
+          }
+        });
+      } else await createAsync();
     }
   }
   return element;

package/dist/cjs/set.js

@@ -33,6 +33,7 @@ var import_event = require("@domql/event");
 const resetElement = async (params, element, options) => {
   if (!options.preventRemove) (0, import_content.removeContent)(element, options);
   const { __ref: ref } = element;
+  if (params instanceof Promise) console.log(params, params instanceof Promise);
   await (0, import_create.create)(params, element, ref.contentElementKey || "content", {
     ignoreChildExtend: true,
     ...import_mixins.registry.defaultOptions,
@@ -60,11 +61,17 @@ const set = async function(params, options = {}, el) {
   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);
+      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);
+    if (!options.preventUpdateListener)
+      await (0, import_event.triggerEventOn)("update", element, options);
     return;
   }
   if (params) {

package/dist/cjs/utils/applyParam.js

@@ -25,7 +25,7 @@ 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 = element[param];
+  const prop = await (0, import_utils.exec)(element[param], element);
   const { onlyUpdate } = options;
   const DOMQLProperty = import_mixins.REGISTRY[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
@@ -37,8 +37,8 @@ const applyParam = async (param, element, options) => {
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if ((0, import_utils.isFunction)(isGlobalTransformer)) {
       await isGlobalTransformer(prop, element, node, options);
-      return;
     }
+    return;
   }
   return { hasDefine, hasContextDefine };
 };

package/dist/cjs/utils/propEvents.js

@@ -32,7 +32,7 @@ const propagateEventsFromProps = (element) => {
     if ((0, import_utils.isFunction)(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args);
-        if (originalEventRetunrs !== false) funcFromProps(...args);
+        if (originalEventRetunrs !== false) return funcFromProps(...args);
       };
     } else on[eventName] = funcFromProps;
   });

package/dist/esm/create.js

@@ -69,11 +69,11 @@ const create = async (element, parent, key, options = OPTIONS.create || {}, atta
     return assignNode(element, parent, key, attachOptions);
   }
   applyVariant(element, parent);
+  addChildrenIfNotInOriginal(element, parent, key);
   const onInit = await triggerEventOn("init", element, options);
   if (onInit === false) return element;
   await triggerEventOn("beforeClassAssign", element, options);
   assignKeyAsClassname(element);
-  addChildrenIfNotInOriginal(element, parent, key);
   await renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
   await triggerEventOn("complete", element, options);

package/dist/esm/extend.js

@@ -15,7 +15,7 @@ const applyExtend = (element, parent, options = {}) => {
   const context = element.context || parent.context;
   extend = fallbackStringExtend(extend, context, options, variant);
   const extendStack = getExtendStack(extend, context);
-  if (isProduction()) delete element.extend;
+  delete element.extend;
   let childExtendStack = [];
   if (parent) {
     element.parent = parent;

package/dist/esm/methods/index.js

@@ -251,9 +251,19 @@ function variables(obj = {}) {
   };
 }
 function call(fnKey, ...args) {
-  var _a;
-  const context = this.context;
-  return (_a = context.utils[fnKey] || context.functions[fnKey] || context.methods[fnKey] || context.snippets[fnKey]) == null ? void 0 : _a.call(this, ...args);
+  var _a, _b, _c, _d;
+  const fn = ((_a = this.context.utils) == null ? void 0 : _a[fnKey]) || ((_b = this.context.functions) == null ? void 0 : _b[fnKey]) || ((_c = this.context.methods) == null ? void 0 : _c[fnKey]) || ((_d = this.context.snippets) == null ? void 0 : _d[fnKey]);
+  if (!fn) return void 0;
+  try {
+    const result = fn.call(this, ...args);
+    if (result && typeof result.then === "function") {
+      return result;
+    }
+    return result;
+  } catch (error2) {
+    console.error(`Error calling '${fnKey}':`, error2);
+    throw error2;
+  }
 }
 const METHODS = [
   "set",

package/dist/esm/mixins/content.js

@@ -1,11 +1,12 @@
 import { isFunction, setContentKey } from "@domql/utils";
 import { set } from "../set.js";
-const updateContent = function(params, options) {
+const updateContent = async function(params, options) {
   const element = this;
   const ref = element.__ref;
   const contentKey = ref.contentElementKey;
   if (!element[contentKey]) return;
-  if (element[contentKey].update) element[contentKey].update(params, options);
+  if (element[contentKey].update)
+    await element[contentKey].update(params, options);
 };
 const removeContent = function(el, opts = {}) {
   const element = el || this;
@@ -14,16 +15,20 @@ const removeContent = function(el, opts = {}) {
   if (opts.contentElementKey !== "content") opts.contentElementKey = "content";
   if (element[contentElementKey]) {
     if (element[contentElementKey].node && element.node) {
-      if (element[contentElementKey].tag === "fragment") element.node.innerHTML = "";
+      if (element[contentElementKey].tag === "fragment")
+        element.node.innerHTML = "";
       else {
         const contentNode = element[contentElementKey].node;
-        if (contentNode.parentNode === element.node) element.node.removeChild(element[contentElementKey].node);
+        if (contentNode.parentNode === element.node)
+          element.node.removeChild(element[contentElementKey].node);
       }
     }
     const { __cached } = ref;
     if (__cached && __cached[contentElementKey]) {
-      if (__cached[contentElementKey].tag === "fragment") __cached[contentElementKey].parent.node.innerHTML = "";
-      else if (__cached[contentElementKey] && isFunction(__cached[contentElementKey].remove)) __cached[contentElementKey].remove();
+      if (__cached[contentElementKey].tag === "fragment")
+        __cached[contentElementKey].parent.node.innerHTML = "";
+      else if (__cached[contentElementKey] && isFunction(__cached[contentElementKey].remove))
+        __cached[contentElementKey].remove();
     }
     delete element[contentElementKey];
   }
@@ -32,7 +37,7 @@ async function setContent(param, element, node, opts) {
   const contentElementKey = setContentKey(element, opts);
   if (param && element) {
     if (element[contentElementKey].update) {
-      element[contentElementKey].update({}, opts);
+      await element[contentElementKey].update({}, opts);
     } else {
       await set.call(element, param, opts);
     }

package/dist/esm/mixins/registry.js

@@ -1,18 +1,18 @@
-import attr from "./attr.js";
+import { attr } from "./attr.js";
 import { classList } from "./classList.js";
-import content from "./content.js";
-import data from "./data.js";
-import html from "./html.js";
-import scope from "./scope.js";
-import state from "./state.js";
-import style from "./style.js";
-import text from "./text.js";
+import { setContent } from "./content.js";
+import { data } from "./data.js";
+import { html } from "./html.js";
+import { scope } from "./scope.js";
+import { state } from "./state.js";
+import { style } from "./style.js";
+import { text } from "./text.js";
 const REGISTRY = {
   attr,
   style,
   text,
   html,
-  content,
+  content: setContent,
   data,
   class: classList,
   state,
@@ -96,7 +96,11 @@ const parseFilters = {
   propsKeys: ["__element", "update"],
   stateKeys: []
 };
-const collectionFilters = ["$collection", "$stateCollection", "$propsCollection"];
+const collectionFilters = [
+  "$collection",
+  "$stateCollection",
+  "$propsCollection"
+];
 export {
   REGISTRY,
   collectionFilters,

package/dist/esm/node.js

@@ -48,21 +48,20 @@ const createNode = async (element, options) => {
     if (isUndefined(value) || isMethod(param, element) || isVariant(param) || isObject(REGISTRY[param]))
       continue;
     const isElement = await applyParam(param, element, options);
-    if (isElement) {
-      const { hasDefine, hasContextDefine } = isElement;
-      if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = async () => {
-          await create(exec(value, element), element, param, options);
-        };
-        if (element.props && element.props.lazyLoad || options.lazyLoad) {
-          window.requestAnimationFrame(async () => {
-            await createAsync();
-            if (!options.preventUpdateListener) {
-              await triggerEventOn("lazyLoad", element, options);
-            }
-          });
-        } else await createAsync();
-      }
+    if (!isElement) continue;
+    const { hasDefine, hasContextDefine } = isElement;
+    if (value && isElement && !hasDefine && !hasContextDefine) {
+      const createAsync = async () => {
+        await create(await exec(value, element), element, param, options);
+      };
+      if (element.props && element.props.lazyLoad || options.lazyLoad) {
+        window.requestAnimationFrame(async () => {
+          await createAsync();
+          if (!options.preventUpdateListener) {
+            await triggerEventOn("lazyLoad", element, options);
+          }
+        });
+      } else await createAsync();
     }
   }
   return element;

package/dist/esm/set.js

@@ -7,6 +7,7 @@ import { triggerEventOn, triggerEventOnUpdate } from "@domql/event";
 const resetElement = async (params, element, options) => {
   if (!options.preventRemove) removeContent(element, options);
   const { __ref: ref } = element;
+  if (params instanceof Promise) console.log(params, params instanceof Promise);
   await create(params, element, ref.contentElementKey || "content", {
     ignoreChildExtend: true,
     ...registry.defaultOptions,
@@ -34,11 +35,17 @@ const set = async function(params, options = {}, el) {
   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);
+      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);
+    if (!options.preventUpdateListener)
+      await triggerEventOn("update", element, options);
     return;
   }
   if (params) {

package/dist/esm/utils/applyParam.js

@@ -1,8 +1,8 @@
-import { isFunction } from "@domql/utils";
+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 = element[param];
+  const prop = await exec(element[param], element);
   const { onlyUpdate } = options;
   const DOMQLProperty = REGISTRY[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
@@ -14,8 +14,8 @@ const applyParam = async (param, element, options) => {
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if (isFunction(isGlobalTransformer)) {
       await isGlobalTransformer(prop, element, node, options);
-      return;
     }
+    return;
   }
   return { hasDefine, hasContextDefine };
 };

package/dist/esm/utils/propEvents.js

@@ -9,7 +9,7 @@ const propagateEventsFromProps = (element) => {
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args);
-        if (originalEventRetunrs !== false) funcFromProps(...args);
+        if (originalEventRetunrs !== false) return funcFromProps(...args);
       };
     } else on[eventName] = funcFromProps;
   });

package/extend.js

@@ -27,7 +27,8 @@ export const applyExtend = (element, parent, options = {}) => {
 
   const extendStack = getExtendStack(extend, context)
 
-  if (isProduction()) delete element.extend
+  // if (isProduction()) delete element.extend
+  delete element.extend
 
   let childExtendStack = []
   if (parent) {

package/methods/index.js

@@ -302,14 +302,41 @@ export function variables (obj = {}) {
   }
 }
 
+/**
+ * A unified call function that detects the calling context and adapts accordingly.
+ * - When called in an async context (with await), it fully resolves promises
+ * - When called in a sync context, it returns sync results directly and handles promises appropriately
+ *
+ * @param {string} fnKey - The name of the function to call
+ * @param {...any} args - Arguments to pass to the function
+ * @returns {any|Promise} - The result or a Promise to the result
+ */
 export function call (fnKey, ...args) {
-  const context = this.context
-  return (
-    context.utils[fnKey] ||
-    context.functions[fnKey] ||
-    context.methods[fnKey] ||
-    context.snippets[fnKey]
-  )?.call(this, ...args)
+  const fn =
+    this.context.utils?.[fnKey] ||
+    this.context.functions?.[fnKey] ||
+    this.context.methods?.[fnKey] ||
+    this.context.snippets?.[fnKey]
+
+  if (!fn) return undefined
+
+  try {
+    // Call the function
+    const result = fn.call(this, ...args)
+
+    // Handle promises
+    if (result && typeof result.then === 'function') {
+      // This magic allows the function to be awaited if called with await
+      // but still work reasonably when called without await
+      return result
+    }
+
+    // Return synchronous results directly
+    return result
+  } catch (error) {
+    console.error(`Error calling '${fnKey}':`, error)
+    throw error
+  }
 }
 
 export const METHODS = [

package/mixins/content.js

@@ -3,14 +3,15 @@
 import { isFunction, setContentKey } from '@domql/utils'
 import { set } from '../set.js'
 
-export const updateContent = function (params, options) {
+export const updateContent = async function (params, options) {
   const element = this
   const ref = element.__ref
 
   const contentKey = ref.contentElementKey
 
   if (!element[contentKey]) return
-  if (element[contentKey].update) element[contentKey].update(params, options)
+  if (element[contentKey].update)
+    await element[contentKey].update(params, options)
 }
 
 export const removeContent = function (el, opts = {}) {
@@ -20,17 +21,24 @@ export const removeContent = function (el, opts = {}) {
   if (opts.contentElementKey !== 'content') opts.contentElementKey = 'content'
   if (element[contentElementKey]) {
     if (element[contentElementKey].node && element.node) {
-      if (element[contentElementKey].tag === 'fragment') element.node.innerHTML = ''
+      if (element[contentElementKey].tag === 'fragment')
+        element.node.innerHTML = ''
       else {
         const contentNode = element[contentElementKey].node
-        if (contentNode.parentNode === element.node) element.node.removeChild(element[contentElementKey].node)
+        if (contentNode.parentNode === element.node)
+          element.node.removeChild(element[contentElementKey].node)
       }
     }
 
     const { __cached } = ref
     if (__cached && __cached[contentElementKey]) {
-      if (__cached[contentElementKey].tag === 'fragment') __cached[contentElementKey].parent.node.innerHTML = ''
-      else if (__cached[contentElementKey] && isFunction(__cached[contentElementKey].remove)) __cached[contentElementKey].remove()
+      if (__cached[contentElementKey].tag === 'fragment')
+        __cached[contentElementKey].parent.node.innerHTML = ''
+      else if (
+        __cached[contentElementKey] &&
+        isFunction(__cached[contentElementKey].remove)
+      )
+        __cached[contentElementKey].remove()
     }
 
     delete element[contentElementKey]
@@ -45,7 +53,7 @@ export async function setContent (param, element, node, opts) {
   const contentElementKey = setContentKey(element, opts)
   if (param && element) {
     if (element[contentElementKey].update) {
-      element[contentElementKey].update({}, opts)
+      await element[contentElementKey].update({}, opts)
     } else {
       await set.call(element, param, opts)
     }

package/mixins/registry.js

@@ -1,21 +1,21 @@
 'use strict'
 
-import attr from './attr.js'
+import { attr } from './attr.js'
 import { classList } from './classList.js'
-import content from './content.js'
-import data from './data.js'
-import html from './html.js'
-import scope from './scope.js'
-import state from './state.js'
-import style from './style.js'
-import text from './text.js'
+import { setContent } from './content.js'
+import { data } from './data.js'
+import { html } from './html.js'
+import { scope } from './scope.js'
+import { state } from './state.js'
+import { style } from './style.js'
+import { text } from './text.js'
 
 export const REGISTRY = {
   attr,
   style,
   text,
   html,
-  content,
+  content: setContent,
   data,
   class: classList,
   state,
@@ -81,13 +81,33 @@ export default REGISTRY
 // Keys not in the array are excluded.
 export const parseFilters = {
   elementKeys: [
-    'tag', 'text', 'style', 'attr', 'class', 'state', 'props',
-    'data', 'content', 'html', 'on', 'key', 'extend', 'childExtend',
-    'childExtendRecursive', 'scope', 'query',
-    '$collection', '$stateCollection', '$propsCollection'
+    'tag',
+    'text',
+    'style',
+    'attr',
+    'class',
+    'state',
+    'props',
+    'data',
+    'content',
+    'html',
+    'on',
+    'key',
+    'extend',
+    'childExtend',
+    'childExtendRecursive',
+    'scope',
+    'query',
+    '$collection',
+    '$stateCollection',
+    '$propsCollection'
   ],
   propsKeys: ['__element', 'update'],
   stateKeys: []
 }
 
-export const collectionFilters = ['$collection', '$stateCollection', '$propsCollection']
+export const collectionFilters = [
+  '$collection',
+  '$stateCollection',
+  '$propsCollection'
+]

package/node.js

@@ -79,23 +79,24 @@ export const createNode = async (element, options) => {
       continue
 
     const isElement = await applyParam(param, element, options)
-    if (isElement) {
-      const { hasDefine, hasContextDefine } = isElement
-      if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = async () => {
-          await create(exec(value, element), element, param, options)
-        }
-
-        if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
-          window.requestAnimationFrame(async () => {
-            await createAsync()
-            // handle lazy load
-            if (!options.preventUpdateListener) {
-              await triggerEventOn('lazyLoad', element, options)
-            }
-          })
-        } else await createAsync()
+    if (!isElement) continue
+
+    const { hasDefine, hasContextDefine } = isElement
+
+    if (value && isElement && !hasDefine && !hasContextDefine) {
+      const createAsync = async () => {
+        await create(await exec(value, element), element, param, options)
       }
+
+      if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
+        window.requestAnimationFrame(async () => {
+          await createAsync()
+          // handle lazy load
+          if (!options.preventUpdateListener) {
+            await triggerEventOn('lazyLoad', element, options)
+          }
+        })
+      } else await createAsync()
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.27.18",
+  "version": "2.28.2",
   "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.27.18",
-    "@domql/render": "^2.27.18",
-    "@domql/state": "^2.27.18",
-    "@domql/utils": "^2.27.18"
+    "@domql/event": "^2.28.2",
+    "@domql/render": "^2.28.2",
+    "@domql/state": "^2.28.2",
+    "@domql/utils": "^2.28.2"
   },
-  "gitHead": "0d6418dd1eabd119d4ef1b6bb07b7733151878a5",
+  "gitHead": "3c5e8b68269799a0e2382f9c79c51e41f33863bf",
   "devDependencies": {
     "@babel/core": "^7.26.0"
   }

package/set.js

@@ -11,6 +11,7 @@ import { triggerEventOn, triggerEventOnUpdate } from '@domql/event'
 export const resetElement = async (params, element, options) => {
   if (!options.preventRemove) removeContent(element, options)
   const { __ref: ref } = element
+  if (params instanceof Promise) console.log(params, params instanceof Promise)
   await create(params, element, ref.contentElementKey || 'content', {
     ignoreChildExtend: true,
     ...registry.defaultOptions,
@@ -19,7 +20,7 @@ export const resetElement = async (params, element, options) => {
   })
 }
 
-export const reset = async (options) => {
+export const reset = async options => {
   const element = this
   await create(element, element.parent, undefined, {
     ignoreChildExtend: true,
@@ -37,16 +38,26 @@ export const set = async function (params, options = {}, el) {
   const __contentRef = content && content.__ref
   const lazyLoad = element.props && element.props.lazyLoad
 
-  const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection
+  const hasCollection =
+    element.$collection || element.$stateCollection || element.$propsCollection
   if (options.preventContentUpdate === true && !hasCollection) return
 
-  if (ref.__noCollectionDifference || (__contentRef && __contentRef.__cached && 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)
+      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)
+    if (!options.preventUpdateListener)
+      await triggerEventOn('update', element, options)
     return
   }
 

package/utils/applyParam.js

@@ -1,16 +1,18 @@
 'use strict'
 
-import { isFunction } from '@domql/utils'
+import { exec, isFunction } from '@domql/utils'
 import { REGISTRY } from '../mixins/index.js'
 
 export const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element
-  const prop = element[param]
+  const prop = await exec(element[param], element)
 
   const { onlyUpdate } = options
 
   const DOMQLProperty = REGISTRY[param]
-  const DOMQLPropertyFromContext = context && context.registry && context.registry[param]
+
+  const DOMQLPropertyFromContext =
+    context && context.registry && context.registry[param]
   const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty
 
   const hasDefine = element.define && element.define[param]
@@ -18,13 +20,15 @@ export const applyParam = async (param, element, options) => {
 
   if (!ref.__if) return
 
-  const hasOnlyUpdate = onlyUpdate ? (onlyUpdate === param || element.lookup(onlyUpdate)) : true
+  const hasOnlyUpdate = onlyUpdate
+    ? onlyUpdate === param || element.lookup(onlyUpdate)
+    : true
 
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if (isFunction(isGlobalTransformer)) {
       await isGlobalTransformer(prop, element, node, options)
-      return
     }
+    return
   }
 
   return { hasDefine, hasContextDefine }

package/utils/propEvents.js

@@ -12,7 +12,7 @@ export const propagateEventsFromProps = (element) => {
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args)
-        if (originalEventRetunrs !== false) funcFromProps(...args)
+        if (originalEventRetunrs !== false) return funcFromProps(...args)
       }
     } else on[eventName] = funcFromProps
   })