@domql/element 3.2.3 → 3.2.8

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 {
@@ -40,12 +38,7 @@ const UPDATE_DEFAULT_OPTIONS = {
   exclude: METHODS_EXL
 };
 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,
-    { exclude: ["calleeElement"] }
-  );
-  options.calleeElement = calleeElementCache;
+  const options = isObject(opts) ? { ...UPDATE_DEFAULT_OPTIONS, ...opts } : { ...UPDATE_DEFAULT_OPTIONS };
   const element = this;
   let ref = element.__ref;
   if (!ref) ref = element.__ref = {};
@@ -73,19 +66,22 @@ const update = function(params = {}, opts) {
   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 = 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);
@@ -95,9 +91,7 @@ const update = function(params = {}, opts) {
     triggerEventOn("beforeClassAssign", element, options);
   }
   if (!ref.__if) return false;
-  if (!node) {
-    return;
-  }
+  if (!node) return;
   const {
     preventUpdate,
     preventDefineUpdate,
@@ -115,12 +109,16 @@ const update = 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;
@@ -133,7 +131,9 @@ const update = function(params = {}, opts) {
       if (options.onEachUpdate) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
-      const childUpdateCall = () => 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
@@ -141,7 +141,7 @@ const update = function(params = {}, opts) {
       if (lazyLoad) {
         window.requestAnimationFrame(() => {
           childUpdateCall();
-          if (!options.preventUpdateListener) {
+          if (!options.preventUpdateListener && !options.preventListeners) {
             triggerEventOn("lazyLoad", element, options);
           }
         });
@@ -149,23 +149,61 @@ const update = function(params = {}, opts) {
     }
   }
   if (!preventContentUpdate) {
-    const children = params.children || element.children;
-    const content = children ? setChildren(children, element, opts) : element.children || params.content;
-    if (content) {
-      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) {
+  if (!preventUpdateListener && !options.preventListeners) {
     triggerEventOn("update", element, options);
   }
 };
 const checkIfOnUpdate = (element, parent, options) => {
-  var _a, _b, _c;
-  if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent) {
+  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,15 +231,15 @@ const checkIfOnUpdate = (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
@@ -232,7 +270,7 @@ const inheritStateUpdates = (element, options) => {
   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;

package/dist/esm/utils/applyParam.js

@@ -5,10 +5,10 @@ const applyParam = (param, element, options) => {
   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) {

package/dist/esm/utils/extendUtils.js

@@ -27,7 +27,7 @@ const getExtendStackRegistry = (extend, stack) => {
   return setHashedExtend(extend, stack);
 };
 const extractArrayExtend = (extend, stack, context) => {
-  extend.forEach((each) => flattenExtend(each, stack, context));
+  for (let i = 0; i < extend.length; i++) flattenExtend(extend[i], stack, context);
   return stack;
 };
 const deepExtend = (extend, stack, context) => {
@@ -47,7 +47,7 @@ const flattenExtend = (extend, stack, context) => {
 };
 const deepMergeExtend = (element, extend) => {
   for (const e in extend) {
-    if (["parent", "node", "__element"].indexOf(e) > -1) continue;
+    if (e === "parent" || e === "node" || e === "__element") continue;
     const elementProp = element[e];
     const extendProp = extend[e];
     if (elementProp === void 0) {
@@ -71,11 +71,11 @@ const cloneAndMergeArrayExtend = (stack) => {
   }, {});
 };
 const fallbackStringExtend = (extend, context, options = {}, variant) => {
-  const COMPONENTS = context && context.components || options.components;
-  const PAGES = context && context.pages || options.pages;
+  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.startsWith("/") && PAGES[extend];
+    const pageExists = PAGES && extend.charCodeAt(0) === 47 && PAGES[extend];
     if (componentExists) return componentExists;
     else if (pageExists) return pageExists;
     else {

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

@@ -1,9 +1,9 @@
 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]);
+  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)) {
@@ -12,8 +12,25 @@ const propagateEventsFromProps = (element) => {
         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
 };