sprae 12.4.16 → 13.0.0

package/core.js

@@ -20,6 +20,9 @@ export const _add = Symbol('init')
 /** Directive prefix (default: ':') */
 export let prefix = ':';
 
+/** Check if element is a custom element (has hyphen in tag name) */
+export const isCE = (el) => el.localName?.includes('-')
+
 /**
  * A reactive signal containing a value.
  * @template T
@@ -144,16 +147,37 @@ const err = (e, expr, el = currentEl) => {
  * @param {Object} [state] - Initial state values to populate the element's reactive state.
  * @returns {SpraeState & Object} The reactive state object associated with the element.
  */
-const sprae = (el = document.body, state) => {
+const sprae = (root = document.body, state) => {
   // repeated call can be caused by eg. :each with new objects with old keys
-  if (el[_state]) return Object.assign(el[_state], state)
+  if (root[_state]) {
+    // custom elements: processor may have set _state in connectedCallback,
+    // but parent still needs to process directives (prop setters) against caller's state
+    if (isCE(root)) {
+      Object.assign(root[_state], state)
+      let callerState = store(state || {}), propOffs = []
+      let _attrs = root.attributes
+      if (_attrs) for (let i = 0; i < _attrs.length;) {
+        let { name, value } = _attrs[i]
+        if (name.startsWith(prefix)) {
+          root.removeAttribute(name)
+          let start = dir(root, name.slice(prefix.length), value, callerState)
+          propOffs.push(start())
+        } else i++
+      }
+      // chain prop effect cleanup to element disposal
+      let prevDispose = root[_dispose]
+      root[_dispose] = () => { propOffs.map(off => off?.()); prevDispose?.() }
+      return root[_state]
+    }
+    return Object.assign(root[_state], state)
+  }
 
-  // console.group('sprae', el)
+  // console.group('sprae', root)
 
   // take over existing state instead of creating a clone
   state = store(state || {})
 
-  let fx = [], offs = []
+  let el = root, fx = [], offs = []
 
   // on/off all effects
   // we don't call prevOn as convention: everything defined before :else :if won't be disabled by :if
@@ -181,10 +205,14 @@ const sprae = (el = document.body, state) => {
         fx.push(start = dir(el, name.slice(prefix.length), value, state)), offs.push(start())
 
         // stop after subsprae like :each, :if, :scope etc.
-        if (_state in el) return
+        // custom elements: continue processing all directives (prop setters), descent blocked separately (line 189)
+        if (_state in el && !isCE(el)) return
       } else i++
     }
 
+    // custom elements own their children — don't descend
+    if (el !== root && isCE(el)) return
+
     // :if and :each replace element with text node, which tweaks .children length, but .childNodes length persists
     // real DOM: firstChild/nextSibling avoids array copy; frag.childNodes is already snapshot array
     if (el.firstChild !== undefined) {
@@ -398,16 +426,20 @@ export const dashcase = (str) => str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
  * @param {string | boolean | null | undefined} v - Attribute value (null/false removes, true sets empty)
  * @returns {void}
  */
-export const attr = (el, name, v) => (v == null || v === false) ? el.removeAttribute(name) : el.setAttribute(name, v === true ? "" : v);
+const camelcase = (str) => str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+
+export const attr = (el, name, v) => (v == null || v === false) ? el.removeAttribute(name) :
+  isCE(el) ? (el[camelcase(name)] = v) :
+  el.setAttribute(name, v === true ? "" : v);
 
 /**
  * Converts class input to className string (like clsx/classnames).
  * @param {string | string[] | Record<string, boolean> | null | undefined} c - Class input
  * @returns {string} Space-separated class string
  */
-export const clsx = (c, _out = []) => !c ? '' : typeof c === 'string' ? c : (
+export const clsx = (c) => !c ? '' : typeof c === 'string' ? c : (
   Array.isArray(c) ? c.map(clsx) :
-    Object.entries(c).reduce((s, [k, v]) => !v ? s : [...s, k], [])
+    Object.entries(c).reduce((s, [k, v]) => (v && s.push(k), s), [])
 ).join(' ')
 
 /**
@@ -446,11 +478,6 @@ export const debounce = (fn, ms, immediate) => {
     : ((_count = 0) => (arg, _c = ++_count) => schedule(() => _c == _count && fn(arg)))()
 }
 
-/**
- * Parses time string to milliseconds. Supports: 100, 100ms, 1s, 1m
- * @param {string|number} t - Time value
- * @returns {number} Milliseconds
- */
 export * from './store.js';
 
 export default sprae

package/directive/_.js

@@ -1,4 +1,4 @@
-import { attr } from "../core.js";
+import { attr, isCE } from "../core.js";
 
 /**
  * Default attribute directive - sets any attribute value.
@@ -8,4 +8,4 @@ import { attr } from "../core.js";
  * @param {string} name - Attribute name
  * @returns {(v: any) => void} Update function
  */
-export default (el, st, ex, name) => v => attr(el, name, typeof v === 'function' ? v(el.getAttribute(name)) : v)
+export default (el, st, ex, name) => v => attr(el, name, typeof v === 'function' && !isCE(el) ? v(el.getAttribute(name)) : v)

package/directive/change.js

@@ -0,0 +1,40 @@
+import { parse, decorate, _dispose } from "../core.js"
+
+/**
+ * Change directive - normalized input write-back observer.
+ * Handles type detection, coercion, caret preservation.
+ *
+ * :change="v => x = v"
+ * :change.debounce-300="v => query = v"
+ *
+ * @param {Element} el - Form element
+ * @param {Object} state - State object
+ * @param {string} expr - Handler expression (receives coerced value)
+ * @param {string} name - Directive name with modifiers
+ * @returns {{ [Symbol.dispose]: () => void }} Disposal object
+ */
+export default (el, state, expr, name) => {
+  const [, ...mods] = name.split('.'),
+    evaluate = parse(expr).bind(el)
+
+  // coerce value from element based on input type
+  const coerce =
+    el.type === 'checkbox' ? () => el.checked :
+    el.type === 'select-multiple' ? () => [...el.selectedOptions].map(o => o.value) :
+    /^(date|time|month|week)/.test(el.type) ? () => el.value :
+    () => el.selectedIndex < 0 ? null : isNaN(el.valueAsNumber) ? el.value : el.valueAsNumber
+
+  const handler = decorate(Object.assign(() => {
+    evaluate(state, fn => typeof fn === 'function' ? fn(coerce()) : fn)
+  }, { target: el }), mods)
+
+  el.addEventListener('input', handler)
+  el.addEventListener('change', handler)
+
+  return {
+    [_dispose]() {
+      el.removeEventListener('input', handler)
+      el.removeEventListener('change', handler)
+    }
+  }
+}

package/directive/class.js

@@ -14,7 +14,7 @@ export default (el, st, ex, name) => {
 
   return (v) => {
     _new = new Set
-    if (v) clsx(typeof v === 'function' ? v(el.className) : v).split(' ').map(c => c && _new.add(c))
+    if (v) for (let c of clsx(typeof v === 'function' ? v(el.className) : v).split(' ')) c && _new.add(c)
     for (let c of _cur) if (!_new.has(c)) el.classList.remove(c);
     for (let c of _new) if (!_cur.has(c)) el.classList.add(c);
     if (!el.classList.length) el.removeAttribute('class')

package/directive/intersect.js

@@ -0,0 +1,44 @@
+import { parse, decorate, _dispose } from "../core.js"
+
+/**
+ * Intersect directive - IntersectionObserver wrapper.
+ * Statement form fires on enter. Function form receives entry for full control.
+ *
+ * :intersect="visible = true"
+ * :intersect.once="loadImage()"
+ * :intersect="entry => visible = entry.isIntersecting"
+ *
+ * @param {Element} el - Target element
+ * @param {Object} state - State object
+ * @param {string} expr - Handler expression
+ * @param {string} name - Directive name with modifiers
+ * @returns {{ [Symbol.dispose]: () => void }} Disposal object
+ */
+const intersect = (el, state, expr, name) => {
+  const [, ...mods] = name.split('.')
+  const evaluate = parse(expr).bind(el)
+
+  let once = mods.includes('once')
+
+  const trigger = decorate(Object.assign((entry) => {
+    evaluate(state, fn => typeof fn === 'function' ? fn(entry) : fn)
+  }, { target: el }), mods)
+
+  const io = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        trigger(entry)
+        if (once) io.disconnect()
+      }
+    }
+  })
+
+  io.observe(el)
+
+  return {
+    [_dispose]() { io.disconnect() }
+  }
+}
+
+intersect.observer = true
+export default intersect

package/directive/mount.js

@@ -0,0 +1,37 @@
+import { parse, decorate, _dispose } from "../core.js"
+
+/**
+ * Mount directive - lifecycle observer.
+ * Runs once on connect. Function form receives element, can return cleanup.
+ * Statement form runs directly.
+ *
+ * :mount="console.log('connected')"
+ * :mount="el => (setup(el), () => cleanup(el))"
+ * :mount="el => ref = el"
+ *
+ * @param {Element} el - Target element
+ * @param {Object} state - State object
+ * @param {string} expr - Handler expression
+ * @param {string} name - Directive name with modifiers
+ * @returns {{ [Symbol.dispose]: () => void }} Disposal object
+ */
+export default (el, state, expr, name) => {
+  const [, ...mods] = name.split('.'),
+    evaluate = parse(expr).bind(el)
+
+  let cleanup
+
+  const trigger = decorate(Object.assign(() => {
+    const result = evaluate(state, fn => typeof fn === 'function' ? fn(el) : fn)
+    if (typeof result === 'function') cleanup = result
+  }, { target: el }), mods)
+
+  trigger()
+
+  return {
+    [_dispose]() {
+      cleanup?.()
+      cleanup = null
+    }
+  }
+}

package/directive/ref.js

@@ -1,20 +1,27 @@
 import { parse } from "../core.js"
-import { setter } from "./value.js"
 
 /**
- * Ref directive - stores element reference in state.
- * If expression is a function, calls it with element (returns dispose).
+ * Creates a setter function for assigning a value to a state path.
+ * @param {string} expr - Expression to assign to (e.g., "x" or "refs.el")
+ * @returns {(target: Object, value: any) => void} Setter function
+ */
+const setter = (expr, _set = parse(`${expr}=__`)) => (target, value) => {
+  target.__ = value; _set(target), delete target.__
+}
+
+/**
+ * Ref directive - stores element reference in state or calls callback with element.
+ *
+ * :ref="x"                    → state.x = el
+ * :ref="refs.el"              → state.refs.el = el
+ * :ref="el => setup(el)"      → calls callback with element
+ *
  * @param {Element} el - Target element
  * @param {Object} state - State object
- * @param {string} expr - Variable name or function expression
- * @returns {{ [Symbol.dispose]: () => void } | void} Disposal object or void
+ * @param {string} expr - Variable name, path, or callback expression
  */
 export default (el, state, expr) => {
-  let fn = parse(expr)(state)
-
-  if (typeof fn == 'function') return {[Symbol.dispose]:fn(el)}
-
-  // NOTE: we have to set element statically (outside of effect) to avoid parasitic sub - multiple els with same :ref can cause recursion (eg. :each :ref="x")
-  // Object.defineProperty(state, expr, { value: el, configurable: true })
-  setter(expr)(state, el)
+  let result = parse(expr).call(el, state)
+  if (typeof result === 'function') result(el)
+  else setter(expr)(state, el)
 }

package/directive/resize.js

@@ -0,0 +1,39 @@
+import { parse, decorate, _dispose } from "../core.js"
+
+/**
+ * Resize directive - ResizeObserver wrapper.
+ * Function form receives {width, height, entry} object.
+ *
+ * :resize="({width, height}) => cols = Math.floor(width / 200)"
+ * :resize.throttle-100="({width}) => narrow = width < 600"
+ *
+ * @param {Element} el - Target element
+ * @param {Object} state - State object
+ * @param {string} expr - Handler expression
+ * @param {string} name - Directive name with modifiers
+ * @returns {{ [Symbol.dispose]: () => void }} Disposal object
+ */
+const resize = (el, state, expr, name) => {
+  const [, ...mods] = name.split('.')
+  const evaluate = parse(expr).bind(el)
+
+  const trigger = decorate(Object.assign((size) => {
+    evaluate(state, fn => typeof fn === 'function' ? fn(size) : fn)
+  }, { target: el }), mods)
+
+  const ro = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      const rect = entry.contentRect
+      trigger({ width: rect.width, height: rect.height, entry })
+    }
+  })
+
+  ro.observe(el)
+
+  return {
+    [_dispose]() { ro.disconnect() }
+  }
+}
+
+resize.observer = true
+export default resize

package/directive/sequence.js

@@ -13,12 +13,12 @@ export default (el, state, expr, names) => {
   let cur, // current step callback
     off // current step disposal
 
+  const evaluate = parse(expr).bind(el)
+
   let steps = names.split('..').map((step, i, { length }) => step.split(':').reduce(
     (prev, str) => {
       const [name, ...mods] = str.slice(2).split('.')
 
-      const evaluate = parse(expr).bind(el)
-
       const next = (fn, e) => cur = typeof fn === 'function' ? fn(e) : fn
       const trigger = decorate(Object.assign(
         e => (!i ? evaluate(state, (fn) => next(fn, e)) : next(cur, e), off(), off = steps[(i + 1) % length]()),

package/directive/spread.js

@@ -1,4 +1,4 @@
-import { attr, dashcase } from "../core.js";
+import { attr, dashcase, isCE } from "../core.js";
 
 /**
  * Spread directive - sets multiple attributes from object.
@@ -6,4 +6,4 @@ import { attr, dashcase } from "../core.js";
  * @param {Element} target - Target element
  * @returns {(value: Record<string, any>) => void} Update function
  */
-export default (target) => value => { for (let key in value) attr(target, dashcase(key), value[key]) }
+export default (target) => value => { let ce = isCE(target); for (let key in value) attr(target, ce ? key : dashcase(key), value[key]) }

package/directive/style.js

@@ -19,7 +19,7 @@ export default (el, st, ex, name) => {
     else {
       if (_static) attr(el, "style", _static);
       // NOTE: we skip names not starting with a letter - eg. el.style stores properties as { 0: --x } or JSDOM has _pfx
-      for (let k in v) k[0] == '-' ? el.style.setProperty(k, v[k]) : k[0] > 'A' && (el.style[k] = v[k])
+      for (let k in v) k[0] == '-' ? el.style.setProperty(k, v[k]) : k[0] >= 'A' && (el.style[k] = v[k])
     }
   }
 }

package/directive/text.js

@@ -2,11 +2,32 @@ import { frag } from "../core.js"
 
 /**
  * Text directive - sets textContent reactively.
+ * Preserves caret/selection position across updates.
  * @param {Element | HTMLTemplateElement} el - Target element
  * @returns {(v: any) => void} Update function
  */
 export default el => (
   // <template :text="a"/> or previously initialized template
   el.content && el.replaceWith(el = frag(el).childNodes[0]),
-  v => (v = typeof v === 'function' ? v(el.textContent) : v, el.textContent = v == null ? "" : v)
+  v => {
+    v = typeof v === 'function' ? v(el.textContent) : v
+    v = v == null ? "" : v
+    if (el.textContent === v) return
+
+    // save caret position
+    let s = el.getRootNode().getSelection?.()
+    let off = s?.rangeCount && el.contains(s.anchorNode) ? s.getRangeAt(0).startOffset : -1
+
+    el.textContent = v
+
+    // restore caret
+    if (off >= 0 && el.firstChild) {
+      let pos = Math.min(off, el.firstChild.textContent.length)
+      let r = new Range()
+      r.setStart(el.firstChild, pos)
+      r.collapse(true)
+      s.removeAllRanges()
+      s.addRange(r)
+    }
+  }
 )

package/directive/value.js

@@ -1,42 +1,17 @@
-import sprae, { attr, parse, _state, _dispose } from "../core.js";
+import sprae, { attr, _dispose } from "../core.js";
 
 /**
- * Creates a setter function for two-way binding.
- * @param {string} expr - Expression to assign to
- * @returns {(target: Object, value: any) => void} Setter function
- */
-export const setter = (expr, _set = parse(`${expr}=__`)) => (target, value) => {
-  target.__ = value; _set(target), delete target.__
-}
-
-/**
- * Value directive - two-way binding for form elements.
- * Supports text, checkbox, radio, select, and textarea.
+ * Value directive - one-way binding (state → DOM).
+ * Sets element value/checked/selected from state.
+ * For write-back (DOM → state), use :change directive.
+ *
  * @param {HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement} el - Form element
  * @param {Object} state - State object
- * @param {string} expr - Bound expression
  * @returns {(value: any) => void} Update function
  */
-export default (el, state, expr) => {
-  try {
-    const set = setter(expr)
-    const handleChange = el.type === 'checkbox' ? () => set(state, el.checked) :
-      el.type === 'select-multiple' ? () => set(state, [...el.selectedOptions].map(o => o.value)) :
-        /^(date|time|month|week)/.test(el.type) ? () => set(state, el.value) :
-        () => set(state, el.selectedIndex < 0 ? null : isNaN(el.valueAsNumber) ? el.value : el.valueAsNumber);
-
-    el.oninput = el.onchange = handleChange;
-
-    if (el.type?.startsWith('select')) {
-      let mo = new MutationObserver(() => handleChange())
-      mo.observe(el, { childList: true, subtree: true, attributes: true });
-      sprae(el, state)
-      let _prevDispose = el[_dispose]
-      if (_prevDispose) el[_dispose] = () => { mo?.disconnect(); mo = null; _prevDispose() }
-    }
-
-    parse(expr)(state) ?? handleChange()
-  } catch { }
+export default (el, state) => {
+  // select elements need children spraed first (for :each options)
+  if (el.type?.startsWith('select')) sprae(el, state)
 
   return (el.type === "text" || el.type === "" || el.tagName === "TEXTAREA") ?
     (value, _from, _to) => (
@@ -48,7 +23,7 @@ export default (el, state, expr) => {
     (el.type === "checkbox") ?
       (value) => (el.checked = value, attr(el, "checked", value)) :
       (el.type === 'radio') ? (value) => (
-        el.value === value && ((el.checked = value), attr(el, 'checked', value))
+        el.checked = el.value === value, attr(el, 'checked', el.checked || null)
       ) :
         (el.type === "select-one") ?
           (value) => {
@@ -57,8 +32,7 @@ export default (el, state, expr) => {
             el.value = value;
           } :
           (el.type === 'select-multiple') ? (value) => {
-            for (let o of el.options) o.removeAttribute('selected')
-            for (let v of value) el.querySelector(`[value="${v}"]`).setAttribute('selected', '')
+            for (let o of el.options) value.some(v => v == o.value) ? o.setAttribute('selected', '') : o.removeAttribute('selected')
           } :
-            (value) => (el.value = value);
+            (value) => (el.value = value)
 }