@domql/element 3.1.1 → 3.2.3

package/dist/esm/node.js

@@ -12,7 +12,7 @@ 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 createNode = (element, opts) => {
   let { node, tag, __ref: ref } = element;
   if (!ref.__if) return element;
   let isNewNode;
@@ -21,42 +21,42 @@ 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);
+  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])) {
       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.content || element.content;
   if (content) {
-    await setContent(content, element, opts);
+    setContent(content, element, opts);
   }
   return element;
 };

package/dist/esm/set.js

@@ -1,4 +1,4 @@
-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";
 const setContentKey = (element, opts = {}) => {
@@ -9,45 +9,40 @@ const setContentKey = (element, opts = {}) => {
   }
   return ref.contentElementKey;
 };
-const reset = async (options) => {
+const reset = (options) => {
   const element = void 0;
-  await create(element, element.parent, void 0, {
+  create(element, element.parent, void 0, {
     ignoreChildExtends: true,
     ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   });
 };
-const resetContent = async (params, element, opts) => {
+const resetContent = (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
-    }
-  );
+  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 = {}) {
@@ -79,7 +74,7 @@ const removeContent = function(el, opts = {}) {
   }
   delete element[contentElementKey];
 };
-const set = async function(params, options = {}, el) {
+const set = function(params, options = {}, el) {
   var _a;
   const element = el || this;
   const { __ref: ref } = element;
@@ -93,7 +88,7 @@ const set = async function(params, options = {}, el) {
   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(
+      const beforeUpdateReturns = triggerEventOnUpdate(
         "beforeUpdate",
         params,
         element,
@@ -101,9 +96,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;
   }
@@ -121,14 +116,14 @@ const set = async function(params, options = {}, el) {
     }
   }
   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;

package/dist/esm/update.js

@@ -39,7 +39,7 @@ const UPDATE_DEFAULT_OPTIONS = {
   calleeElement: false,
   exclude: METHODS_EXL
 };
-const update = async function(params = {}, opts) {
+const update = function(params = {}, opts) {
   const calleeElementCache = opts == null ? void 0 : opts.calleeElement;
   const options = deepClone(
     isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS,
@@ -55,7 +55,7 @@ const update = async function(params = {}, opts) {
   );
   if (snapshotHasUpdated) return;
   if (!options.preventListeners) {
-    await triggerEventOnUpdate("startUpdate", params, element, options);
+    triggerEventOnUpdate("startUpdate", params, element, options);
   }
   const { parent, node, key } = element;
   const { exclude, preventInheritAtCurrentState } = options;
@@ -67,9 +67,9 @@ const update = async function(params = {}, opts) {
     params = { text: params };
   }
   params = propertizeUpdate.call(element, params);
-  const inheritState = await inheritStateUpdates(element, options);
+  const inheritState = inheritStateUpdates(element, options);
   if (inheritState === false) return;
-  const ifFails = await checkIfOnUpdate(element, parent, options);
+  const ifFails = checkIfOnUpdate(element, parent, options);
   if (ifFails) return;
   if (ref.__if && !options.preventPropsUpdate) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
@@ -79,7 +79,7 @@ const update = async function(params = {}, opts) {
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
     const simulate = { ...params, ...element };
-    const beforeUpdateReturns = await triggerEventOnUpdate(
+    const beforeUpdateReturns = triggerEventOnUpdate(
       "beforeUpdate",
       params,
       simulate,
@@ -92,7 +92,7 @@ const update = async function(params = {}, opts) {
   throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS });
   throughUpdatedDefine(element);
   if (!options.isForced && !options.preventListeners) {
-    await triggerEventOn("beforeClassAssign", element, options);
+    triggerEventOn("beforeClassAssign", element, options);
   }
   if (!ref.__if) return false;
   if (!node) {
@@ -124,7 +124,7 @@ const update = async function(params = {}, opts) {
       continue;
     }
     if (preventStateUpdate === "once") options.preventStateUpdate = false;
-    const isElement = await applyParam(param, element, options);
+    const isElement = applyParam(param, element, options);
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement;
       const canUpdate = isObject(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
@@ -133,33 +133,33 @@ const update = async function(params = {}, opts) {
       if (options.onEachUpdate) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
-      const childUpdateCall = async () => await update.call(prop, params[prop], {
+      const childUpdateCall = () => update.call(prop, params[prop], {
         ...options,
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
       if (lazyLoad) {
-        window.requestAnimationFrame(async () => {
-          await childUpdateCall();
+        window.requestAnimationFrame(() => {
+          childUpdateCall();
           if (!options.preventUpdateListener) {
-            await triggerEventOn("lazyLoad", element, options);
+            triggerEventOn("lazyLoad", element, options);
           }
         });
-      } else await childUpdateCall();
+      } else childUpdateCall();
     }
   }
   if (!preventContentUpdate) {
     const children = params.children || element.children;
-    const content = children ? await setChildren(children, element, opts) : element.children || params.content;
+    const content = children ? setChildren(children, element, opts) : element.children || params.content;
     if (content) {
-      await setContent(content, element, options);
+      setContent(content, element, options);
     }
   }
   if (!preventUpdateListener) {
-    await triggerEventOn("update", element, options);
+    triggerEventOn("update", element, options);
   }
 };
-const checkIfOnUpdate = async (element, parent, options) => {
+const checkIfOnUpdate = (element, parent, options) => {
   var _a, _b, _c;
   if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent) {
     return;
@@ -208,7 +208,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
       };
       delete element.__ref;
       delete element.parent;
-      const createdElement = await create(
+      const createdElement = create(
         element,
         parent,
         element.key,
@@ -216,11 +216,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
         attachOptions
       );
       if (options.preventUpdate !== true && element.on && isFunction(element.on.update)) {
-        await applyEvent(
-          element.on.update,
-          createdElement,
-          createdElement.state
-        );
+        applyEvent(element.on.update, createdElement, createdElement.state);
       }
       return createdElement;
     }
@@ -229,7 +225,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
     delete ref.__if;
   }
 };
-const inheritStateUpdates = async (element, options) => {
+const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element;
   const stateKey = ref.__state;
   const { parent, state } = element;
@@ -253,7 +249,7 @@ const inheritStateUpdates = async (element, options) => {
   const keyInParentState = findInheritedState(element, element.parent);
   if (!keyInParentState || options.preventInheritedStateUpdate) return;
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {
-    const initStateReturns = await triggerEventOnUpdate(
+    const initStateReturns = triggerEventOnUpdate(
       "beforeStateUpdate",
       keyInParentState,
       element,
@@ -261,19 +257,14 @@ const inheritStateUpdates = async (element, options) => {
     );
     if (initStateReturns === false) return element;
   }
-  const newState = await createStateUpdate(element, parent, options);
+  const newState = createStateUpdate(element, parent, options);
   if (!options.preventStateUpdateListener && !options.preventListeners) {
-    await triggerEventOnUpdate(
-      "stateUpdate",
-      newState.parse(),
-      element,
-      options
-    );
+    triggerEventOnUpdate("stateUpdate", newState.parse(), element, options);
   }
 };
-const createStateUpdate = async (element, parent, options) => {
+const createStateUpdate = (element, parent, options) => {
   const __stateChildren = element.state.__children;
-  const newState = await createState(element, parent);
+  const newState = createState(element, parent);
   element.state = newState;
   for (const child in __stateChildren) {
     if (newState[child]) newState.__children[child] = __stateChildren[child];

package/dist/esm/utils/applyParam.js

@@ -1,8 +1,8 @@
-import { isFunction } from "@domql/utils";
+import { exec, isFunction } from "@domql/utils";
 import { REGISTRY } from "../mixins/index.js";
-const applyParam = async (param, element, options) => {
+const applyParam = (param, element, options) => {
   const { node, context, __ref: ref } = element;
-  const prop = element[param];
+  const prop = exec(element[param], element);
   const { onlyUpdate } = options;
   const DOMQLProperty = REGISTRY[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];
@@ -13,9 +13,9 @@ const applyParam = async (param, element, options) => {
   const hasOnlyUpdate = onlyUpdate ? onlyUpdate === param || element.lookup(onlyUpdate) : true;
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if (isFunction(isGlobalTransformer)) {
-      await isGlobalTransformer(prop, element, node, options);
-      return;
+      isGlobalTransformer(prop, element, node, options);
     }
+    return;
   }
   return { hasDefine, hasContextDefine };
 };

package/dist/esm/utils/extendUtils.js

@@ -0,0 +1,119 @@
+import {
+  isArray,
+  isFunction,
+  isObject,
+  isString,
+  deepClone,
+  isNotProduction
+} from "@domql/utils";
+const generateHash = () => Math.random().toString(36).substring(2);
+const extendStackRegistry = {};
+const extendCachedRegistry = {};
+const getHashedExtend = (extend) => {
+  return extendStackRegistry[extend.__hash];
+};
+const setHashedExtend = (extend, stack) => {
+  const hash = generateHash();
+  if (!isString(extend)) {
+    extend.__hash = hash;
+  }
+  extendStackRegistry[hash] = stack;
+  return stack;
+};
+const getExtendStackRegistry = (extend, stack) => {
+  if (extend.__hash) {
+    return stack.concat(getHashedExtend(extend));
+  }
+  return setHashedExtend(extend, stack);
+};
+const extractArrayExtend = (extend, stack, context) => {
+  extend.forEach((each) => flattenExtend(each, stack, context));
+  return stack;
+};
+const deepExtend = (extend, stack, context) => {
+  const extendOflattenExtend = extend.extend;
+  if (extendOflattenExtend) {
+    flattenExtend(extendOflattenExtend, stack, context);
+  }
+  return stack;
+};
+const flattenExtend = (extend, stack, context) => {
+  if (!extend) return stack;
+  if (isArray(extend)) return extractArrayExtend(extend, stack, context);
+  if (isString(extend)) extend = fallbackStringExtend(extend, context);
+  stack.push(extend);
+  if (extend.extend) deepExtend(extend, stack, context);
+  return stack;
+};
+const deepMergeExtend = (element, extend) => {
+  for (const e in extend) {
+    if (["parent", "node", "__element"].indexOf(e) > -1) continue;
+    const elementProp = element[e];
+    const extendProp = extend[e];
+    if (elementProp === void 0) {
+      element[e] = extendProp;
+    } else if (isObject(elementProp) && isObject(extendProp)) {
+      deepMergeExtend(elementProp, extendProp);
+    } else if (isArray(elementProp) && isArray(extendProp)) {
+      element[e] = elementProp.concat(extendProp);
+    } else if (isArray(elementProp) && isObject(extendProp)) {
+      const obj = deepMergeExtend({}, elementProp);
+      element[e] = deepMergeExtend(obj, extendProp);
+    } else if (elementProp === void 0 && isFunction(extendProp)) {
+      element[e] = extendProp;
+    }
+  }
+  return element;
+};
+const cloneAndMergeArrayExtend = (stack) => {
+  return stack.reduce((a, c) => {
+    return deepMergeExtend(a, deepClone(c));
+  }, {});
+};
+const fallbackStringExtend = (extend, context, options = {}, variant) => {
+  const COMPONENTS = context && context.components || options.components;
+  const PAGES = context && context.pages || options.pages;
+  if (isString(extend)) {
+    const componentExists = COMPONENTS && (COMPONENTS[extend + "." + variant] || COMPONENTS[extend] || COMPONENTS["smbls." + extend]);
+    const pageExists = PAGES && extend.startsWith("/") && PAGES[extend];
+    if (componentExists) return componentExists;
+    else if (pageExists) return pageExists;
+    else {
+      if (options.verbose && isNotProduction()) {
+        console.warn("Extend is string but component was not found:", extend);
+      }
+      return {};
+    }
+  }
+  return extend;
+};
+const jointStacks = (extendStack, childExtendStack) => {
+  return [].concat(extendStack.slice(0, 1)).concat(childExtendStack.slice(0, 1)).concat(extendStack.slice(1)).concat(childExtendStack.slice(1));
+};
+const getExtendStack = (extend, context) => {
+  if (!extend) return [];
+  if (extend.__hash) return getHashedExtend(extend) || [];
+  const stack = flattenExtend(extend, [], context);
+  return getExtendStackRegistry(extend, stack);
+};
+const getExtendMerged = (extend) => {
+  const stack = getExtendStack(extend);
+  return cloneAndMergeArrayExtend(stack);
+};
+export {
+  cloneAndMergeArrayExtend,
+  deepExtend,
+  deepMergeExtend,
+  extendCachedRegistry,
+  extendStackRegistry,
+  extractArrayExtend,
+  fallbackStringExtend,
+  flattenExtend,
+  generateHash,
+  getExtendMerged,
+  getExtendStack,
+  getExtendStackRegistry,
+  getHashedExtend,
+  jointStacks,
+  setHashedExtend
+};

package/dist/esm/utils/propEvents.js

@@ -0,0 +1,19 @@
+import { isFunction, lowercaseFirstLetter } from "@domql/utils";
+const propagateEventsFromProps = (element) => {
+  const { props, on } = element;
+  const eventKeysFromProps = Object.keys(props).filter((key) => key.startsWith("on"));
+  eventKeysFromProps.forEach((v) => {
+    const eventName = lowercaseFirstLetter(v.split("on")[1]);
+    const origEvent = on[eventName];
+    const funcFromProps = props[v];
+    if (isFunction(origEvent)) {
+      on[eventName] = (...args) => {
+        const originalEventRetunrs = origEvent(...args);
+        if (originalEventRetunrs !== false) return funcFromProps(...args);
+      };
+    } else on[eventName] = funcFromProps;
+  });
+};
+export {
+  propagateEventsFromProps
+};

package/extend.js

@@ -0,0 +1,98 @@
+'use strict'
+
+import { isFunction, exec, isProduction } from '@domql/utils'
+import {
+  getExtendStack,
+  jointStacks,
+  cloneAndMergeArrayExtend,
+  deepMergeExtend,
+  fallbackStringExtend
+} from './utils/index.js'
+
+let mainExtend
+
+/**
+ * Checks whether element has `extend` or is a part
+ * of parent's `childExtend` extend
+ */
+export 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)
+
+  // if (isProduction()) delete element.extend
+  delete element.extend
+
+  let childExtendStack = []
+  if (parent) {
+    element.parent = parent
+    // Assign parent attr to the element
+    if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
+      childExtendStack = getExtendStack(parent.childExtend, context)
+
+      // if (!options.ignoreChildExtend && !(props && exec(props, element).ignoreChildExtend)) {
+      //   const ignoreChildExtendRecursive = props && exec(props, element).ignoreChildExtendRecursive
+
+      const ignoreChildExtendRecursive =
+        props && props.ignoreChildExtendRecursive
+      if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
+        const canExtendRecursive = element.key !== '__text'
+        if (canExtendRecursive) {
+          const childExtendRecursiveStack = getExtendStack(
+            parent.childExtendRecursive,
+            context
+          )
+          // add error if childExtendRecursive contains element which goes to infinite loop
+          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 && context.components) || options.components
+  const component = exec(element.component || mergedExtend.component, element)
+  if (component && COMPONENTS && COMPONENTS[component]) {
+    const componentExtend = cloneAndMergeArrayExtend(
+      getExtendStack(COMPONENTS[component])
+    )
+    mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
+  }
+
+  const merged = deepMergeExtend(element, mergedExtend)
+  return merged
+}