@miaskiewicz/turbo-dom 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Faster, more spec-correct DOM for test runners — native html5ever (Rust/WASM) parser + lazy copy-on-write DOM. A drop-in-style alternative to jsdom/happy-dom for vitest & jest.",
   "main": "index.js",
   "types": "index.d.ts",

package/src/runtime/dom.mjs

@@ -7,7 +7,10 @@
 // across the boundary — a buffer-backed read and an owned read are indistinguishable.
 
 import { createRequire } from 'node:module';
-import { EventTarget, Event, CustomEvent } from './events.mjs';
+import {
+  EventTarget, Event, CustomEvent,
+  UIEvent, MouseEvent, KeyboardEvent, FocusEvent,
+} from './events.mjs';
 import { liveNodeList, liveHTMLCollection } from './collections.mjs';
 import { matchesSelector, querySelector as qsel, querySelectorAll as qselAll } from './selectors.mjs';
 import { serializeInner, serializeOuter } from './html-serialize.mjs';
@@ -382,6 +385,10 @@ export class Element extends Node {
   }
   get defaultValue() { return this.getAttribute('value') ?? ''; }
   set defaultValue(v) { this.setAttribute('value', v); }
+  get valueAsNumber() { const v = this.value; return v === '' || v == null ? NaN : Number(v); }
+  set valueAsNumber(n) { this.value = String(n); }
+  get valueAsDate() { const v = this.value; const d = v ? new Date(v) : null; return d && !isNaN(d) ? d : null; }
+  set valueAsDate(d) { this.value = d instanceof Date ? d.toISOString().slice(0, 10) : ''; }
 
   get selectionStart() { return this.__selStart ?? null; }
   set selectionStart(v) { this.__selStart = v; }
@@ -421,7 +428,17 @@ export class Element extends Node {
 
   // option
   get selected() { return this.__selected !== undefined ? this.__selected : this.hasAttribute('selected'); }
-  set selected(x) { this.__selected = !!x; }
+  set selected(x) {
+    this.__selected = !!x;
+    // single-select: selecting one option deselects the others (exclusive)
+    if (x && this.localName === 'option') {
+      let sel = this.parentNode;
+      while (sel && sel.localName !== 'select') sel = sel.parentNode;
+      if (sel && !sel.multiple) {
+        for (const o of sel.getElementsByTagName('option')) if (o !== this) o.__selected = false;
+      }
+    }
+  }
   get defaultSelected() { return this.hasAttribute('selected'); }
   get text() { return this.textContent; }
   set text(v) { this.textContent = v; }
@@ -510,14 +527,43 @@ export class Element extends Node {
   }
 
   click() { this.dispatchEvent(new Event('click', { bubbles: true, cancelable: true })); }
+  // pre-click activation (runs BEFORE click listeners; undone if preventDefault)
+  __preClickActivation() {
+    if (this.localName !== 'input') return null;
+    const t = (this.getAttribute('type') || 'text').toLowerCase();
+    // Write the internal field directly — NOT via the `checked` setter, which
+    // React wraps with its value-tracker. Going through the setter would update
+    // React's tracked value too, hiding the change and suppressing onChange.
+    if (t === 'checkbox') {
+      const old = this.checked; this.__checked = !old;
+      return { undo: () => { this.__checked = old; } };
+    }
+    if (t === 'radio') {
+      if (this.checked) return null;
+      const group = this.__radioGroup();
+      const prev = group.find((r) => r.checked) || null;
+      group.forEach((r) => { r.__checked = false; });
+      this.__checked = true;
+      return { undo: () => { this.__checked = false; if (prev) prev.__checked = true; } };
+    }
+    return null;
+  }
+  __radioGroup() {
+    const name = this.getAttribute('name');
+    let root = this; while (root.parentNode) root = root.parentNode;
+    const form = this.closest && this.closest('form');
+    const scope = form || root;
+    if (!name) return [this];
+    return (scope.getElementsByTagName ? Array.from(scope.getElementsByTagName('input')) : [])
+      .filter((i) => i.localName === 'input' && (i.getAttribute('type') || '').toLowerCase() === 'radio' && i.getAttribute('name') === name);
+  }
+
   // default actions applied post-dispatch when not preventDefault'd
   __runDefaultAction(e) {
     if (e.type !== 'click') return;
     if (this.localName === 'input') {
       const t = (this.getAttribute('type') || 'text').toLowerCase();
-      if (t === 'checkbox') this.checked = !this.checked;
-      else if (t === 'radio') this.checked = true;
-      else if (t === 'submit') { const f = this.closest('form'); if (f) f.requestSubmit(); }
+      if (t === 'submit') { const f = this.closest('form'); if (f) f.requestSubmit(); }
     } else if (this.localName === 'button') {
       const t = (this.getAttribute('type') || 'submit').toLowerCase();
       if (t === 'submit') { const f = this.closest('form'); if (f) f.requestSubmit(); }
@@ -776,9 +822,14 @@ function makeStyle(el) {
   return new Proxy({}, {
     get(_t, key) {
       if (key === 'getPropertyValue') return (p) => parse().get(p) ?? '';
+      if (key === 'getPropertyPriority') return () => ''; // we don't model !important
       if (key === 'setProperty') return (p, v) => { const m = parse(); m.set(p, v); write(m); };
       if (key === 'removeProperty') return (p) => { const m = parse(); const v = m.get(p) ?? ''; m.delete(p); write(m); return v; };
+      if (key === 'item') return (i) => [...parse().keys()][i] ?? '';
+      if (key === 'length') return parse().size;
       if (key === 'cssText') return el.getAttribute('style') || '';
+      if (key === 'cssFloat') return parse().get('float') ?? '';
+      if (key === Symbol.iterator) { const keys = [...parse().keys()]; return keys[Symbol.iterator].bind(keys); }
       if (typeof key !== 'string') return undefined;
       return parse().get(kebab(key)) ?? '';
     },
@@ -786,6 +837,7 @@ function makeStyle(el) {
       if (key === 'cssText') { el.setAttribute('style', String(value)); return true; }
       const m = parse(); m.set(kebab(key), String(value)); write(m); return true;
     },
+    has(_t, key) { return typeof key === 'string'; },
   });
 }
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -988,7 +1040,16 @@ export class Document extends Node {
   createTextNode(data) { return new Text(this, String(data)); }
   createComment(data) { return new Comment(this, String(data)); }
   createDocumentFragment() { return new DocumentFragment(this); }
-  createEvent() { return new Event(''); }
+  createEvent(type = 'Event') {
+    switch (String(type)) {
+      case 'CustomEvent': return new CustomEvent('');
+      case 'MouseEvent': case 'MouseEvents': return new MouseEvent('');
+      case 'KeyboardEvent': case 'KeyEvents': return new KeyboardEvent('');
+      case 'UIEvent': case 'UIEvents': return new UIEvent('');
+      case 'FocusEvent': return new FocusEvent('');
+      default: return new Event('');
+    }
+  }
   createRange() { return new Range(this); }
   createAttribute(name) { return { name, value: '', ownerElement: null }; }
   createComment(data) { return new Comment(this, String(data)); }

package/src/runtime/events.mjs

@@ -41,6 +41,13 @@ export class Event {
   set returnValue(v) { if (v === false) this.preventDefault(); }
 
   composedPath() { return this._path.slice(); }
+
+  // legacy init — react-dom's dev rethrow path uses createEvent('Event')+initEvent
+  initEvent(type, bubbles = false, cancelable = false) {
+    this.type = String(type);
+    this.bubbles = !!bubbles;
+    this.cancelable = !!cancelable;
+  }
 }
 
 export class CustomEvent extends Event {
@@ -48,6 +55,10 @@ export class CustomEvent extends Event {
     super(type, init);
     this.detail = init.detail ?? null;
   }
+  initCustomEvent(type, bubbles = false, cancelable = false, detail = null) {
+    this.initEvent(type, bubbles, cancelable);
+    this.detail = detail;
+  }
 }
 
 // Typed events. Real libraries (RTL/user-event) construct these by name; we copy
@@ -68,12 +79,19 @@ const TYPED_DEFAULTS = {
 
 function makeTyped(name) {
   const defaults = TYPED_DEFAULTS[name];
-  return class extends Event {
+  const cls = class extends Event {
     constructor(type, init = {}) {
       super(type, init);
       Object.assign(this, defaults, init);
     }
   };
+  // legacy initMouseEvent/initKeyboardEvent/initUIEvent(type, bubbles, cancelable, ...rest)
+  cls.prototype['init' + name] = function (type, bubbles = false, cancelable = false, ...rest) {
+    this.initEvent(type, bubbles, cancelable);
+    // view is the common 4th arg for UI/Mouse/Keyboard events; ignore the rest's exact slots
+    if (rest.length) this.view = rest[0];
+  };
+  return cls;
 }
 
 export const UIEvent = makeTyped('UIEvent');
@@ -135,6 +153,13 @@ export class EventTarget {
     event._path = this.__eventPath();
     const path = event._path;
 
+    // pre-click activation (WHATWG): checkbox/radio toggle BEFORE click listeners
+    // run, so React's change detection sees the new value. Undone if preventDefault.
+    let activation = null;
+    if (event.type === 'click' && typeof this.__preClickActivation === 'function') {
+      activation = this.__preClickActivation();
+    }
+
     const invoke = (node, phase) => {
       const list = node.__listeners && node.__listeners.get(event.type);
       if (!list || list.length === 0) return;
@@ -178,7 +203,10 @@ export class EventTarget {
     event.eventPhase = PHASE_NONE;
     event.currentTarget = null;
 
-    // default actions (checkbox toggle, label→control, etc.) unless prevented
+    // canceled activation: undo the pre-click toggle if default was prevented
+    if (activation && event.defaultPrevented) activation.undo();
+
+    // remaining default actions (label→control, form submit) unless prevented
     if (!event.defaultPrevented && typeof this.__runDefaultAction === 'function') {
       this.__runDefaultAction(event);
     }

package/src/runtime/window.mjs

@@ -179,9 +179,9 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
   };
 }
 
+import { performance as nodePerformance } from 'node:perf_hooks';
 function performanceNow() {
-  const [s, ns] = process.hrtime();
-  return s * 1000 + ns / 1e6;
+  return nodePerformance.now();
 }
 
 let __objUrlSeq = 0;