@domql/element 2.5.200 → 3.0.0

package/dist/esm/iterate.js

@@ -4,24 +4,23 @@ 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;
     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) {
@@ -31,13 +30,17 @@ const throughUpdatedExec = (element, options = { excludes: METHODS_EXL }) => {
     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;
       }
     }
@@ -58,6 +61,8 @@ const throughExecProps = (element) => {
     }
   }
 };
+const isPropertyInDefines = (key, element) => {
+};
 const throughInitialDefine = (element) => {
   const { define, context, __ref: ref } = element;
   let defineObj = {};
@@ -66,7 +71,7 @@ const throughInitialDefine = (element) => {
   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) {
@@ -74,7 +79,12 @@ const throughInitialDefine = (element) => {
         ref.__defineCache[param] = elementProp;
       }
     }
-    const execParam = defineObj[param](elementProp, element, element.state, element.context);
+    const execParam = defineObj[param](
+      elementProp,
+      element,
+      element.state,
+      element.context
+    );
     if (execParam) element[param] = execParam;
   }
   return element;
@@ -87,14 +97,21 @@ const throughUpdatedDefine = (element) => {
   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);
+    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,7 +51,10 @@ const addMethods = (element, parent, options = {}) => {
     error,
     call
   };
-  if (element.context.methods) (options.strict ? merge : overwrite)(proto, 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;
@@ -48,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]));

package/dist/esm/mixins/attr.js

@@ -1,16 +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 (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) node.setAttribute(attr2, val);
-      else if (node.removeAttribute) node.removeAttribute(attr2);
+    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);
       __attr[attr2] = val;
     }
   }

package/dist/esm/mixins/data.js

@@ -1,4 +1,4 @@
-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) {

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,5 +1,5 @@
 import { isFunction, isObject } from "@domql/utils";
-function scope(params, element, node) {
+async 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,9 @@
-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 (STATE_METHODS.includes(param)) continue;
       if (!Object.hasOwnProperty.call(state2, param)) continue;
     }
   }

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);
   }
@@ -15,7 +12,7 @@ function text(param, element, node) {
       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");
+    } 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,54 +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);
+    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);
-    }
-  }
+  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])) continue;
-    const isElement = applyParam(param, element, options);
+    if (!Object.hasOwnProperty.call(element, param) || isUndefined(value) || isMethod(param, element) || isObject(REGISTRY[param])) {
+      continue;
+    }
+    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();
       }
     }
   }
+  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;

package/dist/esm/set.js

@@ -1,72 +1,144 @@
-import { deepContains, setContentKey } from "@domql/utils";
-import { OPTIONS } from "./cache/options.js";
+import { deepContains, execPromise, isFunction, OPTIONS } from "@domql/utils";
 import { create } from "./create.js";
-import { registry } from "./mixins/index.js";
-import { removeContent } from "./mixins/content.js";
 import { triggerEventOn, triggerEventOnUpdate } from "@domql/event";
-const resetElement = async (params, element, options) => {
-  if (!options.preventRemove) removeContent(element, options);
+const setContentKey = (element, opts = {}) => {
   const { __ref: ref } = element;
-  await create(params, element, ref.contentElementKey || "content", {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
-    ...OPTIONS.create,
-    ...options
-  });
+  const contentElementKey = opts.contentElementKey;
+  if (!ref.contentElementKey || contentElementKey !== ref.contentElementKey) {
+    ref.contentElementKey = contentElementKey || "content";
+  }
+  return ref.contentElementKey;
 };
-const reset = (options) => {
+const reset = async (options) => {
   const element = void 0;
-  create(element, element.parent, void 0, {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
+  await create(element, element.parent, void 0, {
+    ignoreChildExtends: true,
+    ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   });
 };
+const resetContent = async (params, element, opts) => {
+  var _a;
+  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 (contentElementKey !== "content") opts.contentElementKey = "content";
+  return contentElem;
+};
+const updateContent = async 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);
+  }
+};
+async function setContent(param, element, opts) {
+  const content = await execPromise(param, element);
+  if (content && element) {
+    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") {
+    opts.contentElementKey = "content";
+  }
+  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 (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);
+    }
+    if (isFunction(content.remove)) {
+      content.remove();
+    }
+  }
+  delete element[contentElementKey];
+};
 const set = async function(params, options = {}, el) {
   var _a;
   const element = el || this;
   const { __ref: ref } = element;
-  const content = setContentKey(element, options);
+  const contentElementKey = setContentKey(element, options);
+  const content = element[contentElementKey];
   const __contentRef = content && content.__ref;
   const lazyLoad = element.props && element.props.lazyLoad;
-  const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
-  if (options.preventContentUpdate === true && !hasCollection) return;
-  if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && deepContains(params, content)) {
+  const hasChildren = element.children;
+  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 (!options.preventBeforeUpdateListener && !options.preventListeners) {
-      const beforeUpdateReturns = await triggerEventOnUpdate("beforeUpdate", params, element, options);
+      const beforeUpdateReturns = await triggerEventOnUpdate(
+        "beforeUpdate",
+        params,
+        element,
+        options
+      );
       if (beforeUpdateReturns === false) return element;
     }
-    if (content == null ? void 0 : content.update) content.update();
-    if (!options.preventUpdateListener) await triggerEventOn("update", element, options);
+    await content.update(params);
+    if (!options.preventUpdateListener && !options.preventListeners) {
+      await triggerEventOn("update", element, options);
+    }
     return;
   }
-  if (params) {
-    let { childExtend, props } = params;
-    if (!props) props = params.props = {};
-    if (!childExtend && element.childExtend) {
-      params.childExtend = element.childExtend;
-      props.ignoreChildExtend = true;
+  if (!params) return element;
+  let { childExtends, props, tag } = params;
+  if (!props) props = params.props = {};
+  if (tag === "fragment") {
+    if (!childExtends && element.childExtends) {
+      params.childExtends = element.childExtends;
+      props.ignoreChildExtends = true;
     }
     if (!(props == null ? void 0 : props.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
       props.childProps = element.props.childProps;
       props.ignoreChildProps = true;
     }
-    if (lazyLoad) {
-      window.requestAnimationFrame(async () => {
-        await resetElement(params, element, options);
-        if (!options.preventUpdateListener) {
-          triggerEventOn("lazyLoad", element, options);
-        }
-      });
-    } else await resetElement(params, element, options);
   }
-  return element;
+  if (lazyLoad) {
+    window.requestAnimationFrame(async () => {
+      await resetContent(params, element, options);
+      if (!options.preventUpdateListener) {
+        await triggerEventOn("lazyLoad", element, options);
+      }
+    });
+  } else {
+    await resetContent(params, element, options);
+  }
 };
 var set_default = set;
 export {
   set_default as default,
+  removeContent,
   reset,
-  resetElement,
-  set
+  resetContent,
+  set,
+  setContent,
+  setContentKey,
+  updateContent
 };