@domql/element 2.5.198 → 3.0.0

package/set.js

@@ -1,79 +1,167 @@
 'use strict'
 
-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'
 
-export const resetElement = async (params, element, options) => {
-  if (!options.preventRemove) removeContent(element, options)
+export 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
 }
 
-export const reset = (options) => {
+export const reset = async options => {
   const element = this
-  create(element, element.parent, undefined, {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
+  await create(element, element.parent, undefined, {
+    ignoreChildExtends: true,
+    ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   })
 }
 
+export const resetContent = async (params, element, opts) => {
+  const contentElementKey = setContentKey(element, opts)
+  if (element[contentElementKey]?.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' // reset to default
+  return contentElem
+}
+
+export 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)
+  }
+}
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export async function setContent (param, element, opts) {
+  const content = await execPromise(param, element)
+
+  if (content && element) {
+    set.call(element, content, opts)
+  }
+}
+
+export const removeContent = function (el, opts = {}) {
+  const element = el || this
+
+  const contentElementKey = setContentKey(element, opts)
+  if (opts.contentElementKey !== 'content') {
+    opts.contentElementKey = 'content'
+  }
+
+  const content = element[contentElementKey]
+  if (!content) return
+
+  // Handle fragment removal
+  if (content.tag === 'fragment' && content.__ref?.__children) {
+    // Remove all child nodes
+    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 {
+    // Handle regular element removal
+    if (content.node && content.node.parentNode) {
+      content.node.parentNode.removeChild(content.node)
+    }
+    if (isFunction(content.remove)) {
+      content.remove()
+    }
+  }
+
+  delete element[contentElementKey]
+}
+
 export const set = async function (params, options = {}, el) {
   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
+  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 (ref.__noCollectionDifference || (__contentRef && __contentRef.__cached && deepContains(params, content))) {
+  if (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?.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?.childProps && element.props?.childProps) {
       props.childProps = element.props.childProps
       props.ignoreChildProps = true
     }
-
-    if (lazyLoad) {
-      window.requestAnimationFrame(async () => {
-        await resetElement(params, element, options)
-        // handle lazy load
-        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)
+      // handle lazy load
+      if (!options.preventUpdateListener) {
+        await triggerEventOn('lazyLoad', element, options)
+      }
+    })
+  } else {
+    await resetContent(params, element, options)
+  }
 }
 
 export default set

package/update.js

@@ -10,27 +10,31 @@ import {
   isString,
   isUndefined,
   merge,
-  isVariant,
   overwriteDeep,
-  createSnapshotId,
-  deepClone
+  deepClone,
+  propertizeElement,
+  isMethod,
+  findInheritedState,
+  deepMerge,
+  OPTIONS,
+  updateProps,
+  captureSnapshot
 } from '@domql/utils'
 
 import { applyEvent, triggerEventOn, triggerEventOnUpdate } from '@domql/event'
-import { isMethod } from './methods/index.js'
-import { updateProps } from './props/index.js'
-import { createState, findInheritedState } from '@domql/state'
+import { createState } from '@domql/state'
 
 import { create } from './create.js'
-import { throughExecProps, throughUpdatedDefine, throughUpdatedExec } from './iterate.js'
+import {
+  throughExecProps,
+  throughUpdatedDefine,
+  throughUpdatedExec
+} from './iterate.js'
 import { REGISTRY } from './mixins/index.js'
 import { applyParam } from './utils/applyParam.js'
-import { OPTIONS } from './cache/options.js'
-import { METHODS_EXL, deepMerge } from './utils/index.js' // old utils (current)
-
-const snapshot = {
-  snapshotId: createSnapshotId
-}
+import { METHODS_EXL } from './utils/index.js' // old utils (current)
+import { setContent } from './set.js'
+import setChildren from './children.js'
 
 const UPDATE_DEFAULT_OPTIONS = {
   stackChanges: false,
@@ -38,51 +42,76 @@ const UPDATE_DEFAULT_OPTIONS = {
   preventRecursive: false,
   currentSnapshot: false,
   calleeElement: false,
-  excludes: METHODS_EXL
+  exclude: METHODS_EXL
 }
 
 export const update = async function (params = {}, opts) {
   const calleeElementCache = opts?.calleeElement
-  const options = deepClone(isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, { exclude: ['calleeElement'] })
+  const options = deepClone(
+    isObject(opts)
+      ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS)
+      : UPDATE_DEFAULT_OPTIONS,
+    { exclude: ['calleeElement'] }
+  )
   options.calleeElement = calleeElementCache
   const element = this
-  const { parent, node, key } = element
-  const { excludes, preventInheritAtCurrentState } = options
 
   let ref = element.__ref
   if (!ref) ref = element.__ref = {}
-  const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options)
+  const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(
+    element,
+    options
+  )
+
   if (snapshotHasUpdated) return
 
-  if (!options.preventListeners) await triggerEventOnUpdate('startUpdate', params, element, options)
+  if (!options.preventListeners) {
+    await triggerEventOnUpdate('startUpdate', params, element, options)
+  }
+
+  const { parent, node, key } = element
+  const { exclude, preventInheritAtCurrentState } = options
 
-  if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) return
-  if (!excludes) merge(options, UPDATE_DEFAULT_OPTIONS)
+  if (
+    preventInheritAtCurrentState &&
+    preventInheritAtCurrentState.__element === element
+  ) {
+    return
+  }
+  if (!exclude) merge(options, UPDATE_DEFAULT_OPTIONS)
 
   if (isString(params) || isNumber(params)) {
     params = { text: params }
   }
 
+  params = propertizeElement(params)
+
   const inheritState = await inheritStateUpdates(element, options)
   if (inheritState === false) return
 
-  const ifFails = checkIfOnUpdate(element, parent, options)
+  const ifFails = await 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.__props.filter(v => isFunction(v))
+    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
     if (props) updateProps(props, element, parent)
   }
 
   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
   }
 
   // apply new updates
-  overwriteDeep(element, params, { exclude: METHODS_EXL })
+  overwriteDeep(element, params)
 
   // exec updates
   throughExecProps(element)
@@ -90,7 +119,7 @@ export const update = async function (params = {}, opts) {
   throughUpdatedDefine(element)
 
   if (!options.isForced && !options.preventListeners) {
-    triggerEventOn('beforeClassAssign', element, options)
+    await triggerEventOn('beforeClassAssign', element, options)
   }
 
   if (!ref.__if) return false
@@ -100,14 +129,25 @@ export const update = async function (params = {}, opts) {
   }
 
   const {
-    preventUpdate, preventDefineUpdate, preventContentUpdate, preventStateUpdate,
-    preventRecursive, preventUpdateListener, preventUpdateAfter, preventUpdateAfterCount
+    preventUpdate,
+    preventDefineUpdate,
+    preventContentUpdate,
+    preventStateUpdate,
+    preventRecursive,
+    preventUpdateListener,
+    preventUpdateAfter,
+    preventUpdateAfterCount
   } = options
 
   if (preventUpdateAfter) {
-    if (isNumber(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) return
-    else if (options.preventUpdateAfterCount === undefined) options.preventUpdateAfterCount = 1
-    else options.preventUpdateAfterCount++
+    if (
+      isNumber(preventUpdateAfterCount) &&
+      preventUpdateAfter <= preventUpdateAfterCount
+    ) {
+      return
+    } else if (options.preventUpdateAfterCount === undefined) {
+      options.preventUpdateAfterCount = 1
+    } else options.preventUpdateAfterCount++
   }
 
   for (const param in element) {
@@ -115,10 +155,10 @@ export const update = async function (params = {}, opts) {
 
     if (!Object.hasOwnProperty.call(element, param)) continue
 
-    const isInPreventUpdate = isArray(preventUpdate) && preventUpdate.includes(param)
-    const isInPreventDefineUpdate = isArray(preventDefineUpdate) && preventDefineUpdate.includes(param)
-
-    const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection
+    const isInPreventUpdate =
+      isArray(preventUpdate) && preventUpdate.includes(param)
+    const isInPreventDefineUpdate =
+      isArray(preventDefineUpdate) && preventDefineUpdate.includes(param)
 
     if (
       isUndefined(prop) ||
@@ -126,17 +166,20 @@ export const update = async function (params = {}, opts) {
       isInPreventDefineUpdate ||
       preventDefineUpdate === true ||
       preventDefineUpdate === param ||
-      (preventContentUpdate && param === 'content' && !hasCollection) ||
       (preventStateUpdate && param) === 'state' ||
-      isMethod(param, element) || isObject(REGISTRY[param]) || isVariant(param)
-    ) continue
+      isMethod(param, element) ||
+      isObject(REGISTRY[param])
+    ) {
+      continue
+    }
 
     if (preventStateUpdate === 'once') options.preventStateUpdate = false
 
-    const isElement = applyParam(param, element, options)
+    const isElement = await applyParam(param, element, options)
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement
-      const canUpdate = isObject(prop) && !hasDefine && !hasContextDefine && !preventRecursive
+      const canUpdate =
+        isObject(prop) && !hasDefine && !hasContextDefine && !preventRecursive
       if (!canUpdate) continue
 
       const lazyLoad = element.props.lazyLoad || options.lazyLoad
@@ -145,50 +188,54 @@ export const update = async function (params = {}, opts) {
         options.onEachUpdate(param, element, element.state, element.context)
       }
 
-      const childUpdateCall = () => update.call(prop, params[prop], {
-        ...options,
-        currentSnapshot: snapshotOnCallee,
-        calleeElement
-      })
-
-      lazyLoad ? window.requestAnimationFrame(() => { // eslint-disable-line
-        childUpdateCall()
-        // handle lazy load
-        if (!options.preventUpdateListener) {
-          triggerEventOn('lazyLoad', element, options)
-        }
-      }) : childUpdateCall()
+      const childUpdateCall = async () =>
+        await update.call(prop, params[prop], {
+          ...options,
+          currentSnapshot: snapshotOnCallee,
+          calleeElement
+        })
+
+      if (lazyLoad) {
+        window.requestAnimationFrame(async () => {
+          // eslint-disable-line
+          await childUpdateCall()
+          // handle lazy load
+          if (!options.preventUpdateListener) {
+            await triggerEventOn('lazyLoad', element, options)
+          }
+        })
+      } else await childUpdateCall()
     }
   }
 
-  if (!preventUpdateListener) triggerEventOn('update', element, options)
-}
-
-const captureSnapshot = (element, options) => {
-  const ref = element.__ref
+  if (!preventContentUpdate) {
+    const children = params.children || element.children
+    const content = children
+      ? await setChildren(children, element, opts)
+      : element.children || params.content
 
-  const { currentSnapshot, calleeElement } = options
-  const isCallee = calleeElement === element
-  if (!calleeElement || isCallee) {
-    const createdStanpshot = snapshot.snapshotId()
-    ref.__currentSnapshot = createdStanpshot
-    return [createdStanpshot, element]
+    if (content) {
+      await setContent(content, element, options)
+    }
   }
 
-  const snapshotOnCallee = calleeElement.__ref.__currentSnapshot
-
-  if (currentSnapshot < snapshotOnCallee) {
-    return [snapshotOnCallee, calleeElement, true]
+  if (!preventUpdateListener) {
+    await triggerEventOn('update', element, options)
   }
-
-  return [snapshotOnCallee, calleeElement]
 }
 
-const checkIfOnUpdate = (element, parent, options) => {
-  if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) return
+const checkIfOnUpdate = async (element, parent, options) => {
+  if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) {
+    return
+  }
 
   const ref = element.__ref
-  const ifPassed = (element.if || element.props?.if)(element, element.state, element.context, options)
+  const ifPassed = (element.if || element.props?.if)(
+    element,
+    element.state,
+    element.context,
+    options
+  )
   const itWasFalse = ref.__if !== true
 
   if (ifPassed) {
@@ -196,7 +243,7 @@ const checkIfOnUpdate = (element, parent, options) => {
     if (itWasFalse) {
       delete element.__hash
       delete element.__text
-      delete element.extend
+      delete element.extends
       if (!ref.__hasRootState) {
         delete element.state
       }
@@ -214,9 +261,11 @@ const checkIfOnUpdate = (element, parent, options) => {
 
       const contentKey = ref.contentElementKey
 
-      if (element.$collection || element.$stateCollection || element.$propsCollection) {
+      if (element.children) {
         element.removeContent()
-      } else if (element[contentKey]?.parseDeep) element[contentKey] = element[contentKey].parseDeep()
+      } else if (element[contentKey]?.parseDeep) {
+        element[contentKey] = element[contentKey].parseDeep()
+      }
 
       const previousElement = element.previousElement()
       const previousNode = previousElement?.node // document.body.contains(previousElement.node)
@@ -234,10 +283,24 @@ const checkIfOnUpdate = (element, parent, options) => {
 
       delete element.__ref
       delete element.parent
-      const createdElement = create(element, parent, element.key, OPTIONS.create, attachOptions)
+      const createdElement = await create(
+        element,
+        parent,
+        element.key,
+        OPTIONS.create,
+        attachOptions
+      )
       // check preventUpdate for an array (Line: 87)
-      if (options.preventUpdate !== true && element.on && isFunction(element.on.update)) {
-        applyEvent(element.on.update, createdElement, createdElement.state)
+      if (
+        options.preventUpdate !== true &&
+        element.on &&
+        isFunction(element.on.update)
+      ) {
+        await applyEvent(
+          element.on.update,
+          createdElement,
+          createdElement.state
+        )
       }
       return createdElement
     }
@@ -248,7 +311,7 @@ const checkIfOnUpdate = (element, parent, options) => {
 }
 
 /**
- * Inherit state updates for a given element based on the specified options.
+ * Inherit state updates for a given element when state is inherited.
  *
  * @param {Object} element - The element to inherit state updates for.
  * @param {Object} options - Configuration options for state update inheritance.
@@ -265,7 +328,8 @@ const inheritStateUpdates = async (element, options) => {
   const { __ref: ref } = element
   const stateKey = ref.__state
   const { parent, state } = element
-  const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options
+  const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } =
+    options
 
   if (preventUpdateTriggerStateUpdate) return
 
@@ -276,10 +340,16 @@ const inheritStateUpdates = async (element, options) => {
   }
 
   // If state is function, decide execution and apply setting a current state
-  const shouldForceFunctionState = isFunction(stateKey) && !isHoisted && execStateFunction
+  const shouldForceFunctionState =
+    isFunction(stateKey) && !isHoisted && execStateFunction
   if (shouldForceFunctionState) {
     const execState = exec(stateKey, element)
-    state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true })
+    state.set(execState, {
+      ...options,
+      preventUpdate: true,
+      preventStateUpdateListener: false,
+      updatedByStateFunction: true
+    })
     return
   }
 
@@ -289,22 +359,32 @@ const inheritStateUpdates = async (element, options) => {
 
   // Trigger on.beforeStateUpdate event
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {
-    const initStateReturns = await triggerEventOnUpdate('beforeStateUpdate', keyInParentState, element, options)
+    const initStateReturns = await triggerEventOnUpdate(
+      'beforeStateUpdate',
+      keyInParentState,
+      element,
+      options
+    )
     if (initStateReturns === false) return element
   }
 
   // Recreate the state again
-  const newState = createStateUpdate(element, parent, options)
+  const newState = await createStateUpdate(element, parent, options)
 
   // Trigger on.stateUpdate event
   if (!options.preventStateUpdateListener && !options.preventListeners) {
-    await triggerEventOnUpdate('stateUpdate', newState.parse(), element, options)
+    await triggerEventOnUpdate(
+      'stateUpdate',
+      newState.parse(),
+      element,
+      options
+    )
   }
 }
 
-const createStateUpdate = (element, parent, options) => {
+const createStateUpdate = async (element, parent, options) => {
   const __stateChildren = element.state.__children
-  const newState = createState(element, parent)
+  const newState = await createState(element, parent)
   element.state = newState
   for (const child in __stateChildren) {
     // check this for inherited states

package/utils/applyParam.js

@@ -3,14 +3,15 @@
 import { isFunction } from '@domql/utils'
 import { REGISTRY } from '../mixins/index.js'
 
-export const applyParam = (param, element, options) => {
+export const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element
   const prop = element[param]
 
   const { onlyUpdate } = options
 
   const DOMQLProperty = REGISTRY[param]
-  const DOMQLPropertyFromContext = context && context.registry && context.registry[param]
+  const DOMQLPropertyFromContext =
+    context && context.registry && context.registry[param]
   const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty
 
   const hasDefine = element.define && element.define[param]
@@ -18,11 +19,13 @@ export const applyParam = (param, element, options) => {
 
   if (!ref.__if) return
 
-  const hasOnlyUpdate = onlyUpdate ? (onlyUpdate === param || element.lookup(onlyUpdate)) : true
+  const hasOnlyUpdate = onlyUpdate
+    ? onlyUpdate === param || element.lookup(onlyUpdate)
+    : true
 
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if (isFunction(isGlobalTransformer)) {
-      isGlobalTransformer(prop, element, node, options)
+      await isGlobalTransformer(prop, element, node, options)
       return
     }
   }

package/utils/index.js

@@ -1,5 +1,3 @@
 'use strict'
 
-export * from './object.js'
-export * from './extendUtils.js'
-export * from './component.js'
+export const METHODS_EXL = [] // this is needed because of unit tests