@domql/element 2.31.37 → 2.32.1

package/dist/esm/props/create.js

@@ -22,7 +22,7 @@ const syncProps = async (props, element, opts) => {
     if (IGNORE_PROPS_PARAMS.includes(v)) return;
     let execProps;
     try {
-      execProps = exec(v, element);
+      execProps = exec(v, element, element.state, element.context, opts);
     } catch (e) {
       element.error(e, opts);
     }
@@ -33,7 +33,10 @@ const syncProps = async (props, element, opts) => {
     );
   });
   element.props = mergedProps;
-  const methods = { update: await update.bind(element.props), __element: element };
+  const methods = {
+    update: await update.bind(element.props),
+    __element: element
+  };
   Object.setPrototypeOf(element.props, methods);
   return element.props;
 };
@@ -43,7 +46,7 @@ const createProps = function(element, parent, options) {
     const propsStack = options.cachedProps || createPropsStack(element, parent);
     if (propsStack.length) {
       ref.__props = propsStack;
-      syncProps(propsStack, element);
+      syncProps(propsStack, element, options);
     } else {
       ref.__props = options.cachedProps || [];
       element.props = {};
@@ -56,7 +59,7 @@ const createProps = function(element, parent, options) {
     } catch (e) {
       element.props = {};
       ref.__props = options.cachedProps || [];
-      element.error("Error applying props", e);
+      element.error("Error applying props", e, options);
     }
   }
   const methods = { update: update.bind(element.props), __element: element };

package/dist/esm/props/update.js

@@ -1,12 +1,13 @@
 import { syncProps } from "./create.js";
 import { inheritParentProps } from "./inherit.js";
-const updateProps = (newProps, element, parent) => {
+const updateProps = (newProps, element, parent, opts) => {
   const { __ref } = element;
   let propsStack = __ref.__props;
   const parentProps = inheritParentProps(element, parent);
-  if (parentProps.length) propsStack = __ref.__props = [].concat(parentProps, propsStack);
+  if (parentProps.length)
+    propsStack = __ref.__props = [].concat(parentProps, propsStack);
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack);
-  if (propsStack) syncProps(propsStack, element);
+  if (propsStack) syncProps(propsStack, element, opts);
   return element;
 };
 export {

package/dist/esm/set.js

@@ -7,12 +7,20 @@ import { triggerEventOn, triggerEventOnUpdate } from "@domql/event";
 const resetElement = async (params, element, options) => {
   if (!options.preventRemove) removeContent(element, options);
   const { __ref: ref } = element;
-  await create(params, element, ref.contentElementKey || "content", {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
-    ...OPTIONS.create,
-    ...options
-  });
+  const contentElementKey = setContentKey(element, options);
+  const { __cached } = ref;
+  const newContent = await create(
+    params,
+    element,
+    ref.contentElementKey || "content",
+    {
+      ignoreChildExtend: true,
+      ...registry.defaultOptions,
+      ...OPTIONS.create,
+      ...options
+    }
+  );
+  __cached[contentElementKey] = newContent;
 };
 const reset = async (options) => {
   const element = void 0;
@@ -24,16 +32,35 @@ const reset = async (options) => {
   });
 };
 const set = async function(params, options = {}, el) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const element = el || this;
+  const { __ref: ref } = element;
   if (options.preventContentUpdate || options.preventUpdate && ((_b = (_a = options.preventUpdate).includes) == null ? void 0 : _b.call(_a, "content")))
     return;
   if (options.routerContentElement && options.lastElement) {
     if (options.routerContentElement !== options.lastElement.content) return;
   }
+  const contentKey = setContentKey(element, options);
+  const content = element[contentKey];
+  const __contentRef = content && content.__ref;
   const lazyLoad = element.props && element.props.lazyLoad;
-  const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
+  const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection || ((_c = element.props) == null ? void 0 : _c.children);
   if (options.preventContentUpdate === true && !hasCollection) return;
+  if (!options.forceReset && (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && deepContains(params, content))) {
+    if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+      const beforeUpdateReturns = await triggerEventOnUpdate(
+        "beforeUpdate",
+        params,
+        element,
+        options
+      );
+      if (beforeUpdateReturns === false) return element;
+    }
+    if (content == null ? void 0 : content.update) await content.update({}, options);
+    if (!options.preventUpdateListener)
+      await triggerEventOn("update", element, options);
+    return;
+  }
   if (params) {
     let { childExtend, props } = params;
     if (!props) props = params.props = {};
@@ -41,7 +68,7 @@ const set = async function(params, options = {}, el) {
       params.childExtend = element.childExtend;
       props.ignoreChildExtend = true;
     }
-    if (!(props == null ? void 0 : props.childProps) && ((_c = element.props) == null ? void 0 : _c.childProps)) {
+    if (!(props == null ? void 0 : props.childProps) && ((_d = element.props) == null ? void 0 : _d.childProps)) {
       props.childProps = element.props.childProps;
       props.ignoreChildProps = true;
     }

package/dist/esm/update.js

@@ -54,27 +54,27 @@ const update = async function(params = {}, opts) {
     element,
     options
   );
-  if (snapshotHasUpdated) return;
-  if (checkIfStorm(element, options)) return;
+  if (snapshotHasUpdated) return false;
+  if (checkIfStorm(element, options)) return false;
   if (!options.preventListeners)
     await triggerEventOn("eventStart", element, options);
   if (!options.preventListeners)
     await triggerEventOnUpdate("startUpdate", params, element, options);
   if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
-    return;
+    return false;
   if (!excludes) merge(options, UPDATE_DEFAULT_OPTIONS);
   if (isString(params) || isNumber(params)) {
     params = { text: params };
   }
   const inheritState = await inheritStateUpdates(element, options);
-  if (inheritState === false) return;
+  if (inheritState === false) return false;
   const ifFails = checkIfOnUpdate(element, parent, options);
-  if (ifFails) return;
+  if (ifFails) return false;
   if (ref.__if && !options.preventPropsUpdate) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
     const hasFunctionInProps = ref.__props.filter((v) => isFunction(v));
     const props = params.props || hasParentProps || hasFunctionInProps.length;
-    if (props) updateProps(props, element, parent);
+    if (props) updateProps(props, element, parent, options);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
     const beforeUpdateReturns = await triggerEventOnUpdate(
@@ -86,15 +86,17 @@ const update = async function(params = {}, opts) {
     if (beforeUpdateReturns === false) return element;
   }
   overwriteDeep(element, params, { exclude: METHODS_EXL });
-  throughExecProps(element);
+  throughExecProps(element, options);
   await throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS });
-  await throughUpdatedDefine(element);
+  await throughUpdatedDefine(element, options);
   if (!options.isForced && !options.preventListeners) {
     await triggerEventOn("beforeClassAssign", element, options);
   }
   if (!ref.__if) return false;
   if (!node) {
-    return;
+    return false;
+  }
+  if (element.tag !== "fragment" && !document.body.contains(node)) {
   }
   const {
     preventUpdate,

package/dist/esm/utils/applyParam.js

@@ -2,7 +2,13 @@ import { exec, isFunction } from "@domql/utils";
 import { REGISTRY } from "../mixins/index.js";
 const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element;
-  const prop = await exec(element[param], element);
+  const prop = await exec(
+    element[param],
+    element,
+    element.state,
+    element.context,
+    options
+  );
   const { onlyUpdate } = options;
   const DOMQLProperty = REGISTRY[param];
   const DOMQLPropertyFromContext = context && context.registry && context.registry[param];

package/iterate.js

@@ -65,7 +65,7 @@ export const throughUpdatedExec = async (
   return changes
 }
 
-export const throughExecProps = (element) => {
+export const throughExecProps = (element, opts) => {
   const { __ref: ref } = element
   const { props } = element
   for (const k in props) {
@@ -75,15 +75,21 @@ export const throughExecProps = (element) => {
       return warn.call(element, 'Element was not initiated to execute props')
     const cachedExecProp = ref.__execProps[k]
     if (isFunction(cachedExecProp)) {
-      props[k] = exec(cachedExecProp, element)
+      props[k] = exec(
+        cachedExecProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      )
     } else if (isDefine && isFunction(props[k])) {
       ref.__execProps[k] = props[k]
-      props[k] = exec(props[k], element)
+      props[k] = exec(props[k], element, element.state, element.context, opts)
     }
   }
 }
 
-export const throughInitialDefine = async (element) => {
+export const throughInitialDefine = async (element, opts) => {
   const { define, context, __ref: ref } = element
 
   let defineObj = {}
@@ -100,7 +106,13 @@ export const throughInitialDefine = async (element) => {
       !isVariant(param)
     ) {
       ref.__exec[param] = elementProp
-      const execParam = (elementProp = await exec(elementProp, element))
+      const execParam = (elementProp = await exec(
+        elementProp,
+        element,
+        element.state,
+        element.context,
+        opts
+      ))
 
       if (execParam) {
         elementProp = element[param] = execParam.parse
@@ -121,7 +133,7 @@ export const throughInitialDefine = async (element) => {
   return element
 }
 
-export const throughUpdatedDefine = async (element) => {
+export const throughUpdatedDefine = async (element, opts) => {
   const { context, define, __ref: ref } = element
   const changes = {}
 
@@ -137,7 +149,13 @@ export const throughUpdatedDefine = async (element) => {
         element.state,
         element.context
       )
-    const cached = await exec(ref.__defineCache[param], element)
+    const cached = await exec(
+      ref.__defineCache[param],
+      element,
+      element.state,
+      element.context,
+      opts
+    )
     const newExecParam = await obj[param](
       cached,
       element,

package/mixins/attr.js

@@ -7,14 +7,20 @@ import { deepMerge } from '../utils/index.js'
 /**
  * Recursively add attributes to a DOM node
  */
-export function attr(params, element, node) {
+export function attr(params, element, node, opts) {
   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 attr in params) {
-      const val = exec(params[attr], element)
+      const val = exec(
+        params[attr],
+        element,
+        element.state,
+        element.context,
+        opts
+      )
       // if (__attr[attr] === val) return
       if (
         val !== false &&
@@ -22,7 +28,10 @@ export function attr(params, element, node) {
         !isNull(val) &&
         node.setAttribute
       )
-        node.setAttribute(attr, exec(val, element))
+        node.setAttribute(
+          attr,
+          exec(val, element, element.state, element.context, opts)
+        )
       else if (node.removeAttribute) node.removeAttribute(attr)
       __attr[attr] = val
     }

package/mixins/classList.js

@@ -5,31 +5,36 @@ import { exec, isObject, isString } from '@domql/utils'
 export const assignKeyAsClassname = (element) => {
   const { key } = element
   if (element.class === true) element.class = key
-  else if (!element.class && typeof key === 'string' && key.charAt(0) === '_' && key.charAt(1) !== '_') {
+  else if (
+    !element.class &&
+    typeof key === 'string' &&
+    key.charAt(0) === '_' &&
+    key.charAt(1) !== '_'
+  ) {
     element.class = key.slice(1)
   }
 }
 
 // stringifies class object
-export const classify = (obj, element) => {
+export const classify = (obj, element, opts) => {
   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}`
     else if (typeof param === 'function') {
-      className += ` ${exec(param, element)}`
+      className += ` ${exec(param, element, element.state, element.context, opts)}`
     }
   }
   return className
 }
 
-export const classList = (params, element) => {
+export const classList = (params, element, opts) => {
   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 (isObject(params)) params = classify(params, element, opts)
   // TODO: fails on string
   const className = params.replace(/\s+/g, ' ').trim()
   if (element.ref) element.ref.class = className // TODO: this check is NOT needed in new DOMQL
@@ -37,14 +42,14 @@ export const classList = (params, element) => {
 }
 
 // LEGACY (still needed in old domql)
-export const applyClassListOnNode = (params, element, node) => {
-  const className = classList(params, element)
+export const applyClassListOnNode = (params, element, node, opts) => {
+  const className = classList(params, element, opts)
   node.classList = className
   return className
 }
 
-export function applyClasslist (params, element, node) {
-  applyClassListOnNode(params, element, node)
+export function applyClasslist(params, element, node, opts) {
+  applyClassListOnNode(params, element, node, opts)
 }
 
 export default applyClasslist

package/mixins/content.js

@@ -24,7 +24,7 @@ export const removeContent = function (el, opts = {}) {
   if (element[contentElementKey]) {
     if (element[contentElementKey].node && element.node) {
       if (element[contentElementKey].tag === 'fragment')
-        element.node.innerHTML = ''
+        element.node.innerHTML = '' // TODO: deep check to only remove `content` children and not other children
       else {
         const contentNode = element[contentElementKey].node
         if (contentNode.parentNode === element.node)
@@ -34,13 +34,12 @@ export const removeContent = function (el, opts = {}) {
 
     const { __cached } = ref
     if (__cached && __cached[contentElementKey]) {
-      if (__cached[contentElementKey].tag === 'fragment')
-        __cached[contentElementKey].parent.node.innerHTML = ''
-      else if (
-        __cached[contentElementKey] &&
-        isFunction(__cached[contentElementKey].remove)
-      )
-        __cached[contentElementKey].remove()
+      const cachedContent = __cached[contentElementKey]
+      if (cachedContent.tag === 'fragment')
+        cachedContent.parent.node.innerHTML = ''
+      else if (cachedContent && isFunction(cachedContent.remove))
+        cachedContent.remove()
+      delete __cached[contentElementKey]
     }
 
     ref.__children.splice(ref.__children.indexOf(contentElementKey), 1)

package/mixins/html.js

@@ -6,8 +6,10 @@ import { exec } from '@domql/utils'
  * Appends raw HTML as content
  * an original one as a child
  */
-export function html (param, element, node) {
-  const prop = exec(param, element) || exec(element?.props?.html, element)
+export function html(param, element, node, opts) {
+  const prop =
+    exec(param, element, element.state, element.context, opts) ||
+    exec(element?.props?.html, element, element.state, element.context, opts)
   const { __ref } = element
   if (prop !== __ref.__html) {
     // const parser = new window.DOMParser()

package/mixins/state.js

@@ -3,8 +3,8 @@
 import { IGNORE_STATE_PARAMS } from '@domql/state'
 import { exec, isObject } from '@domql/utils'
 
-export async function state (params, element, node) {
-  const state = exec(params, element)
+export async function state(params, element, node, opts) {
+  const state = exec(params, element, element.state, element.context, opts)
 
   if (isObject(state)) {
     for (const param in state) {

package/mixins/text.js

@@ -1,17 +1,14 @@
 'use strict'
 
 import { create } from '../create.js'
-import {
-  exec,
-  isString
-} from '@domql/utils'
+import { exec, isString } from '@domql/utils'
 
 /**
  * Creates a text node and appends into
  * an original one as a child
  */
-export function text (param, element, node) {
-  let prop = exec(param, element)
+export function text(param, element, node, opts) {
+  let prop = exec(param, element, element.state, element.context, opts)
   if (isString(prop) && prop.includes('{{')) {
     prop = element.call('replaceLiteralsWithObjectFields', prop)
   }

package/node.js

@@ -20,7 +20,7 @@ import {
 import { REGISTRY } from './mixins/index.js'
 import { applyParam } from './utils/applyParam.js'
 import { propagateEventsFromProps } from './utils/propEvents.js'
-import { isNotProduction } from '@domql/utils/env.js'
+// import { isNotProduction } from '@domql/utils/env.js'
 // import { defineSetter } from './methods'
 
 export const createNode = async (element, options) => {
@@ -54,10 +54,10 @@ export const createNode = async (element, options) => {
   // }
 
   // iterate through exec props
-  throughExecProps(element)
+  throughExecProps(element, options)
 
   // iterate through define
-  await throughInitialDefine(element)
+  await throughInitialDefine(element, options)
 
   // iterate through exec
   await throughInitialExec(element)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.31.37",
+  "version": "2.32.1",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -27,12 +27,12 @@
     "prepublish": "npx rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/event": "^2.31.37",
-    "@domql/render": "^2.31.37",
-    "@domql/state": "^2.31.37",
-    "@domql/utils": "^2.31.37"
+    "@domql/event": "^2.32.1",
+    "@domql/render": "^2.32.1",
+    "@domql/state": "^2.32.1",
+    "@domql/utils": "^2.32.1"
   },
-  "gitHead": "4a0a9c683f742b8d81fe3c8c4022939b93058971",
+  "gitHead": "dacd7cc0abd5d46a1be9c04dc99d6f266521970f",
   "devDependencies": {
     "@babel/core": "^7.27.1"
   }

package/props/create.js

@@ -7,14 +7,14 @@ import { inheritParentProps } from './inherit.js'
 
 const createPropsStack = (element, parent) => {
   const { props, __ref: ref } = element
-  const propsStack = ref.__props = inheritParentProps(element, parent)
+  const propsStack = (ref.__props = inheritParentProps(element, parent))
 
   if (isObject(props)) propsStack.push(props)
   else if (props === 'inherit' && parent.props) propsStack.push(parent.props)
   else if (props) propsStack.push(props)
 
   if (isArray(ref.__extend)) {
-    ref.__extend.forEach(extend => {
+    ref.__extend.forEach((extend) => {
       if (extend.props && extend.props !== props) propsStack.push(extend.props)
     })
   }
@@ -28,12 +28,14 @@ export const syncProps = async (props, element, opts) => {
   element.props = {}
   const mergedProps = {}
 
-  props.forEach(v => {
+  props.forEach((v) => {
     if (IGNORE_PROPS_PARAMS.includes(v)) return
     let execProps
     try {
-      execProps = exec(v, element)
-    } catch (e) { element.error(e, opts) }
+      execProps = exec(v, element, element.state, element.context, opts)
+    } catch (e) {
+      element.error(e, opts)
+    }
     // TODO: check if this failing the function props merge
     // if (isObject(execProps) && execProps.__element) return
     // it was causing infinite loop at early days
@@ -45,7 +47,10 @@ export const syncProps = async (props, element, opts) => {
   })
   element.props = mergedProps
 
-  const methods = { update: await update.bind(element.props), __element: element }
+  const methods = {
+    update: await update.bind(element.props),
+    __element: element
+  }
   Object.setPrototypeOf(element.props, methods)
 
   return element.props
@@ -58,7 +63,7 @@ export const createProps = function (element, parent, options) {
     const propsStack = options.cachedProps || createPropsStack(element, parent)
     if (propsStack.length) {
       ref.__props = propsStack
-      syncProps(propsStack, element)
+      syncProps(propsStack, element, options)
     } else {
       ref.__props = options.cachedProps || []
       element.props = {}
@@ -72,7 +77,7 @@ export const createProps = function (element, parent, options) {
     } catch (e) {
       element.props = {}
       ref.__props = options.cachedProps || []
-      element.error('Error applying props', e)
+      element.error('Error applying props', e, options)
     }
   }
 
@@ -82,7 +87,7 @@ export const createProps = function (element, parent, options) {
   return element
 }
 
-async function update (props, options) {
+async function update(props, options) {
   const element = this.__element
   await element.update({ props }, options)
 }

package/props/update.js

@@ -3,15 +3,16 @@
 import { syncProps } from './create.js'
 import { inheritParentProps } from './inherit.js'
 
-export const updateProps = (newProps, element, parent) => {
+export const updateProps = (newProps, element, parent, opts) => {
   const { __ref } = element
   let propsStack = __ref.__props
 
   const parentProps = inheritParentProps(element, parent)
-  if (parentProps.length) propsStack = __ref.__props = [].concat(parentProps, propsStack)
+  if (parentProps.length)
+    propsStack = __ref.__props = [].concat(parentProps, propsStack)
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
 
-  if (propsStack) syncProps(propsStack, element)
+  if (propsStack) syncProps(propsStack, element, opts)
 
   return element
 }