@miaskiewicz/turbo-dom 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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

@@ -385,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; }
@@ -424,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; }
@@ -513,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(); }
@@ -764,31 +807,44 @@ export class XMLSerializer {
 
 // minimal inline-style CSSOM (honest: only inline + explicitly set props)
 function makeStyle(el) {
+  // parse → { values: Map<prop,value>, prio: Map<prop,'important'|''> } (handles !important)
   const parse = () => {
-    const map = new Map();
+    const values = new Map();
+    const prio = new Map();
     for (const decl of (el.getAttribute('style') || '').split(';')) {
       const i = decl.indexOf(':');
       if (i === -1) continue;
       const prop = decl.slice(0, i).trim();
-      const val = decl.slice(i + 1).trim();
-      if (prop) map.set(prop, val);
+      let val = decl.slice(i + 1).trim();
+      if (!prop) continue;
+      const m = /\s*!\s*important\s*$/i.exec(val);
+      if (m) { val = val.slice(0, m.index).trim(); prio.set(prop, 'important'); }
+      values.set(prop, val);
     }
-    return map;
+    return { values, prio };
+  };
+  const write = ({ values, prio }) => {
+    el.setAttribute('style', [...values].map(([k, v]) => `${k}: ${v}${prio.get(k) === 'important' ? ' !important' : ''}`).join('; '));
   };
-  const write = (map) => el.setAttribute('style', [...map].map(([k, v]) => `${k}: ${v}`).join('; '));
   return new Proxy({}, {
     get(_t, key) {
-      if (key === 'getPropertyValue') return (p) => parse().get(p) ?? '';
-      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 === 'getPropertyValue') return (p) => parse().values.get(p) ?? '';
+      if (key === 'getPropertyPriority') return (p) => parse().prio.get(p) ?? '';
+      if (key === 'setProperty') return (p, v, priority) => { const s = parse(); s.values.set(p, String(v)); if (priority) s.prio.set(p, 'important'); else s.prio.delete(p); write(s); };
+      if (key === 'removeProperty') return (p) => { const s = parse(); const v = s.values.get(p) ?? ''; s.values.delete(p); s.prio.delete(p); write(s); return v; };
+      if (key === 'item') return (i) => [...parse().values.keys()][i] ?? '';
+      if (key === 'length') return parse().values.size;
       if (key === 'cssText') return el.getAttribute('style') || '';
+      if (key === 'cssFloat') return parse().values.get('float') ?? '';
+      if (key === Symbol.iterator) { const keys = [...parse().values.keys()]; return keys[Symbol.iterator].bind(keys); }
       if (typeof key !== 'string') return undefined;
-      return parse().get(kebab(key)) ?? '';
+      return parse().values.get(kebab(key)) ?? '';
     },
     set(_t, key, value) {
       if (key === 'cssText') { el.setAttribute('style', String(value)); return true; }
-      const m = parse(); m.set(kebab(key), String(value)); write(m); return true;
+      const s = parse(); s.values.set(kebab(key), String(value)); write(s); return true;
     },
+    has(_t, key) { return typeof key === 'string'; },
   });
 }
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());

package/src/runtime/events.mjs

@@ -153,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;
@@ -196,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

@@ -102,6 +102,9 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
     structuredClone: (...a) => hostStructuredClone(...a),
     getSelection: () => document.getSelection(),
     scrollTo() {}, scroll() {}, scrollBy() {},
+    // window methods libraries/tests spy on — must exist as own props for vi.spyOn
+    open: () => null, close() {}, stop() {}, print() {}, focus() {}, blur() {},
+    moveTo() {}, moveBy() {}, resizeTo() {}, resizeBy() {},
     alert() {}, confirm: () => false, prompt: () => null,
     dispatchEvent: (e) => document.dispatchEvent(e),
     addEventListener: (...a) => document.addEventListener(...a),