@domql/element 3.2.3 → 3.2.8

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

@@ -1,4 +1,4 @@
-import { isFunction, exec, isProduction } from "@domql/utils";
+import { isFunction, exec } from "@domql/utils";
 import {
   getExtendStack,
   jointStacks,
@@ -10,8 +10,8 @@ let mainExtend;
 const applyExtend = (element, parent, options = {}) => {
   if (isFunction(element)) element = exec(element, parent);
   const { props, __ref } = element;
-  let extend = (props == null ? void 0 : props.extends) || element.extends || element.extend;
-  const variant = props == null ? void 0 : props.variant;
+  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);
@@ -19,9 +19,9 @@ const applyExtend = (element, parent, options = {}) => {
   let childExtendStack = [];
   if (parent) {
     element.parent = parent;
-    if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
+    if (!options.ignoreChildExtend && !props?.ignoreChildExtend) {
       childExtendStack = getExtendStack(parent.childExtend, context);
-      const ignoreChildExtendRecursive = props && props.ignoreChildExtendRecursive;
+      const ignoreChildExtendRecursive = props?.ignoreChildExtendRecursive;
       if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
         const canExtendRecursive = element.key !== "__text";
         if (canExtendRecursive) {
@@ -58,9 +58,9 @@ const applyExtend = (element, parent, options = {}) => {
   }
   if (__ref) __ref.__extend = stack;
   let mergedExtend = cloneAndMergeArrayExtend(stack);
-  const COMPONENTS = context && context.components || options.components;
+  const COMPONENTS = context?.components || options.components;
   const component = exec(element.component || mergedExtend.component, element);
-  if (component && COMPONENTS && COMPONENTS[component]) {
+  if (component && COMPONENTS?.[component]) {
     const componentExtend = cloneAndMergeArrayExtend(
       getExtendStack(COMPONENTS[component])
     );

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

@@ -42,7 +42,7 @@ const throughUpdatedExec = (element, options = {}) => {
       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)) {
@@ -64,7 +64,11 @@ 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)) {
       const result = exec(cachedExecProp, element);
@@ -88,14 +92,12 @@ const throughExecProps = (element) => {
     }
   }
 };
-const isPropertyInDefines = (key, 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)) {
@@ -133,10 +135,10 @@ const throughInitialDefine = (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) {
@@ -164,10 +166,8 @@ const throughUpdatedDefine = (element) => {
       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,

package/dist/esm/methods/v2.js

@@ -44,7 +44,7 @@ const log = function(...args) {
     args.forEach((v) => console.log(`%c${v}:
 `, "font-weight: bold", element[v]));
   } else {
-    console.log(__ref == null ? void 0 : __ref.path);
+    console.log(__ref?.path);
     const keys2 = element.keys();
     keys2.forEach((v) => console.log(`%c${v}:
 `, "font-weight: bold", element[v]));

package/dist/esm/mixins/attr.js

@@ -1,15 +1,16 @@
-import { deepMerge, exec, isNot, isNull, isUndefined } from "@domql/utils";
+import { deepMerge, exec, isNot } from "@domql/utils";
 import { report } from "@domql/report";
 function attr(params, element, node) {
   const { __ref: ref, props } = element;
   const { __attr } = ref;
-  if (isNot("object")) report("HTMLInvalidAttr", params);
+  if (isNot(params)("object")) report("HTMLInvalidAttr", params);
   if (params) {
     const attrs = exec(params, element);
     if (props.attr) deepMerge(attrs, props.attr);
     for (const attr2 in attrs) {
       const val = exec(attrs[attr2], element);
-      if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute) {
+      if (val === __attr[attr2]) continue;
+      if (val !== false && val !== void 0 && val !== null && node.setAttribute) {
         node.setAttribute(attr2, val);
       } else if (node.removeAttribute) node.removeAttribute(attr2);
       __attr[attr2] = val;

package/dist/esm/mixins/classList.js

@@ -29,7 +29,17 @@ const classList = (params, element) => {
 };
 const applyClassListOnNode = (params, element, node) => {
   const className = classList(params, element);
-  node.classList = className;
+  const { __ref } = element;
+  if (className === __ref.__className) return className;
+  __ref.__className = className;
+  if (node && typeof node.setAttribute === "function") {
+    node.setAttribute("class", className);
+  } else if (node) {
+    try {
+      node.className = className;
+    } catch (e) {
+    }
+  }
   return className;
 };
 function applyClasslist(params, element, node) {

package/dist/esm/mixins/content.js

@@ -34,10 +34,9 @@ const removeContent = function(el, opts = {}) {
   }
 };
 function setContent(param, element, node, opts) {
-  var _a;
   const contentElementKey = setContentKey(element, opts);
   if (param && element) {
-    if ((_a = element[contentElementKey]) == null ? void 0 : _a.update) {
+    if (element[contentElementKey]?.update) {
       element[contentElementKey].update({}, opts);
     } else {
       set.call(element, param, opts);

package/dist/esm/mixins/html.js

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

package/dist/esm/mixins/state.js

@@ -3,8 +3,8 @@ function state(params, element, node) {
   const state2 = exec(params, element);
   if (isObject(state2)) {
     for (const param in state2) {
-      if (STATE_METHODS.includes(param)) continue;
-      if (!Object.hasOwnProperty.call(state2, param)) continue;
+      if (STATE_METHODS.has(param)) continue;
+      if (!Object.prototype.hasOwnProperty.call(state2, param)) continue;
     }
   }
   return element;

package/dist/esm/mixins/style.js

@@ -1,9 +1,18 @@
-import { isObject, map } from "@domql/utils";
+import { exec, isObject } from "@domql/utils";
 import { report } from "@domql/report";
 function style(params, element, node) {
   if (params) {
-    if (isObject(params)) map(node.style, params, element);
-    else report("HTMLInvalidStyles", params);
+    if (isObject(params)) {
+      const { __ref } = element;
+      if (!__ref.__style) __ref.__style = {};
+      const cache = __ref.__style;
+      for (const prop in params) {
+        const val = exec(params[prop], element);
+        if (val === cache[prop]) continue;
+        cache[prop] = val;
+        node.style[prop] = val;
+      }
+    } else report("HTMLInvalidStyles", params);
   }
 }
 var style_default = style;

package/dist/esm/mixins/text.js

@@ -1,5 +1,5 @@
 import { create } from "../create.js";
-import { exec, isString } from "@domql/utils";
+import { exec, isString, SVG_TAGS } from "@domql/utils";
 function text(param, element, node) {
   let prop = exec(element.props.text || param, element);
   if (isString(prop) && prop.includes("{{")) {
@@ -7,7 +7,11 @@ function text(param, element, node) {
   }
   if (element.tag === "string") {
     node.nodeValue = prop;
-  } else if (param !== void 0 || param !== null) {
+  } else if (param !== void 0 && param !== null) {
+    if (SVG_TAGS.has(element.tag)) {
+      if (node) node.textContent = prop;
+      return;
+    }
     if (element.__text) {
       if (element.__text.text === prop) return;
       element.__text.text = prop;

package/dist/esm/node.js

@@ -1,6 +1,7 @@
 import { isFunction, isMethod, isObject, isUndefined } from "@domql/utils";
-import { applyEventsOnNode, triggerEventOn } from "@domql/event";
-import { cacheNode } from "@domql/render";
+import { applyEventsOnNode, triggerEventOn } from "./event/index.js";
+import { propagateEventsFromProps, propagateEventsFromElement } from "./utils/propEvents.js";
+import { cacheNode } from "./render/index.js";
 import { create } from "./create.js";
 import {
   throughExecProps,
@@ -11,7 +12,7 @@ import { REGISTRY } from "./mixins/index.js";
 import { applyParam } from "./utils/applyParam.js";
 import setChildren from "./children.js";
 import { setContent } from "./set.js";
-const ENV = "development";
+const ENV = process.env.NODE_ENV;
 const createNode = (element, opts) => {
   let { node, tag, __ref: ref } = element;
   if (!ref.__if) return element;
@@ -30,10 +31,12 @@ const createNode = (element, opts) => {
   throughExecProps(element);
   throughInitialDefine(element);
   throughInitialExec(element);
+  propagateEventsFromProps(element);
+  propagateEventsFromElement(element);
   applyEventsOnNode(element, { isNewNode, ...opts });
   for (const param in element) {
     const value = element[param];
-    if (!Object.hasOwnProperty.call(element, param) || isUndefined(value) || isMethod(param, element) || isObject(REGISTRY[param])) {
+    if (!Object.prototype.hasOwnProperty.call(element, param) || value === void 0 || isMethod(param, element) || isObject(REGISTRY[param]) || param.length > 2 && param.charCodeAt(0) === 111 && param.charCodeAt(1) === 110 && param.charCodeAt(2) >= 65 && param.charCodeAt(2) <= 90) {
       continue;
     }
     const isElement = applyParam(param, element, opts);
@@ -54,7 +57,7 @@ const createNode = (element, opts) => {
       }
     }
   }
-  const content = element.children ? setChildren(element.children, element, opts) : element.content || element.content;
+  const content = element.children ? setChildren(element.children, element, opts) : element.children || element.content;
   if (content) {
     setContent(content, element, opts);
   }

package/dist/esm/render/append.js

@@ -0,0 +1,52 @@
+const appendNode = (node, parentNode) => {
+  try {
+    parentNode.appendChild(node);
+    return node;
+  } catch (e) {
+    console.error("Does not support to append", parentNode, node);
+  }
+};
+const insertNodeAfter = (node, siblingNode, parentNode) => {
+  if (!node) {
+    throw new Error("Node is required");
+  }
+  const parent = parentNode || siblingNode?.parentNode;
+  if (siblingNode?.nextSibling) {
+    parent?.insertBefore(node, siblingNode.nextSibling);
+  } else if (siblingNode?.insertAdjacentElement) {
+    siblingNode.insertAdjacentElement("afterend", node);
+  } else {
+    parent?.insertBefore(node, siblingNode);
+  }
+};
+const insertNodeBefore = (node, siblingNode, parentNode) => {
+  if (!node) {
+    throw new Error("Node is required");
+  }
+  const parent = parentNode || siblingNode.parentNode;
+  parent?.insertBefore(node, siblingNode);
+};
+const assignNode = (element, parent, key, attachOptions) => {
+  if (!element) {
+    throw new Error("Element is required");
+  }
+  if (!parent) {
+    throw new Error("Parent is required");
+  }
+  parent[key || element.key] = element;
+  if (element.tag !== "shadow") {
+    if (attachOptions && attachOptions.position) {
+      ;
+      (attachOptions.position === "before" ? insertNodeBefore : insertNodeAfter)(element.node, attachOptions.node || parent.node);
+    } else {
+      appendNode(element.node, parent.node, element);
+    }
+  }
+  return element;
+};
+export {
+  appendNode,
+  assignNode,
+  insertNodeAfter,
+  insertNodeBefore
+};

package/dist/esm/render/cache.js

@@ -0,0 +1,60 @@
+import { report } from "@domql/report";
+import { canRenderTag } from "../event/index.js";
+import { exec, isObject, isString, isValidHtmlTag, SVG_TAGS, document } from "@domql/utils";
+const SVG_NS = "http://www.w3.org/2000/svg";
+const createHTMLNode = (element) => {
+  const { tag, context } = element;
+  const doc = context.document || document;
+  if (tag) {
+    if (tag === "string") return doc.createTextNode(element.text);
+    else if (tag === "fragment") {
+      return doc.createDocumentFragment();
+    } else if (SVG_TAGS.has(tag)) {
+      if (tag === "svg" || element.parent?.node?.namespaceURI === SVG_NS) {
+        return doc.createElementNS(SVG_NS, tag);
+      }
+      return doc.createElement(tag);
+    } else return doc.createElement(tag);
+  } else {
+    return doc.createElement("div");
+  }
+};
+const detectTag = (element) => {
+  let { tag, key, props } = element;
+  tag = exec(tag, element);
+  if (tag === true) tag = key;
+  if (isObject(props) && isString(props.tag)) {
+    const tagExists = isValidHtmlTag(props.tag);
+    if (tagExists) return props.tag;
+  }
+  if (isString(tag)) {
+    if (isValidHtmlTag(tag)) return tag;
+  } else {
+    let keyAsTag = key.toLowerCase();
+    if (keyAsTag.includes(".")) keyAsTag = keyAsTag.split(".")[0];
+    if (keyAsTag.includes("_")) keyAsTag = keyAsTag.split("_")[0];
+    if (isValidHtmlTag(keyAsTag)) return keyAsTag;
+  }
+  return "div";
+};
+const cacheNode = (element) => {
+  const { context } = element;
+  const win = context.window || window;
+  const tag = element.tag = detectTag(element);
+  if (!canRenderTag(tag)) {
+    return report("HTMLInvalidTag", element.tag, element);
+  }
+  if (!win.nodeCaches) win.nodeCaches = {};
+  const isSvgContext = SVG_TAGS.has(tag) && (tag === "svg" || element.parent?.node?.namespaceURI === SVG_NS);
+  const cacheKey = isSvgContext ? "svg:" + tag : tag;
+  let cachedTag = win.nodeCaches[cacheKey];
+  if (!cachedTag) cachedTag = win.nodeCaches[cacheKey] = createHTMLNode(element);
+  const clonedNode = cachedTag.cloneNode(true);
+  if (tag === "string") clonedNode.nodeValue = element.text;
+  return clonedNode;
+};
+export {
+  cacheNode,
+  createHTMLNode,
+  detectTag
+};

package/dist/esm/render/create.js

@@ -0,0 +1,5 @@
+const createNode = (element) => {
+};
+export {
+  createNode
+};

package/dist/esm/render/index.js

@@ -0,0 +1,3 @@
+export * from "./create.js";
+export * from "./cache.js";
+export * from "./append.js";

package/dist/esm/set.js

@@ -1,6 +1,6 @@
 import { deepContains, exec, isFunction, OPTIONS } from "@domql/utils";
 import { create } from "./create.js";
-import { triggerEventOn, triggerEventOnUpdate } from "@domql/event";
+import { triggerEventOn, triggerEventOnUpdate } from "./event/index.js";
 const setContentKey = (element, opts = {}) => {
   const { __ref: ref } = element;
   const contentElementKey = opts.contentElementKey;
@@ -9,19 +9,18 @@ const setContentKey = (element, opts = {}) => {
   }
   return ref.contentElementKey;
 };
-const reset = (options) => {
-  const element = void 0;
+function reset(options) {
+  const element = this;
   create(element, element.parent, void 0, {
     ignoreChildExtends: true,
     ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   });
-};
+}
 const resetContent = (params, element, opts) => {
-  var _a;
   const contentElementKey = setContentKey(element, opts);
-  if ((_a = element[contentElementKey]) == null ? void 0 : _a.node) removeContent(element, opts);
+  if (element[contentElementKey]?.node) removeContent(element, opts);
   const contentElem = create(params, element, contentElementKey || "content", {
     ignoreChildExtends: true,
     ...OPTIONS.defaultOptions,
@@ -46,7 +45,6 @@ function setContent(param, element, opts) {
   }
 }
 const removeContent = function(el, opts = {}) {
-  var _a;
   const element = el || this;
   const contentElementKey = setContentKey(element, opts);
   if (opts.contentElementKey !== "content") {
@@ -54,16 +52,17 @@ const removeContent = function(el, opts = {}) {
   }
   const content = element[contentElementKey];
   if (!content) return;
-  if (content.tag === "fragment" && ((_a = content.__ref) == null ? void 0 : _a.__children)) {
-    content.__ref.__children.forEach((key) => {
-      const child = content[key];
+  if (content.tag === "fragment" && content.__ref?.__children) {
+    const __children = content.__ref.__children;
+    for (let i = 0; i < __children.length; i++) {
+      const child = content[__children[i]];
       if (child.node && child.node.parentNode) {
         child.node.parentNode.removeChild(child.node);
       }
       if (isFunction(child.remove)) {
         child.remove();
       }
-    });
+    }
   } else {
     if (content.node && content.node.parentNode) {
       content.node.parentNode.removeChild(content.node);
@@ -75,7 +74,6 @@ const removeContent = function(el, opts = {}) {
   delete element[contentElementKey];
 };
 const set = function(params, options = {}, el) {
-  var _a;
   const element = el || this;
   const { __ref: ref } = element;
   const contentElementKey = setContentKey(element, options);
@@ -86,7 +84,7 @@ const set = function(params, options = {}, el) {
   if (options.preventContentUpdate === true && !hasChildren) return;
   const childHasChanged = !ref.__noChildrenDifference;
   const childrenIsDifferentFromCache = childHasChanged && __contentRef && Object.keys(params).length === Object.keys(content).length && deepContains(params, content);
-  if ((content == null ? void 0 : content.update) && !childHasChanged && !childrenIsDifferentFromCache) {
+  if (content?.update && !childHasChanged && !childrenIsDifferentFromCache) {
     if (!options.preventBeforeUpdateListener && !options.preventListeners) {
       const beforeUpdateReturns = triggerEventOnUpdate(
         "beforeUpdate",
@@ -110,7 +108,7 @@ const set = function(params, options = {}, el) {
       params.childExtends = element.childExtends;
       props.ignoreChildExtends = true;
     }
-    if (!(props == null ? void 0 : props.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
+    if (!props?.childProps && element.props?.childProps) {
       props.childProps = element.props.childProps;
       props.ignoreChildProps = true;
     }