@domql/element 2.5.198 → 3.0.0

package/dist/esm/define.js

@@ -5,8 +5,7 @@ var define_default = (params, options = {}) => {
   for (const param in params) {
     if (REGISTRY[param] && !overwrite) {
       report("OverwriteToBuiltin", param);
-    } else
-      REGISTRY[param] = params[param];
+    } else REGISTRY[param] = params[param];
   }
 };
 export {

package/dist/esm/iterate.js

@@ -4,42 +4,43 @@ import {
   isFunction,
   isNumber,
   isString,
-  checkIfKeyIsComponent,
-  extendizeByKey,
-  isVariant
+  matchesComponentNaming,
+  isContextComponent,
+  isMethod,
+  overwrite
 } from "@domql/utils";
-import { METHODS_EXL, overwrite } from "./utils/index.js";
-import { isMethod } from "./methods/index.js";
 const throughInitialExec = (element, exclude = {}) => {
   const { __ref: ref } = element;
   for (const param in element) {
-    if (exclude[param])
-      continue;
+    if (exclude[param]) continue;
     const prop = element[param];
-    if (isFunction(prop) && !isMethod(param, element) && !isVariant(param)) {
+    if (isFunction(prop) && !isMethod(param, element)) {
       ref.__exec[param] = prop;
       element[param] = prop(element, element.state, element.context);
     }
   }
 };
-const throughUpdatedExec = (element, options = { excludes: METHODS_EXL }) => {
+const throughUpdatedExec = (element, options = {}) => {
   const { __ref: ref } = element;
   const changes = {};
   for (const param in ref.__exec) {
     const prop = element[param];
     const isDefinedParam = ref.__defineCache[param];
-    if (isDefinedParam)
-      continue;
+    if (isDefinedParam) continue;
     const newExec = ref.__exec[param](element, element.state, element.context);
     const execReturnsString = isString(newExec) || isNumber(newExec);
     if (prop && prop.node && execReturnsString) {
-      overwrite(prop, { text: newExec }, options);
+      overwrite(prop, { text: newExec });
     } else if (newExec !== prop) {
-      if (checkIfKeyIsComponent(param)) {
-        const { extend, ...newElem } = extendizeByKey(newExec, element, param);
-        overwrite(prop, newElem, options);
+      if (matchesComponentNaming(param)) {
+        const { extends: extend, ...newElem } = isContextComponent(
+          newExec,
+          element,
+          param
+        );
+        overwrite(prop, newElem);
       } else {
-        ref.__cached[param] = changes[param] = prop;
+        changes[param] = prop;
         element[param] = newExec;
       }
     }
@@ -60,17 +61,17 @@ const throughExecProps = (element) => {
     }
   }
 };
+const isPropertyInDefines = (key, element) => {
+};
 const throughInitialDefine = (element) => {
   const { define, context, __ref: ref } = element;
   let defineObj = {};
   const hasGlobalDefine = context && isObject(context.define);
-  if (isObject(define))
-    defineObj = { ...define };
-  if (hasGlobalDefine)
-    defineObj = { ...defineObj, ...context.define };
+  if (isObject(define)) defineObj = { ...define };
+  if (hasGlobalDefine) defineObj = { ...defineObj, ...context.define };
   for (const param in defineObj) {
     let elementProp = element[param];
-    if (isFunction(elementProp) && !isMethod(param, element) && !isVariant(param)) {
+    if (isFunction(elementProp) && !isMethod(param, element)) {
       ref.__exec[param] = elementProp;
       const execParam2 = elementProp = exec(elementProp, element);
       if (execParam2) {
@@ -78,9 +79,13 @@ const throughInitialDefine = (element) => {
         ref.__defineCache[param] = elementProp;
       }
     }
-    const execParam = defineObj[param](elementProp, element, element.state, element.context);
-    if (execParam)
-      element[param] = execParam;
+    const execParam = defineObj[param](
+      elementProp,
+      element,
+      element.state,
+      element.context
+    );
+    if (execParam) element[param] = execParam;
   }
   return element;
 };
@@ -88,22 +93,25 @@ 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 };
+  if (isObject(define)) obj = { ...define };
+  if (isObject(context && context.define)) obj = { ...obj, ...context.define };
   for (const param in obj) {
     const execParam = ref.__exec[param];
-    if (execParam)
-      ref.__defineCache[param] = execParam(element, element.state, element.context);
+    if (execParam) {
+      ref.__defineCache[param] = execParam(
+        element,
+        element.state,
+        element.context
+      );
+    }
     const cached = exec(ref.__defineCache[param], element);
-    const newExecParam = obj[param](cached, element, element.state, element.context);
-    if (newExecParam)
-      element[param] = newExecParam;
+    const newExecParam = typeof obj[param] === "function" ? obj[param](cached, element, element.state, element.context) : void 0;
+    if (newExecParam) element[param] = newExecParam;
   }
   return changes;
 };
 export {
+  isPropertyInDefines,
   throughExecProps,
   throughInitialDefine,
   throughInitialExec,

package/dist/esm/methods/set.js

@@ -1,7 +1,6 @@
 import { merge, overwrite } from "@domql/utils";
-import { set, reset } from "../set.js";
+import { set, reset, updateContent, removeContent } from "../set.js";
 import { update } from "../update.js";
-import { removeContent, updateContent } from "../mixins/content.js";
 import {
   call,
   error,
@@ -23,7 +22,7 @@ import {
   variables,
   verbose,
   warn
-} from "./index.js";
+} from "@domql/utils/methods";
 const addMethods = (element, parent, options = {}) => {
   const proto = {
     set,
@@ -52,8 +51,10 @@ const addMethods = (element, parent, options = {}) => {
     error,
     call
   };
-  if (element.context.methods)
+  if (element.context.methods) {
+    ;
     (options.strict ? merge : overwrite)(proto, element.context.methods);
+  }
   Object.setPrototypeOf(element, proto);
 };
 export {

package/dist/esm/methods/v2.js

@@ -1,13 +1,9 @@
 import { isDefined, isFunction, isObjectLike } from "@domql/utils";
-import { parseFilters, REGISTRY } from "../mixins/index.js";
 const defineSetter = (element, key, get, set) => Object.defineProperty(element, key, { get, set });
 const keys = function() {
   const element = this;
   const keys2 = [];
   for (const param in element) {
-    if (REGISTRY[param] && !parseFilters.elementKeys.includes(param)) {
-      continue;
-    }
     keys2.push(param);
   }
   return keys2;
@@ -17,19 +13,15 @@ const parse = function(excl = []) {
   const obj = {};
   const keyList = keys.call(element);
   keyList.forEach((v) => {
-    if (excl.includes(v))
-      return;
+    if (excl.includes(v)) return;
     let val = element[v];
     if (v === "state") {
-      if (element.__ref && element.__ref.__hasRootState)
-        return;
-      if (isFunction(val && val.parse))
-        val = val.parse();
+      if (element.__ref && element.__ref.__hasRootState) return;
+      if (isFunction(val && val.parse)) val = val.parse();
     } else if (v === "props") {
       const { __element, update, ...props } = element[v];
       obj[v] = props;
-    } else if (isDefined(val))
-      obj[v] = val;
+    } else if (isDefined(val)) obj[v] = val;
   });
   return obj;
 };
@@ -37,8 +29,7 @@ const parseDeep = function(excl = []) {
   const element = this;
   const obj = parse.call(element, excl);
   for (const v in obj) {
-    if (excl.includes(v))
-      return;
+    if (excl.includes(v)) return;
     if (isObjectLike(obj[v])) {
       obj[v] = parseDeep.call(obj[v], excl);
     }
@@ -53,7 +44,7 @@ const log = function(...args) {
     args.forEach((v) => console.log(`%c${v}:
 `, "font-weight: bold", element[v]));
   } else {
-    console.log(__ref.path);
+    console.log(__ref == null ? void 0 : __ref.path);
     const keys2 = element.keys();
     keys2.forEach((v) => console.log(`%c${v}:
 `, "font-weight: bold", element[v]));
@@ -73,8 +64,7 @@ const previousElement = function(el) {
   const element = el || this;
   const { key, parent } = element;
   const { __children } = parent.__ref;
-  if (!__children)
-    return;
+  if (!__children) return;
   const currentIndex = __children.indexOf(key);
   return parent[__children[currentIndex - 1]];
 };

package/dist/esm/mixins/attr.js

@@ -1,20 +1,17 @@
-import { exec, isNot, isNull, isUndefined } from "@domql/utils";
+import { deepMerge, exec, isNot, isNull, isUndefined } from "@domql/utils";
 import { report } from "@domql/report";
-import { deepMerge } from "../utils/index.js";
 function attr(params, element, node) {
   const { __ref: ref, props } = element;
   const { __attr } = ref;
-  if (isNot("object"))
-    report("HTMLInvalidAttr", params);
+  if (isNot("object")) report("HTMLInvalidAttr", params);
   if (params) {
-    if (props.attr)
-      deepMerge(params, props.attr);
-    for (const attr2 in params) {
-      const val = exec(params[attr2], element);
-      if (val !== false && !isUndefined(val) && !isNull(val) && node.setAttribute)
+    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) {
         node.setAttribute(attr2, val);
-      else if (node.removeAttribute)
-        node.removeAttribute(attr2);
+      } else if (node.removeAttribute) node.removeAttribute(attr2);
       __attr[attr2] = val;
     }
   }

package/dist/esm/mixins/classList.js

@@ -1,8 +1,7 @@
 import { exec, isObject, isString } from "@domql/utils";
 const assignKeyAsClassname = (element) => {
   const { key } = element;
-  if (element.class === true)
-    element.class = key;
+  if (element.class === true) element.class = key;
   else if (!element.class && typeof key === "string" && key.charAt(0) === "_" && key.charAt(1) !== "_") {
     element.class = key.slice(1);
   }
@@ -11,10 +10,8 @@ const classify = (obj, element) => {
   let className = "";
   for (const item in obj) {
     const param = obj[item];
-    if (typeof param === "boolean" && param)
-      className += ` ${item}`;
-    else if (typeof param === "string")
-      className += ` ${param}`;
+    if (typeof param === "boolean" && param) className += ` ${item}`;
+    else if (typeof param === "string") className += ` ${param}`;
     else if (typeof param === "function") {
       className += ` ${exec(param, element)}`;
     }
@@ -22,18 +19,13 @@ const classify = (obj, element) => {
   return className;
 };
 const classList = (params, element) => {
-  if (!params)
-    return;
+  if (!params) return;
   const { key } = element;
-  if (params === true)
-    params = element.class = { key };
-  if (isString(params))
-    params = element.class = { default: params };
-  if (isObject(params))
-    params = classify(params, element);
+  if (params === true) params = element.class = { key };
+  if (isString(params)) params = element.class = { default: params };
+  if (isObject(params)) params = classify(params, element);
   const className = params.replace(/\s+/g, " ").trim();
-  if (element.ref)
-    element.ref.class = className;
+  if (element.ref) element.ref.class = className;
   return className;
 };
 const applyClassListOnNode = (params, element, node) => {

package/dist/esm/mixins/data.js

@@ -1,12 +1,10 @@
-import { exec, isObject, deepMerge } from "@domql/utils";
+import { isObject, deepMerge, exec } from "@domql/utils";
 import { report } from "@domql/report";
 function data(params, element, node) {
   if (params) {
-    if (element.props.data)
-      deepMerge(params, element.props.data);
+    if (element.props.data) deepMerge(params, element.props.data);
     if (params.showOnNode) {
-      if (!isObject(params))
-        report("HTMLInvalidData", params);
+      if (!isObject(params)) report("HTMLInvalidData", params);
       for (const dataset in params) {
         if (dataset !== "showOnNode") {
           node.dataset[dataset] = exec(params[dataset], element);

package/dist/esm/mixins/html.js

@@ -4,10 +4,8 @@ function html(param, element, node) {
   const prop = exec(param, element) || exec((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element);
   const { __ref } = element;
   if (prop !== __ref.__html) {
-    if (node.nodeName === "SVG")
-      node.textContent = prop;
-    else
-      node.innerHTML = prop;
+    if (node.nodeName === "SVG") node.textContent = prop;
+    else node.innerHTML = prop;
     __ref.__html = prop;
   }
 }

package/dist/esm/mixins/index.js

@@ -1,21 +1,17 @@
 import { attr } from "./attr.js";
 import { applyClasslist } from "./classList.js";
-import { setContent } from "./content.js";
 import { data } from "./data.js";
 import { html } from "./html.js";
 import { style } from "./style.js";
 import { text } from "./text.js";
 import { state } from "./state.js";
 import { scope } from "./scope.js";
-import { REGISTRY } from "./registry.js";
 export * from "./registry.js";
 export {
   attr,
   applyClasslist as classList,
-  setContent as content,
   data,
   html,
-  REGISTRY as registry,
   scope,
   state,
   style,

package/dist/esm/mixins/registry.js

@@ -1,6 +1,5 @@
 import attr from "./attr.js";
 import { classList } from "./classList.js";
-import content from "./content.js";
 import data from "./data.js";
 import html from "./html.js";
 import scope from "./scope.js";
@@ -12,94 +11,35 @@ const REGISTRY = {
   style,
   text,
   html,
-  content,
   data,
   class: classList,
   state,
   scope,
   deps: (param, el) => param || el.parent.deps,
-  extend: {},
-  childExtend: {},
-  childExtendRecursive: {},
+  extends: {},
+  children: {},
+  content: {},
+  childExtends: {},
+  childExtendsRecursive: {},
   props: {},
-  path: {},
   if: {},
   define: {},
-  transform: {},
   __name: {},
   __ref: {},
   __hash: {},
   __text: {},
-  nextElement: {},
-  previousElement: {},
   key: {},
   tag: {},
   query: {},
   parent: {},
   node: {},
-  set: {},
-  reset: {},
-  update: {},
-  error: {},
-  warn: {},
-  call: {},
-  setProps: {},
-  remove: {},
-  updateContent: {},
-  removeContent: {},
   variables: {},
-  lookup: {},
-  lookdown: {},
-  getRef: {},
-  getPath: {},
-  lookdownAll: {},
-  setNodeStyles: {},
-  spotByPath: {},
-  keys: {},
-  log: {},
-  parse: {},
-  parseDeep: {},
   on: {},
   component: {},
-  context: {},
-  $collection: {},
-  $stateCollection: {},
-  $propsCollection: {},
-  $setCollection: {},
-  $setStateCollection: {},
-  $setPropsCollection: {}
+  context: {}
 };
 var registry_default = REGISTRY;
-const parseFilters = {
-  elementKeys: [
-    "tag",
-    "text",
-    "style",
-    "attr",
-    "class",
-    "state",
-    "props",
-    "data",
-    "content",
-    "html",
-    "on",
-    "key",
-    "extend",
-    "childExtend",
-    "childExtendRecursive",
-    "scope",
-    "query",
-    "$collection",
-    "$stateCollection",
-    "$propsCollection"
-  ],
-  propsKeys: ["__element", "update"],
-  stateKeys: []
-};
-const collectionFilters = ["$collection", "$stateCollection", "$propsCollection"];
 export {
   REGISTRY,
-  collectionFilters,
-  registry_default as default,
-  parseFilters
+  registry_default as default
 };

package/dist/esm/mixins/scope.js

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

package/dist/esm/mixins/state.js

@@ -1,13 +1,10 @@
-import { IGNORE_STATE_PARAMS } from "@domql/state";
-import { exec, isObject } from "@domql/utils";
-function state(params, element, node) {
-  const state2 = exec(params, element);
+import { execPromise, isObject, STATE_METHODS } from "@domql/utils";
+async function state(params, element, node) {
+  const state2 = await execPromise(params, element);
   if (isObject(state2)) {
     for (const param in state2) {
-      if (IGNORE_STATE_PARAMS.includes(param))
-        continue;
-      if (!Object.hasOwnProperty.call(state2, param))
-        continue;
+      if (STATE_METHODS.includes(param)) continue;
+      if (!Object.hasOwnProperty.call(state2, param)) continue;
     }
   }
   return element;

package/dist/esm/mixins/style.js

@@ -2,10 +2,8 @@ import { isObject, map } 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)) map(node.style, params, element);
+    else report("HTMLInvalidStyles", params);
   }
 }
 var style_default = style;

package/dist/esm/mixins/text.js

@@ -1,10 +1,7 @@
 import { create } from "../create.js";
-import {
-  exec,
-  isString
-} from "@domql/utils";
-function text(param, element, node) {
-  let prop = exec(param, element);
+import { exec, isString } from "@domql/utils";
+async function text(param, element, node) {
+  let prop = exec(param || element.props.text, element);
   if (isString(prop) && prop.includes("{{")) {
     prop = element.call("replaceLiteralsWithObjectFields", prop);
   }
@@ -12,13 +9,10 @@ function text(param, element, node) {
     node.nodeValue = prop;
   } else if (param !== void 0 || param !== null) {
     if (element.__text) {
-      if (element.__text.text === prop)
-        return;
+      if (element.__text.text === prop) return;
       element.__text.text = prop;
-      if (element.__text.node)
-        element.__text.node.nodeValue = prop;
-    } else
-      create({ tag: "string", text: prop }, element, "__text");
+      if (element.__text.node) element.__text.node.nodeValue = prop;
+    } else await create({ tag: "string", text: prop }, element, "__text");
   }
 }
 var text_default = text;

package/dist/esm/node.js

@@ -1,7 +1,6 @@
-import { exec, isFunction, isObject, isUndefined, isVariant } from "@domql/utils";
+import { isFunction, isMethod, isObject, isUndefined } from "@domql/utils";
 import { applyEventsOnNode, triggerEventOn } from "@domql/event";
 import { cacheNode } from "@domql/render";
-import { isMethod } from "./methods/index.js";
 import { create } from "./create.js";
 import {
   throughExecProps,
@@ -10,60 +9,55 @@ import {
 } from "./iterate.js";
 import { REGISTRY } from "./mixins/index.js";
 import { applyParam } from "./utils/applyParam.js";
-import { propagateEventsFromProps } from "./utils/propEvents.js";
+import setChildren from "./children.js";
+import { setContent } from "./set.js";
 const ENV = "development";
-const createNode = async (element, options) => {
+const createNode = async (element, opts) => {
   let { node, tag, __ref: ref } = element;
+  if (!ref.__if) return element;
   let isNewNode;
   if (!node) {
     isNewNode = true;
-    if (!ref.__if)
-      return element;
     if (tag === "shadow") {
       node = element.node = element.parent.node.attachShadow({ mode: "open" });
-    } else
-      node = element.node = cacheNode(element);
-    triggerEventOn("attachNode", element, options);
+    } else node = element.node = cacheNode(element);
+    await triggerEventOn("attachNode", element, opts);
   }
-  if (ENV === "test" || ENV === "development" || options.alowRefReference) {
+  if (ENV === "test" || ENV === "development" || opts.alowRefReference) {
     node.ref = element;
-    if (isFunction(node.setAttribute))
-      node.setAttribute("key", element.key);
-  }
-  throughExecProps(element);
-  throughInitialDefine(element);
-  throughInitialExec(element);
-  if (element.tag !== "string" && element.tag !== "fragment") {
-    propagateEventsFromProps(element);
-    if (isNewNode && isObject(element.on)) {
-      applyEventsOnNode(element, options);
-    }
+    if (isFunction(node.setAttribute)) node.setAttribute("key", element.key);
   }
+  await throughExecProps(element);
+  await throughInitialDefine(element);
+  await throughInitialExec(element);
+  await applyEventsOnNode(element, { isNewNode, ...opts });
   for (const param in element) {
     const value = element[param];
-    if (!Object.hasOwnProperty.call(element, param))
-      continue;
-    if (isUndefined(value) || isMethod(param, element) || isVariant(param) || isObject(REGISTRY[param]))
+    if (!Object.hasOwnProperty.call(element, param) || isUndefined(value) || isMethod(param, element) || isObject(REGISTRY[param])) {
       continue;
-    const isElement = applyParam(param, element, options);
+    }
+    const isElement = await applyParam(param, element, opts);
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement;
       if (element[param] && !hasDefine && !hasContextDefine) {
         const createAsync = async () => {
-          await create(exec(value, element), element, param, options);
+          await create(value, element, param, opts);
         };
-        if (element.props && element.props.lazyLoad || options.lazyLoad) {
+        if (element.props && element.props.lazyLoad || opts.lazyLoad) {
           window.requestAnimationFrame(async () => {
             await createAsync();
-            if (!options.preventUpdateListener) {
-              triggerEventOn("lazyLoad", element, options);
+            if (!opts.preventUpdateListener) {
+              await triggerEventOn("lazyLoad", element, opts);
             }
           });
-        } else
-          await createAsync();
+        } else await createAsync();
       }
     }
   }
+  const content = element.children ? await setChildren(element.children, element, opts) : element.content || element.content;
+  if (content) {
+    await setContent(content, element, opts);
+  }
   return element;
 };
 var node_default = createNode;