@domql/element 3.1.2 → 3.2.7

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

@@ -0,0 +1,52 @@
+import { isFunction, setContentKey } from "@domql/utils";
+import { set } from "../set.js";
+const updateContent = function(params, options) {
+  const element = this;
+  const ref = element.__ref;
+  const contentKey = ref.contentElementKey;
+  if (!element[contentKey]) return;
+  if (element[contentKey].update) element[contentKey].update(params, options);
+};
+const removeContent = function(el, opts = {}) {
+  const element = el || this;
+  const { __ref: ref } = element;
+  const contentElementKey = setContentKey(element, opts);
+  if (opts.contentElementKey !== "content") opts.contentElementKey = "content";
+  if (element[contentElementKey]) {
+    if (element[contentElementKey].node && element.node) {
+      if (element[contentElementKey].tag === "fragment")
+        element.node.innerHTML = "";
+      else {
+        const contentNode = element[contentElementKey].node;
+        if (contentNode.parentNode === element.node)
+          element.node.removeChild(element[contentElementKey].node);
+      }
+    }
+    const { __cached } = ref;
+    if (__cached && __cached[contentElementKey]) {
+      if (__cached[contentElementKey].tag === "fragment")
+        __cached[contentElementKey].parent.node.innerHTML = "";
+      else if (__cached[contentElementKey] && isFunction(__cached[contentElementKey].remove))
+        __cached[contentElementKey].remove();
+    }
+    ref.__children.splice(ref.__children.indexOf(element[contentElementKey]), 1);
+    delete element[contentElementKey];
+  }
+};
+function setContent(param, element, node, opts) {
+  const contentElementKey = setContentKey(element, opts);
+  if (param && element) {
+    if (element[contentElementKey]?.update) {
+      element[contentElementKey].update({}, opts);
+    } else {
+      set.call(element, param, opts);
+    }
+  }
+}
+var content_default = setContent;
+export {
+  content_default as default,
+  removeContent,
+  setContent,
+  updateContent
+};

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(param, element) || exec((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, 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/registry.js

@@ -1,4 +1,4 @@
-import attr from "./attr.js";
+import { attr } from "./attr.js";
 import { classList } from "./classList.js";
 import data from "./data.js";
 import html from "./html.js";

package/dist/esm/mixins/scope.js

@@ -1,5 +1,5 @@
 import { isFunction, isObject } from "@domql/utils";
-async function scope(params, element, node) {
+function scope(params, element, node) {
   if (!isObject(params)) return;
   for (const scopeItem in params) {
     const value = params[scopeItem];

package/dist/esm/mixins/state.js

@@ -1,10 +1,10 @@
-import { execPromise, isObject, STATE_METHODS } from "@domql/utils";
-async function state(params, element, node) {
-  const state2 = await execPromise(params, element);
+import { exec, isObject, STATE_METHODS } from "@domql/utils";
+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,18 +1,22 @@
 import { create } from "../create.js";
-import { exec, isString } from "@domql/utils";
-async function text(param, element, node) {
-  let prop = exec(param || element.props.text, element);
+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("{{")) {
-    prop = element.call("replaceLiteralsWithObjectFields", prop);
+    prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
   }
   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;
       if (element.__text.node) element.__text.node.nodeValue = prop;
-    } else await create({ tag: "string", text: prop }, element, "__text");
+    } else create({ tag: "string", text: prop }, element, "__text");
   }
 }
 var text_default = text;

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,8 +12,8 @@ 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 createNode = async (element, opts) => {
+const ENV = process.env.NODE_ENV;
+const createNode = (element, opts) => {
   let { node, tag, __ref: ref } = element;
   if (!ref.__if) return element;
   let isNewNode;
@@ -21,42 +22,44 @@ const createNode = async (element, opts) => {
     if (tag === "shadow") {
       node = element.node = element.parent.node.attachShadow({ mode: "open" });
     } else node = element.node = cacheNode(element);
-    await triggerEventOn("attachNode", element, opts);
+    triggerEventOn("attachNode", element, opts);
   }
   if (ENV === "test" || ENV === "development" || opts.alowRefReference) {
     node.ref = element;
     if (isFunction(node.setAttribute)) node.setAttribute("key", element.key);
   }
-  await throughExecProps(element);
-  await throughInitialDefine(element);
-  await throughInitialExec(element);
-  await applyEventsOnNode(element, { isNewNode, ...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 = await applyParam(param, element, opts);
+    const isElement = applyParam(param, element, opts);
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement;
       if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = async () => {
-          await create(value, element, param, opts);
+        const createAsync = () => {
+          create(value, element, param, opts);
         };
         if (element.props && element.props.lazyLoad || opts.lazyLoad) {
-          window.requestAnimationFrame(async () => {
-            await createAsync();
+          window.requestAnimationFrame(() => {
+            createAsync();
             if (!opts.preventUpdateListener) {
-              await triggerEventOn("lazyLoad", element, opts);
+              triggerEventOn("lazyLoad", element, opts);
             }
           });
-        } else await createAsync();
+        } else createAsync();
       }
     }
   }
-  const content = element.children ? await setChildren(element.children, element, opts) : element.content || element.content;
+  const content = element.children ? setChildren(element.children, element, opts) : element.children || element.content;
   if (content) {
-    await setContent(content, element, opts);
+    setContent(content, element, opts);
   }
   return element;
 };

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, execPromise, isFunction, OPTIONS } from "@domql/utils";
+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,49 +9,42 @@ const setContentKey = (element, opts = {}) => {
   }
   return ref.contentElementKey;
 };
-const reset = async (options) => {
-  const element = void 0;
-  await create(element, element.parent, void 0, {
+function reset(options) {
+  const element = this;
+  create(element, element.parent, void 0, {
     ignoreChildExtends: true,
     ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   });
-};
-const resetContent = async (params, element, opts) => {
-  var _a;
+}
+const resetContent = (params, element, opts) => {
   const contentElementKey = setContentKey(element, opts);
-  if ((_a = element[contentElementKey]) == null ? void 0 : _a.node) removeContent(element, opts);
-  const contentElem = await create(
-    params,
-    element,
-    contentElementKey || "content",
-    {
-      ignoreChildExtends: true,
-      ...OPTIONS.defaultOptions,
-      ...OPTIONS.create,
-      ...opts
-    }
-  );
+  if (element[contentElementKey]?.node) removeContent(element, opts);
+  const contentElem = create(params, element, contentElementKey || "content", {
+    ignoreChildExtends: true,
+    ...OPTIONS.defaultOptions,
+    ...OPTIONS.create,
+    ...opts
+  });
   if (contentElementKey !== "content") opts.contentElementKey = "content";
   return contentElem;
 };
-const updateContent = async function(params, opts) {
+const updateContent = function(params, opts) {
   const element = this;
   const contentElementKey = setContentKey(element, opts);
   if (!element[contentElementKey]) return;
   if (element[contentElementKey].update) {
-    await element[contentElementKey].update(params, opts);
+    element[contentElementKey].update(params, opts);
   }
 };
-async function setContent(param, element, opts) {
-  const content = await execPromise(param, element);
+function setContent(param, element, opts) {
+  const content = exec(param, element);
   if (content && element) {
-    await set.call(element, content, opts);
+    set.call(element, content, opts);
   }
 }
 const removeContent = function(el, opts = {}) {
-  var _a;
   const element = el || this;
   const contentElementKey = setContentKey(element, opts);
   if (opts.contentElementKey !== "content") {
@@ -59,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);
@@ -79,8 +73,7 @@ const removeContent = function(el, opts = {}) {
   }
   delete element[contentElementKey];
 };
-const set = async function(params, options = {}, el) {
-  var _a;
+const set = function(params, options = {}, el) {
   const element = el || this;
   const { __ref: ref } = element;
   const contentElementKey = setContentKey(element, options);
@@ -91,9 +84,9 @@ const set = async 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 = await triggerEventOnUpdate(
+      const beforeUpdateReturns = triggerEventOnUpdate(
         "beforeUpdate",
         params,
         element,
@@ -101,9 +94,9 @@ const set = async function(params, options = {}, el) {
       );
       if (beforeUpdateReturns === false) return element;
     }
-    await content.update(params);
+    content.update(params);
     if (!options.preventUpdateListener && !options.preventListeners) {
-      await triggerEventOn("update", element, options);
+      triggerEventOn("update", element, options);
     }
     return;
   }
@@ -115,20 +108,20 @@ const set = async 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;
     }
   }
   if (lazyLoad) {
-    window.requestAnimationFrame(async () => {
-      await resetContent(params, element, options);
+    window.requestAnimationFrame(() => {
+      resetContent(params, element, options);
       if (!options.preventUpdateListener) {
-        await triggerEventOn("lazyLoad", element, options);
+        triggerEventOn("lazyLoad", element, options);
       }
     });
   } else {
-    await resetContent(params, element, options);
+    resetContent(params, element, options);
   }
 };
 var set_default = set;