@domql/element 3.1.2 → 3.2.7

package/dist/esm/create.js

@@ -6,6 +6,7 @@ import {
   isUndefined,
   detectInfiniteLoop,
   propertizeElement,
+  pickupElementFromProps,
   createElement,
   applyExtends,
   createScope,
@@ -15,33 +16,57 @@ 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";
-const create = async (props, parentEl, passedKey, options = OPTIONS.create || {}, attachOptions) => {
+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);
   if (!element) return;
   const { key, parent, __ref: ref } = element;
   createRoot(element, parent);
   applyExtends(element, parent, options);
-  propertizeElement.call(element, element);
-  await triggerEventOn("start", element, options);
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options);
   }
+  propertizeElement.call(element, element);
+  triggerEventOn("start", element, options);
   resetOptions(element, parent, options);
   addMethods(element, parent, options);
   createScope(element, parent);
-  await createState(element, parent);
+  createState(element, parent);
   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;
   }
@@ -49,13 +74,13 @@ const create = async (props, parentEl, passedKey, options = OPTIONS.create || {}
   if (element.node) {
     if (ref.__if) return assignNode(element, parent, key, attachOptions);
   }
-  const onInit = await triggerEventOn("init", element, options);
+  const onInit = triggerEventOn("init", element, options);
   if (onInit === false) return element;
   triggerEventOn("beforeClassAssign", element, options);
   assignKeyAsClassname(element);
-  await renderElement(element, parent, options, attachOptions);
+  renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
-  await triggerEventOn("complete", element, options);
+  triggerEventOn("complete", element, options);
   return element;
 };
 const cacheOptions = (options) => {
@@ -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 = async (element, parent, options, attachOptions) => {
-  var _a, _b, _c;
+const renderElement = (element, parent, options, attachOptions) => {
   if (visitedElements.has(element)) {
     if (ENV === "test" || ENV === "development") {
       console.warn("Cyclic rendering detected:", element.__ref.path);
@@ -85,17 +115,17 @@ const renderElement = async (element, parent, options, attachOptions) => {
   }
   visitedElements.set(element, true);
   const { __ref: ref, key } = element;
-  const createNestedChild = async () => {
+  const createNestedChild = () => {
     const isInfiniteLoopDetected = detectInfiniteLoop(ref.path);
     if (ref.__uniqId || isInfiniteLoopDetected) return;
-    await createNode(element, options);
-    ref.__uniqId = Math.random();
+    createNode(element, options);
+    ref.__uniqId = _uniqIdCounter++;
   };
   if (ENV === "test" || ENV === "development") {
-    await createNestedChild();
+    createNestedChild();
   } else {
     try {
-      await createNestedChild();
+      createNestedChild();
     } catch (e) {
       const path = ref.path;
       if (path.includes("ComponentsGrid")) {
@@ -104,14 +134,14 @@ const renderElement = async (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);
       }
     }
@@ -122,10 +152,10 @@ const renderElement = async (element, parent, options, attachOptions) => {
   }
   assignNode(element, parent, key, attachOptions);
   applyAnimationFrame(element, options);
-  await triggerEventOn("render", element, options);
-  await triggerEventOn("renderRouter", element, options);
-  await triggerEventOn("done", element, options);
-  await triggerEventOn("create", element, options);
+  triggerEventOn("render", element, options);
+  triggerEventOn("renderRouter", element, options);
+  triggerEventOn("done", element, options);
+  triggerEventOn("create", element, options);
 };
 const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref: ref } = element;
@@ -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";

package/dist/esm/event/on.js

@@ -0,0 +1,64 @@
+import { DOMQL_EVENTS, isFunction } from "@domql/utils";
+import { applyEvent, triggerEventOn, applyEventUpdate, triggerEventOnUpdate } from "@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 (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 (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 && isFunction(props[key])) {
+        const thirdChar = key[2];
+        if (thirdChar !== thirdChar.toUpperCase()) continue;
+        const eventName = thirdChar.toLowerCase() + key.slice(3);
+        if (handled.has(eventName) || DOMQL_EVENTS.has(eventName)) continue;
+        registerNodeEvent(eventName, element, node, options);
+      }
+    }
+  }
+};
+export {
+  applyEvent,
+  applyEventUpdate,
+  applyEventsOnNode,
+  triggerEventOn,
+  triggerEventOnUpdate
+};

package/dist/esm/event/store.js

@@ -0,0 +1,7 @@
+var store_default = {
+  click: [],
+  render: []
+};
+export {
+  store_default as default
+};

package/dist/esm/extend.js

@@ -0,0 +1,74 @@
+import { isFunction, exec } from "@domql/utils";
+import {
+  getExtendStack,
+  jointStacks,
+  cloneAndMergeArrayExtend,
+  deepMergeExtend,
+  fallbackStringExtend
+} from "./utils/index.js";
+let mainExtend;
+const applyExtend = (element, parent, options = {}) => {
+  if (isFunction(element)) element = exec(element, parent);
+  const { props, __ref } = element;
+  let extend = props?.extends || element.extends || element.extend;
+  const variant = props?.variant;
+  const context = element.context || parent.context;
+  extend = fallbackStringExtend(extend, context, options, variant);
+  const extendStack = getExtendStack(extend, context);
+  delete element.extend;
+  let childExtendStack = [];
+  if (parent) {
+    element.parent = parent;
+    if (!options.ignoreChildExtend && !props?.ignoreChildExtend) {
+      childExtendStack = getExtendStack(parent.childExtend, context);
+      const ignoreChildExtendRecursive = props?.ignoreChildExtendRecursive;
+      if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
+        const canExtendRecursive = element.key !== "__text";
+        if (canExtendRecursive) {
+          const childExtendRecursiveStack = getExtendStack(
+            parent.childExtendRecursive,
+            context
+          );
+          childExtendStack = childExtendStack.concat(childExtendRecursiveStack);
+          element.childExtendRecursive = parent.childExtendRecursive;
+        }
+      }
+    }
+  }
+  const extendLength = extendStack.length;
+  const childExtendLength = childExtendStack.length;
+  let stack = [];
+  if (extendLength && childExtendLength) {
+    stack = jointStacks(extendStack, childExtendStack);
+  } else if (extendLength) {
+    stack = extendStack;
+  } else if (childExtendLength) {
+    stack = childExtendStack;
+  } else if (!context.defaultExtends) return element;
+  if (context.defaultExtends) {
+    if (!mainExtend) {
+      const defaultOptionsExtend = getExtendStack(
+        context.defaultExtends,
+        context
+      );
+      mainExtend = cloneAndMergeArrayExtend(defaultOptionsExtend);
+      delete mainExtend.extend;
+    }
+    stack = [].concat(stack, mainExtend);
+  }
+  if (__ref) __ref.__extend = stack;
+  let mergedExtend = cloneAndMergeArrayExtend(stack);
+  const COMPONENTS = context?.components || options.components;
+  const component = exec(element.component || mergedExtend.component, element);
+  if (component && COMPONENTS?.[component]) {
+    const componentExtend = cloneAndMergeArrayExtend(
+      getExtendStack(COMPONENTS[component])
+    );
+    mergedExtend = deepMergeExtend(componentExtend, mergedExtend);
+  }
+  const merged = deepMergeExtend(element, mergedExtend);
+  return merged;
+};
+export {
+  applyExtend
+};

package/dist/esm/index.js

@@ -1,9 +1,11 @@
-import { TREE } from "./tree";
-import create from "./create";
-import createNode from "./node";
-import define from "./define";
-import update from "./update";
-import set from "./set";
+import { TREE } from "./tree.js";
+import create from "./create.js";
+import createNode from "./node.js";
+import define from "./define.js";
+import update from "./update.js";
+import set from "./set.js";
+export * from "./event/index.js";
+export * from "./render/index.js";
 export {
   TREE,
   create,

package/dist/esm/iterate.js

@@ -1,6 +1,5 @@
 import {
   isObject,
-  exec,
   isFunction,
   isNumber,
   isString,
@@ -8,16 +7,23 @@ import {
   isContextComponent,
   isMethod,
   overwrite,
-  execPromise
+  exec
 } from "@domql/utils";
-const throughInitialExec = async (element, exclude = {}) => {
+const throughInitialExec = (element, exclude = {}) => {
   const { __ref: ref } = element;
   for (const param in element) {
     if (exclude[param]) continue;
     const prop = element[param];
     if (isFunction(prop) && !isMethod(param, element)) {
       ref.__exec[param] = prop;
-      element[param] = await prop(element, element.state, element.context);
+      const result = prop(element, element.state, element.context);
+      if (result && typeof result.then === "function") {
+        result.then((resolved) => {
+          element[param] = resolved;
+        });
+      } else {
+        element[param] = result;
+      }
     }
   }
 };
@@ -29,8 +35,14 @@ const throughUpdatedExec = (element, options = {}) => {
     const isDefinedParam = ref.__defineCache[param];
     if (isDefinedParam) continue;
     const newExec = ref.__exec[param](element, element.state, element.context);
+    if (newExec && typeof newExec.then === "function") {
+      newExec.then((resolved) => {
+        element[param] = resolved;
+      });
+      continue;
+    }
     const execReturnsString = isString(newExec) || isNumber(newExec);
-    if (prop && prop.node && execReturnsString) {
+    if (prop?.node && execReturnsString) {
       overwrite(prop, { text: newExec });
     } else if (newExec !== prop) {
       if (matchesComponentNaming(param)) {
@@ -48,71 +60,114 @@ const throughUpdatedExec = (element, options = {}) => {
   }
   return changes;
 };
-const throughExecProps = async (element) => {
+const throughExecProps = (element) => {
   const { __ref: ref } = element;
   const { props } = element;
   for (const k in props) {
-    const isDefine = k.startsWith("is") || k.startsWith("has") || k.startsWith("use");
+    const c0 = k.charCodeAt(0);
+    const c1 = k.charCodeAt(1);
+    const isDefine = c0 === 105 && c1 === 115 || // 'is'
+    c0 === 104 && c1 === 97 && k.charCodeAt(2) === 115 || // 'has'
+    c0 === 117 && c1 === 115 && k.charCodeAt(2) === 101;
     const cachedExecProp = ref.__execProps[k];
     if (isFunction(cachedExecProp)) {
-      props[k] = await execPromise(cachedExecProp, element);
+      const result = exec(cachedExecProp, element);
+      if (result && typeof result.then === "function") {
+        result.then((resolved) => {
+          props[k] = resolved;
+        });
+      } else {
+        props[k] = result;
+      }
     } else if (isDefine && isFunction(props[k])) {
       ref.__execProps[k] = props[k];
-      props[k] = await execPromise(props[k], element);
+      const result = exec(props[k], element);
+      if (result && typeof result.then === "function") {
+        result.then((resolved) => {
+          props[k] = resolved;
+        });
+      } else {
+        props[k] = result;
+      }
     }
   }
 };
-const isPropertyInDefines = (key, element) => {
-};
-const throughInitialDefine = async (element) => {
+const throughInitialDefine = (element) => {
   const { define, context, __ref: ref } = element;
-  let defineObj = {};
+  const hasLocalDefine = isObject(define);
   const hasGlobalDefine = context && isObject(context.define);
-  if (isObject(define)) defineObj = { ...define };
-  if (hasGlobalDefine) defineObj = { ...defineObj, ...context.define };
+  if (!hasLocalDefine && !hasGlobalDefine) return element;
+  const defineObj = hasLocalDefine && hasGlobalDefine ? { ...define, ...context.define } : hasLocalDefine ? define : context.define;
   for (const param in defineObj) {
     let elementProp = element[param];
     if (isFunction(elementProp) && !isMethod(param, element)) {
       ref.__exec[param] = elementProp;
-      const execParam2 = elementProp = await execPromise(elementProp, element);
-      if (execParam2) {
-        elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
-        ref.__defineCache[param] = elementProp;
+      let execParam2 = exec(elementProp, element);
+      if (execParam2 && typeof execParam2.then === "function") {
+        execParam2.then((resolved) => {
+          elementProp = element[param] = resolved && resolved.parse ? resolved.parse() : resolved;
+          if (resolved) {
+            ref.__defineCache[param] = elementProp;
+          }
+        });
+      } else {
+        elementProp = element[param] = execParam2 && execParam2.parse ? execParam2.parse() : execParam2;
+        if (execParam2) {
+          ref.__defineCache[param] = elementProp;
+        }
       }
     }
-    const execParam = await defineObj[param](
+    const execParam = defineObj[param](
       elementProp,
       element,
       element.state,
       element.context
     );
-    if (execParam) element[param] = execParam;
+    if (execParam && typeof execParam.then === "function") {
+      execParam.then((resolved) => {
+        if (resolved) element[param] = resolved;
+      });
+    } else if (execParam) {
+      element[param] = execParam;
+    }
   }
   return element;
 };
-const throughUpdatedDefine = async (element) => {
+const throughUpdatedDefine = (element) => {
   const { context, define, __ref: ref } = element;
-  const changes = {};
-  let obj = {};
-  if (isObject(define)) obj = { ...define };
-  if (isObject(context && context.define)) obj = { ...obj, ...context.define };
+  const hasLocalDefine = isObject(define);
+  const hasGlobalDefine = isObject(context?.define);
+  if (!hasLocalDefine && !hasGlobalDefine) return;
+  const obj = hasLocalDefine && hasGlobalDefine ? { ...define, ...context.define } : hasLocalDefine ? define : context.define;
   for (const param in obj) {
     const execParam = ref.__exec[param];
     if (execParam) {
-      ref.__defineCache[param] = await execParam(
-        element,
-        element.state,
-        element.context
-      );
+      const result = execParam(element, element.state, element.context);
+      if (result && typeof result.then === "function") {
+        result.then((resolved) => {
+          ref.__defineCache[param] = resolved;
+        });
+      } else {
+        ref.__defineCache[param] = result;
+      }
+    }
+    const cached = exec(ref.__defineCache[param], element);
+    if (cached && typeof cached.then === "function") {
+      cached.then((resolved) => {
+      });
+      continue;
     }
-    const cached = await execPromise(ref.__defineCache[param], element);
     const newExecParam = typeof obj[param] === "function" ? obj[param](cached, element, element.state, element.context) : void 0;
-    if (newExecParam) element[param] = newExecParam;
+    if (newExecParam && typeof newExecParam.then === "function") {
+      newExecParam.then((resolved) => {
+        element[param] = resolved;
+      });
+    } else if (newExecParam) {
+      element[param] = newExecParam;
+    }
   }
-  return changes;
 };
 export {
-  isPropertyInDefines,
   throughExecProps,
   throughInitialDefine,
   throughInitialExec,

package/dist/esm/methods/set.js

@@ -4,8 +4,13 @@ import { update } from "../update.js";
 import {
   call,
   error,
+  getContext,
   getPath,
   getRef,
+  getRoot,
+  getRootContext,
+  getRootData,
+  getRootState,
   keys,
   log,
   lookdown,
@@ -38,6 +43,11 @@ const addMethods = (element, parent, options = {}) => {
     lookdownAll,
     getRef,
     getPath,
+    getRootState,
+    getRoot,
+    getRootData,
+    getRootContext,
+    getContext,
     setNodeStyles,
     spotByPath,
     parse,