@symbo.ls/element 3.14.0 → 3.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@symbo.ls/element",
-  "version": "3.14.0",
-  "description": "Core element creation, update, and disposal engine for smbls v4",
+  "version": "3.14.1",
+  "description": "Core element creation, update, and disposal engine for smbls v3.14",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -16,6 +16,9 @@
     "css-in-props": "^3.14.0",
     "attrs-in-props": "^3.14.0"
   },
-  "files": ["src", "index.js"],
+  "files": [
+    "src",
+    "index.js"
+  ],
   "license": "CC-BY-NC-4.0"
 }

package/src/cache.js

@@ -1,7 +1,7 @@
 'use strict'
 
 // Node caching - cloneNode from cached prototypes instead of createElement
-// This is already a v3 optimization that works well -- preserved in v4
+// This is already a v3 optimization that works well -- preserved in v3.14
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
 

package/src/create.js

@@ -155,12 +155,27 @@ export function create(definition, parent, key, options = {}, attachOptions) {
   if (definition.classlist !== undefined) element.classlist = definition.classlist
   if (definition.text !== undefined) element.text = definition.text
   if (definition.html !== undefined) element.html = definition.html
+  // The scope chain at any element resolves keys in this order:
+  //   own (definition.scope) → parent.scope → … → root.scope → context.globalScope
+  // Direct reads like `el.scope.LANG_META` walk the prototype chain, so a
+  // component that doesn't declare its own scope still sees parent scopes
+  // and the project's globalScope as fallbacks. Without `globalScope` at the
+  // bottom of the chain, every project pattern that puts shared constants
+  // in `globalScope.js` and reads them via `el.scope.X` was silently broken
+  // — the user's reactive function got `undefined` and either threw or
+  // rendered nothing. The frank-rewriter's `__scope` helper already chains
+  // through globalScope; this brings the runtime `el.scope` to parity.
+  const ancestorScope = parent?.scope
+  const globalScope =
+    (element.context && typeof element.context.globalScope === 'object' && element.context.globalScope) || null
+  const baseScope = ancestorScope ||
+    (globalScope ? Object.create(globalScope) : null)
   if (definition.scope !== undefined) {
-    element.scope = parent?.scope
-      ? Object.assign(Object.create(parent.scope), definition.scope)
+    element.scope = baseScope
+      ? Object.assign(Object.create(baseScope), definition.scope)
       : definition.scope
-  } else if (parent?.scope) {
-    element.scope = Object.create(parent.scope)
+  } else if (baseScope) {
+    element.scope = Object.create(baseScope)
   }
   if (definition.if !== undefined) element.if = definition.if
 
@@ -316,7 +331,21 @@ function createElementState(element, parent, definition) {
   // Dashboard defines `state: { useJson: true }` would lose its state because
   // the local definition has no `state` field, and we'd silently inherit
   // parent state instead.
-  const stateDef = definition.state !== undefined
+  // Treat an empty plain-object `state: {}` declaration as "not provided"
+  // when this is the root element AND context.state has content. Without
+  // this, scaffolded `app.js` files that ship with `state: {}` boilerplate
+  // would silently override context.state (loaded from `state.js`) and
+  // leave the root state empty at runtime — see chatbot template where
+  // `s.root.navTabs` resolved undefined despite a populated state.js.
+  // Explicit non-empty objects + non-root elements bypass this rewrite.
+  const isRootCandidate = !parent
+  const isEmptyObjectState = definition.state &&
+    typeof definition.state === 'object' &&
+    !Array.isArray(definition.state) &&
+    Object.keys(definition.state).length === 0
+  const useContextStateFallback = isRootCandidate && isEmptyObjectState && element.context?.state
+
+  const stateDef = (definition.state !== undefined && !useContextStateFallback)
     ? definition.state
     : (element.state && !isStore(element.state) ? element.state : undefined)
 
@@ -590,6 +619,23 @@ function registerEffects(element, definition) {
     }, { depth: ref.path.length })
     ref.__effects.push(effect)
     ref.__exec.style = fn
+  } else if (element.style && typeof element.style === 'object') {
+    // Nested-object style: function values per-key get individual effects.
+    // Static keys go through applyStaticMixins → applyStyles at mount.
+    // Without this branch, `style: { color: (el, s) => s.theme }` runs
+    // once at mount and never re-evaluates, while flat top-level
+    // `color: fn` IS reactive — surprising parity gap (FA-L23).
+    for (const styleKey in element.style) {
+      const styleFn = element.style[styleKey]
+      if (typeof styleFn !== 'function') continue
+      const effect = createEffect(() => {
+        try {
+          const val = styleFn(element, element.state, element.context)
+          if (element.node) applyStyles(element.node, { [styleKey]: val })
+        } catch (e) { /* style fn may fail before state is populated */ }
+      }, { depth: ref.path.length })
+      ref.__effects.push(effect)
+    }
   }
 
   // Attribute effects for function-valued attrs (check element.attr which includes extends)
@@ -617,6 +663,84 @@ function registerEffects(element, definition) {
     }
   }
 
+  // Reactive nested aria.X — `aria: { label: (el, s) => s.title }` re-runs
+  // on every state change. Static aria.X values are flattened to top-level
+  // attrs by `filterAttributesByTagName` (attrs-in-props/index.js), so we
+  // only wire effects for function values here.
+  if (element.aria && typeof element.aria === 'object') {
+    for (const ariaKey in element.aria) {
+      const ariaFn = element.aria[ariaKey]
+      if (typeof ariaFn !== 'function') continue
+      const attrName = 'aria-' + ariaKey.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
+      const effect = createEffect(() => {
+        try {
+          const val = ariaFn(element, element.state, element.context)
+          if (!element.node?.setAttribute) return
+          if (val == null || val === false) {
+            element.node.removeAttribute(attrName)
+          } else if (typeof val !== 'function' && typeof val !== 'object') {
+            element.node.setAttribute(attrName, val === true ? '' : val)
+          }
+        } catch (e) { /* aria fn may fail before state is populated */ }
+      }, { depth: ref.path.length })
+      ref.__effects.push(effect)
+    }
+  }
+
+  // Reactive nested data.X — same shape as aria, kebab-cases the key.
+  if (element.data && typeof element.data === 'object') {
+    for (const dataKey in element.data) {
+      const dataFn = element.data[dataKey]
+      if (typeof dataFn !== 'function') continue
+      const kebab = dataKey.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
+      const attrName = 'data-' + kebab
+      const effect = createEffect(() => {
+        try {
+          const val = dataFn(element, element.state, element.context)
+          if (!element.node?.setAttribute) return
+          if (val == null || val === false) {
+            element.node.removeAttribute(attrName)
+          } else if (typeof val !== 'function' && typeof val !== 'object') {
+            element.node.setAttribute(attrName, val === true ? '' : val)
+          }
+        } catch (e) { /* data fn may fail before state is populated */ }
+      }, { depth: ref.path.length })
+      ref.__effects.push(effect)
+    }
+  }
+
+  // Reactive classlist / class — `class: { active: (el, s) => s.isOpen }`
+  // toggles on state change. Static keys are applied at mount by
+  // applyStaticMixins; only function-valued keys need effects here.
+  const classObj = (element.classlist && typeof element.classlist === 'object' && !Array.isArray(element.classlist))
+    ? element.classlist
+    : (element.class && typeof element.class === 'object' && !Array.isArray(element.class))
+      ? element.class
+      : null
+  if (classObj) {
+    for (const className in classObj) {
+      const classFn = classObj[className]
+      if (typeof classFn !== 'function') continue
+      const effect = createEffect(() => {
+        try {
+          const val = classFn(element, element.state, element.context)
+          if (!element.node?.classList) return
+          // Mirror the static-path logic: `val: 'custom-name'` → toggle that
+          // string class on; falsy → toggle base key off; truthy non-string →
+          // toggle base key on.
+          if (typeof val === 'string') {
+            element.node.classList.add(val)
+          } else if (val) {
+            element.node.classList.add(className)
+          } else {
+            element.node.classList.remove(className)
+          }
+        } catch (e) { /* class fn may fail before state is populated */ }
+      }, { depth: ref.path.length })
+      ref.__effects.push(effect)
+    }
+  }
+
   // If condition effect
   if (typeof definition.if === 'function') {
     const fn = definition.if
@@ -785,10 +909,17 @@ function applyStaticMixins(element) {
     }
   }
 
-  // Data attributes
+  // Data attributes — same guard shape as the attr loop above. Function-
+  // valued data.X is handled by the reactive-data effect in registerEffects;
+  // writing the function reference into `dataset` here would render as a
+  // stringified function literal in the DOM until something else overwrote
+  // it. Skip null/false/object values too.
   if (element.data && typeof element.data === 'object') {
     for (const key in element.data) {
-      if (node.dataset) node.dataset[key] = element.data[key]
+      const val = element.data[key]
+      if (typeof val === 'function' || typeof val === 'object') continue
+      if (val == null || val === false) continue
+      if (node.dataset) node.dataset[key] = val === true ? '' : val
     }
   }
 
@@ -826,12 +957,22 @@ function applyStyles(node, styles) {
 
     try {
       const str = String(val)
-      if (str.includes('!important')) {
-        const cssProp = prop.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
-        node.style.setProperty(cssProp, str.replace(/\s*!important\s*$/, ''), 'important')
-      } else {
-        node.style[prop] = val
-      }
+      // Reactive writes go through `setProperty` as plain inline (no
+      // priority). Inline already beats class-rule selectors in the cascade
+      // — the smbls atomic CSS engine never emits `!important`, so a plain
+      // inline value wins on its own. The previous `'important'` priority
+      // was a cargo-culted band-aid for an apparent stale-getComputedStyle
+      // observation; in practice it caused CSS transitions on the same
+      // element to leave stuck `Animation` objects (currentTime:0,
+      // fill:'backwards') because Chrome's transition state machine
+      // mishandles a mid-transition switch to/from `!important`.
+      // If a value carries an explicit `!important` suffix from upstream
+      // (rare — design tokens etc.), honor it.
+      const cssProp = prop.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
+      const trimmed = str.trim()
+      const isImportant = /\s*!important\s*$/.test(trimmed)
+      const cleanVal = trimmed.replace(/\s*!important\s*$/, '')
+      node.style.setProperty(cssProp, cleanVal, isImportant ? 'important' : '')
     } catch (e) {
       // Invalid style value
     }
@@ -1208,6 +1349,22 @@ function applyAttrsInProps(element) {
   const { node } = element
   if (!node || !node.setAttribute) return
 
+  // Apply STATIC nested aria.X / data.X values at mount. Function values
+  // are owned by the reactive aria/data effects in registerEffects — those
+  // re-run on state changes. Without this loop, aria/data static values
+  // declared as nested objects (`aria: { label: 'Search' }`) silently
+  // dropped — `applyStaticMixins` already promoted top-level data.X to
+  // dataset and the parallel aria branch had no equivalent.
+  if (element.aria && typeof element.aria === 'object') {
+    for (const ariaKey in element.aria) {
+      const v = element.aria[ariaKey]
+      if (typeof v === 'function' || typeof v === 'object') continue
+      if (v == null || v === false) continue
+      const attrName = 'aria-' + ariaKey.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
+      node.setAttribute(attrName, v === true ? '' : v)
+    }
+  }
+
   // Apply attribute transforms (src, href, poster, etc. with file/template resolution)
   const transformed = applyAttrTransforms(element)
   for (const attr in transformed) {
@@ -1264,8 +1421,10 @@ function registerEvents(element, options) {
 
     let handler = element[key]
 
-    // String shortcut: onClick: 'fnName' → el.call('fnName', ev)
-    if (typeof handler === 'string') {
+    // String shortcut: onClick: 'fnName' → el.call('fnName', ev).
+    // Only valid JS identifiers — arbitrary strings like 'not a function' fall
+    // through to the typeof-function check below and are skipped.
+    if (typeof handler === 'string' && /^[A-Za-z_$][\w$]*$/.test(handler)) {
       const fnName = handler
       handler = function stringHandlerShortcut (ev) {
         return element.call(fnName, ev)

package/src/methods.js

@@ -195,7 +195,11 @@ const elementProto = {
   setNodeStyles(styles) {
     if (!this.node?.style) return
     for (const prop in styles) {
-      this.node.style[prop] = styles[prop]
+      const val = styles[prop]
+      if (val == null) continue
+      const cssProp = prop.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
+      const str = String(val).replace(/\s*!important\s*$/, '')
+      this.node.style.setProperty(cssProp, str, 'important')
     }
   },
 

package/src/update.js

@@ -47,11 +47,19 @@ export function update(params = {}, opts = {}) {
       }
     }
 
-    // Update style
+    // Update style — mirrors applyStyles in create.js: write via setProperty
+    // with `important` priority so cascade resolves to the inline value
+    // even when the element carries atomic CSS classes for sibling static
+    // props. Plain `node.style[prop] = val` writes don't invalidate the
+    // cached cascade when the first-paint resolved to a different value.
     if (params.style && element.node?.style) {
       if (!ref.__exec.style) {
         for (const prop in params.style) {
-          element.node.style[prop] = params.style[prop]
+          const val = params.style[prop]
+          if (val == null) continue
+          const cssProp = prop.replace(/[A-Z]/g, m => '-' + m.toLowerCase())
+          const str = String(val).replace(/\s*!important\s*$/, '')
+          element.node.style.setProperty(cssProp, str, 'important')
         }
       }
       if (!element.style) element.style = {}