@domql/element 3.2.3 → 3.2.7

package/children.js

@@ -16,6 +16,29 @@ import {
   matchesComponentNaming
 } from '@domql/utils'
 
+const shallowChildrenEqual = (a, b) => {
+  if (a === b) return true
+  if (!a || !b) return false
+  if (isArray(a) && isArray(b)) {
+    if (a.length !== b.length) return false
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false
+    }
+    return true
+  }
+  if (isObject(a) && isObject(b)) {
+    const keysA = Object.keys(a)
+    const keysB = Object.keys(b)
+    if (keysA.length !== keysB.length) return false
+    for (let i = 0; i < keysA.length; i++) {
+      const key = keysA[i]
+      if (a[key] !== b[key]) return false
+    }
+    return true
+  }
+  return a === b
+}
+
 /**
  * Apply data parameters on the DOM nodes
  * this should only work if `showOnNode: true` is passed
@@ -57,36 +80,41 @@ export function setChildren (param, element, opts) {
 
   if (!children || isNot(children)('array', 'object')) return
 
-  if (isArray(children) && children.find(v => v?.$$typeof)) {
-    const filterReact = children.filter(v => !v?.$$typeof)
-    if (filterReact.length !== children.length) {
-      const extractedReactComponents = children.filter(v => v?.$$typeof)
-      element.call('renderReact', extractedReactComponents, element)
+  if (isArray(children) && children.some(v => v?.$$typeof)) {
+    const filterReact = []
+    const reactComponents = []
+    for (let i = 0; i < children.length; i++) {
+      if (children[i]?.$$typeof) reactComponents.push(children[i])
+      else filterReact.push(children[i])
+    }
+    if (reactComponents.length) {
+      element.call('renderReact', reactComponents, element)
     }
     children = filterReact
   }
 
+  let cloned
   if (ref.__childrenCache) {
-    const equals =
-      JSON.stringify(children) === JSON.stringify(ref.__childrenCache) // make smarter diff
-    if (equals) {
+    if (shallowChildrenEqual(children, ref.__childrenCache)) {
       ref.__noChildrenDifference = true
     } else {
-      ref.__childrenCache = deepClone(children)
+      cloned = deepClone(children)
+      ref.__childrenCache = cloned
       delete ref.__noChildrenDifference
     }
   } else {
-    ref.__childrenCache = deepClone(children)
+    cloned = deepClone(children)
+    ref.__childrenCache = cloned
   }
 
   if (isObject(children) || isArray(children)) {
-    children = deepClone(children)
+    children = cloned || deepClone(children)
   }
 
   const content = { tag: 'fragment' }
 
   for (const key in children) {
-    const value = Object.hasOwnProperty.call(children, key) && children[key]
+    const value = Object.prototype.hasOwnProperty.call(children, key) && children[key]
     if (isDefined(value) && value !== null && value !== false) {
       content[key] = isObjectLike(value)
         ? childrenAs

package/create.js

@@ -9,6 +9,7 @@ import {
   isUndefined,
   detectInfiniteLoop,
   propertizeElement,
+  pickupElementFromProps,
   createElement,
   applyExtends,
   createScope,
@@ -19,14 +20,37 @@ import {
   createRoot
 } from '@domql/utils'
 
-import { applyAnimationFrame, triggerEventOn } from '@domql/event'
-import { assignNode } from '@domql/render'
+import { applyAnimationFrame, triggerEventOn } from './event/index.js'
+import { assignNode } from './render/index.js'
 import { createState } from '@domql/state'
 
 import { REGISTRY } from './mixins/index.js'
 import { addMethods } from './methods/set.js'
 import { assignKeyAsClassname } from './mixins/classList.js'
 import { throughInitialExec, throughInitialDefine } from './iterate.js'
+import { filterAttributesByTagName } from 'attrs-in-props'
+
+const EXCLUDED_ATTRS = new Set(['class', 'style'])
+
+const applyPropsAsAttrs = (element) => {
+  const { tag, props, context } = element
+  if (!tag || !props) return
+
+  const autoAttrs = filterAttributesByTagName(tag, props, context?.cssPropsRegistry)
+  const filtered = {}
+  for (const key in autoAttrs) {
+    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = autoAttrs[key]
+  }
+  let hasFiltered = false
+  for (const _k in filtered) { hasFiltered = true; break } // eslint-disable-line
+  if (!hasFiltered) return
+
+  if (!element.attr) {
+    element.attr = filtered
+  } else if (typeof element.attr === 'object') {
+    element.attr = { ...filtered, ...element.attr }
+  }
+}
 
 const ENV = process.env.NODE_ENV
 
@@ -72,6 +96,10 @@ export const create = (
 
   // apply props settings
   initProps(element, parent, options)
+  // Re-pickup component-named properties that entered props via childProps/inheritParentProps
+  pickupElementFromProps.call(element, element, { cachedKeys: [] })
+  // Populate element.attr from props matching the tag's HTML spec
+  applyPropsAsAttrs(element)
   if (element.scope === 'props' || element.scope === true) {
     element.scope = element.props
   }
@@ -112,7 +140,9 @@ const cacheOptions = options => {
 }
 
 const resetOptions = (element, parent, options) => {
-  if (Object.keys(options).length) {
+  let hasKeys = false
+  for (const _k in options) { hasKeys = true; break } // eslint-disable-line
+  if (hasKeys) {
     OPTIONS.defaultOptions = options
     if (options.ignoreChildExtends) delete options.ignoreChildExtends
   }
@@ -124,6 +154,7 @@ const addElementIntoParentChildren = (element, parent) => {
   }
 }
 
+let _uniqIdCounter = 1
 const visitedElements = new WeakMap()
 const renderElement = (element, parent, options, attachOptions) => {
   if (visitedElements.has(element)) {
@@ -140,7 +171,7 @@ const renderElement = (element, parent, options, attachOptions) => {
     const isInfiniteLoopDetected = detectInfiniteLoop(ref.path)
     if (ref.__uniqId || isInfiniteLoopDetected) return
     createNode(element, options)
-    ref.__uniqId = Math.random()
+    ref.__uniqId = _uniqIdCounter++
   }
 
   // CREATE a real NODE
@@ -209,6 +240,8 @@ const onlyResolveExtends = (element, parent, key, options) => {
 
   // apply props settings
   initProps(element, parent, options)
+  // Re-pickup component-named properties that entered props via childProps/inheritParentProps
+  pickupElementFromProps.call(element, element, { cachedKeys: [] })
   if (element.scope === 'props' || element.scope === true) {
     element.scope = element.props
   }
@@ -235,10 +268,9 @@ const onlyResolveExtends = (element, parent, key, options) => {
         continue
       }
 
-      const hasDefine = element.define && element.define[k]
-      const contextHasDefine =
-        element.context && element.context.define && element.context.define[k]
-      const optionsHasDefine = options.define && options.define[k]
+      const hasDefine = element.define?.[k]
+      const contextHasDefine = element.context?.define?.[k]
+      const optionsHasDefine = options.define?.[k]
 
       if (!ref.__skipCreate && REGISTRY[k] && !optionsHasDefine) {
         continue
@@ -267,22 +299,4 @@ const onlyResolveExtends = (element, parent, key, options) => {
   return element
 }
 
-// const checkIfMedia = (key) => key.slice(0, 1) === '@'
-
-// const applyMediaProps = (element, parent, key) => {
-//   const { props } = element
-//   if (props) {
-//     props.display = 'none'
-//     if (props[key]) props[key].display = props.display
-//     else props[key] = { display: props.display || 'block' }
-//     return element
-//   } else {
-//     return {
-//       ...element,
-//         display: 'none',
-//         [key]: { display: 'block' }
-//     }
-//   }
-// }
-
 export default create

package/define.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { report } from '@domql/report'
-import { REGISTRY } from './mixins'
+import { REGISTRY } from './mixins/index.js'
 
 export default (params, options = {}) => {
   const { overwrite } = options

package/dist/cjs/children.js

@@ -23,6 +23,28 @@ __export(children_exports, {
 });
 module.exports = __toCommonJS(children_exports);
 var import_utils = require("@domql/utils");
+const shallowChildrenEqual = (a, b) => {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if ((0, import_utils.isArray)(a) && (0, import_utils.isArray)(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+  if ((0, import_utils.isObject)(a) && (0, import_utils.isObject)(b)) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (let i = 0; i < keysA.length; i++) {
+      const key = keysA[i];
+      if (a[key] !== b[key]) return false;
+    }
+    return true;
+  }
+  return a === b;
+};
 function setChildren(param, element, opts) {
   let { children, __ref: ref, state } = element;
   let { childrenAs } = element.props || {};
@@ -55,31 +77,37 @@ function setChildren(param, element, opts) {
     }
   }
   if (!children || (0, import_utils.isNot)(children)("array", "object")) return;
-  if ((0, import_utils.isArray)(children) && children.find((v) => v == null ? void 0 : v.$$typeof)) {
-    const filterReact = children.filter((v) => !(v == null ? void 0 : v.$$typeof));
-    if (filterReact.length !== children.length) {
-      const extractedReactComponents = children.filter((v) => v == null ? void 0 : v.$$typeof);
-      element.call("renderReact", extractedReactComponents, element);
+  if ((0, import_utils.isArray)(children) && children.some((v) => v?.$$typeof)) {
+    const filterReact = [];
+    const reactComponents = [];
+    for (let i = 0; i < children.length; i++) {
+      if (children[i]?.$$typeof) reactComponents.push(children[i]);
+      else filterReact.push(children[i]);
+    }
+    if (reactComponents.length) {
+      element.call("renderReact", reactComponents, element);
     }
     children = filterReact;
   }
+  let cloned;
   if (ref.__childrenCache) {
-    const equals = JSON.stringify(children) === JSON.stringify(ref.__childrenCache);
-    if (equals) {
+    if (shallowChildrenEqual(children, ref.__childrenCache)) {
       ref.__noChildrenDifference = true;
     } else {
-      ref.__childrenCache = (0, import_utils.deepClone)(children);
+      cloned = (0, import_utils.deepClone)(children);
+      ref.__childrenCache = cloned;
       delete ref.__noChildrenDifference;
     }
   } else {
-    ref.__childrenCache = (0, import_utils.deepClone)(children);
+    cloned = (0, import_utils.deepClone)(children);
+    ref.__childrenCache = cloned;
   }
   if ((0, import_utils.isObject)(children) || (0, import_utils.isArray)(children)) {
-    children = (0, import_utils.deepClone)(children);
+    children = cloned || (0, import_utils.deepClone)(children);
   }
   const content = { tag: "fragment" };
   for (const key in children) {
-    const value = Object.hasOwnProperty.call(children, key) && children[key];
+    const value = Object.prototype.hasOwnProperty.call(children, key) && children[key];
     if ((0, import_utils.isDefined)(value) && value !== null && value !== false) {
       content[key] = (0, import_utils.isObjectLike)(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
     }

package/dist/cjs/create.js

@@ -25,14 +25,36 @@ module.exports = __toCommonJS(create_exports);
 var import_node = require("./node.js");
 var import_tree = require("./tree.js");
 var import_utils = require("@domql/utils");
-var import_event = require("@domql/event");
-var import_render = require("@domql/render");
+var import_event = require("./event/index.js");
+var import_render = require("./render/index.js");
 var import_state = require("@domql/state");
 var import_mixins = require("./mixins/index.js");
 var import_set = require("./methods/set.js");
 var import_classList = require("./mixins/classList.js");
 var import_iterate = require("./iterate.js");
-const ENV = "development";
+var import_attrs_in_props = require("attrs-in-props");
+const EXCLUDED_ATTRS = /* @__PURE__ */ new Set(["class", "style"]);
+const applyPropsAsAttrs = (element) => {
+  const { tag, props, context } = element;
+  if (!tag || !props) return;
+  const autoAttrs = (0, import_attrs_in_props.filterAttributesByTagName)(tag, props, context?.cssPropsRegistry);
+  const filtered = {};
+  for (const key in autoAttrs) {
+    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = autoAttrs[key];
+  }
+  let hasFiltered = false;
+  for (const _k in filtered) {
+    hasFiltered = true;
+    break;
+  }
+  if (!hasFiltered) return;
+  if (!element.attr) {
+    element.attr = filtered;
+  } else if (typeof element.attr === "object") {
+    element.attr = { ...filtered, ...element.attr };
+  }
+};
+const ENV = process.env.NODE_ENV;
 const create = (props, parentEl, passedKey, options = import_utils.OPTIONS.create || {}, attachOptions) => {
   cacheOptions(options);
   const element = (0, import_utils.createElement)(props, parentEl, passedKey, options, import_tree.ROOT);
@@ -52,6 +74,8 @@ const create = (props, parentEl, passedKey, options = import_utils.OPTIONS.creat
   if (element.scope === "state") element.scope = element.state;
   (0, import_utils.createIfConditionFlag)(element, parent);
   (0, import_utils.initProps)(element, parent, options);
+  import_utils.pickupElementFromProps.call(element, element, { cachedKeys: [] });
+  applyPropsAsAttrs(element);
   if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;
   }
@@ -75,7 +99,12 @@ const cacheOptions = (options) => {
   }
 };
 const resetOptions = (element, parent, options) => {
-  if (Object.keys(options).length) {
+  let hasKeys = false;
+  for (const _k in options) {
+    hasKeys = true;
+    break;
+  }
+  if (hasKeys) {
     import_utils.OPTIONS.defaultOptions = options;
     if (options.ignoreChildExtends) delete options.ignoreChildExtends;
   }
@@ -85,9 +114,9 @@ const addElementIntoParentChildren = (element, parent) => {
     parent.__ref.__children.push(element.key);
   }
 };
+let _uniqIdCounter = 1;
 const visitedElements = /* @__PURE__ */ new WeakMap();
 const renderElement = (element, parent, options, attachOptions) => {
-  var _a, _b, _c;
   if (visitedElements.has(element)) {
     if (ENV === "test" || ENV === "development") {
       console.warn("Cyclic rendering detected:", element.__ref.path);
@@ -99,7 +128,7 @@ const renderElement = (element, parent, options, attachOptions) => {
     const isInfiniteLoopDetected = (0, import_utils.detectInfiniteLoop)(ref.path);
     if (ref.__uniqId || isInfiniteLoopDetected) return;
     (0, import_node.createNode)(element, options);
-    ref.__uniqId = Math.random();
+    ref.__uniqId = _uniqIdCounter++;
   };
   if (ENV === "test" || ENV === "development") {
     createNestedChild();
@@ -114,14 +143,14 @@ const renderElement = (element, parent, options, attachOptions) => {
       if (path.includes("demoComponent")) {
         path.splice(0, path.indexOf("demoComponent") + 1);
       }
-      const isDemoComponent = (_b = (_a = element.lookup((el) => el.state.key)) == null ? void 0 : _a.state) == null ? void 0 : _b.key;
+      const isDemoComponent = element.lookup((el) => el.state.key)?.state?.key;
       element.warn(
         "Error happened in:",
         isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
       );
       element.verbose();
       element.error(e, options);
-      if ((_c = element.on) == null ? void 0 : _c.error) {
+      if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options);
       }
     }
@@ -145,6 +174,7 @@ const onlyResolveExtends = (element, parent, key, options) => {
   if (element.scope === "state") element.scope = element.state;
   (0, import_utils.createIfConditionFlag)(element, parent);
   (0, import_utils.initProps)(element, parent, options);
+  import_utils.pickupElementFromProps.call(element, element, { cachedKeys: [] });
   if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;
   }
@@ -160,9 +190,9 @@ const onlyResolveExtends = (element, parent, key, options) => {
       if ((0, import_utils.isUndefined)(element[k]) || (0, import_utils.isMethod)(k, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[k])) {
         continue;
       }
-      const hasDefine = element.define && element.define[k];
-      const contextHasDefine = element.context && element.context.define && element.context.define[k];
-      const optionsHasDefine = options.define && options.define[k];
+      const hasDefine = element.define?.[k];
+      const contextHasDefine = element.context?.define?.[k];
+      const optionsHasDefine = options.define?.[k];
       if (!ref.__skipCreate && import_mixins.REGISTRY[k] && !optionsHasDefine) {
         continue;
       } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {

package/dist/cjs/define.js

@@ -22,7 +22,7 @@ __export(define_exports, {
 });
 module.exports = __toCommonJS(define_exports);
 var import_report = require("@domql/report");
-var import_mixins = require("./mixins");
+var import_mixins = require("./mixins/index.js");
 var define_default = (params, options = {}) => {
   const { overwrite } = options;
   for (const param in params) {

package/dist/cjs/event/animationFrame.js

@@ -0,0 +1,96 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var animationFrame_exports = {};
+__export(animationFrame_exports, {
+  applyAnimationFrame: () => applyAnimationFrame,
+  initAnimationFrame: () => initAnimationFrame,
+  registerFrameListener: () => registerFrameListener
+});
+module.exports = __toCommonJS(animationFrame_exports);
+const registerFrameListener = (el) => {
+  if (!el || !el.__ref) {
+    throw new Error("Element reference is invalid");
+  }
+  const { __ref: ref } = el;
+  if (!ref.root) {
+    throw new Error("Root reference is invalid");
+  }
+  if (!ref.root.data) {
+    throw new Error("Data are undefined");
+  }
+  const { frameListeners } = ref.root.data;
+  if (frameListeners && !frameListeners.has(el)) {
+    frameListeners.add(el);
+  }
+};
+const processFrameListeners = (frameListeners) => {
+  for (const element of frameListeners) {
+    if (!element.__ref.__frameHandler) {
+      const handler = element.on?.frame || element.onFrame || element.props?.onFrame;
+      if (handler) element.__ref.__frameHandler = handler;
+      else {
+        frameListeners.delete(element);
+        continue;
+      }
+    }
+    if (!element.node?.parentNode) {
+      frameListeners.delete(element);
+      delete element.__ref.__frameHandler;
+    } else {
+      try {
+        element.__ref.__frameHandler(element, element.state, element.context);
+      } catch (e) {
+        console.warn(e);
+        frameListeners.delete(element);
+        delete element.__ref.__frameHandler;
+      }
+    }
+  }
+};
+const startFrameLoop = (frameListeners) => {
+  if (_frameRunning) return;
+  _frameRunning = true;
+  function requestFrame() {
+    if (frameListeners.size === 0) {
+      _frameRunning = false;
+      return;
+    }
+    processFrameListeners(frameListeners);
+    window.requestAnimationFrame(requestFrame);
+  }
+  window.requestAnimationFrame(requestFrame);
+};
+const applyAnimationFrame = (element) => {
+  if (!element) {
+    throw new Error("Element is invalid");
+  }
+  const { on, props, __ref: ref } = element;
+  if (!ref.root || !ref.root.data) return;
+  const { frameListeners } = ref.root.data;
+  if (frameListeners && (on?.frame || element.onFrame || props?.onFrame)) {
+    registerFrameListener(element);
+    startFrameLoop(frameListeners);
+  }
+};
+let _frameRunning = false;
+const initAnimationFrame = () => {
+  const frameListeners = /* @__PURE__ */ new Set();
+  startFrameLoop(frameListeners);
+  return frameListeners;
+};

package/dist/cjs/event/can.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var can_exports = {};
+__export(can_exports, {
+  canRenderTag: () => canRenderTag
+});
+module.exports = __toCommonJS(can_exports);
+var import_report = require("@domql/report");
+var import_utils = require("@domql/utils");
+const canRenderTag = (tag) => {
+  return (0, import_utils.isValidHtmlTag)(tag || "div") || (0, import_report.report)("HTMLInvalidTag");
+};

package/dist/cjs/event/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var event_exports = {};
+module.exports = __toCommonJS(event_exports);
+__reExport(event_exports, require("./on.js"), module.exports);
+__reExport(event_exports, require("./can.js"), module.exports);
+__reExport(event_exports, require("./animationFrame.js"), module.exports);

package/dist/cjs/event/on.js

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var on_exports = {};
+__export(on_exports, {
+  applyEvent: () => import_utils2.applyEvent,
+  applyEventUpdate: () => import_utils2.applyEventUpdate,
+  applyEventsOnNode: () => applyEventsOnNode,
+  triggerEventOn: () => import_utils2.triggerEventOn,
+  triggerEventOnUpdate: () => import_utils2.triggerEventOnUpdate
+});
+module.exports = __toCommonJS(on_exports);
+var import_utils = require("@domql/utils");
+var import_utils2 = require("@domql/utils");
+const getOnOrPropsEvent = (param, element) => {
+  const onEvent = element.on?.[param];
+  if (onEvent) return onEvent;
+  const props = element.props;
+  if (!props) return;
+  const propKey = "on" + param.charAt(0).toUpperCase() + param.slice(1);
+  return props[propKey];
+};
+const registerNodeEvent = (param, element, node, options) => {
+  const appliedFunction = getOnOrPropsEvent(param, element);
+  if ((0, import_utils.isFunction)(appliedFunction)) {
+    const { __ref: ref } = element;
+    if (!ref.__eventListeners) ref.__eventListeners = {};
+    if (ref.__eventListeners[param]) {
+      node.removeEventListener(param, ref.__eventListeners[param]);
+    }
+    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(() => {
+        });
+      }
+    };
+    ref.__eventListeners[param] = handler;
+    node.addEventListener(param, handler);
+  }
+};
+const applyEventsOnNode = (element, options) => {
+  const { node, on, props } = element;
+  const handled = /* @__PURE__ */ new Set();
+  for (const param in on) {
+    if (import_utils.DOMQL_EVENTS.has(param)) continue;
+    handled.add(param);
+    registerNodeEvent(param, element, node, options);
+  }
+  if (props) {
+    for (const key in props) {
+      if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && (0, import_utils.isFunction)(props[key])) {
+        const thirdChar = key[2];
+        if (thirdChar !== thirdChar.toUpperCase()) continue;
+        const eventName = thirdChar.toLowerCase() + key.slice(3);
+        if (handled.has(eventName) || import_utils.DOMQL_EVENTS.has(eventName)) continue;
+        registerNodeEvent(eventName, element, node, options);
+      }
+    }
+  }
+};