@domql/element 2.5.200 → 3.0.1

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

package/utils/onlyResolveExtends.js

@@ -1,14 +1,18 @@
 'use strict'
 
-import { exec, isFunction, isObject, isUndefined } from '@domql/utils'
+import {
+  exec,
+  initProps,
+  isFunction,
+  isMethod,
+  isObject,
+  isUndefined
+} from '@domql/utils'
 import { create } from '..'
 import { REGISTRY } from '../mixins/index.js'
-import { applyVariant, isVariant } from '.'
-import { isMethod } from '../methods'
 import { addMethods } from '../methods/set'
 import { createState } from '@domql/state'
 import { detectTag } from '@domql/render'
-import { createProps } from '../props'
 import { throughInitialDefine, throughInitialExec } from '../iterate'
 
 export const onlyResolveExtends = (element, parent, key, options) => {
@@ -24,10 +28,8 @@ export const onlyResolveExtends = (element, parent, key, options) => {
 
     // enable TRANSFORM in data
     // TODO: do we need this at all?
-    // if (!element.transform) element.transform = {}
 
     // enable CACHING
-    if (!ref.__cached) ref.__cached = {}
     if (!ref.__defineCache) ref.__defineCache = {}
 
     // enable EXEC
@@ -68,10 +70,11 @@ export const onlyResolveExtends = (element, parent, key, options) => {
   } else ref.__if = true
   /// ///
 
-  if (element.node && ref.__if) { parent[key || element.key] = element } // Borrowed from assignNode()
+  if (element.node && ref.__if) {
+    parent[key || element.key] = element
+  } // Borrowed from assignNode()
 
-  createProps(element, parent, options)
-  applyVariant(element, parent)
+  initProps(element, parent, options)
 
   if (element.tag !== 'string' && element.tag !== 'fragment') {
     throughInitialDefine(element)
@@ -82,18 +85,26 @@ export const onlyResolveExtends = (element, parent, key, options) => {
       if (
         isUndefined(prop) ||
         isMethod(param, element) ||
-        isObject(REGISTRY[param]) ||
-        isVariant(param)
-      ) continue
+        isObject(REGISTRY[param])
+      ) {
+        continue
+      }
 
       const hasDefine = element.define && element.define[param]
-      const contextHasDefine = element.context && element.context.define &&
-            element.context.define[param]
+      const contextHasDefine =
+        element.context &&
+        element.context.define &&
+        element.context.define[param]
       const optionsHasDefine = options.define && options.define[param]
 
       if (REGISTRY[param] && !optionsHasDefine) {
         continue
-      } else if (element[param] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
+      } else if (
+        element[param] &&
+        !hasDefine &&
+        !optionsHasDefine &&
+        !contextHasDefine
+      ) {
         create(exec(prop, element), element, param, options)
       }
     }
@@ -104,7 +115,7 @@ export const onlyResolveExtends = (element, parent, key, options) => {
   delete element.update
   delete element.__element
 
-  // added by createProps
+  // added by initProps
   if (element.props) {
     delete element.props.update
     delete element.props.__element

package/cache/index.js

@@ -1,3 +0,0 @@
-'use strict'
-
-export const cache = {}

package/cache/options.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export const OPTIONS = {}
-export default OPTIONS

package/dist/cjs/cache/index.js

@@ -1,24 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var cache_exports = {};
-__export(cache_exports, {
-  cache: () => cache
-});
-module.exports = __toCommonJS(cache_exports);
-const cache = {};

package/dist/cjs/cache/options.js

@@ -1,26 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var options_exports = {};
-__export(options_exports, {
-  OPTIONS: () => OPTIONS,
-  default: () => options_default
-});
-module.exports = __toCommonJS(options_exports);
-const OPTIONS = {};
-var options_default = OPTIONS;