@brust/runtime-dom 2.0.0-alpha.12 → 2.0.0-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brust/runtime-dom",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.14",
   "type": "module",
   "exports": {
     ".": {

package/src/attr-kinds.ts

@@ -0,0 +1,6 @@
+// GENERATED from crates/brust-jinja/src/lib.rs (BOOLEAN_ATTRS, OVERLOADED_ATTRS, STRINGIFY_ATTRS); do not edit.
+// Regenerate: bun scripts/gen-attr-kinds.ts. test/attr-kinds.test.ts fails when this drifts.
+const set = (s: string): Set<string> => new Set(s.split(' '))
+export const BOOLEAN = set('allowfullscreen async autofocus autoplay checked controls default defer disabled disablepictureinpicture disableremoteplayback formnovalidate hidden inert itemscope loop multiple muted nomodule novalidate open playsinline readonly required reversed scoped seamless selected')
+export const OVERLOADED = set('capture download')
+export const STRINGIFY = set('autoreverse contenteditable draggable externalresourcesrequired focusable preservealpha spellcheck value')

package/src/directives/bind.ts

@@ -1,10 +1,10 @@
 import { BINDERS, parsed, read, warnOnce } from '../core-api'
+import { BOOLEAN, OVERLOADED, STRINGIFY } from '../attr-kinds'
 
 // Attributes that execute or load code from a string; a bound value must never reach them as-is.
 const URL_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'poster', 'data', 'xlink:href', 'ping'])
 // Scheme allowlist on the parsed URL (relative URLs resolve to http): new URL() applies the browser's tab/newline/control-char stripping.
 const safeUrl = (v: string): boolean => { try { return ['http:', 'https:', 'mailto:', 'tel:'].includes(new URL(v, 'http://x').protocol) } catch { return false } }
-const BOOLEAN = new Set(['disabled', 'checked', 'selected', 'readonly', 'required', 'hidden', 'open', 'multiple'])
 BINDERS.push({
   match: (a) => a.startsWith('x-bind-'),
   bind: ({ inst, el, attr, raw, scope }) => {
@@ -23,7 +23,12 @@ BINDERS.push({
         if (on) el.setAttribute(name, '') ; else el.removeAttribute(name)
         return
       }
-      if (v == null || v === false) { el.removeAttribute(name); return }
+      // aria-*, data-* and the booleanish strings print `true`/`false`; download/capture print `true` as ``; on any other attribute React omits a boolean.
+      if (name.startsWith('aria-') || name.startsWith('data-') || STRINGIFY.has(name)) { if (v == null) el.removeAttribute(name); else el.setAttribute(name, String(v)); return }
+      if (OVERLOADED.has(name) && typeof v === 'boolean') { if (v) el.setAttribute(name, ''); else el.removeAttribute(name); return }
+      if (v == null || typeof v === 'boolean') { el.removeAttribute(name); return }
+      // React writes no `src=""` / `href=""` (it would load the page again); an anchor keeps its empty href.
+      if (v === '' && (name === 'src' || name === 'href') && el.localName !== 'a') { el.removeAttribute(name); return }
       if (URL_ATTRS.has(name) && !safeUrl(String(v))) { warnOnce(`b:${inst.name}:${name}`, `${attr} in ${inst.name}: unsafe URL refused`); return }
       el.setAttribute(name, String(v))
     })

package/src/directives/on.ts

@@ -1,10 +1,22 @@
 import { BINDERS, parsed, member } from '../core-api'
+
+// React's SyntheticEvent has five members a DOM event lacks; code written for React calls them on the event it is handed
+// (Radix: `event.isPropagationStopped()`), and on a DOM event that is a TypeError (F195). Added to the event the handler
+// receives, never to Event.prototype, so nothing else on the page changes.
+const SYNTHETIC: PropertyDescriptorMap = {
+  isPropagationStopped: { value(this: Event) { return this.cancelBubble } },
+  isDefaultPrevented: { value(this: Event) { return this.defaultPrevented } },
+  persist: { value() {} },
+  isPersistent: { value: () => true },
+  nativeEvent: { get(this: Event) { return this } },
+}
 BINDERS.push({
   match: (a) => a.startsWith('x-on-'),
   bind: ({ inst, el, attr, raw, scope }) => {
     const event = attr.slice('x-on-'.length)
     const p = parsed(inst, attr, raw); if (!p) return
     const handler = (e: Event) => {
+      if (!('isPropagationStopped' in e)) Object.defineProperties(e, SYNTHETIC)
       const fn = member(inst, p, attr)
       if (typeof fn !== 'function') return
       const args = p.bindings.map((b) => scope[b])

package/src/instance.ts

@@ -58,13 +58,14 @@ export class Instance {
     return true
   }
   onCleanup(fn: () => void): void { this.cleanups.push(fn) }
-  ref<E extends Element = HTMLElement>(name: string): { current: E | null } {
+  ref<E extends Element = HTMLElement>(name: string, init?: unknown): { current: E | null } {
     let r = this.refs.get(name)
-    if (!r) { r = { current: null }; this.refs.set(name, r) }
+    // `useRef(init)`: the cell starts at `init`; an `x-ref` element replaces it when it binds (React attaches the same way).
+    if (!r) { r = { current: (init ?? null) as Element | null }; this.refs.set(name, r) }
     return r as { current: E | null }
   }
   ctx(): BehaviorCtx {
-    return { el: this.host, props: this.props, effect: (fn) => this.componentEffect(fn), onCleanup: (fn) => this.onCleanup(fn), ref: (n) => this.ref(n) }
+    return { el: this.host, props: this.props, effect: (fn) => this.componentEffect(fn), onCleanup: (fn) => this.onCleanup(fn), ref: (n, init) => this.ref(n, init) }
   }
   init(factory: BehaviorFactory): void {
     const m = factory(this.ctx())

package/src/registry.ts

@@ -5,7 +5,7 @@ export interface BehaviorCtx {
   props: Signal<Record<string, unknown>>
   effect: (fn: () => void | (() => void)) => Dispose
   onCleanup: (fn: () => void) => void
-  ref: <E extends Element = HTMLElement>(name: string) => { current: E | null }
+  ref: <E extends Element = HTMLElement>(name: string, init?: unknown) => { current: E | null }
 }
 export type BehaviorInstance = Record<string, unknown>
 export type BehaviorFactory = (ctx: BehaviorCtx) => BehaviorInstance | void