@domql/element 3.1.2 → 3.2.7

package/extend.js

@@ -0,0 +1,95 @@
+'use strict'
+
+import { isFunction, exec } from '@domql/utils'
+import {
+  getExtendStack,
+  jointStacks,
+  cloneAndMergeArrayExtend,
+  deepMergeExtend,
+  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
+
+/**
+ * Checks whether element has `extend` or is a part
+ * of parent's `childExtend` extend
+ */
+export const applyExtend = (element, parent, options = {}) => {
+  if (isFunction(element)) element = exec(element, parent)
+
+  const { props, __ref } = element
+  let extend = props?.extends || element.extends || element.extend
+  const variant = props?.variant
+  const context = element.context || parent.context
+
+  extend = fallbackStringExtend(extend, context, options, variant)
+
+  const extendStack = getExtendStack(extend, context)
+
+  delete element.extend
+
+  let childExtendStack = []
+  if (parent) {
+    element.parent = parent
+    // Assign parent attr to the element
+    if (!options.ignoreChildExtend && !props?.ignoreChildExtend) {
+      childExtendStack = getExtendStack(parent.childExtend, context)
+
+      const ignoreChildExtendRecursive = props?.ignoreChildExtendRecursive
+      if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
+        const canExtendRecursive = element.key !== '__text'
+        if (canExtendRecursive) {
+          const childExtendRecursiveStack = getExtendStack(
+            parent.childExtendRecursive,
+            context
+          )
+          // add error if childExtendRecursive contains element which goes to infinite loop
+          childExtendStack = childExtendStack.concat(childExtendRecursiveStack)
+          element.childExtendRecursive = parent.childExtendRecursive
+        }
+      }
+    }
+  }
+
+  const extendLength = extendStack.length
+  const childExtendLength = childExtendStack.length
+
+  let stack = []
+  if (extendLength && childExtendLength) {
+    stack = jointStacks(extendStack, childExtendStack)
+  } else if (extendLength) {
+    stack = extendStack
+  } else if (childExtendLength) {
+    stack = childExtendStack
+  } else if (!context.defaultExtends) return element
+
+  if (context.defaultExtends) {
+    if (!mainExtend) {
+      const defaultOptionsExtend = getExtendStack(
+        context.defaultExtends,
+        context
+      )
+      mainExtend = cloneAndMergeArrayExtend(defaultOptionsExtend)
+      delete mainExtend.extend
+    }
+    stack = [].concat(stack, mainExtend)
+  }
+
+  if (__ref) __ref.__extend = stack
+  let mergedExtend = cloneAndMergeArrayExtend(stack)
+
+  const COMPONENTS = context?.components || options.components
+  const component = exec(element.component || mergedExtend.component, element)
+  if (component && COMPONENTS?.[component]) {
+    const componentExtend = cloneAndMergeArrayExtend(
+      getExtendStack(COMPONENTS[component])
+    )
+    mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
+  }
+
+  const merged = deepMergeExtend(element, mergedExtend)
+  return merged
+}

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

@@ -2,7 +2,6 @@
 
 import {
   isObject,
-  exec,
   isFunction,
   isNumber,
   isString,
@@ -10,17 +9,24 @@ import {
   isContextComponent,
   isMethod,
   overwrite,
-  execPromise
+  exec
 } from '@domql/utils'
 
-export const throughInitialExec = async (element, exclude = {}) => {
+export const throughInitialExec = (element, exclude = {}) => {
   const { __ref: ref } = element
   for (const param in element) {
     if (exclude[param]) continue
     const prop = element[param]
     if (isFunction(prop) && !isMethod(param, element)) {
       ref.__exec[param] = prop
-      element[param] = await prop(element, element.state, element.context)
+      const result = prop(element, element.state, element.context)
+      if (result && typeof result.then === 'function') {
+        result.then(resolved => {
+          element[param] = resolved
+        })
+      } else {
+        element[param] = result
+      }
     }
   }
 }
@@ -36,9 +42,14 @@ export const throughUpdatedExec = (element, options = {}) => {
     if (isDefinedParam) continue
 
     const newExec = ref.__exec[param](element, element.state, element.context)
+    if (newExec && typeof newExec.then === 'function') {
+      newExec.then(resolved => {
+        element[param] = resolved
+      })
+      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)) {
@@ -58,81 +69,132 @@ export const throughUpdatedExec = (element, options = {}) => {
   return changes
 }
 
-export const throughExecProps = async element => {
+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)) {
-      props[k] = await execPromise(cachedExecProp, element)
+      const result = exec(cachedExecProp, element)
+      if (result && typeof result.then === 'function') {
+        result.then(resolved => {
+          props[k] = resolved
+        })
+      } else {
+        props[k] = result
+      }
     } else if (isDefine && isFunction(props[k])) {
       ref.__execProps[k] = props[k]
-      props[k] = await execPromise(props[k], element)
+      const result = exec(props[k], element)
+      if (result && typeof result.then === 'function') {
+        result.then(resolved => {
+          props[k] = resolved
+        })
+      } else {
+        props[k] = result
+      }
     }
   }
 }
 
-export const isPropertyInDefines = (key, element) => {}
-
-export const throughInitialDefine = async 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]
 
     if (isFunction(elementProp) && !isMethod(param, element)) {
       ref.__exec[param] = elementProp
-      const execParam = (elementProp = await execPromise(elementProp, element))
-
-      if (execParam) {
-        elementProp = element[param] = execParam.parse
-          ? execParam.parse()
-          : execParam
-        ref.__defineCache[param] = elementProp
+      let execParam = exec(elementProp, element)
+      if (execParam && typeof execParam.then === 'function') {
+        execParam.then(resolved => {
+          elementProp = element[param] =
+            resolved && resolved.parse ? resolved.parse() : resolved
+          if (resolved) {
+            ref.__defineCache[param] = elementProp
+          }
+        })
+      } else {
+        elementProp = element[param] =
+          execParam && execParam.parse ? execParam.parse() : execParam
+        if (execParam) {
+          ref.__defineCache[param] = elementProp
+        }
       }
     }
 
-    const execParam = await defineObj[param](
+    const execParam = defineObj[param](
       elementProp,
       element,
       element.state,
       element.context
     )
-    if (execParam) element[param] = execParam
+    if (execParam && typeof execParam.then === 'function') {
+      execParam.then(resolved => {
+        if (resolved) element[param] = resolved
+      })
+    } else if (execParam) {
+      element[param] = execParam
+    }
   }
   return element
 }
 
-export const throughUpdatedDefine = async 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]
     if (execParam) {
-      ref.__defineCache[param] = await execParam(
-        element,
-        element.state,
-        element.context
-      )
+      const result = execParam(element, element.state, element.context)
+      if (result && typeof result.then === 'function') {
+        result.then(resolved => {
+          ref.__defineCache[param] = resolved
+        })
+      } else {
+        ref.__defineCache[param] = result
+      }
+    }
+    const cached = exec(ref.__defineCache[param], element)
+    if (cached && typeof cached.then === 'function') {
+      cached.then(resolved => {
+        // Optionally assign or use resolved value if needed
+      })
+      continue
     }
-    const cached = await execPromise(ref.__defineCache[param], element)
     const newExecParam =
       typeof obj[param] === 'function'
         ? obj[param](cached, element, element.state, element.context)
         : undefined
-    if (newExecParam) element[param] = newExecParam
+    if (newExecParam && typeof newExecParam.then === 'function') {
+      newExecParam.then(resolved => {
+        element[param] = resolved
+      })
+    } else if (newExecParam) {
+      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,11 +15,9 @@ 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 = async (element, opts) => {
+export const createNode = (element, opts) => {
   // create and assign a node
   let { node, tag, __ref: ref } = element
 
@@ -34,7 +33,7 @@ export const createNode = async (element, opts) => {
     } else node = element.node = cacheNode(element)
 
     // trigger `on.attachNode`
-    await triggerEventOn('attachNode', element, opts)
+    triggerEventOn('attachNode', element, opts)
   }
   // node.dataset // .key = element.key
 
@@ -44,56 +43,59 @@ export const createNode = async (element, opts) => {
   }
 
   // iterate through exec props
-  await throughExecProps(element)
+  throughExecProps(element)
 
   // iterate through define
-  await throughInitialDefine(element)
+  throughInitialDefine(element)
 
   // iterate through exec
-  await throughInitialExec(element)
+  throughInitialExec(element)
 
-  await applyEventsOnNode(element, { isNewNode, ...opts })
+  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
     }
 
-    const isElement = await applyParam(param, element, opts)
+    const isElement = applyParam(param, element, opts)
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement
       if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = async () => {
-          await create(value, element, param, opts)
+        const createAsync = () => {
+          create(value, element, param, opts)
         }
 
         // TODO: test this with promise
         // handle lazy load
         if ((element.props && element.props.lazyLoad) || opts.lazyLoad) {
-          window.requestAnimationFrame(async () => {
-            await createAsync()
+          window.requestAnimationFrame(() => {
+            createAsync()
             if (!opts.preventUpdateListener) {
-              await triggerEventOn('lazyLoad', element, opts)
+              triggerEventOn('lazyLoad', element, opts)
             }
           })
-        } else await createAsync()
+        } else createAsync()
       }
     }
   }
 
   const content = element.children
-    ? await setChildren(element.children, element, opts)
-    : element.content || element.content
+    ? setChildren(element.children, element, opts)
+    : element.children || element.content
 
   if (content) {
-    await setContent(content, element, opts)
+    setContent(content, element, opts)
   }
 
   // node.dataset.key = key

package/package.json

@@ -1,39 +1,63 @@
 {
   "name": "@domql/element",
-  "version": "3.1.2",
+  "version": "3.2.7",
   "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 esbuild *.js **/*.js --target=es2019 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild *.js **/*.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.1.2",
-    "@domql/render": "^3.1.2",
-    "@domql/state": "^3.1.2",
-    "@domql/utils": "^3.1.2"
+    "@domql/report": "^3.2.3",
+    "@domql/state": "^3.2.3",
+    "@domql/utils": "^3.2.3",
+    "attrs-in-props": "^3.2.3"
   },
-  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
+  "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

@@ -1,8 +1,8 @@
 'use strict'
 
-import { deepContains, execPromise, isFunction, OPTIONS } from '@domql/utils'
+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,9 +13,9 @@ export const setContentKey = (element, opts = {}) => {
   return ref.contentElementKey
 }
 
-export const reset = async options => {
+export function reset (options) {
   const element = this
-  await create(element, element.parent, undefined, {
+  create(element, element.parent, undefined, {
     ignoreChildExtends: true,
     ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
@@ -23,30 +23,25 @@ export const reset = async options => {
   })
 }
 
-export const resetContent = async (params, element, opts) => {
+export const resetContent = (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
-    }
-  )
+  const contentElem = 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) {
+export const updateContent = 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)
+    element[contentElementKey].update(params, opts)
   }
 }
 
@@ -54,11 +49,11 @@ export const updateContent = async function (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)
+export function setContent (param, element, opts) {
+  const content = exec(param, element)
 
   if (content && element) {
-    await set.call(element, content, opts)
+    set.call(element, content, opts)
   }
 }
 
@@ -76,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) {
@@ -98,7 +94,7 @@ export const removeContent = function (el, opts = {}) {
   delete element[contentElementKey]
 }
 
-export const set = async function (params, options = {}, el) {
+export const set = function (params, options = {}, el) {
   const element = el || this
   const { __ref: ref } = element
 
@@ -119,7 +115,7 @@ export const set = async function (params, options = {}, el) {
 
   if (content?.update && !childHasChanged && !childrenIsDifferentFromCache) {
     if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-      const beforeUpdateReturns = await triggerEventOnUpdate(
+      const beforeUpdateReturns = triggerEventOnUpdate(
         'beforeUpdate',
         params,
         element,
@@ -127,9 +123,9 @@ export const set = async function (params, options = {}, el) {
       )
       if (beforeUpdateReturns === false) return element
     }
-    await content.update(params)
+    content.update(params)
     if (!options.preventUpdateListener && !options.preventListeners) {
-      await triggerEventOn('update', element, options)
+      triggerEventOn('update', element, options)
     }
     return
   }
@@ -152,15 +148,15 @@ export const set = async function (params, options = {}, el) {
   }
 
   if (lazyLoad) {
-    window.requestAnimationFrame(async () => {
-      await resetContent(params, element, options)
+    window.requestAnimationFrame(() => {
+      resetContent(params, element, options)
       // handle lazy load
       if (!options.preventUpdateListener) {
-        await triggerEventOn('lazyLoad', element, options)
+        triggerEventOn('lazyLoad', element, options)
       }
     })
   } else {
-    await resetContent(params, element, options)
+    resetContent(params, element, options)
   }
 }