@domql/element 2.31.25 → 2.31.27

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,

package/iterate.js

@@ -12,7 +12,7 @@ import {
 } from '@domql/utils'
 
 import { METHODS_EXL, overwrite } from './utils/index.js'
-import { isMethod } from './methods/index.js'
+import { isMethod, warn } from './methods/index.js'
 
 export const throughInitialExec = async (element, exclude = {}) => {
   const { __ref: ref } = element
@@ -65,12 +65,14 @@ export const throughUpdatedExec = async (
   return changes
 }
 
-export const throughExecProps = element => {
+export const throughExecProps = (element) => {
   const { __ref: ref } = element
   const { props } = element
   for (const k in props) {
     const isDefine =
       k.startsWith('is') || k.startsWith('has') || k.startsWith('use')
+    if (!ref.__execProps)
+      return warn.call(element, 'Element was not initiated to execute props')
     const cachedExecProp = ref.__execProps[k]
     if (isFunction(cachedExecProp)) {
       props[k] = exec(cachedExecProp, element)
@@ -81,7 +83,7 @@ export const throughExecProps = element => {
   }
 }
 
-export const throughInitialDefine = async element => {
+export const throughInitialDefine = async (element) => {
   const { define, context, __ref: ref } = element
 
   let defineObj = {}
@@ -119,7 +121,7 @@ export const throughInitialDefine = async element => {
   return element
 }
 
-export const throughUpdatedDefine = async element => {
+export const throughUpdatedDefine = async (element) => {
   const { context, define, __ref: ref } = element
   const changes = {}
 

package/methods/index.js

@@ -75,6 +75,12 @@ export function lookdown(param) {
 
     if (v === param) return childElem
     else if (isFunction(param)) {
+      if (!childElem) {
+        this.error(
+          `"${v}" found in element __children, but content is not defined`
+        )
+        continue
+      }
       const exec = param(childElem, childElem.state, childElem.context)
       if (childElem.state && exec) {
         return childElem
@@ -98,6 +104,12 @@ export function lookdownAll(param, results = []) {
 
     if (v === param) results.push(childElem)
     else if (isFunction(param)) {
+      if (!childElem) {
+        this.error(
+          `"${v}" found in element __children, but content is not defined`
+        )
+        continue
+      }
       const exec = param(childElem, childElem.state, childElem.context)
       if (childElem.state && exec) results.push(childElem)
     }
@@ -121,7 +133,7 @@ export function setNodeStyles(params = {}) {
   return el
 }
 
-export async function remove(opts) {
+export async function remove(opts = {}) {
   const element = this
   const beforeRemoveReturns = triggerEventOn('beforeRemove', element, opts)
   if (beforeRemoveReturns === false) return element
@@ -144,10 +156,10 @@ export function get(param) {
   return element[param]
 }
 
-export function setProps(param, options) {
+export function setProps(param, opts = {}) {
   const element = this
   if (!param || !element.props) return
-  element.update({ props: param }, options)
+  element.update({ props: param }, opts)
   return element
 }
 
@@ -274,6 +286,8 @@ export function error(...params) {
   // if (isNotProduction()) {
   if (params[params.length - 1]?.debugger) debugger // eslint-disable-line
   if (params[params.length - 1]?.verbose) verbose.call(this, ...params)
+  if (isFunction(params[params.length - 1]?.onError))
+    params[params.length - 1]?.onError.call(this, ...params)
   console.error(...params, this)
   // }
 }
@@ -289,8 +303,8 @@ export function nextElement() {
   return parent[nextChild]
 }
 
-export async function append(el, key) {
-  return await create(el, this, key)
+export async function append(el, key, opts) {
+  return await create(el, this, key, opts)
 }
 
 export function previousElement(el) {
@@ -363,8 +377,8 @@ export function call(fnKey, ...args) {
     // Return synchronous results directly
     return result
   } catch (error) {
-    console.error(`Error calling '${fnKey}':`, error)
-    throw error
+    console.error(`Error calling '${fnKey}'`)
+    throw new Error(error)
   }
 }
 

package/mixins/content.js

@@ -43,7 +43,7 @@ export const removeContent = function (el, opts = {}) {
         __cached[contentElementKey].remove()
     }
 
-    ref.__children.splice(ref.__children.indexOf(element[contentElementKey]), 1)
+    ref.__children.splice(ref.__children.indexOf(contentElementKey), 1)
 
     delete element[contentElementKey]
   }
@@ -53,7 +53,7 @@ export const removeContent = function (el, opts = {}) {
  * Appends anything as content
  * an original one as a child
  */
-export async function setContent (param, element, node, opts) {
+export async function setContent(param, element, node, opts) {
   const contentElementKey = setContentKey(element, opts)
   if (param && element) {
     if (element[contentElementKey]?.update) {

package/node.js

@@ -70,7 +70,8 @@ export const createNode = async (element, options) => {
     }
   }
 
-  for (const param in element) {
+  const keys = Object.keys(element)
+  for (const param of keys) {
     const value = element[param]
 
     if (!Object.hasOwnProperty.call(element, param)) continue
@@ -83,6 +84,10 @@ export const createNode = async (element, options) => {
     )
       continue
 
+    if (param === 'onClick') {
+      debugger
+    }
+
     const isElement = await applyParam(param, element, options)
     if (!isElement) continue
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.31.25",
+  "version": "2.31.27",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -27,12 +27,12 @@
     "prepublish": "npx rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/event": "^2.31.25",
-    "@domql/render": "^2.31.25",
-    "@domql/state": "^2.31.25",
-    "@domql/utils": "^2.31.25"
+    "@domql/event": "^2.31.27",
+    "@domql/render": "^2.31.27",
+    "@domql/state": "^2.31.27",
+    "@domql/utils": "^2.31.27"
   },
-  "gitHead": "b80aa4c1d31877d2f759404129e750516af33d7b",
+  "gitHead": "0edcd5aae5c16b6a53a7e9b6512bb2562e8eb8a1",
   "devDependencies": {
     "@babel/core": "^7.27.1"
   }

package/set.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { deepContains, setContentKey } from '@domql/utils'
+import { deepClone, deepContains, setContentKey } from '@domql/utils'
 
 import { OPTIONS } from './cache/options.js'
 import { create } from './create.js'
@@ -11,8 +11,6 @@ import { triggerEventOn, triggerEventOnUpdate } from '@domql/event'
 export const resetElement = async (params, element, options) => {
   if (!options.preventRemove) removeContent(element, options)
   const { __ref: ref } = element
-  // console.warn('resetting content', ref.path)
-  if (params instanceof Promise) console.log(params, params instanceof Promise)
   await create(params, element, ref.contentElementKey || 'content', {
     ignoreChildExtend: true,
     ...registry.defaultOptions,
@@ -21,7 +19,7 @@ export const resetElement = async (params, element, options) => {
   })
 }
 
-export const reset = async options => {
+export const reset = async (options) => {
   const element = this
   await create(element, element.parent, undefined, {
     ignoreChildExtend: true,
@@ -33,7 +31,7 @@ export const reset = async options => {
 
 export const set = async function (params, options = {}, el) {
   const element = el || this
-  const { __ref: ref } = element
+  // const { __ref: ref } = element
 
   if (
     options.preventContentUpdate ||
@@ -45,32 +43,36 @@ export const set = async function (params, options = {}, el) {
     if (options.routerContentElement !== options.lastElement.content) return
   }
 
-  const content = setContentKey(element, options)
-  const __contentRef = content && content.__ref
+  // const contentKey = setContentKey(element, options)
+  // const content = element[contentKey]
+  // const __contentRef = content && content.__ref
   const lazyLoad = element.props && element.props.lazyLoad
 
   const hasCollection =
     element.$collection || element.$stateCollection || element.$propsCollection
   if (options.preventContentUpdate === true && !hasCollection) return
 
-  if (
-    ref.__noCollectionDifference ||
-    (__contentRef && __contentRef.__cached && deepContains(params, content))
-  ) {
-    if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-      const beforeUpdateReturns = await triggerEventOnUpdate(
-        'beforeUpdate',
-        params,
-        element,
-        options
-      )
-      if (beforeUpdateReturns === false) return element
-    }
-    if (content?.update) await content.update()
-    if (!options.preventUpdateListener)
-      await triggerEventOn('update', element, options)
-    return
-  }
+  // console.log(deepClone(params), deepClone(content))
+  // console.log(deepContains(params, content))
+
+  // if (
+  //   ref.__noCollectionDifference ||
+  //   (__contentRef && __contentRef.__cached && deepContains(params, content))
+  // ) {
+  //   // if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+  //   //   const beforeUpdateReturns = await triggerEventOnUpdate(
+  //   //     'beforeUpdate',
+  //   //     params,
+  //   //     element,
+  //   //     options
+  //   //   )
+  //   //   if (beforeUpdateReturns === false) return element
+  //   // }
+  //   // if (content?.update) await content.update()
+  //   // if (!options.preventUpdateListener)
+  //   //   await triggerEventOn('update', element, options)
+  //   return
+  // }
 
   if (params) {
     let { childExtend, props } = params

package/update.js

@@ -45,6 +45,11 @@ const UPDATE_DEFAULT_OPTIONS = {
   excludes: METHODS_EXL
 }
 
+// const updateStack = []
+// requestAnimationFrame(() => {
+//   updateStack.forEach()
+// })
+
 export const update = async function (params = {}, opts) {
   const calleeElementCache = opts?.calleeElement
   const options = deepClone(
@@ -53,13 +58,30 @@ export const update = async function (params = {}, opts) {
       : UPDATE_DEFAULT_OPTIONS,
     { exclude: ['calleeElement'] }
   )
-  options.calleeElement = calleeElementCache
   const element = this
+  options.calleeElement = calleeElementCache || this
   const { parent, node, key } = element
   const { excludes, preventInheritAtCurrentState } = options
 
   let ref = element.__ref
   if (!ref) ref = element.__ref = {}
+
+  // self calling is detected
+  if (this === options.calleeElement && !options.allowStorm) {
+    if (ref.__selfCallIteration === undefined) ref.__selfCallIteration = 0
+    else ref.__selfCallIteration++
+    // prevent storm
+    if (ref.__selfCallIteration > 100) {
+      ref.__selfCallIteration = 0
+      return this.error('Potential self calling loop in update detected', opts)
+    }
+    // make storm detection time based
+    const stormTimeout = setTimeout(() => {
+      ref.__selfCallIteration = 0
+      clearTimeout(stormTimeout)
+    }, 350)
+  }
+
   const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(
     element,
     options
@@ -89,7 +111,7 @@ export const update = async function (params = {}, opts) {
   if (ref.__if && !options.preventPropsUpdate) {
     const hasParentProps =
       parent.props && (parent.props[key] || parent.props.childProps)
-    const hasFunctionInProps = ref.__props.filter(v => isFunction(v))
+    const hasFunctionInProps = ref.__props.filter((v) => isFunction(v))
     const props = params.props || hasParentProps || hasFunctionInProps.length
     if (props) updateProps(props, element, parent)
   }
@@ -144,7 +166,8 @@ export const update = async function (params = {}, opts) {
     else options.preventUpdateAfterCount++
   }
 
-  for (const param in element) {
+  const keys = Object.keys(element)
+  for (const param of keys) {
     const prop = element[param]
 
     if (!Object.hasOwnProperty.call(element, param)) continue
@@ -389,7 +412,7 @@ const inheritStateUpdates = async (element, options) => {
 
 const createStateUpdate = async (element, parent, options) => {
   const __stateChildren = element.state.__children
-  const newState = await createState(element, parent)
+  const newState = await createState(element, parent, options)
   element.state = newState
   for (const child in __stateChildren) {
     // check this for inherited states