@brust/runtime-dom 2.0.0-alpha.11 → 2.0.0-alpha.13

package/package.json

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

package/src/directives/bind.ts

@@ -24,6 +24,8 @@ BINDERS.push({
         return
       }
       if (v == null || v === false) { 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.tagName !== '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])