@domql/element 3.1.2 → 3.2.7

package/dist/cjs/update.js

@@ -33,7 +33,7 @@ __export(update_exports, {
 });
 module.exports = __toCommonJS(update_exports);
 var import_utils = require("@domql/utils");
-var import_event = require("@domql/event");
+var import_event = require("./event/index.js");
 var import_state = require("@domql/state");
 var import_create = require("./create.js");
 var import_iterate = require("./iterate.js");
@@ -50,13 +50,8 @@ const UPDATE_DEFAULT_OPTIONS = {
   calleeElement: false,
   exclude: import_utils2.METHODS_EXL
 };
-const update = async function(params = {}, opts) {
-  const calleeElementCache = opts == null ? void 0 : opts.calleeElement;
-  const options = (0, import_utils.deepClone)(
-    (0, import_utils.isObject)(opts) ? (0, import_utils.deepMerge)(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS,
-    { exclude: ["calleeElement"] }
-  );
-  options.calleeElement = calleeElementCache;
+const update = function(params = {}, opts) {
+  const options = (0, import_utils.isObject)(opts) ? { ...UPDATE_DEFAULT_OPTIONS, ...opts } : { ...UPDATE_DEFAULT_OPTIONS };
   const element = this;
   let ref = element.__ref;
   if (!ref) ref = element.__ref = {};
@@ -66,7 +61,7 @@ const update = async function(params = {}, opts) {
   );
   if (snapshotHasUpdated) return;
   if (!options.preventListeners) {
-    await (0, import_event.triggerEventOnUpdate)("startUpdate", params, element, options);
+    (0, import_event.triggerEventOnUpdate)("startUpdate", params, element, options);
   }
   const { parent, node, key } = element;
   const { exclude, preventInheritAtCurrentState } = options;
@@ -78,37 +73,38 @@ const update = async function(params = {}, opts) {
     params = { text: params };
   }
   params = import_utils.propertizeUpdate.call(element, params);
-  const inheritState = await inheritStateUpdates(element, options);
+  const inheritState = inheritStateUpdates(element, options);
   if (inheritState === false) return;
-  const ifFails = await checkIfOnUpdate(element, parent, options);
+  const ifFails = checkIfOnUpdate(element, parent, options);
   if (ifFails) return;
   if (ref.__if && !options.preventPropsUpdate) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
-    const hasFunctionInProps = ref.__propsStack.filter((v) => (0, import_utils.isFunction)(v));
-    const props = params.props || hasParentProps || hasFunctionInProps.length;
+    const hasFunctionInProps = ref.__propsStack.some(import_utils.isFunction);
+    const props = params.props || hasParentProps || hasFunctionInProps;
     if (props) (0, import_utils.updateProps)(props, element, parent);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-    const simulate = { ...params, ...element };
-    const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)(
-      "beforeUpdate",
-      params,
-      simulate,
-      options
-    );
-    if (beforeUpdateReturns === false) return element;
+    const hasBeforeUpdate = element.on?.beforeUpdate || element.props?.onBeforeUpdate;
+    if (hasBeforeUpdate) {
+      const simulate = { ...params, ...element };
+      const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)(
+        "beforeUpdate",
+        params,
+        simulate,
+        options
+      );
+      if (beforeUpdateReturns === false) return element;
+    }
   }
   (0, import_utils.overwriteDeep)(element, params);
   (0, import_iterate.throughExecProps)(element);
   (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
   (0, import_iterate.throughUpdatedDefine)(element);
   if (!options.isForced && !options.preventListeners) {
-    await (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
+    (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   }
   if (!ref.__if) return false;
-  if (!node) {
-    return;
-  }
+  if (!node) return;
   const {
     preventUpdate,
     preventDefineUpdate,
@@ -126,16 +122,20 @@ const update = async function(params = {}, opts) {
       options.preventUpdateAfterCount = 1;
     } else options.preventUpdateAfterCount++;
   }
+  const preventUpdateSet = (0, import_utils.isArray)(preventUpdate) ? new Set(preventUpdate) : null;
+  const preventDefineUpdateSet = (0, import_utils.isArray)(preventDefineUpdate) ? new Set(preventDefineUpdate) : null;
   for (const param in element) {
     const prop = element[param];
-    if (!Object.hasOwnProperty.call(element, param)) continue;
-    const isInPreventUpdate = (0, import_utils.isArray)(preventUpdate) && preventUpdate.includes(param);
-    const isInPreventDefineUpdate = (0, import_utils.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param);
-    if ((0, import_utils.isUndefined)(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || (preventStateUpdate && param) === "state" || (0, import_utils.isMethod)(param, element) || (0, import_utils.isObject)(import_mixins.REGISTRY[param])) {
+    if (!Object.prototype.hasOwnProperty.call(element, param)) continue;
+    const isInPreventUpdate = preventUpdateSet && preventUpdateSet.has(param);
+    const isInPreventDefineUpdate = preventDefineUpdateSet && preventDefineUpdateSet.has(param);
+    const isRootEventHandler = (0, import_utils.isFunction)(prop) && param.length > 2 && param.charCodeAt(0) === 111 && param.charCodeAt(1) === 110 && // 'on'
+    param.charCodeAt(2) >= 65 && param.charCodeAt(2) <= 90;
+    if ((0, import_utils.isUndefined)(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventStateUpdate && param === "state" || (0, import_utils.isMethod)(param, element) || isRootEventHandler || (0, import_utils.isObject)(import_mixins.REGISTRY[param])) {
       continue;
     }
     if (preventStateUpdate === "once") options.preventStateUpdate = false;
-    const isElement = await (0, import_applyParam.applyParam)(param, element, options);
+    const isElement = (0, import_applyParam.applyParam)(param, element, options);
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement;
       const canUpdate = (0, import_utils.isObject)(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
@@ -144,39 +144,79 @@ const update = async function(params = {}, opts) {
       if (options.onEachUpdate) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
-      const childUpdateCall = async () => await update.call(prop, params[prop], {
+      const childParams = params[param];
+      if (childParams === void 0 && !options.isForced) continue;
+      const childUpdateCall = () => update.call(prop, childParams, {
         ...options,
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
       if (lazyLoad) {
-        import_utils.window.requestAnimationFrame(async () => {
-          await childUpdateCall();
-          if (!options.preventUpdateListener) {
-            await (0, import_event.triggerEventOn)("lazyLoad", element, options);
+        import_utils.window.requestAnimationFrame(() => {
+          childUpdateCall();
+          if (!options.preventUpdateListener && !options.preventListeners) {
+            (0, import_event.triggerEventOn)("lazyLoad", element, options);
           }
         });
-      } else await childUpdateCall();
+      } else childUpdateCall();
     }
   }
   if (!preventContentUpdate) {
-    const children = params.children || element.children;
-    const content = children ? await (0, import_children.default)(children, element, opts) : element.children || params.content;
-    if (content) {
-      await (0, import_set.setContent)(content, element, options);
+    const contentKey = ref.contentElementKey || "content";
+    const existingContent = element[contentKey];
+    const childrenProp = params.children || element.children;
+    if (childrenProp) {
+      const content = (0, import_children.default)(childrenProp, element, opts);
+      if (content && !ref.__noChildrenDifference) {
+        (0, import_set.setContent)(content, element, options);
+      } else if (existingContent?.__ref && (0, import_utils.isFunction)(existingContent.update)) {
+        const lazyLoad = element.props?.lazyLoad || options.lazyLoad;
+        const contentUpdateCall = () => update.call(existingContent, params[contentKey], {
+          ...options,
+          currentSnapshot: snapshotOnCallee,
+          calleeElement
+        });
+        if (lazyLoad) {
+          import_utils.window.requestAnimationFrame(() => {
+            contentUpdateCall();
+            if (!options.preventUpdateListener && !options.preventListeners) {
+              (0, import_event.triggerEventOn)("lazyLoad", element, options);
+            }
+          });
+        } else contentUpdateCall();
+      }
+    } else if (existingContent?.__ref && (0, import_utils.isFunction)(existingContent.update)) {
+      const lazyLoad = element.props?.lazyLoad || options.lazyLoad;
+      const contentUpdateCall = () => update.call(existingContent, params[contentKey], {
+        ...options,
+        currentSnapshot: snapshotOnCallee,
+        calleeElement
+      });
+      if (lazyLoad) {
+        import_utils.window.requestAnimationFrame(() => {
+          contentUpdateCall();
+          if (!options.preventUpdateListener && !options.preventListeners) {
+            (0, import_event.triggerEventOn)("lazyLoad", element, options);
+          }
+        });
+      } else contentUpdateCall();
+    } else {
+      const content = element.children || params.content;
+      if (content) {
+        (0, import_set.setContent)(content, element, options);
+      }
     }
   }
-  if (!preventUpdateListener) {
-    await (0, import_event.triggerEventOn)("update", element, options);
+  if (!preventUpdateListener && !options.preventListeners) {
+    (0, import_event.triggerEventOn)("update", element, options);
   }
 };
-const checkIfOnUpdate = async (element, parent, options) => {
-  var _a, _b, _c;
-  if (!(0, import_utils.isFunction)(element.if) && !(0, import_utils.isFunction)((_a = element.props) == null ? void 0 : _a.if) || !parent) {
+const checkIfOnUpdate = (element, parent, options) => {
+  if (!(0, import_utils.isFunction)(element.if) && !(0, import_utils.isFunction)(element.props?.if) || !parent) {
     return;
   }
   const ref = element.__ref;
-  const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))(
+  const ifPassed = (element.if || element.props?.if)(
     element,
     element.state,
     element.context,
@@ -204,22 +244,22 @@ const checkIfOnUpdate = async (element, parent, options) => {
       const contentKey = ref.contentElementKey;
       if (element.children) {
         element.removeContent();
-      } else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) {
+      } else if (element[contentKey]?.parseDeep) {
         element[contentKey] = element[contentKey].parseDeep();
       }
       const previousElement = element.previousElement();
-      const previousNode = previousElement == null ? void 0 : previousElement.node;
-      const hasPrevious = previousNode == null ? void 0 : previousNode.parentNode;
+      const previousNode = previousElement?.node;
+      const hasPrevious = previousNode?.parentNode;
       const nextElement = element.nextElement();
-      const nextNode = nextElement == null ? void 0 : nextElement.node;
-      const hasNext = nextNode == null ? void 0 : nextNode.parentNode;
+      const nextNode = nextElement?.node;
+      const hasNext = nextNode?.parentNode;
       const attachOptions = (hasPrevious || hasNext) && {
         position: hasPrevious ? "after" : hasNext ? "before" : null,
         node: hasPrevious && previousNode || hasNext && nextNode
       };
       delete element.__ref;
       delete element.parent;
-      const createdElement = await (0, import_create.create)(
+      const createdElement = (0, import_create.create)(
         element,
         parent,
         element.key,
@@ -227,11 +267,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
         attachOptions
       );
       if (options.preventUpdate !== true && element.on && (0, import_utils.isFunction)(element.on.update)) {
-        await (0, import_event.applyEvent)(
-          element.on.update,
-          createdElement,
-          createdElement.state
-        );
+        (0, import_event.applyEvent)(element.on.update, createdElement, createdElement.state);
       }
       return createdElement;
     }
@@ -240,14 +276,14 @@ const checkIfOnUpdate = async (element, parent, options) => {
     delete ref.__if;
   }
 };
-const inheritStateUpdates = async (element, options) => {
+const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element;
   const stateKey = ref.__state;
   const { parent, state } = element;
   const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
   if (preventUpdateTriggerStateUpdate) return;
   if (!stateKey && !ref.__hasRootState) {
-    element.state = parent && parent.state || {};
+    element.state = parent?.state || {};
     return;
   }
   const shouldForceFunctionState = (0, import_utils.isFunction)(stateKey) && !isHoisted && execStateFunction;
@@ -264,7 +300,7 @@ const inheritStateUpdates = async (element, options) => {
   const keyInParentState = (0, import_utils.findInheritedState)(element, element.parent);
   if (!keyInParentState || options.preventInheritedStateUpdate) return;
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {
-    const initStateReturns = await (0, import_event.triggerEventOnUpdate)(
+    const initStateReturns = (0, import_event.triggerEventOnUpdate)(
       "beforeStateUpdate",
       keyInParentState,
       element,
@@ -272,19 +308,14 @@ const inheritStateUpdates = async (element, options) => {
     );
     if (initStateReturns === false) return element;
   }
-  const newState = await createStateUpdate(element, parent, options);
+  const newState = createStateUpdate(element, parent, options);
   if (!options.preventStateUpdateListener && !options.preventListeners) {
-    await (0, import_event.triggerEventOnUpdate)(
-      "stateUpdate",
-      newState.parse(),
-      element,
-      options
-    );
+    (0, import_event.triggerEventOnUpdate)("stateUpdate", newState.parse(), element, options);
   }
 };
-const createStateUpdate = async (element, parent, options) => {
+const createStateUpdate = (element, parent, options) => {
   const __stateChildren = element.state.__children;
-  const newState = await (0, import_state.createState)(element, parent);
+  const newState = (0, import_state.createState)(element, parent);
   element.state = newState;
   for (const child in __stateChildren) {
     if (newState[child]) newState.__children[child] = __stateChildren[child];

package/dist/cjs/utils/applyParam.js

@@ -23,22 +23,22 @@ __export(applyParam_exports, {
 module.exports = __toCommonJS(applyParam_exports);
 var import_utils = require("@domql/utils");
 var import_mixins = require("../mixins/index.js");
-const applyParam = async (param, element, options) => {
+const applyParam = (param, element, options) => {
   const { node, context, __ref: ref } = element;
-  const prop = element[param];
+  const prop = (0, import_utils.exec)(element[param], element);
   const { onlyUpdate } = options;
   const DOMQLProperty = import_mixins.REGISTRY[param];
-  const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
+  const DOMQLPropertyFromContext = context?.registry?.[param];
   const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty;
-  const hasDefine = element.define && element.define[param];
-  const hasContextDefine = context && context.define && context.define[param];
+  const hasDefine = element.define?.[param];
+  const hasContextDefine = context?.define?.[param];
   if (!ref.__if) return;
   const hasOnlyUpdate = onlyUpdate ? onlyUpdate === param || element.lookup(onlyUpdate) : true;
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if ((0, import_utils.isFunction)(isGlobalTransformer)) {
-      await isGlobalTransformer(prop, element, node, options);
-      return;
+      isGlobalTransformer(prop, element, node, options);
     }
+    return;
   }
   return { hasDefine, hasContextDefine };
 };

package/dist/cjs/utils/extendUtils.js

@@ -0,0 +1,132 @@
+"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 extendUtils_exports = {};
+__export(extendUtils_exports, {
+  cloneAndMergeArrayExtend: () => cloneAndMergeArrayExtend,
+  deepExtend: () => deepExtend,
+  deepMergeExtend: () => deepMergeExtend,
+  extendCachedRegistry: () => extendCachedRegistry,
+  extendStackRegistry: () => extendStackRegistry,
+  extractArrayExtend: () => extractArrayExtend,
+  fallbackStringExtend: () => fallbackStringExtend,
+  flattenExtend: () => flattenExtend,
+  generateHash: () => generateHash,
+  getExtendMerged: () => getExtendMerged,
+  getExtendStack: () => getExtendStack,
+  getExtendStackRegistry: () => getExtendStackRegistry,
+  getHashedExtend: () => getHashedExtend,
+  jointStacks: () => jointStacks,
+  setHashedExtend: () => setHashedExtend
+});
+module.exports = __toCommonJS(extendUtils_exports);
+var import_utils = require("@domql/utils");
+const generateHash = () => Math.random().toString(36).substring(2);
+const extendStackRegistry = {};
+const extendCachedRegistry = {};
+const getHashedExtend = (extend) => {
+  return extendStackRegistry[extend.__hash];
+};
+const setHashedExtend = (extend, stack) => {
+  const hash = generateHash();
+  if (!(0, import_utils.isString)(extend)) {
+    extend.__hash = hash;
+  }
+  extendStackRegistry[hash] = stack;
+  return stack;
+};
+const getExtendStackRegistry = (extend, stack) => {
+  if (extend.__hash) {
+    return stack.concat(getHashedExtend(extend));
+  }
+  return setHashedExtend(extend, stack);
+};
+const extractArrayExtend = (extend, stack, context) => {
+  for (let i = 0; i < extend.length; i++) flattenExtend(extend[i], stack, context);
+  return stack;
+};
+const deepExtend = (extend, stack, context) => {
+  const extendOflattenExtend = extend.extend;
+  if (extendOflattenExtend) {
+    flattenExtend(extendOflattenExtend, stack, context);
+  }
+  return stack;
+};
+const flattenExtend = (extend, stack, context) => {
+  if (!extend) return stack;
+  if ((0, import_utils.isArray)(extend)) return extractArrayExtend(extend, stack, context);
+  if ((0, import_utils.isString)(extend)) extend = fallbackStringExtend(extend, context);
+  stack.push(extend);
+  if (extend.extend) deepExtend(extend, stack, context);
+  return stack;
+};
+const deepMergeExtend = (element, extend) => {
+  for (const e in extend) {
+    if (e === "parent" || e === "node" || e === "__element") continue;
+    const elementProp = element[e];
+    const extendProp = extend[e];
+    if (elementProp === void 0) {
+      element[e] = extendProp;
+    } else if ((0, import_utils.isObject)(elementProp) && (0, import_utils.isObject)(extendProp)) {
+      deepMergeExtend(elementProp, extendProp);
+    } else if ((0, import_utils.isArray)(elementProp) && (0, import_utils.isArray)(extendProp)) {
+      element[e] = elementProp.concat(extendProp);
+    } else if ((0, import_utils.isArray)(elementProp) && (0, import_utils.isObject)(extendProp)) {
+      const obj = deepMergeExtend({}, elementProp);
+      element[e] = deepMergeExtend(obj, extendProp);
+    } else if (elementProp === void 0 && (0, import_utils.isFunction)(extendProp)) {
+      element[e] = extendProp;
+    }
+  }
+  return element;
+};
+const cloneAndMergeArrayExtend = (stack) => {
+  return stack.reduce((a, c) => {
+    return deepMergeExtend(a, (0, import_utils.deepClone)(c));
+  }, {});
+};
+const fallbackStringExtend = (extend, context, options = {}, variant) => {
+  const COMPONENTS = context?.components || options.components;
+  const PAGES = context?.pages || options.pages;
+  if ((0, import_utils.isString)(extend)) {
+    const componentExists = COMPONENTS && (COMPONENTS[extend + "." + variant] || COMPONENTS[extend] || COMPONENTS["smbls." + extend]);
+    const pageExists = PAGES && extend.charCodeAt(0) === 47 && PAGES[extend];
+    if (componentExists) return componentExists;
+    else if (pageExists) return pageExists;
+    else {
+      if (options.verbose && (0, import_utils.isNotProduction)()) {
+        console.warn("Extend is string but component was not found:", extend);
+      }
+      return {};
+    }
+  }
+  return extend;
+};
+const jointStacks = (extendStack, childExtendStack) => {
+  return [].concat(extendStack.slice(0, 1)).concat(childExtendStack.slice(0, 1)).concat(extendStack.slice(1)).concat(childExtendStack.slice(1));
+};
+const getExtendStack = (extend, context) => {
+  if (!extend) return [];
+  if (extend.__hash) return getHashedExtend(extend) || [];
+  const stack = flattenExtend(extend, [], context);
+  return getExtendStackRegistry(extend, stack);
+};
+const getExtendMerged = (extend) => {
+  const stack = getExtendStack(extend);
+  return cloneAndMergeArrayExtend(stack);
+};

package/dist/cjs/utils/index.js

@@ -15,10 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 utils_exports = {};
 __export(utils_exports, {
   METHODS_EXL: () => METHODS_EXL
 });
 module.exports = __toCommonJS(utils_exports);
+__reExport(utils_exports, require("./extendUtils.js"), module.exports);
 const METHODS_EXL = [];

package/dist/cjs/utils/propEvents.js

@@ -0,0 +1,56 @@
+"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 propEvents_exports = {};
+__export(propEvents_exports, {
+  propagateEventsFromElement: () => propagateEventsFromElement,
+  propagateEventsFromProps: () => propagateEventsFromProps
+});
+module.exports = __toCommonJS(propEvents_exports);
+var import_utils = require("@domql/utils");
+const propagateEventsFromProps = (element) => {
+  const { props, on } = element;
+  for (const v in props) {
+    if (v.charCodeAt(0) !== 111 || v.charCodeAt(1) !== 110) continue;
+    const eventName = (0, import_utils.lowercaseFirstLetter)(v.slice(2));
+    const origEvent = on[eventName];
+    const funcFromProps = props[v];
+    if ((0, import_utils.isFunction)(origEvent)) {
+      on[eventName] = (...args) => {
+        const originalEventRetunrs = origEvent(...args);
+        if (originalEventRetunrs !== false) return funcFromProps(...args);
+      };
+    } else on[eventName] = funcFromProps;
+  }
+};
+const propagateEventsFromElement = (element) => {
+  const { on } = element;
+  for (const param in element) {
+    if (param.charCodeAt(0) !== 111 || param.charCodeAt(1) !== 110 || !Object.prototype.hasOwnProperty.call(element, param)) continue;
+    const fn = element[param];
+    if (!(0, import_utils.isFunction)(fn)) continue;
+    const eventName = (0, import_utils.lowercaseFirstLetter)(param.slice(2));
+    const origEvent = on[eventName];
+    if ((0, import_utils.isFunction)(origEvent)) {
+      on[eventName] = (...args) => {
+        const ret = origEvent(...args);
+        if (ret !== false) return fn(...args);
+      };
+    } else on[eventName] = fn;
+  }
+};

package/dist/esm/children.js

@@ -1,7 +1,7 @@
 import {
   concatAddExtends,
   deepClone,
-  execPromise,
+  exec,
   getChildStateInKey,
   isArray,
   isDefined,
@@ -13,10 +13,34 @@ import {
   isString,
   matchesComponentNaming
 } from "@domql/utils";
-async function setChildren(param, element, opts) {
+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;
+};
+function setChildren(param, element, opts) {
   let { children, __ref: ref, state } = element;
   let { childrenAs } = element.props || {};
-  children = await execPromise(param, element, state) || await execPromise(children, element, state);
+  let execParam = exec(param, element, state);
+  let execChildren = exec(children, element, state);
+  children = execParam || execChildren;
   if (children) {
     if (isState(children)) children = children.parse();
     if (isString(children) || isNumber(children)) {
@@ -43,31 +67,37 @@ async function setChildren(param, element, opts) {
     }
   }
   if (!children || isNot(children)("array", "object")) return;
-  if (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 (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 = 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 ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
     }