@symbo.ls/element 3.14.0

package/src/update.js

@@ -0,0 +1,124 @@
+'use strict'
+
+import { batch, isStore } from '@symbo.ls/signal'
+import { REGISTRY } from './registry.js'
+import { create } from './create.js'
+import { runPluginHook } from '@symbo.ls/utils/function.js'
+
+export function update(params = {}, opts = {}) {
+  const element = this
+  const ref = element.__ref
+  if (!ref) return
+
+  // Normalize string/number shorthand
+  if (typeof params === 'string' || typeof params === 'number') {
+    params = { text: params }
+  }
+
+  // Fire onBeforeUpdate (v3 syntax — directly on element)
+  if (!opts.preventListeners && typeof element.onBeforeUpdate === 'function') {
+    const result = element.onBeforeUpdate(element, element.state, element.context, opts)
+    if (result === false) return element
+  }
+
+  batch(() => {
+    // Update state if provided
+    if (params.state && isStore(element.state)) {
+      element.state.update(params.state)
+    }
+
+    // Update text
+    if (params.text !== undefined) {
+      element.text = params.text
+      if (!ref.__exec.text && element.node) {
+        if (element.tag === 'string') {
+          element.node.nodeValue = params.text ?? ''
+        } else {
+          element.node.textContent = params.text ?? ''
+        }
+      }
+    }
+
+    // Update html
+    if (params.html !== undefined) {
+      element.html = params.html
+      if (!ref.__exec.html && element.node) {
+        element.node.innerHTML = params.html
+      }
+    }
+
+    // Update style
+    if (params.style && element.node?.style) {
+      if (!ref.__exec.style) {
+        for (const prop in params.style) {
+          element.node.style[prop] = params.style[prop]
+        }
+      }
+      if (!element.style) element.style = {}
+      Object.assign(element.style, params.style)
+    }
+
+    if (params.attr && element.node?.setAttribute) {
+      for (const key in params.attr) {
+        const val = params.attr[key]
+        if (val == null || val === false) {
+          element.node.removeAttribute(key)
+        } else if (typeof val !== 'function' && typeof val !== 'object') {
+          element.node.setAttribute(key, val === true ? '' : val)
+        }
+      }
+      if (!element.attr) element.attr = {}
+      Object.assign(element.attr, params.attr)
+    }
+
+    if (params.data && element.node?.dataset) {
+      for (const key in params.data) {
+        element.node.dataset[key] = params.data[key]
+      }
+      if (!element.data) element.data = {}
+      Object.assign(element.data, params.data)
+    }
+
+    // Handle child element updates and property changes
+    for (const param in params) {
+      if (REGISTRY.has(param)) continue
+      if (param === 'state') continue
+
+      const childParams = params[param]
+      const child = element[param]
+
+      if (child && child.__ref && typeof child.update === 'function') {
+        // Existing child element — recursive update
+        child.update(childParams, opts)
+      } else if (typeof childParams === 'object' && childParams !== null) {
+        const firstChar = param.charCodeAt(0)
+        if (firstChar >= 65 && firstChar <= 90) {
+          // Uppercase key with object value — create new child element
+          create(childParams, element, param, opts)
+        }
+      } else if (param !== 'text' && param !== 'html' && param !== 'style' && param !== 'attr' && param !== 'data') {
+        // Primitive property update (e.g. name, icon, value)
+        // Set the property — if it has a reactive effect, the effect will re-run
+        element[param] = childParams
+      }
+    }
+  })
+
+  // Re-evaluate conditionals (.prop / !prop). Signal-driven predicates already
+  // re-fired via createEffect; this catches imperative updates to non-signal
+  // predicates (e.g. element.update({ isActive: true }) where isActive is a
+  // plain element prop, not a state field).
+  if (element.node && ref.__conditionalRunners) {
+    for (const run of ref.__conditionalRunners) run()
+  }
+
+  runPluginHook('update', element)
+
+  if (!opts.preventListeners && typeof element.onUpdate === 'function') {
+    element.onUpdate(element, element.state, element.context, opts)
+  }
+
+  return element
+}
+
+export default update