@domql/element 3.2.3 → 3.2.8

package/extend.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isFunction, exec, isProduction } from '@domql/utils'
+import { isFunction, exec } from '@domql/utils'
 import {
   getExtendStack,
   jointStacks,
@@ -9,6 +9,8 @@ import {
   fallbackStringExtend
 } from './utils/index.js'
 
+// Module-level cache for context.defaultExtends merged result.
+// Set once on first use, never invalidated — assumes defaultExtends is static.
 let mainExtend
 
 /**
@@ -27,21 +29,16 @@ export const applyExtend = (element, parent, options = {}) => {
 
   const extendStack = getExtendStack(extend, context)
 
-  // if (isProduction()) delete element.extend
   delete element.extend
 
   let childExtendStack = []
   if (parent) {
     element.parent = parent
     // Assign parent attr to the element
-    if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
+    if (!options.ignoreChildExtend && !props?.ignoreChildExtend) {
       childExtendStack = getExtendStack(parent.childExtend, context)
 
-      // if (!options.ignoreChildExtend && !(props && exec(props, element).ignoreChildExtend)) {
-      //   const ignoreChildExtendRecursive = props && exec(props, element).ignoreChildExtendRecursive
-
-      const ignoreChildExtendRecursive =
-        props && props.ignoreChildExtendRecursive
+      const ignoreChildExtendRecursive = props?.ignoreChildExtendRecursive
       if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
         const canExtendRecursive = element.key !== '__text'
         if (canExtendRecursive) {
@@ -84,9 +81,9 @@ export const applyExtend = (element, parent, options = {}) => {
   if (__ref) __ref.__extend = stack
   let mergedExtend = cloneAndMergeArrayExtend(stack)
 
-  const COMPONENTS = (context && context.components) || options.components
+  const COMPONENTS = context?.components || options.components
   const component = exec(element.component || mergedExtend.component, element)
-  if (component && COMPONENTS && COMPONENTS[component]) {
+  if (component && COMPONENTS?.[component]) {
     const componentExtend = cloneAndMergeArrayExtend(
       getExtendStack(COMPONENTS[component])
     )

package/index.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { TREE } from './tree'
-import create from './create'
-import createNode from './node'
-import define from './define'
-import update from './update'
-import set from './set'
+import { TREE } from './tree.js'
+import create from './create.js'
+import createNode from './node.js'
+import define from './define.js'
+import update from './update.js'
+import set from './set.js'
 
 export {
   TREE,
@@ -15,3 +15,6 @@ export {
   update,
   set
 }
+
+export * from './event/index.js'
+export * from './render/index.js'

package/iterate.js

@@ -49,8 +49,7 @@ export const throughUpdatedExec = (element, options = {}) => {
       continue
     }
     const execReturnsString = isString(newExec) || isNumber(newExec)
-    // if (prop && prop.node && execReturnsString) {
-    if (prop && prop.node && execReturnsString) {
+    if (prop?.node && execReturnsString) {
       overwrite(prop, { text: newExec })
     } else if (newExec !== prop) {
       if (matchesComponentNaming(param)) {
@@ -74,8 +73,13 @@ export const throughExecProps = element => {
   const { __ref: ref } = element
   const { props } = element
   for (const k in props) {
+    // Check for 'is', 'has', 'use' prefixes using charCodeAt
+    const c0 = k.charCodeAt(0)
+    const c1 = k.charCodeAt(1)
     const isDefine =
-      k.startsWith('is') || k.startsWith('has') || k.startsWith('use')
+      (c0 === 105 && c1 === 115) || // 'is'
+      (c0 === 104 && c1 === 97 && k.charCodeAt(2) === 115) || // 'has'
+      (c0 === 117 && c1 === 115 && k.charCodeAt(2) === 101) // 'use'
     const cachedExecProp = ref.__execProps[k]
     if (isFunction(cachedExecProp)) {
       const result = exec(cachedExecProp, element)
@@ -100,15 +104,16 @@ export const throughExecProps = element => {
   }
 }
 
-export const isPropertyInDefines = (key, element) => {}
-
 export const throughInitialDefine = element => {
   const { define, context, __ref: ref } = element
 
-  let defineObj = {}
+  const hasLocalDefine = isObject(define)
   const hasGlobalDefine = context && isObject(context.define)
-  if (isObject(define)) defineObj = { ...define }
-  if (hasGlobalDefine) defineObj = { ...defineObj, ...context.define }
+  if (!hasLocalDefine && !hasGlobalDefine) return element
+
+  const defineObj = hasLocalDefine && hasGlobalDefine
+    ? { ...define, ...context.define }
+    : hasLocalDefine ? define : context.define
 
   for (const param in defineObj) {
     let elementProp = element[param]
@@ -152,11 +157,14 @@ export const throughInitialDefine = element => {
 
 export const throughUpdatedDefine = element => {
   const { context, define, __ref: ref } = element
-  const changes = {}
 
-  let obj = {}
-  if (isObject(define)) obj = { ...define }
-  if (isObject(context && context.define)) obj = { ...obj, ...context.define }
+  const hasLocalDefine = isObject(define)
+  const hasGlobalDefine = isObject(context?.define)
+  if (!hasLocalDefine && !hasGlobalDefine) return
+
+  const obj = hasLocalDefine && hasGlobalDefine
+    ? { ...define, ...context.define }
+    : hasLocalDefine ? define : context.define
 
   for (const param in obj) {
     const execParam = ref.__exec[param]
@@ -189,5 +197,4 @@ export const throughUpdatedDefine = element => {
       element[param] = newExecParam
     }
   }
-  return changes
 }

package/node.js

@@ -1,8 +1,9 @@
 'use strict'
 
 import { isFunction, isMethod, isObject, isUndefined } from '@domql/utils'
-import { applyEventsOnNode, triggerEventOn } from '@domql/event'
-import { cacheNode } from '@domql/render'
+import { applyEventsOnNode, triggerEventOn } from './event/index.js'
+import { propagateEventsFromProps, propagateEventsFromElement } from './utils/propEvents.js'
+import { cacheNode } from './render/index.js'
 import { create } from './create.js'
 
 import {
@@ -14,8 +15,6 @@ import { REGISTRY } from './mixins/index.js'
 import { applyParam } from './utils/applyParam.js'
 import setChildren from './children.js'
 import { setContent } from './set.js'
-// import { defineSetter } from './methods'
-
 const ENV = process.env.NODE_ENV
 
 export const createNode = (element, opts) => {
@@ -52,16 +51,19 @@ export const createNode = (element, opts) => {
   // iterate through exec
   throughInitialExec(element)
 
+  propagateEventsFromProps(element)
+  propagateEventsFromElement(element)
   applyEventsOnNode(element, { isNewNode, ...opts })
 
   for (const param in element) {
     const value = element[param]
 
     if (
-      !Object.hasOwnProperty.call(element, param) ||
-      isUndefined(value) ||
+      !Object.prototype.hasOwnProperty.call(element, param) ||
+      value === undefined ||
       isMethod(param, element) ||
-      isObject(REGISTRY[param])
+      isObject(REGISTRY[param]) ||
+      (param.length > 2 && param.charCodeAt(0) === 111 && param.charCodeAt(1) === 110 && param.charCodeAt(2) >= 65 && param.charCodeAt(2) <= 90)
     ) {
       continue
     }
@@ -90,7 +92,7 @@ export const createNode = (element, opts) => {
 
   const content = element.children
     ? setChildren(element.children, element, opts)
-    : element.content || element.content
+    : element.children || element.content
 
   if (content) {
     setContent(content, element, opts)

package/package.json

@@ -1,39 +1,63 @@
 {
   "name": "@domql/element",
-  "version": "3.2.3",
+  "version": "3.2.8",
   "license": "MIT",
   "type": "module",
-  "module": "index.js",
-  "main": "index.js",
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
   "exports": {
     ".": {
-      "kalduna": "./index.js",
-      "default": "./dist/cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "browser": "./dist/iife/index.js",
+      "default": "./dist/esm/index.js"
     },
-    "./utils/component": "./utils/component.js",
-    "./methods/index.js": "./methods/index.js"
+    "./event": {
+      "import": "./dist/esm/event/index.js",
+      "require": "./dist/cjs/event/index.js",
+      "default": "./dist/esm/event/index.js"
+    },
+    "./render": {
+      "import": "./dist/esm/render/index.js",
+      "require": "./dist/cjs/render/index.js",
+      "default": "./dist/esm/render/index.js"
+    },
+    "./*.js": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./dist/esm/*.js"
+    },
+    "./*": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./dist/esm/*.js"
+    }
   },
   "source": "index.js",
   "files": [
-    "*/**.js",
-    "*.js",
-    "dist"
+    "dist",
+    "*.js"
   ],
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild *.js methods/*.js mixins/*.js utils/*.js --target=es2019 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild *.js methods/*.js mixins/*.js utils/*.js --target=node16 --format=cjs --outdir=dist/cjs",
-    "build": "npx rimraf -I dist; npm run build:cjs; npm run build:esm",
-    "prepublish": "npx rimraf -I dist && npm run build && npm run copy:package:cjs"
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js methods/*.js mixins/*.js utils/*.js event/*.js render/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js methods/*.js mixins/*.js utils/*.js event/*.js render/*.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build": "node ../../build/build.js",
+    "prepublish": "npm run build && npm run copy:package:cjs",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlElement --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV"
   },
   "dependencies": {
-    "@domql/event": "^3.2.3",
-    "@domql/render": "^3.2.3",
+    "@domql/report": "^3.2.3",
     "@domql/state": "^3.2.3",
-    "@domql/utils": "^3.2.3"
+    "@domql/utils": "^3.2.3",
+    "attrs-in-props": "^3.2.3"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {
     "@babel/core": "^7.26.0"
-  }
+  },
+  "browser": "./dist/iife/index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
+  "sideEffects": false
 }

package/set.js

@@ -2,7 +2,7 @@
 
 import { deepContains, exec, isFunction, OPTIONS } from '@domql/utils'
 import { create } from './create.js'
-import { triggerEventOn, triggerEventOnUpdate } from '@domql/event'
+import { triggerEventOn, triggerEventOnUpdate } from './event/index.js'
 
 export const setContentKey = (element, opts = {}) => {
   const { __ref: ref } = element
@@ -13,7 +13,7 @@ export const setContentKey = (element, opts = {}) => {
   return ref.contentElementKey
 }
 
-export const reset = options => {
+export function reset (options) {
   const element = this
   create(element, element.parent, undefined, {
     ignoreChildExtends: true,
@@ -71,15 +71,16 @@ export const removeContent = function (el, opts = {}) {
   // Handle fragment removal
   if (content.tag === 'fragment' && content.__ref?.__children) {
     // Remove all child nodes
-    content.__ref.__children.forEach(key => {
-      const child = content[key]
+    const __children = content.__ref.__children
+    for (let i = 0; i < __children.length; i++) {
+      const child = content[__children[i]]
       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) {

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'
@@ -46,14 +44,10 @@ const UPDATE_DEFAULT_OPTIONS = {
 }
 
 export const update = 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
+  // 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
@@ -96,20 +90,23 @@ export const update = function (params = {}, opts) {
   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
+    }
   }
 
   // apply new updates
@@ -125,10 +122,7 @@ export const update = function (params = {}, opts) {
   }
 
   if (!ref.__if) return false
-  if (!node) {
-    // return createNode(element, options)
-    return
-  }
+  if (!node) return
 
   const {
     preventUpdate,
@@ -152,15 +146,24 @@ export const update = 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 = function (params = {}, opts) {
       isInPreventDefineUpdate ||
       preventDefineUpdate === true ||
       preventDefineUpdate === param ||
-      (preventStateUpdate && param) === 'state' ||
+      (preventStateUpdate && param === 'state') ||
       isMethod(param, element) ||
+      isRootEventHandler ||
       isObject(REGISTRY[param])
     ) {
       continue
@@ -190,8 +194,11 @@ export const update = function (params = {}, opts) {
         options.onEachUpdate(param, element, element.state, element.context)
       }
 
+      const childParams = params[param]
+      if (childParams === undefined && !options.isForced) continue
+
       const childUpdateCall = () =>
-        update.call(prop, params[prop], {
+        update.call(prop, childParams, {
           ...options,
           currentSnapshot: snapshotOnCallee,
           calleeElement
@@ -202,7 +209,7 @@ export const update = function (params = {}, opts) {
           // eslint-disable-line
           childUpdateCall()
           // handle lazy load
-          if (!options.preventUpdateListener) {
+          if (!options.preventUpdateListener && !options.preventListeners) {
             triggerEventOn('lazyLoad', element, options)
           }
         })
@@ -211,17 +218,60 @@ export const update = function (params = {}, opts) {
   }
 
   if (!preventContentUpdate) {
-    const children = params.children || element.children
-    const content = children
-      ? 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) {
-      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) {
+  if (!preventUpdateListener && !options.preventListeners) {
     triggerEventOn('update', element, options)
   }
 }
@@ -275,8 +325,7 @@ const checkIfOnUpdate = (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,
@@ -333,7 +382,7 @@ const inheritStateUpdates = (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
   }
 
@@ -389,14 +438,3 @@ const createStateUpdate = (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', () => {
-    delete element.if
-    element.props.if = () => false
-    update.call(element, {}, options)
-    expect(element.node).toEqual(document.createElement('div'))
-  })
-
-  it('retains state when __hasRootState=true', () => {
-    element.__ref.__hasRootState = true
-    element.state.critical = true
-    element.__ref.__if = false
-
-    update.call(element, {}, options)
-
-    expect(element.state.critical).toBe(true)
-    expect(element.state.preserved).toBeUndefined()
-  })
-
-  it('processes nested content with parseDeep', () => {
-    element.content = {
-      parseDeep: () => ({ parsed: true }),
-      existing: 'data'
-    }
-
-    update.call(element, {}, options)
-
-    expect(element.content.parsed).toBe(true)
-    expect(element.content.existing).toBeUndefined()
-  })
-
-  it('reattaches after previous sibling', () => {
-    const prevNode = document.createElement('span')
-    parent.node.appendChild(prevNode)
-
-    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', () => {
-  //   const nextNode = document.createElement('p')
-  //   parent.node.appendChild(nextNode)
-
-  //   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', () => {
-  //   update.call(element, {}, options)
-  //   expect(parent.node.children).toHaveLength(0)
-  // })
-})