@domql/element 3.1.2 → 3.2.7

package/update.js

@@ -11,17 +11,15 @@ 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'
@@ -45,15 +43,11 @@ const UPDATE_DEFAULT_OPTIONS = {
   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'] }
-  )
-  options.calleeElement = calleeElementCache
+export const update = function (params = {}, opts) {
+  // Shallow copy is sufficient - all values are primitives/references that shouldn't be cloned
+  const options = isObject(opts)
+    ? { ...UPDATE_DEFAULT_OPTIONS, ...opts }
+    : { ...UPDATE_DEFAULT_OPTIONS }
   const element = this
 
   let ref = element.__ref
@@ -66,7 +60,7 @@ export 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
@@ -87,29 +81,32 @@ export const update = async function (params = {}, opts) {
   // apply new updates
   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
+    }
   }
 
   // apply new updates
@@ -121,14 +118,11 @@ export const update = async function (params = {}, opts) {
   throughUpdatedDefine(element)
 
   if (!options.isForced && !options.preventListeners) {
-    await triggerEventOn('beforeClassAssign', element, options)
+    triggerEventOn('beforeClassAssign', element, options)
   }
 
   if (!ref.__if) return false
-  if (!node) {
-    // return createNode(element, options)
-    return
-  }
+  if (!node) return
 
   const {
     preventUpdate,
@@ -152,15 +146,24 @@ export const update = async function (params = {}, opts) {
     } else options.preventUpdateAfterCount++
   }
 
+  // Convert arrays to Sets once for O(1) lookups during iteration
+  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
+    if (!Object.prototype.hasOwnProperty.call(element, param)) continue
 
     const isInPreventUpdate =
-      isArray(preventUpdate) && preventUpdate.includes(param)
+      preventUpdateSet && preventUpdateSet.has(param)
     const isInPreventDefineUpdate =
-      isArray(preventDefineUpdate) && preventDefineUpdate.includes(param)
+      preventDefineUpdateSet && preventDefineUpdateSet.has(param)
+
+    // Skip onXxx event handler functions (e.g. onClick) that may remain at root level
+    const isRootEventHandler = isFunction(prop) && param.length > 2 &&
+      param.charCodeAt(0) === 111 && param.charCodeAt(1) === 110 && // 'on'
+      param.charCodeAt(2) >= 65 && param.charCodeAt(2) <= 90 // A-Z
 
     if (
       isUndefined(prop) ||
@@ -168,8 +171,9 @@ export const update = async function (params = {}, opts) {
       isInPreventDefineUpdate ||
       preventDefineUpdate === true ||
       preventDefineUpdate === param ||
-      (preventStateUpdate && param) === 'state' ||
+      (preventStateUpdate && param === 'state') ||
       isMethod(param, element) ||
+      isRootEventHandler ||
       isObject(REGISTRY[param])
     ) {
       continue
@@ -177,7 +181,7 @@ export const update = async function (params = {}, opts) {
 
     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 =
@@ -190,43 +194,89 @@ export const update = async function (params = {}, opts) {
         options.onEachUpdate(param, element, element.state, element.context)
       }
 
-      const childUpdateCall = async () =>
-        await update.call(prop, params[prop], {
+      const childParams = params[param]
+      if (childParams === undefined && !options.isForced) continue
+
+      const childUpdateCall = () =>
+        update.call(prop, childParams, {
           ...options,
           currentSnapshot: snapshotOnCallee,
           calleeElement
         })
 
       if (lazyLoad) {
-        window.requestAnimationFrame(async () => {
+        window.requestAnimationFrame(() => {
           // eslint-disable-line
-          await childUpdateCall()
+          childUpdateCall()
           // handle lazy load
-          if (!options.preventUpdateListener) {
-            await triggerEventOn('lazyLoad', element, options)
+          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
+    // Update existing content element if it's a live DOMQL element
+    const contentKey = ref.contentElementKey || 'content'
+    const existingContent = element[contentKey]
+
+    // Re-evaluate children if the element has a children property
+    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 (content) {
-      await setContent(content, element, options)
+      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) => {
+const checkIfOnUpdate = (element, parent, options) => {
   if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) {
     return
   }
@@ -275,8 +325,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
 
       const nextElement = element.nextElement()
       const nextNode = nextElement?.node // document.body.contains(previousElement.node)
-      const hasNext = nextNode?.parentNode // && document.body.contains(nextElement.node)
-      // const hasNext = nextElement && document.body.contains(nextElement.node)
+      const hasNext = nextNode?.parentNode
 
       const attachOptions = (hasPrevious || hasNext) && {
         position: hasPrevious ? 'after' : hasNext ? 'before' : null,
@@ -285,7 +334,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
 
       delete element.__ref
       delete element.parent
-      const createdElement = await create(
+      const createdElement = create(
         element,
         parent,
         element.key,
@@ -298,11 +347,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
         element.on &&
         isFunction(element.on.update)
       ) {
-        await applyEvent(
-          element.on.update,
-          createdElement,
-          createdElement.state
-        )
+        applyEvent(element.on.update, createdElement, createdElement.state)
       }
       return createdElement
     }
@@ -326,7 +371,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
  * @param {boolean} [options.preventStateUpdateListener] - If true, prevent the 'stateUpdate' event listener.
  * @returns {boolean} - If returns false, it breaks the update function
  */
-const inheritStateUpdates = async (element, options) => {
+const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element
   const stateKey = ref.__state
   const { parent, state } = element
@@ -337,7 +382,7 @@ const inheritStateUpdates = async (element, options) => {
 
   // If does not have own state inherit from parent
   if (!stateKey && !ref.__hasRootState) {
-    element.state = (parent && parent.state) || {}
+    element.state = parent?.state || {}
     return
   }
 
@@ -361,7 +406,7 @@ const inheritStateUpdates = async (element, options) => {
 
   // Trigger on.beforeStateUpdate event
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {
-    const initStateReturns = await triggerEventOnUpdate(
+    const initStateReturns = triggerEventOnUpdate(
       'beforeStateUpdate',
       keyInParentState,
       element,
@@ -371,22 +416,17 @@ const inheritStateUpdates = async (element, options) => {
   }
 
   // Recreate the state again
-  const newState = await createStateUpdate(element, parent, options)
+  const newState = createStateUpdate(element, parent, options)
 
   // Trigger on.stateUpdate event
   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) {
     // check this for inherited states
@@ -398,14 +438,3 @@ const createStateUpdate = async (element, parent, options) => {
 }
 
 export default update
-
-// save updates history
-// const overwriteChanges = overwriteDeep(element, params, { exclude: METHODS_EXL })
-// // const overwriteChanges = overwriteDeep(element, params)
-// const propsChanges = throughExecProps(element)
-// const execChanges = throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS })
-// const definedChanges = throughUpdatedDefine(element)
-// if (options.stackChanges && ref.__stackChanges) {
-//   const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
-//   ref.__stackChanges.push(stackChanges)
-// }

package/__tests__/checkIfOnUpdate.test.js

@@ -1,103 +0,0 @@
-import { update } from '../update'
-
-describe('checkIfOnUpdate via update()', () => {
-  let element, parent, options
-
-  beforeEach(() => {
-    parent = {
-      node: document.createElement('div'),
-      props: {},
-      state: {}
-    }
-
-    element = {
-      __ref: {
-        __if: undefined,
-        __state: null,
-        __hasRootState: false,
-        __execProps: {},
-        contentElementKey: 'content'
-      },
-      parent,
-      props: {},
-      state: {
-        update: (el, st) => {
-          return st
-        }
-      },
-      context: {
-        defaultExtends: {}
-      },
-      node: document.createElement('div'),
-      if: () => true,
-      previousElement: () => {
-        return {}
-      },
-      nextElement: () => {
-        return {}
-      },
-      removeContent: () => {
-        return true
-      }
-    }
-
-    options = {}
-  })
-
-  it('uses props.if when element.if missing', async () => {
-    delete element.if
-    element.props.if = () => false
-    await update.call(element, {}, options)
-    expect(element.node).toEqual(document.createElement('div'))
-  })
-
-  it('retains state when __hasRootState=true', async () => {
-    element.__ref.__hasRootState = true
-    element.state.critical = true
-    element.__ref.__if = false
-
-    await update.call(element, {}, options)
-
-    expect(element.state.critical).toBe(true)
-    expect(element.state.preserved).toBeUndefined()
-  })
-
-  it('processes nested content with parseDeep', async () => {
-    element.content = {
-      parseDeep: () => ({ parsed: true }),
-      existing: 'data'
-    }
-
-    await update.call(element, {}, options)
-
-    expect(element.content.parsed).toBe(true)
-    expect(element.content.existing).toBeUndefined()
-  })
-
-  it('reattaches after previous sibling', async () => {
-    const prevNode = document.createElement('span')
-    parent.node.appendChild(prevNode)
-
-    await update.call(element, {}, options)
-
-    const newElement = parent.node.children[0]
-    expect(newElement).toEqual(document.createElement('span'))
-    expect(newElement.previousSibling).toBe(null)
-  })
-
-  // it('reattaches before next sibling', async () => {
-  //   const nextNode = document.createElement('p')
-  //   parent.node.appendChild(nextNode)
-
-  //   await update.call(element, {}, options)
-
-  //   const newElement = parent.node.children[0]
-  //   expect(newElement).toEqual(document.createElement('p'))
-  //   expect(newElement.nextSibling).toBe(null)
-  // })
-
-  // it('appends to parent when no siblings exist', async () => {
-  //   await update.call(element, {}, options)
-  //   expect(parent.node.children).toHaveLength(0)
-  // })
-})

package/__tests__/children.test.js

@@ -1,213 +0,0 @@
-import { jest } from '@jest/globals'
-import { setChildren } from '../children'
-
-describe('children', () => {
-  let element, node
-
-  beforeEach(() => {
-    element = {
-      __ref: {},
-      state: {},
-      props: {},
-      call: jest.fn(),
-      removeContent: jest.fn(),
-      content: null
-    }
-    node = {}
-  })
-
-  it('handles null/undefined params', async () => {
-    const result = await setChildren(null, element, node)
-    expect(result).toBeUndefined()
-  })
-
-  it('handles direct string children', async () => {
-    const result = await setChildren('Hello World', element, node)
-    expect(result).toEqual({ tag: 'fragment', 0: { text: 'Hello World' } })
-  })
-
-  it('handles numeric children', async () => {
-    const result = await setChildren(42, element, node)
-    expect(result).toEqual({ tag: 'fragment', 0: { text: 42 } })
-  })
-
-  it('handles array of primitive values with childrenAs prop', async () => {
-    const result = await setChildren(['one', 'two'], element, node)
-
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { text: 'one' },
-      1: { text: 'two' }
-    })
-  })
-
-  it('handles array of primitive values with childrenAs state', async () => {
-    element.props.childrenAs = 'state'
-    const result = await setChildren(['one', 'two'], element, node)
-
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { state: { value: 'one' } },
-      1: { state: { value: 'two' } }
-    })
-  })
-
-  it('caches children and detects changes', async () => {
-    const children1 = [{ id: 1 }, { id: 2 }]
-    const children2 = [{ id: 1 }, { id: 2 }]
-    const children3 = [{ id: 1 }, { id: 3 }]
-
-    // First call
-    await setChildren(children1, element, node)
-    expect(element.__ref.__childrenCache).toEqual(children1)
-    expect(element.__ref.__noChildrenDifference).toBeUndefined()
-
-    // Same content, different reference
-    await setChildren(children2, element, node)
-    expect(element.__ref.__noChildrenDifference).toBe(true)
-
-    // Different content
-    await setChildren(children3, element, node)
-    expect(element.__ref.__noChildrenDifference).toBeUndefined()
-    expect(element.__ref.__childrenCache).toEqual(children3)
-  })
-
-  it('handles mixed React and normal components', async () => {
-    const mixedChildren = [
-      { type: 'div', text: 'Normal' },
-      { $$typeof: Symbol('react') },
-      { type: 'span', text: 'Another' }
-    ]
-
-    await setChildren(mixedChildren, element, node)
-
-    expect(element.call).toHaveBeenCalledWith(
-      'renderReact',
-      [mixedChildren[1]],
-      element
-    )
-  })
-
-  it('handles state-based children', async () => {
-    element.state = {
-      items: ['a', 'b'],
-      parse: () => ['parsed a', 'parsed b']
-    }
-
-    const result = await setChildren('state', element, node)
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { text: 'parsed a' },
-      1: { text: 'parsed b' }
-    })
-  })
-
-  it('handles async function parameters', async () => {
-    const asyncParam = async () => ['async1', 'async2']
-    const result = await setChildren(asyncParam, element, node)
-
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { text: 'async1' },
-      1: { text: 'async2' }
-    })
-  })
-
-  it('handles nested object structures', async () => {
-    const nestedChildren = {
-      header: { text: 'Title' },
-      content: {
-        nested: { text: 'Content' }
-      }
-    }
-
-    const result = await setChildren(nestedChildren, element, node)
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { text: 'Title' },
-      1: { nested: { text: 'Content' } }
-    })
-  })
-
-  it('handles empty arrays and objects', async () => {
-    let result = await setChildren([], element, node)
-    expect(result).toEqual({
-      tag: 'fragment'
-    })
-
-    result = await setChildren({}, element, node)
-    expect(result).toEqual({
-      tag: 'fragment'
-    })
-  })
-
-  it('handles falsy values in arrays', async () => {
-    const result = await setChildren(
-      [null, undefined, false, 0, ''],
-      element,
-      node
-    )
-    expect(result).toEqual({
-      tag: 'fragment',
-      3: { text: 0 },
-      4: { text: '' }
-    })
-  })
-
-  it('handles React components with falsy values in array', async () => {
-    const mixedChildren = [
-      null,
-      { $$typeof: Symbol('react') },
-      undefined,
-      { $$typeof: Symbol('react') },
-      false
-    ]
-
-    await setChildren(mixedChildren, element, node)
-
-    expect(element.call).toHaveBeenCalledWith(
-      'renderReact',
-      [mixedChildren[1], mixedChildren[3]],
-      element
-    )
-  })
-
-  it('handles nested state parsing', async () => {
-    element.state = {
-      nested: {
-        items: ['c', 'd']
-      }
-    }
-    element.state.nested.__proto__.parse = () => ['parsed c', 'parsed d']
-
-    const result = await setChildren('nested', element, node)
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { state: ['c', 'd'] }
-    })
-  })
-
-  it('handles mixed state and regular objects', async () => {
-    element.state = {
-      header: { parse: () => 'Header' },
-      footer: { parse: () => 'Footer' }
-    }
-
-    const result = await setChildren(
-      {
-        header: 'header',
-        content: { text: 'Content' },
-        footer: 'footer'
-      },
-      element,
-      node
-    )
-
-    expect(result).toEqual({
-      tag: 'fragment',
-      0: { text: 'header' },
-      1: { text: 'Content' },
-      2: { text: 'footer' }
-    })
-  })
-})