@domql/element 3.1.2 → 3.2.3

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,6 +42,12 @@ 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) {
@@ -58,7 +70,7 @@ 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) {
@@ -66,17 +78,31 @@ export const throughExecProps = async element => {
       k.startsWith('is') || k.startsWith('has') || k.startsWith('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 = {}
@@ -89,28 +115,42 @@ export const throughInitialDefine = async element => {
 
     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 = {}
 
@@ -121,18 +161,33 @@ export const throughUpdatedDefine = async element => {
   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/mixins/content.js

@@ -0,0 +1,65 @@
+'use strict'
+
+import { isFunction, setContentKey } from '@domql/utils'
+import { set } from '../set.js'
+
+export const updateContent = function (params, options) {
+  const element = this
+  const ref = element.__ref
+
+  const contentKey = ref.contentElementKey
+
+  if (!element[contentKey]) return
+  if (element[contentKey].update) element[contentKey].update(params, options)
+}
+
+export const removeContent = function (el, opts = {}) {
+  const element = el || this
+  const { __ref: ref } = element
+  const contentElementKey = setContentKey(element, opts)
+
+  if (opts.contentElementKey !== 'content') opts.contentElementKey = 'content'
+  if (element[contentElementKey]) {
+    if (element[contentElementKey].node && element.node) {
+      if (element[contentElementKey].tag === 'fragment')
+        element.node.innerHTML = ''
+      else {
+        const contentNode = element[contentElementKey].node
+        if (contentNode.parentNode === element.node)
+          element.node.removeChild(element[contentElementKey].node)
+      }
+    }
+
+    const { __cached } = ref
+    if (__cached && __cached[contentElementKey]) {
+      if (__cached[contentElementKey].tag === 'fragment')
+        __cached[contentElementKey].parent.node.innerHTML = ''
+      else if (
+        __cached[contentElementKey] &&
+        isFunction(__cached[contentElementKey].remove)
+      )
+        __cached[contentElementKey].remove()
+    }
+
+    ref.__children.splice(ref.__children.indexOf(element[contentElementKey]), 1)
+
+    delete element[contentElementKey]
+  }
+}
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export function setContent (param, element, node, opts) {
+  const contentElementKey = setContentKey(element, opts)
+  if (param && element) {
+    if (element[contentElementKey]?.update) {
+      element[contentElementKey].update({}, opts)
+    } else {
+      set.call(element, param, opts)
+    }
+  }
+}
+
+export default setContent

package/mixins/html.js

@@ -7,7 +7,7 @@ import { exec } from '@domql/utils'
  * an original one as a child
  */
 export function html (param, element, node) {
-  const prop = exec(param, element) || exec(element?.props?.html, element)
+  const prop = exec(element?.props?.html || param, element)
   const { __ref } = element
   if (prop !== __ref.__html) {
     // const parser = new window.DOMParser()

package/mixins/registry.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import attr from './attr.js'
+import { attr } from './attr.js'
 import { classList } from './classList.js'
 import data from './data.js'
 import html from './html.js'

package/mixins/scope.js

@@ -6,7 +6,7 @@ import { isFunction, isObject } from '@domql/utils'
  * Apply data parameters on the DOM nodes
  * this should only work if `showOnNode: true` is passed
  */
-export async function scope (params, element, node) {
+export function scope (params, element, node) {
   if (!isObject(params)) return
 
   // Apply data params on node

package/mixins/state.js

@@ -1,9 +1,9 @@
 'use strict'
 
-import { execPromise, isObject, STATE_METHODS } from '@domql/utils'
+import { exec, isObject, STATE_METHODS } from '@domql/utils'
 
-export async function state (params, element, node) {
-  const state = await execPromise(params, element)
+export function state (params, element, node) {
+  const state = exec(params, element)
 
   if (isObject(state)) {
     for (const param in state) {

package/mixins/text.js

@@ -7,10 +7,10 @@ import { exec, isString } from '@domql/utils'
  * Creates a text node and appends into
  * an original one as a child
  */
-export async function text (param, element, node) {
-  let prop = exec(param || element.props.text, element)
+export function text (param, element, node) {
+  let prop = exec(element.props.text || param, element)
   if (isString(prop) && prop.includes('{{')) {
-    prop = element.call('replaceLiteralsWithObjectFields', prop)
+    prop = element.call('replaceLiteralsWithObjectFields', prop, element.state)
   }
   if (element.tag === 'string') {
     node.nodeValue = prop
@@ -19,7 +19,7 @@ export async function text (param, element, node) {
       if (element.__text.text === prop) return
       element.__text.text = prop
       if (element.__text.node) element.__text.node.nodeValue = prop
-    } else await create({ tag: 'string', text: prop }, element, '__text')
+    } else create({ tag: 'string', text: prop }, element, '__text')
   }
 }
 

package/node.js

@@ -18,7 +18,7 @@ import { setContent } from './set.js'
 
 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 +34,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,15 +44,15 @@ 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 })
+  applyEventsOnNode(element, { isNewNode, ...opts })
 
   for (const param in element) {
     const value = element[param]
@@ -66,34 +66,34 @@ export const createNode = async (element, opts) => {
       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)
+    ? setChildren(element.children, element, opts)
     : element.content || element.content
 
   if (content) {
-    await setContent(content, element, opts)
+    setContent(content, element, opts)
   }
 
   // node.dataset.key = key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "3.1.2",
+  "version": "3.2.3",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -21,18 +21,18 @@
   ],
   "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: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"
   },
   "dependencies": {
-    "@domql/event": "^3.1.2",
-    "@domql/render": "^3.1.2",
-    "@domql/state": "^3.1.2",
-    "@domql/utils": "^3.1.2"
+    "@domql/event": "^3.2.3",
+    "@domql/render": "^3.2.3",
+    "@domql/state": "^3.2.3",
+    "@domql/utils": "^3.2.3"
   },
-  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {
     "@babel/core": "^7.26.0"
   }

package/set.js

@@ -1,6 +1,6 @@
 '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'
 
@@ -13,9 +13,9 @@ export const setContentKey = (element, opts = {}) => {
   return ref.contentElementKey
 }
 
-export const reset = async options => {
+export const 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)
   }
 }
 
@@ -98,7 +93,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 +114,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 +122,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 +147,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)
   }
 }