@domql/element 3.5.0 → 3.6.1

package/README.md

@@ -16,4 +16,22 @@ const Poster = {
 }
 
 DOM.create(Poster, document.body)
-```
+```
+
+### html mixin
+
+The `html` mixin sets raw HTML content on an element. It supports both direct assignment and props:
+
+```javascript
+// Direct assignment (el.html)
+const MyComponent = {
+  html: '<strong>Hello</strong>'
+}
+
+// Via props (el.props.html) — works as an alias
+const MyComponent = {
+  props: { html: '<strong>Hello</strong>' }
+}
+```
+
+`el.html` takes priority when both are set. `props.html` is used as a fallback when `el.html` is not defined.

package/create.js

@@ -150,7 +150,9 @@ const resetOptions = (element, parent, options) => {
 
 const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children) {
-    parent.__ref.__children.push(element.key)
+    if (!parent.__ref.__children.includes(element.key)) {
+      parent.__ref.__children.push(element.key)
+    }
   }
 }
 
@@ -175,12 +177,13 @@ const renderElement = (element, parent, options, attachOptions) => {
   }
 
   // CREATE a real NODE
-  if (ENV === 'test' || ENV === 'development') {
+  if (ENV === 'test' || ENV === 'development' || element.context?.strictMode) {
     createNestedChild()
   } else {
     try {
       createNestedChild()
     } catch (e) {
+      element.error = e
       const path = ref.path
       if (path.includes('ComponentsGrid')) {
         path.splice(0, path.indexOf('ComponentsGrid') + 2)
@@ -194,7 +197,7 @@ const renderElement = (element, parent, options, attachOptions) => {
         isDemoComponent ? isDemoComponent + ' ' : '' + path.join('.')
       )
       element.verbose()
-      element.error(e, options)
+      console.error('[DomQL] Render error:', e)
       if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options)
       }

package/dist/cjs/create.js

@@ -111,7 +111,9 @@ const resetOptions = (element, parent, options) => {
 };
 const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children) {
-    parent.__ref.__children.push(element.key);
+    if (!parent.__ref.__children.includes(element.key)) {
+      parent.__ref.__children.push(element.key);
+    }
   }
 };
 let _uniqIdCounter = 1;
@@ -130,12 +132,13 @@ const renderElement = (element, parent, options, attachOptions) => {
     (0, import_node.createNode)(element, options);
     ref.__uniqId = _uniqIdCounter++;
   };
-  if (ENV === "test" || ENV === "development") {
+  if (ENV === "test" || ENV === "development" || element.context?.strictMode) {
     createNestedChild();
   } else {
     try {
       createNestedChild();
     } catch (e) {
+      element.error = e;
       const path = ref.path;
       if (path.includes("ComponentsGrid")) {
         path.splice(0, path.indexOf("ComponentsGrid") + 2);
@@ -149,7 +152,7 @@ const renderElement = (element, parent, options, attachOptions) => {
         isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
       );
       element.verbose();
-      element.error(e, options);
+      console.error("[DomQL] Render error:", e);
       if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options);
       }

package/dist/cjs/event/animationFrame.js

@@ -64,7 +64,8 @@ const processFrameListeners = (frameListeners) => {
   }
 };
 const startFrameLoop = (frameListeners) => {
-  if (_frameRunning) return;
+  const raf = typeof window !== "undefined" && window.requestAnimationFrame;
+  if (_frameRunning || !raf) return;
   _frameRunning = true;
   function requestFrame() {
     if (frameListeners.size === 0) {
@@ -72,9 +73,9 @@ const startFrameLoop = (frameListeners) => {
       return;
     }
     processFrameListeners(frameListeners);
-    window.requestAnimationFrame(requestFrame);
+    raf(requestFrame);
   }
-  window.requestAnimationFrame(requestFrame);
+  raf(requestFrame);
 };
 const applyAnimationFrame = (element) => {
   if (!element) {

package/dist/cjs/event/on.js

@@ -45,17 +45,25 @@ const registerNodeEvent = (param, element, node, options) => {
     }
     const handler = (event) => {
       const { state, context } = element;
-      const result = appliedFunction.call(
-        element,
-        event,
-        element,
-        state,
-        context,
-        options
-      );
-      if (result && typeof result.then === "function") {
-        result.catch(() => {
-        });
+      try {
+        const result = appliedFunction.call(
+          element,
+          event,
+          element,
+          state,
+          context,
+          options
+        );
+        if (result && typeof result.then === "function") {
+          result.catch((err) => {
+            element.error = err;
+            console.error("[DomQL] Async DOM event error:", err);
+          });
+        }
+      } catch (err) {
+        element.error = err;
+        console.error("[DomQL] DOM event error:", err);
+        if (context?.strictMode) throw err;
       }
     };
     ref.__eventListeners[param] = handler;

package/dist/cjs/mixins/html.js

@@ -24,7 +24,7 @@ __export(html_exports, {
 module.exports = __toCommonJS(html_exports);
 var import_utils = require("@domql/utils");
 function html(param, element, node) {
-  const prop = (0, import_utils.exec)(element?.props?.html || param, element);
+  const prop = (0, import_utils.exec)(param ?? element?.props?.html, element);
   const { __ref } = element;
   if (prop !== __ref.__html) {
     if (node.nodeName === "SVG") node.textContent = prop;

package/dist/cjs/set.js

@@ -130,7 +130,7 @@ const set = function(params, options = {}, el) {
     }
     return;
   }
-  if (!params) return element;
+  if (!params || typeof params !== "object") return element;
   let { childExtends, props, tag } = params;
   if (!props) props = params.props = {};
   if (tag === "fragment") {

package/dist/cjs/update.js

@@ -215,6 +215,34 @@ const update = function(params = {}, opts) {
     (0, import_event.triggerEventOn)("update", element, options);
   }
 };
+const findSiblingAttachOptions = (element, parent) => {
+  const { __children } = parent.__ref || {};
+  if (!__children) return false;
+  const currentIndex = __children.indexOf(element.key);
+  let previousNode;
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    const sibling = parent[__children[i]];
+    if (sibling?.node?.parentNode) {
+      previousNode = sibling.node;
+      break;
+    }
+  }
+  if (previousNode) {
+    return { position: "after", node: previousNode };
+  }
+  let nextNode;
+  for (let i = currentIndex + 1; i < __children.length; i++) {
+    const sibling = parent[__children[i]];
+    if (sibling?.node?.parentNode) {
+      nextNode = sibling.node;
+      break;
+    }
+  }
+  if (nextNode) {
+    return { position: "before", node: nextNode };
+  }
+  return false;
+};
 const checkIfOnUpdate = (element, parent, options) => {
   if (!(0, import_utils.isFunction)(element.if) && !(0, import_utils.isFunction)(element.props?.if) || !parent) {
     return;
@@ -251,16 +279,7 @@ const checkIfOnUpdate = (element, parent, options) => {
       } else if (element[contentKey]?.parseDeep) {
         element[contentKey] = element[contentKey].parseDeep();
       }
-      const previousElement = element.previousElement();
-      const previousNode = previousElement?.node;
-      const hasPrevious = previousNode?.parentNode;
-      const nextElement = element.nextElement();
-      const nextNode = nextElement?.node;
-      const hasNext = nextNode?.parentNode;
-      const attachOptions = (hasPrevious || hasNext) && {
-        position: hasPrevious ? "after" : hasNext ? "before" : null,
-        node: hasPrevious && previousNode || hasNext && nextNode
-      };
+      const attachOptions = findSiblingAttachOptions(element, parent);
       delete element.__ref;
       delete element.parent;
       const createdElement = (0, import_create.create)(

package/dist/esm/create.js

@@ -102,7 +102,9 @@ const resetOptions = (element, parent, options) => {
 };
 const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children) {
-    parent.__ref.__children.push(element.key);
+    if (!parent.__ref.__children.includes(element.key)) {
+      parent.__ref.__children.push(element.key);
+    }
   }
 };
 let _uniqIdCounter = 1;
@@ -121,12 +123,13 @@ const renderElement = (element, parent, options, attachOptions) => {
     createNode(element, options);
     ref.__uniqId = _uniqIdCounter++;
   };
-  if (ENV === "test" || ENV === "development") {
+  if (ENV === "test" || ENV === "development" || element.context?.strictMode) {
     createNestedChild();
   } else {
     try {
       createNestedChild();
     } catch (e) {
+      element.error = e;
       const path = ref.path;
       if (path.includes("ComponentsGrid")) {
         path.splice(0, path.indexOf("ComponentsGrid") + 2);
@@ -140,7 +143,7 @@ const renderElement = (element, parent, options, attachOptions) => {
         isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
       );
       element.verbose();
-      element.error(e, options);
+      console.error("[DomQL] Render error:", e);
       if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options);
       }

package/dist/esm/event/animationFrame.js

@@ -39,7 +39,8 @@ const processFrameListeners = (frameListeners) => {
   }
 };
 const startFrameLoop = (frameListeners) => {
-  if (_frameRunning) return;
+  const raf = typeof window !== "undefined" && window.requestAnimationFrame;
+  if (_frameRunning || !raf) return;
   _frameRunning = true;
   function requestFrame() {
     if (frameListeners.size === 0) {
@@ -47,9 +48,9 @@ const startFrameLoop = (frameListeners) => {
       return;
     }
     processFrameListeners(frameListeners);
-    window.requestAnimationFrame(requestFrame);
+    raf(requestFrame);
   }
-  window.requestAnimationFrame(requestFrame);
+  raf(requestFrame);
 };
 const applyAnimationFrame = (element) => {
   if (!element) {

package/dist/esm/event/on.js

@@ -18,17 +18,25 @@ const registerNodeEvent = (param, element, node, options) => {
     }
     const handler = (event) => {
       const { state, context } = element;
-      const result = appliedFunction.call(
-        element,
-        event,
-        element,
-        state,
-        context,
-        options
-      );
-      if (result && typeof result.then === "function") {
-        result.catch(() => {
-        });
+      try {
+        const result = appliedFunction.call(
+          element,
+          event,
+          element,
+          state,
+          context,
+          options
+        );
+        if (result && typeof result.then === "function") {
+          result.catch((err) => {
+            element.error = err;
+            console.error("[DomQL] Async DOM event error:", err);
+          });
+        }
+      } catch (err) {
+        element.error = err;
+        console.error("[DomQL] DOM event error:", err);
+        if (context?.strictMode) throw err;
       }
     };
     ref.__eventListeners[param] = handler;

package/dist/esm/mixins/html.js

@@ -1,6 +1,6 @@
 import { exec } from "@domql/utils";
 function html(param, element, node) {
-  const prop = exec(element?.props?.html || param, element);
+  const prop = exec(param ?? element?.props?.html, element);
   const { __ref } = element;
   if (prop !== __ref.__html) {
     if (node.nodeName === "SVG") node.textContent = prop;

package/dist/esm/set.js

@@ -100,7 +100,7 @@ const set = function(params, options = {}, el) {
     }
     return;
   }
-  if (!params) return element;
+  if (!params || typeof params !== "object") return element;
   let { childExtends, props, tag } = params;
   if (!props) props = params.props = {};
   if (tag === "fragment") {

package/dist/esm/update.js

@@ -202,6 +202,34 @@ const update = function(params = {}, opts) {
     triggerEventOn("update", element, options);
   }
 };
+const findSiblingAttachOptions = (element, parent) => {
+  const { __children } = parent.__ref || {};
+  if (!__children) return false;
+  const currentIndex = __children.indexOf(element.key);
+  let previousNode;
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    const sibling = parent[__children[i]];
+    if (sibling?.node?.parentNode) {
+      previousNode = sibling.node;
+      break;
+    }
+  }
+  if (previousNode) {
+    return { position: "after", node: previousNode };
+  }
+  let nextNode;
+  for (let i = currentIndex + 1; i < __children.length; i++) {
+    const sibling = parent[__children[i]];
+    if (sibling?.node?.parentNode) {
+      nextNode = sibling.node;
+      break;
+    }
+  }
+  if (nextNode) {
+    return { position: "before", node: nextNode };
+  }
+  return false;
+};
 const checkIfOnUpdate = (element, parent, options) => {
   if (!isFunction(element.if) && !isFunction(element.props?.if) || !parent) {
     return;
@@ -238,16 +266,7 @@ const checkIfOnUpdate = (element, parent, options) => {
       } else if (element[contentKey]?.parseDeep) {
         element[contentKey] = element[contentKey].parseDeep();
       }
-      const previousElement = element.previousElement();
-      const previousNode = previousElement?.node;
-      const hasPrevious = previousNode?.parentNode;
-      const nextElement = element.nextElement();
-      const nextNode = nextElement?.node;
-      const hasNext = nextNode?.parentNode;
-      const attachOptions = (hasPrevious || hasNext) && {
-        position: hasPrevious ? "after" : hasNext ? "before" : null,
-        node: hasPrevious && previousNode || hasNext && nextNode
-      };
+      const attachOptions = findSiblingAttachOptions(element, parent);
       delete element.__ref;
       delete element.parent;
       const createdElement = create(

package/dist/iife/index.js

@@ -57,7 +57,7 @@ var DomqlElement = (() => {
     return (typeof HTMLElement === "object" ? obj instanceof window2.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string") || false;
   };
   var isDOMNode = (obj) => {
-    return typeof window2 !== "undefined" && (obj instanceof window2.Node || obj instanceof window2.Window || obj === window2 || obj === document);
+    return typeof window2 !== "undefined" && (window2.Node && obj instanceof window2.Node || window2.Window && obj instanceof window2.Window || obj === window2 || obj === document);
   };
 
   // ../utils/dist/esm/types.js
@@ -801,6 +801,7 @@ var DomqlElement = (() => {
 
   // ../utils/dist/esm/extends.js
   var ENV2 = process.env.NODE_ENV;
+  var isSourcemapEnabled = (options) => options.sourcemap !== false && ENV2 !== "production";
   var createExtendsFromKeys = (key) => {
     if (key.includes("+")) {
       return key.split("+").filter(matchesComponentNaming);
@@ -874,17 +875,17 @@ var DomqlElement = (() => {
     }
     return setHashedExtend(extend, stack);
   };
-  var extractArrayExtend = (extend, stack, context, processed = /* @__PURE__ */ new Set()) => {
+  var extractArrayExtend = (extend, stack, context, processed = /* @__PURE__ */ new Set(), nameStack, componentNameMap) => {
     for (const each of extend) {
       if (isArray(each)) {
-        extractArrayExtend(each, stack, context, processed);
+        extractArrayExtend(each, stack, context, processed, nameStack, componentNameMap);
       } else {
-        flattenExtend(each, stack, context, processed);
+        flattenExtend(each, stack, context, processed, nameStack, void 0, componentNameMap);
       }
     }
     return stack;
   };
-  var deepExtend = (extend, stack, context, processed = /* @__PURE__ */ new Set()) => {
+  var deepExtend = (extend, stack, context, processed = /* @__PURE__ */ new Set(), nameStack, currentName, componentNameMap) => {
     const extendOflattenExtend = extend.extends || extend.extend;
     const cleanExtend = { ...extend };
     delete cleanExtend.extends;
@@ -896,26 +897,32 @@ var DomqlElement = (() => {
     }
     if (hasKeys) {
       stack.push(cleanExtend);
+      if (nameStack) nameStack.push(currentName);
     }
     if (extendOflattenExtend) {
-      flattenExtend(extendOflattenExtend, stack, context, processed);
+      flattenExtend(extendOflattenExtend, stack, context, processed, nameStack, currentName, componentNameMap);
     }
     return stack;
   };
-  var flattenExtend = (extend, stack, context, processed = /* @__PURE__ */ new Set()) => {
+  var flattenExtend = (extend, stack, context, processed = /* @__PURE__ */ new Set(), nameStack, parentName, componentNameMap) => {
     if (!extend) return stack;
     if (processed.has(extend)) return stack;
     if (isArray(extend)) {
-      return extractArrayExtend(extend, stack, context, processed);
+      return extractArrayExtend(extend, stack, context, processed, nameStack, componentNameMap);
     }
+    let currentName = parentName;
     if (isString(extend)) {
+      currentName = extend;
       extend = mapStringsWithContextComponents(extend, context);
+    } else if (componentNameMap && isObject(extend) && componentNameMap.has(extend)) {
+      currentName = componentNameMap.get(extend);
     }
     processed.add(extend);
     if (extend?.extends || extend?.extend) {
-      deepExtend(extend, stack, context, processed);
+      deepExtend(extend, stack, context, processed, nameStack, currentName, componentNameMap);
     } else if (extend) {
       stack.push(extend);
+      if (nameStack) nameStack.push(currentName);
     }
     return stack;
   };
@@ -928,7 +935,7 @@ var DomqlElement = (() => {
     "childExtend",
     "childExtendRecursive"
   ]);
-  var deepMergeExtends = (element, extend) => {
+  var deepMergeExtends = (element, extend, sourcemap, sourceName, preBuiltSourcemap) => {
     extend = deepClone(extend);
     for (const e in extend) {
       if (MERGE_EXTENDS_SKIP.has(e)) continue;
@@ -938,11 +945,23 @@ var DomqlElement = (() => {
       if (Object.prototype.hasOwnProperty.call(extend, e) && e !== "__proto__" && e !== "constructor" && e !== "prototype") {
         if (elementProp === void 0) {
           element[e] = extendProp;
+          if (sourcemap && sourceName) {
+            if (isObject(extendProp) && !isArray(extendProp)) {
+              sourcemap[e] = sourcemap[e] || {};
+              trackSourcemapDeep(sourcemap[e], extendProp, sourceName);
+            } else {
+              sourcemap[e] = sourceName;
+            }
+          } else if (sourcemap && preBuiltSourcemap?.[e]) {
+            sourcemap[e] = preBuiltSourcemap[e];
+          }
         } else if (isObject(elementProp) && isObject(extendProp)) {
+          const nestedSourcemap = sourcemap ? sourcemap[e] = sourcemap[e] || {} : void 0;
+          const nestedPreBuilt = preBuiltSourcemap?.[e];
           if (matchesComponentNaming(e)) {
-            element[e] = deepMergeExtends(elementProp, extendProp);
+            element[e] = deepMergeExtends(elementProp, extendProp, nestedSourcemap, sourceName, nestedPreBuilt);
           } else {
-            deepMergeExtends(elementProp, extendProp);
+            deepMergeExtends(elementProp, extendProp, nestedSourcemap, sourceName, nestedPreBuilt);
           }
         }
         if (e === "extends" || e === "childExtends" || e === "childExtendsRecursive") {
@@ -957,10 +976,24 @@ var DomqlElement = (() => {
     }
     return element;
   };
-  var cloneAndMergeArrayExtend = (stack) => {
-    return stack.reduce((acc, current) => {
+  var trackSourcemapDeep = (sourcemap, obj, sourceName) => {
+    for (const key in obj) {
+      if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+      if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+      const val = obj[key];
+      if (isObject(val) && !isArray(val)) {
+        sourcemap[key] = sourcemap[key] || {};
+        trackSourcemapDeep(sourcemap[key], val, sourceName);
+      } else {
+        sourcemap[key] = sourceName;
+      }
+    }
+  };
+  var cloneAndMergeArrayExtend = (stack, sourcemap, extendNames) => {
+    return stack.reduce((acc, current, i) => {
       const cloned = deepClone(current);
-      return deepMergeExtends(acc, cloned);
+      const sourceName = extendNames ? extendNames[i] : void 0;
+      return deepMergeExtends(acc, cloned, sourcemap, sourceName);
     }, {});
   };
   var mapStringsWithContextComponents = (extend, context, options = {}, variant) => {
@@ -980,11 +1013,12 @@ var DomqlElement = (() => {
     }
     return extend;
   };
-  var getExtendsStack = (extend, context) => {
+  var getExtendsStack = (extend, context, nameStack, componentNameMap) => {
     if (!extend) return [];
     if (extend.__hash) return getHashedExtend(extend) || [];
     const processed = /* @__PURE__ */ new Set();
-    const stack = flattenExtend(extend, [], context, processed);
+    const stack = flattenExtend(extend, [], context, processed, nameStack, void 0, componentNameMap);
+    if (nameStack) return stack;
     return getExtendsStackRegistry(extend, stack);
   };
   var createElementExtends = (element, parent, options = {}) => {
@@ -1062,6 +1096,8 @@ var DomqlElement = (() => {
     const { props, __ref: ref } = element;
     const context = element.context || parent.context;
     const variant = element.variant || props?.variant;
+    const sourcemap = isSourcemapEnabled(options);
+    const originalExtendNames = sourcemap ? [...ref.__extends] : null;
     const __extends = removeDuplicatesInArray(
       ref.__extends.map((val, i) => {
         return mapStringsWithContextComponents(
@@ -1072,15 +1108,40 @@ var DomqlElement = (() => {
         );
       })
     );
-    const stack = getExtendsStack(__extends, context);
-    ref.__extendsStack = stack;
+    if (sourcemap) {
+      const componentNameMap = /* @__PURE__ */ new WeakMap();
+      for (let i = 0; i < __extends.length; i++) {
+        const resolved = __extends[i];
+        const originalName = originalExtendNames[i];
+        if (resolved && isObject(resolved) && isString(originalName)) {
+          componentNameMap.set(resolved, originalName);
+        }
+      }
+      const nameStack = [];
+      const stack = getExtendsStack(__extends, context, nameStack, componentNameMap);
+      ref.__extendsStack = stack;
+      ref.__extendsNames = nameStack;
+    } else {
+      const stack = getExtendsStack(__extends, context);
+      ref.__extendsStack = stack;
+    }
     return ref.__extendsStack;
   };
   var finalizeExtends = (element, parent, options = {}) => {
     const { __ref: ref } = element;
     const { __extendsStack } = ref;
-    const flattenExtends = cloneAndMergeArrayExtend(__extendsStack);
-    return deepMergeExtends(element, flattenExtends);
+    if (isSourcemapEnabled(options)) {
+      const sourcemapAcc = {};
+      const extendNames = ref.__extendsNames || [];
+      const flattenExtends = cloneAndMergeArrayExtend(__extendsStack, sourcemapAcc, extendNames);
+      const appliedSourcemap = {};
+      deepMergeExtends(element, flattenExtends, appliedSourcemap, void 0, sourcemapAcc);
+      ref.__sourcemap = appliedSourcemap;
+    } else {
+      const flattenExtends = cloneAndMergeArrayExtend(__extendsStack);
+      deepMergeExtends(element, flattenExtends);
+    }
+    return element;
   };
   var applyExtends = (element, parent, options = {}) => {
     createElementExtends(element, parent, options);
@@ -1119,6 +1180,30 @@ var DomqlElement = (() => {
   // ../utils/dist/esm/props.js
   var RE_UPPER = /^[A-Z]/;
   var RE_DIGITS = /^\d+$/;
+  var ELEMENT_INDICATOR_KEYS = /* @__PURE__ */ new Set([
+    "extend",
+    "props",
+    "text",
+    "tag",
+    "on",
+    "if",
+    "childExtend",
+    "children",
+    "childrenAs",
+    "state",
+    "html",
+    "attr",
+    "define",
+    "content"
+  ]);
+  var looksLikeElement = (value) => {
+    if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+    for (const k in value) {
+      if (ELEMENT_INDICATOR_KEYS.has(k)) return true;
+      if (RE_UPPER.test(k)) return true;
+    }
+    return false;
+  };
   var createProps = (element, parent, key) => {
     const { props, __ref: ref } = element;
     ref.__propsStack = [];
@@ -1143,7 +1228,7 @@ var DomqlElement = (() => {
       }
       const hasDefine = isObject(this.define?.[key]);
       const hasGlobalDefine = isObject(this.context?.define?.[key]);
-      const isElement = RE_UPPER.test(key) || RE_DIGITS.test(key);
+      const isElement = RE_UPPER.test(key) || RE_DIGITS.test(key) || looksLikeElement(value);
       const isBuiltin = DOMQ_PROPERTIES.has(key);
       if (!isElement && !isBuiltin && !hasDefine && !hasGlobalDefine) {
         obj.props[key] = value;
@@ -1564,18 +1649,26 @@ var DomqlElement = (() => {
   };
   var applyEvent = (param, element, state2, context, options) => {
     if (!isFunction(param)) return;
-    const result = param.call(
-      element,
-      element,
-      state2 || element.state,
-      context || element.context,
-      options
-    );
-    if (result && typeof result.then === "function") {
-      result.catch(() => {
-      });
+    try {
+      const result = param.call(
+        element,
+        element,
+        state2 || element.state,
+        context || element.context,
+        options
+      );
+      if (result && typeof result.then === "function") {
+        result.catch((err) => {
+          element.error = err;
+          console.error("[DomQL] Async event error:", err);
+        });
+      }
+      return result;
+    } catch (err) {
+      element.error = err;
+      console.error("[DomQL] Event handler error:", err);
+      if (element.context?.strictMode) throw err;
     }
-    return result;
   };
   var triggerEventOn = (param, element, options) => {
     if (!element) {
@@ -1589,19 +1682,27 @@ var DomqlElement = (() => {
   };
   var applyEventUpdate = (param, updatedObj, element, state2, context, options) => {
     if (!isFunction(param)) return;
-    const result = param.call(
-      element,
-      updatedObj,
-      element,
-      state2 || element.state,
-      context || element.context,
-      options
-    );
-    if (result && typeof result.then === "function") {
-      result.catch(() => {
-      });
+    try {
+      const result = param.call(
+        element,
+        updatedObj,
+        element,
+        state2 || element.state,
+        context || element.context,
+        options
+      );
+      if (result && typeof result.then === "function") {
+        result.catch((err) => {
+          element.error = err;
+          console.error("[DomQL] Async event update error:", err);
+        });
+      }
+      return result;
+    } catch (err) {
+      element.error = err;
+      console.error("[DomQL] Event update error:", err);
+      if (element.context?.strictMode) throw err;
     }
-    return result;
   };
   var triggerEventOnUpdate = (param, updatedObj, element, options) => {
     const appliedFunction = getOnOrPropsEvent(param, element);
@@ -1908,7 +2009,20 @@ var DomqlElement = (() => {
   }
   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 = context.utils?.[fnKey] || context.functions?.[fnKey] || context.methods?.[fnKey] || context.snippets?.[fnKey];
+    if (!fn) return;
+    try {
+      const result = fn.call(this, ...args);
+      if (result && typeof result.then === "function") {
+        result.catch((err) => {
+          this.error = err;
+        });
+      }
+      return result;
+    } catch (err) {
+      this.error = err;
+      if (context?.strictMode) throw err;
+    }
   }
   function isMethod(param, element) {
     return Boolean(METHODS.has(param) || element?.context?.methods?.[param]);
@@ -2029,17 +2143,25 @@ ${element}` : "";
       }
       const handler = (event) => {
         const { state: state2, context } = element;
-        const result = appliedFunction.call(
-          element,
-          event,
-          element,
-          state2,
-          context,
-          options
-        );
-        if (result && typeof result.then === "function") {
-          result.catch(() => {
-          });
+        try {
+          const result = appliedFunction.call(
+            element,
+            event,
+            element,
+            state2,
+            context,
+            options
+          );
+          if (result && typeof result.then === "function") {
+            result.catch((err) => {
+              element.error = err;
+              console.error("[DomQL] Async DOM event error:", err);
+            });
+          }
+        } catch (err) {
+          element.error = err;
+          console.error("[DomQL] DOM event error:", err);
+          if (context?.strictMode) throw err;
         }
       };
       ref.__eventListeners[param] = handler;
@@ -2114,7 +2236,8 @@ ${element}` : "";
     }
   };
   var startFrameLoop = (frameListeners) => {
-    if (_frameRunning) return;
+    const raf = typeof window !== "undefined" && window.requestAnimationFrame;
+    if (_frameRunning || !raf) return;
     _frameRunning = true;
     function requestFrame() {
       if (frameListeners.size === 0) {
@@ -2122,9 +2245,9 @@ ${element}` : "";
         return;
       }
       processFrameListeners(frameListeners);
-      window.requestAnimationFrame(requestFrame);
+      raf(requestFrame);
     }
-    window.requestAnimationFrame(requestFrame);
+    raf(requestFrame);
   };
   var applyAnimationFrame = (element) => {
     if (!element) {
@@ -2507,7 +2630,7 @@ ${element}` : "";
 
   // mixins/html.js
   function html(param, element, node) {
-    const prop = exec(element?.props?.html || param, element);
+    const prop = exec(param ?? element?.props?.html, element);
     const { __ref } = element;
     if (prop !== __ref.__html) {
       if (node.nodeName === "SVG") node.textContent = prop;
@@ -2837,7 +2960,7 @@ ${element}` : "";
       }
       return;
     }
-    if (!params) return element;
+    if (!params || typeof params !== "object") return element;
     let { childExtends, props, tag } = params;
     if (!props) props = params.props = {};
     if (tag === "fragment") {
@@ -3458,6 +3581,34 @@ ${element}` : "";
       triggerEventOn("update", element, options);
     }
   };
+  var findSiblingAttachOptions = (element, parent) => {
+    const { __children } = parent.__ref || {};
+    if (!__children) return false;
+    const currentIndex = __children.indexOf(element.key);
+    let previousNode;
+    for (let i = currentIndex - 1; i >= 0; i--) {
+      const sibling = parent[__children[i]];
+      if (sibling?.node?.parentNode) {
+        previousNode = sibling.node;
+        break;
+      }
+    }
+    if (previousNode) {
+      return { position: "after", node: previousNode };
+    }
+    let nextNode;
+    for (let i = currentIndex + 1; i < __children.length; i++) {
+      const sibling = parent[__children[i]];
+      if (sibling?.node?.parentNode) {
+        nextNode = sibling.node;
+        break;
+      }
+    }
+    if (nextNode) {
+      return { position: "before", node: nextNode };
+    }
+    return false;
+  };
   var checkIfOnUpdate = (element, parent, options) => {
     if (!isFunction(element.if) && !isFunction(element.props?.if) || !parent) {
       return;
@@ -3494,16 +3645,7 @@ ${element}` : "";
         } else if (element[contentKey]?.parseDeep) {
           element[contentKey] = element[contentKey].parseDeep();
         }
-        const previousElement2 = element.previousElement();
-        const previousNode = previousElement2?.node;
-        const hasPrevious = previousNode?.parentNode;
-        const nextElement2 = element.nextElement();
-        const nextNode = nextElement2?.node;
-        const hasNext = nextNode?.parentNode;
-        const attachOptions = (hasPrevious || hasNext) && {
-          position: hasPrevious ? "after" : hasNext ? "before" : null,
-          node: hasPrevious && previousNode || hasNext && nextNode
-        };
+        const attachOptions = findSiblingAttachOptions(element, parent);
         delete element.__ref;
         delete element.parent;
         const createdElement = create(
@@ -4612,7 +4754,9 @@ ${element}` : "";
   };
   var addElementIntoParentChildren = (element, parent) => {
     if (parent.__ref && parent.__ref.__children) {
-      parent.__ref.__children.push(element.key);
+      if (!parent.__ref.__children.includes(element.key)) {
+        parent.__ref.__children.push(element.key);
+      }
     }
   };
   var _uniqIdCounter = 1;
@@ -4631,12 +4775,13 @@ ${element}` : "";
       createNode(element, options);
       ref.__uniqId = _uniqIdCounter++;
     };
-    if (ENV6 === "test" || ENV6 === "development") {
+    if (ENV6 === "test" || ENV6 === "development" || element.context?.strictMode) {
       createNestedChild();
     } else {
       try {
         createNestedChild();
       } catch (e) {
+        element.error = e;
         const path = ref.path;
         if (path.includes("ComponentsGrid")) {
           path.splice(0, path.indexOf("ComponentsGrid") + 2);
@@ -4650,7 +4795,7 @@ ${element}` : "";
           isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
         );
         element.verbose();
-        element.error(e, options);
+        console.error("[DomQL] Render error:", e);
         if (element.on?.error) {
           element.on.error(e, element, element.state, element.context, options);
         }

package/event/animationFrame.js

@@ -51,7 +51,8 @@ const processFrameListeners = (frameListeners) => {
 }
 
 const startFrameLoop = (frameListeners) => {
-  if (_frameRunning) return
+  const raf = typeof window !== 'undefined' && window.requestAnimationFrame
+  if (_frameRunning || !raf) return
   _frameRunning = true
 
   function requestFrame () {
@@ -60,10 +61,10 @@ const startFrameLoop = (frameListeners) => {
       return
     }
     processFrameListeners(frameListeners)
-    window.requestAnimationFrame(requestFrame)
+    raf(requestFrame)
   }
 
-  window.requestAnimationFrame(requestFrame)
+  raf(requestFrame)
 }
 
 export const applyAnimationFrame = element => {

package/event/on.js

@@ -27,16 +27,25 @@ const registerNodeEvent = (param, element, node, options) => {
 
     const handler = event => {
       const { state, context } = element
-      const result = appliedFunction.call(
-        element,
-        event,
-        element,
-        state,
-        context,
-        options
-      )
-      if (result && typeof result.then === 'function') {
-        result.catch(() => {})
+      try {
+        const result = appliedFunction.call(
+          element,
+          event,
+          element,
+          state,
+          context,
+          options
+        )
+        if (result && typeof result.then === 'function') {
+          result.catch((err) => {
+            element.error = err
+            console.error('[DomQL] Async DOM event error:', err)
+          })
+        }
+      } catch (err) {
+        element.error = err
+        console.error('[DomQL] DOM event error:', err)
+        if (context?.strictMode) throw err
       }
     }
 

package/mixins/html.js

@@ -7,7 +7,7 @@ import { exec } from '@domql/utils'
  * an original one as a child
  */
 export function html (param, element, node) {
-  const prop = exec(element?.props?.html || param, element)
+  const prop = exec(param ?? element?.props?.html, element)
   const { __ref } = element
   if (prop !== __ref.__html) {
     if (node.nodeName === 'SVG') node.textContent = prop

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -8,29 +8,23 @@
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "browser": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
+      "require": "./dist/cjs/index.js"
     },
     "./event": {
       "import": "./dist/esm/event/index.js",
-      "require": "./dist/cjs/event/index.js",
-      "default": "./dist/esm/event/index.js"
+      "require": "./dist/cjs/event/index.js"
     },
     "./render": {
       "import": "./dist/esm/render/index.js",
-      "require": "./dist/cjs/render/index.js",
-      "default": "./dist/esm/render/index.js"
+      "require": "./dist/cjs/render/index.js"
     },
     "./*.js": {
       "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js",
-      "default": "./dist/esm/*.js"
+      "require": "./dist/cjs/*.js"
     },
     "./*": {
       "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js",
-      "default": "./dist/esm/*.js"
+      "require": "./dist/cjs/*.js"
     }
   },
   "source": "index.js",
@@ -52,10 +46,10 @@
     "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlElement --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV"
   },
   "dependencies": {
-    "@domql/report": "^3.5.0",
-    "@domql/state": "^3.5.0",
-    "@domql/utils": "^3.5.0",
-    "attrs-in-props": "^3.5.0"
+    "@domql/report": "^3.6.1",
+    "@domql/state": "^3.6.1",
+    "@domql/utils": "^3.6.1",
+    "attrs-in-props": "^3.6.1"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {
@@ -64,5 +58,8 @@
   "browser": "./dist/esm/index.js",
   "unpkg": "./dist/iife/index.js",
   "jsdelivr": "./dist/iife/index.js",
-  "sideEffects": false
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/set.js

@@ -130,7 +130,7 @@ export const set = function (params, options = {}, el) {
     return
   }
 
-  if (!params) return element
+  if (!params || typeof params !== 'object') return element
 
   let { childExtends, props, tag } = params
   if (!props) props = params.props = {}

package/update.js

@@ -288,6 +288,43 @@ export const update = function (params = {}, opts) {
   }
 }
 
+const findSiblingAttachOptions = (element, parent) => {
+  const { __children } = parent.__ref || {}
+  if (!__children) return false
+
+  const currentIndex = __children.indexOf(element.key)
+
+  // Walk backwards to find nearest previous sibling with a DOM node
+  let previousNode
+  for (let i = currentIndex - 1; i >= 0; i--) {
+    const sibling = parent[__children[i]]
+    if (sibling?.node?.parentNode) {
+      previousNode = sibling.node
+      break
+    }
+  }
+
+  if (previousNode) {
+    return { position: 'after', node: previousNode }
+  }
+
+  // Walk forwards to find nearest next sibling with a DOM node
+  let nextNode
+  for (let i = currentIndex + 1; i < __children.length; i++) {
+    const sibling = parent[__children[i]]
+    if (sibling?.node?.parentNode) {
+      nextNode = sibling.node
+      break
+    }
+  }
+
+  if (nextNode) {
+    return { position: 'before', node: nextNode }
+  }
+
+  return false
+}
+
 const checkIfOnUpdate = (element, parent, options) => {
   if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) {
     return
@@ -331,18 +368,7 @@ const checkIfOnUpdate = (element, parent, options) => {
         element[contentKey] = element[contentKey].parseDeep()
       }
 
-      const previousElement = element.previousElement()
-      const previousNode = previousElement?.node // document.body.contains(previousElement.node)
-      const hasPrevious = previousNode?.parentNode // document.body.contains(previousElement.node)
-
-      const nextElement = element.nextElement()
-      const nextNode = nextElement?.node // document.body.contains(previousElement.node)
-      const hasNext = nextNode?.parentNode
-
-      const attachOptions = (hasPrevious || hasNext) && {
-        position: hasPrevious ? 'after' : hasNext ? 'before' : null,
-        node: (hasPrevious && previousNode) || (hasNext && nextNode)
-      }
+      const attachOptions = findSiblingAttachOptions(element, parent)
 
       delete element.__ref
       delete element.parent