@domql/element 3.1.2 → 3.2.7

package/dist/esm/update.js

@@ -9,16 +9,14 @@ import {
   isUndefined,
   merge,
   overwriteDeep,
-  deepClone,
   isMethod,
   findInheritedState,
-  deepMerge,
   OPTIONS,
   updateProps,
   captureSnapshot,
   propertizeUpdate
 } from "@domql/utils";
-import { applyEvent, triggerEventOn, triggerEventOnUpdate } from "@domql/event";
+import { applyEvent, triggerEventOn, triggerEventOnUpdate } from "./event/index.js";
 import { createState } from "@domql/state";
 import { create } from "./create.js";
 import {
@@ -39,13 +37,8 @@ const UPDATE_DEFAULT_OPTIONS = {
   calleeElement: false,
   exclude: METHODS_EXL
 };
-const update = async function(params = {}, opts) {
-  const calleeElementCache = opts == null ? void 0 : opts.calleeElement;
-  const options = deepClone(
-    isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS,
-    { exclude: ["calleeElement"] }
-  );
-  options.calleeElement = calleeElementCache;
+const update = function(params = {}, opts) {
+  const options = isObject(opts) ? { ...UPDATE_DEFAULT_OPTIONS, ...opts } : { ...UPDATE_DEFAULT_OPTIONS };
   const element = this;
   let ref = element.__ref;
   if (!ref) ref = element.__ref = {};
@@ -55,7 +48,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,37 +60,38 @@ 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);
-    const hasFunctionInProps = ref.__propsStack.filter((v) => isFunction(v));
-    const props = params.props || hasParentProps || hasFunctionInProps.length;
+    const hasFunctionInProps = ref.__propsStack.some(isFunction);
+    const props = params.props || hasParentProps || hasFunctionInProps;
     if (props) updateProps(props, element, parent);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-    const simulate = { ...params, ...element };
-    const beforeUpdateReturns = await triggerEventOnUpdate(
-      "beforeUpdate",
-      params,
-      simulate,
-      options
-    );
-    if (beforeUpdateReturns === false) return element;
+    const hasBeforeUpdate = element.on?.beforeUpdate || element.props?.onBeforeUpdate;
+    if (hasBeforeUpdate) {
+      const simulate = { ...params, ...element };
+      const beforeUpdateReturns = triggerEventOnUpdate(
+        "beforeUpdate",
+        params,
+        simulate,
+        options
+      );
+      if (beforeUpdateReturns === false) return element;
+    }
   }
   overwriteDeep(element, params);
   throughExecProps(element);
   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) {
-    return;
-  }
+  if (!node) return;
   const {
     preventUpdate,
     preventDefineUpdate,
@@ -115,16 +109,20 @@ const update = async function(params = {}, opts) {
       options.preventUpdateAfterCount = 1;
     } else options.preventUpdateAfterCount++;
   }
+  const preventUpdateSet = isArray(preventUpdate) ? new Set(preventUpdate) : null;
+  const preventDefineUpdateSet = isArray(preventDefineUpdate) ? new Set(preventDefineUpdate) : null;
   for (const param in element) {
     const prop = element[param];
-    if (!Object.hasOwnProperty.call(element, param)) continue;
-    const isInPreventUpdate = isArray(preventUpdate) && preventUpdate.includes(param);
-    const isInPreventDefineUpdate = isArray(preventDefineUpdate) && preventDefineUpdate.includes(param);
-    if (isUndefined(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || (preventStateUpdate && param) === "state" || isMethod(param, element) || isObject(REGISTRY[param])) {
+    if (!Object.prototype.hasOwnProperty.call(element, param)) continue;
+    const isInPreventUpdate = preventUpdateSet && preventUpdateSet.has(param);
+    const isInPreventDefineUpdate = preventDefineUpdateSet && preventDefineUpdateSet.has(param);
+    const isRootEventHandler = isFunction(prop) && param.length > 2 && param.charCodeAt(0) === 111 && param.charCodeAt(1) === 110 && // 'on'
+    param.charCodeAt(2) >= 65 && param.charCodeAt(2) <= 90;
+    if (isUndefined(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventStateUpdate && param === "state" || isMethod(param, element) || isRootEventHandler || isObject(REGISTRY[param])) {
       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,39 +131,79 @@ 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 childParams = params[param];
+      if (childParams === void 0 && !options.isForced) continue;
+      const childUpdateCall = () => update.call(prop, childParams, {
         ...options,
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
       if (lazyLoad) {
-        window.requestAnimationFrame(async () => {
-          await childUpdateCall();
-          if (!options.preventUpdateListener) {
-            await triggerEventOn("lazyLoad", element, options);
+        window.requestAnimationFrame(() => {
+          childUpdateCall();
+          if (!options.preventUpdateListener && !options.preventListeners) {
+            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;
-    if (content) {
-      await setContent(content, element, options);
+    const contentKey = ref.contentElementKey || "content";
+    const existingContent = element[contentKey];
+    const childrenProp = params.children || element.children;
+    if (childrenProp) {
+      const content = setChildren(childrenProp, element, opts);
+      if (content && !ref.__noChildrenDifference) {
+        setContent(content, element, options);
+      } else if (existingContent?.__ref && isFunction(existingContent.update)) {
+        const lazyLoad = element.props?.lazyLoad || options.lazyLoad;
+        const contentUpdateCall = () => update.call(existingContent, params[contentKey], {
+          ...options,
+          currentSnapshot: snapshotOnCallee,
+          calleeElement
+        });
+        if (lazyLoad) {
+          window.requestAnimationFrame(() => {
+            contentUpdateCall();
+            if (!options.preventUpdateListener && !options.preventListeners) {
+              triggerEventOn("lazyLoad", element, options);
+            }
+          });
+        } else contentUpdateCall();
+      }
+    } else if (existingContent?.__ref && isFunction(existingContent.update)) {
+      const lazyLoad = element.props?.lazyLoad || options.lazyLoad;
+      const contentUpdateCall = () => update.call(existingContent, params[contentKey], {
+        ...options,
+        currentSnapshot: snapshotOnCallee,
+        calleeElement
+      });
+      if (lazyLoad) {
+        window.requestAnimationFrame(() => {
+          contentUpdateCall();
+          if (!options.preventUpdateListener && !options.preventListeners) {
+            triggerEventOn("lazyLoad", element, options);
+          }
+        });
+      } else contentUpdateCall();
+    } else {
+      const content = element.children || params.content;
+      if (content) {
+        setContent(content, element, options);
+      }
     }
   }
-  if (!preventUpdateListener) {
-    await triggerEventOn("update", element, options);
+  if (!preventUpdateListener && !options.preventListeners) {
+    triggerEventOn("update", element, options);
   }
 };
-const checkIfOnUpdate = async (element, parent, options) => {
-  var _a, _b, _c;
-  if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent) {
+const checkIfOnUpdate = (element, parent, options) => {
+  if (!isFunction(element.if) && !isFunction(element.props?.if) || !parent) {
     return;
   }
   const ref = element.__ref;
-  const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))(
+  const ifPassed = (element.if || element.props?.if)(
     element,
     element.state,
     element.context,
@@ -193,22 +231,22 @@ const checkIfOnUpdate = async (element, parent, options) => {
       const contentKey = ref.contentElementKey;
       if (element.children) {
         element.removeContent();
-      } else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) {
+      } else if (element[contentKey]?.parseDeep) {
         element[contentKey] = element[contentKey].parseDeep();
       }
       const previousElement = element.previousElement();
-      const previousNode = previousElement == null ? void 0 : previousElement.node;
-      const hasPrevious = previousNode == null ? void 0 : previousNode.parentNode;
+      const previousNode = previousElement?.node;
+      const hasPrevious = previousNode?.parentNode;
       const nextElement = element.nextElement();
-      const nextNode = nextElement == null ? void 0 : nextElement.node;
-      const hasNext = nextNode == null ? void 0 : nextNode.parentNode;
+      const nextNode = nextElement?.node;
+      const hasNext = nextNode?.parentNode;
       const attachOptions = (hasPrevious || hasNext) && {
         position: hasPrevious ? "after" : hasNext ? "before" : null,
         node: hasPrevious && previousNode || hasNext && nextNode
       };
       delete element.__ref;
       delete element.parent;
-      const createdElement = await create(
+      const createdElement = create(
         element,
         parent,
         element.key,
@@ -216,11 +254,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,14 +263,14 @@ 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;
   const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
   if (preventUpdateTriggerStateUpdate) return;
   if (!stateKey && !ref.__hasRootState) {
-    element.state = parent && parent.state || {};
+    element.state = parent?.state || {};
     return;
   }
   const shouldForceFunctionState = isFunction(stateKey) && !isHoisted && execStateFunction;
@@ -253,7 +287,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 +295,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,21 +1,21 @@
-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];
+  const DOMQLPropertyFromContext = context?.registry?.[param];
   const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty;
-  const hasDefine = element.define && element.define[param];
-  const hasContextDefine = context && context.define && context.define[param];
+  const hasDefine = element.define?.[param];
+  const hasContextDefine = context?.define?.[param];
   if (!ref.__if) return;
   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) => {
+  for (let i = 0; i < extend.length; i++) flattenExtend(extend[i], 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 (e === "parent" || e === "node" || e === "__element") 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?.components || options.components;
+  const PAGES = context?.pages || options.pages;
+  if (isString(extend)) {
+    const componentExists = COMPONENTS && (COMPONENTS[extend + "." + variant] || COMPONENTS[extend] || COMPONENTS["smbls." + extend]);
+    const pageExists = PAGES && extend.charCodeAt(0) === 47 && 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/index.js

@@ -1,3 +1,4 @@
+export * from "./extendUtils.js";
 const METHODS_EXL = [];
 export {
   METHODS_EXL

package/dist/esm/utils/propEvents.js

@@ -0,0 +1,36 @@
+import { isFunction, lowercaseFirstLetter } from "@domql/utils";
+const propagateEventsFromProps = (element) => {
+  const { props, on } = element;
+  for (const v in props) {
+    if (v.charCodeAt(0) !== 111 || v.charCodeAt(1) !== 110) continue;
+    const eventName = lowercaseFirstLetter(v.slice(2));
+    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;
+  }
+};
+const propagateEventsFromElement = (element) => {
+  const { on } = element;
+  for (const param in element) {
+    if (param.charCodeAt(0) !== 111 || param.charCodeAt(1) !== 110 || !Object.prototype.hasOwnProperty.call(element, param)) continue;
+    const fn = element[param];
+    if (!isFunction(fn)) continue;
+    const eventName = lowercaseFirstLetter(param.slice(2));
+    const origEvent = on[eventName];
+    if (isFunction(origEvent)) {
+      on[eventName] = (...args) => {
+        const ret = origEvent(...args);
+        if (ret !== false) return fn(...args);
+      };
+    } else on[eventName] = fn;
+  }
+};
+export {
+  propagateEventsFromElement,
+  propagateEventsFromProps
+};