@domql/element 3.2.3 → 3.2.8

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");
@@ -51,12 +51,7 @@ const UPDATE_DEFAULT_OPTIONS = {
   exclude: import_utils2.METHODS_EXL
 };
 const update = 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 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 = {};
@@ -84,19 +79,22 @@ const update = function(params = {}, opts) {
   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 = (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);
@@ -106,9 +104,7 @@ const update = function(params = {}, opts) {
     (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   }
   if (!ref.__if) return false;
-  if (!node) {
-    return;
-  }
+  if (!node) return;
   const {
     preventUpdate,
     preventDefineUpdate,
@@ -126,12 +122,16 @@ const update = 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;
@@ -144,7 +144,9 @@ const update = function(params = {}, opts) {
       if (options.onEachUpdate) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
-      const childUpdateCall = () => 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
@@ -152,7 +154,7 @@ const update = function(params = {}, opts) {
       if (lazyLoad) {
         import_utils.window.requestAnimationFrame(() => {
           childUpdateCall();
-          if (!options.preventUpdateListener) {
+          if (!options.preventUpdateListener && !options.preventListeners) {
             (0, import_event.triggerEventOn)("lazyLoad", element, options);
           }
         });
@@ -160,23 +162,61 @@ const update = function(params = {}, opts) {
     }
   }
   if (!preventContentUpdate) {
-    const children = params.children || element.children;
-    const content = children ? (0, import_children.default)(children, element, opts) : element.children || params.content;
-    if (content) {
-      (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) {
+  if (!preventUpdateListener && !options.preventListeners) {
     (0, import_event.triggerEventOn)("update", element, options);
   }
 };
 const checkIfOnUpdate = (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) {
+  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,15 +244,15 @@ const checkIfOnUpdate = (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
@@ -243,7 +283,7 @@ const inheritStateUpdates = (element, options) => {
   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;

package/dist/cjs/utils/applyParam.js

@@ -28,10 +28,10 @@ const applyParam = (param, element, options) => {
   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) {

package/dist/cjs/utils/extendUtils.js

@@ -57,7 +57,7 @@ const getExtendStackRegistry = (extend, stack) => {
   return setHashedExtend(extend, stack);
 };
 const extractArrayExtend = (extend, stack, context) => {
-  extend.forEach((each) => flattenExtend(each, stack, context));
+  for (let i = 0; i < extend.length; i++) flattenExtend(extend[i], stack, context);
   return stack;
 };
 const deepExtend = (extend, stack, context) => {
@@ -77,7 +77,7 @@ const flattenExtend = (extend, stack, context) => {
 };
 const deepMergeExtend = (element, extend) => {
   for (const e in extend) {
-    if (["parent", "node", "__element"].indexOf(e) > -1) continue;
+    if (e === "parent" || e === "node" || e === "__element") continue;
     const elementProp = element[e];
     const extendProp = extend[e];
     if (elementProp === void 0) {
@@ -101,11 +101,11 @@ const cloneAndMergeArrayExtend = (stack) => {
   }, {});
 };
 const fallbackStringExtend = (extend, context, options = {}, variant) => {
-  const COMPONENTS = context && context.components || options.components;
-  const PAGES = context && context.pages || options.pages;
+  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.startsWith("/") && PAGES[extend];
+    const pageExists = PAGES && extend.charCodeAt(0) === 47 && PAGES[extend];
     if (componentExists) return componentExists;
     else if (pageExists) return pageExists;
     else {

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

@@ -18,15 +18,16 @@ var __copyProps = (to, from, except, desc) => {
 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;
-  const eventKeysFromProps = Object.keys(props).filter((key) => key.startsWith("on"));
-  eventKeysFromProps.forEach((v) => {
-    const eventName = (0, import_utils.lowercaseFirstLetter)(v.split("on")[1]);
+  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)) {
@@ -35,5 +36,21 @@ const propagateEventsFromProps = (element) => {
         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

@@ -13,6 +13,28 @@ import {
   isString,
   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;
+};
 function setChildren(param, element, opts) {
   let { children, __ref: ref, state } = element;
   let { childrenAs } = element.props || {};
@@ -45,31 +67,37 @@ 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 };
     }

package/dist/esm/create.js

@@ -6,6 +6,7 @@ import {
   isUndefined,
   detectInfiniteLoop,
   propertizeElement,
+  pickupElementFromProps,
   createElement,
   applyExtends,
   createScope,
@@ -15,14 +16,36 @@ import {
   createIfConditionFlag,
   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";
-const ENV = "development";
+import { filterAttributesByTagName } from "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 = 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 = OPTIONS.create || {}, attachOptions) => {
   cacheOptions(options);
   const element = createElement(props, parentEl, passedKey, options, ROOT);
@@ -42,6 +65,8 @@ const create = (props, parentEl, passedKey, options = OPTIONS.create || {}, atta
   if (element.scope === "state") element.scope = element.state;
   createIfConditionFlag(element, parent);
   initProps(element, parent, options);
+  pickupElementFromProps.call(element, element, { cachedKeys: [] });
+  applyPropsAsAttrs(element);
   if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;
   }
@@ -65,7 +90,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) {
     OPTIONS.defaultOptions = options;
     if (options.ignoreChildExtends) delete options.ignoreChildExtends;
   }
@@ -75,9 +105,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);
@@ -89,7 +119,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++;
   };
   if (ENV === "test" || ENV === "development") {
     createNestedChild();
@@ -104,14 +134,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);
       }
     }
@@ -135,6 +165,7 @@ const onlyResolveExtends = (element, parent, key, options) => {
   if (element.scope === "state") element.scope = element.state;
   createIfConditionFlag(element, parent);
   initProps(element, parent, options);
+  pickupElementFromProps.call(element, element, { cachedKeys: [] });
   if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;
   }
@@ -150,9 +181,9 @@ const onlyResolveExtends = (element, parent, key, options) => {
       if (isUndefined(element[k]) || isMethod(k, element) || isObject(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 && REGISTRY[k] && !optionsHasDefine) {
         continue;
       } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {

package/dist/esm/define.js

@@ -1,5 +1,5 @@
 import { report } from "@domql/report";
-import { REGISTRY } from "./mixins";
+import { REGISTRY } from "./mixins/index.js";
 var define_default = (params, options = {}) => {
   const { overwrite } = options;
   for (const param in params) {

package/dist/esm/event/animationFrame.js

@@ -0,0 +1,76 @@
+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;
+};
+export {
+  applyAnimationFrame,
+  initAnimationFrame,
+  registerFrameListener
+};

package/dist/esm/event/can.js

@@ -0,0 +1,8 @@
+import { report } from "@domql/report";
+import { isValidHtmlTag } from "@domql/utils";
+const canRenderTag = (tag) => {
+  return isValidHtmlTag(tag || "div") || report("HTMLInvalidTag");
+};
+export {
+  canRenderTag
+};

package/dist/esm/event/index.js

@@ -0,0 +1,3 @@
+export * from "./on.js";
+export * from "./can.js";
+export * from "./animationFrame.js";