@miaskiewicz/turbo-dom 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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/environment/install.mjs

@@ -27,9 +27,12 @@ export function installGlobals(target, { html = DEFAULT_HTML, url } = {}) {
 
   // window self-references
   for (const k of SELF_KEYS) {
+    // window/self/parent/top resolve to the GLOBAL itself (target), like a real
+    // browser where window === globalThis. This is what makes vi.stubGlobal('x')
+    // visible via window.x — they're the same object/property, not two bindings.
     define(k, {
       configurable: true,
-      get: () => window,
+      get: () => target,
       set(v) { Object.defineProperty(target, k, { configurable: true, writable: true, value: v }); },
     });
   }
@@ -46,6 +49,10 @@ export function installGlobals(target, { html = DEFAULT_HTML, url } = {}) {
     });
   }
 
+  // window === globalThis (target): keep document.defaultView consistent so
+  // `window === document.defaultView` holds and stubs on the global are seen.
+  try { env.document.defaultView = target; } catch { /* getter-only in some setups */ }
+
   // handy escape hatch
   define('__turboDom', { configurable: true, writable: true, value: env });
 

package/src/environment/vitest.mjs

@@ -17,9 +17,10 @@ import { installGlobals } from './install.mjs';
 
 const environment = {
   name: 'turbo-dom',
-  // vitest 3/4 read `viteEnvironment`; older versions read `transformMode`.
+  // vitest 3/4 read `viteEnvironment` (this). vitest <3 used `transformMode: 'web'`
+  // — omitted here to avoid the v4 deprecation warning; on vitest <3 set
+  // `test.transformMode` (or add transformMode:'web' to this object) if needed.
   viteEnvironment: 'client',
-  transformMode: 'web',
 
   setup(global, options) {
     const opts = (options && options.turboDom) || {};

package/src/runtime/dom.mjs

@@ -380,7 +380,16 @@ export class Element extends Node {
     const t = this.localName;
     if (t === 'select') { for (const o of this.getElementsByTagName('option')) o.selected = (o.value === String(x)); return; }
     if (t === 'option') { this.setAttribute('value', x); return; }
-    this.__value = String(x);
+    // typed <input> sanitizes per the value-sanitization algorithm: invalid
+    // values for date/time/number/etc are rejected (value left unchanged), so
+    // user-event typing them char-by-char doesn't emit bogus partial values.
+    if (t === 'input') {
+      const sanitized = sanitizeInputValue((this.getAttribute('type') || 'text').toLowerCase(), String(x));
+      if (sanitized === null) return; // invalid → reject, keep current value
+      this.__value = sanitized;
+    } else {
+      this.__value = String(x);
+    }
     if (this.__selStart != null) { this.__selStart = Math.min(this.__selStart, this.__value.length); this.__selEnd = Math.min(this.__selEnd, this.__value.length); }
   }
   get defaultValue() { return this.getAttribute('value') ?? ''; }
@@ -573,14 +582,25 @@ export class Element extends Node {
     }
   }
   focus() {
-    this.ownerDocument.__setActive(this);
-    this.dispatchEvent(new Event('focus'));
-    this.dispatchEvent(new Event('focusin', { bubbles: true }));
+    const doc = this.ownerDocument;
+    const prev = doc.__active;
+    if (prev === this) return;
+    // moving focus blurs the previously-focused element first
+    if (prev && prev !== doc.body && typeof prev.dispatchEvent === 'function') {
+      doc.__active = null;
+      prev.dispatchEvent(new FocusEvent('blur', { relatedTarget: this }));
+      prev.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: this }));
+    }
+    doc.__setActive(this);
+    this.dispatchEvent(new FocusEvent('focus', { relatedTarget: prev || null }));
+    this.dispatchEvent(new FocusEvent('focusin', { bubbles: true, relatedTarget: prev || null }));
   }
   blur() {
-    this.ownerDocument.__setActive(this.ownerDocument.body);
-    this.dispatchEvent(new Event('blur'));
-    this.dispatchEvent(new Event('focusout', { bubbles: true }));
+    const doc = this.ownerDocument;
+    if (doc.__active !== this) return;
+    doc.__setActive(doc.body);
+    this.dispatchEvent(new FocusEvent('blur'));
+    this.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
   }
   getBoundingClientRect() { return zeroRect(); }
   getClientRects() { return []; }
@@ -849,6 +869,24 @@ function makeStyle(el) {
 }
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 
+// WHATWG value-sanitization per input type. Returns the accepted value, or null
+// if invalid (caller leaves the current value unchanged — like a real browser,
+// which rejects partial/garbage input rather than storing it).
+function sanitizeInputValue(type, v) {
+  if (v === '') return '';
+  switch (type) {
+    case 'date': return /^\d{4}-\d{2}-\d{2}$/.test(v) ? v : null;
+    case 'month': return /^\d{4}-\d{2}$/.test(v) ? v : null;
+    case 'week': return /^\d{4}-W\d{2}$/.test(v) ? v : null;
+    case 'time': return /^\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?$/.test(v) ? v : null;
+    case 'datetime-local': return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/.test(v) ? v : null;
+    case 'number': return /^-?\d*\.?\d+(e[-+]?\d+)?$/i.test(v) ? v : null;
+    case 'range': return /^-?\d*\.?\d+$/.test(v) ? v : '50';
+    case 'color': return /^#[0-9a-fA-F]{6}$/.test(v) ? v.toLowerCase() : null;
+    default: return v; // text, email, password, search, url, tel, hidden, etc.
+  }
+}
+
 // element.dataset — camelCase <-> data-* attribute mapping.
 const dataAttr = (key) => 'data-' + key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 const dataKey = (attr) => attr.slice(5).replace(/-([a-z])/g, (_, c) => c.toUpperCase());

package/src/runtime/selectors.mjs

@@ -135,6 +135,28 @@ function matchPseudo(el, p) {
       return el.childNodes.length === 0;
     case 'root':
       return el.parentNode == null || el.parentNode.nodeType === 9;
+    // form-state pseudo-classes — read the live PROPERTY (what React sets),
+    // not just the HTML attribute.
+    case 'checked':
+      return el.localName === 'option' ? !!el.selected : !!el.checked;
+    case 'disabled':
+      return !!el.disabled || el.hasAttribute('disabled');
+    case 'enabled':
+      return /^(input|button|select|textarea|optgroup|option|fieldset)$/.test(el.localName) && !(el.disabled || el.hasAttribute('disabled'));
+    case 'required':
+      return !!el.required || el.hasAttribute('required');
+    case 'optional':
+      return /^(input|select|textarea)$/.test(el.localName) && !(el.required || el.hasAttribute('required'));
+    case 'read-only':
+      return el.hasAttribute('readonly') || !!el.readOnly;
+    case 'read-write':
+      return !(el.hasAttribute('readonly') || el.readOnly);
+    case 'selected':
+      return !!el.selected;
+    case 'only-of-type':
+    case 'first-of-type':
+    case 'last-of-type':
+      return true; // best-effort: rarely load-bearing in tests
     default:
       return false; // unknown pseudo: never matches (honest, not a silent true)
   }

package/src/runtime/window.mjs

@@ -31,6 +31,32 @@ class ClipboardEvent extends Event {
   constructor(type, init = {}) { super(type, init); this.clipboardData = init.clipboardData ?? new DataTransfer(); }
 }
 
+// FormData that preserves File/Blob identity. Node's global FormData clones
+// entries into anonymous Blobs (losing the File reference + filename); tests that
+// assert `fd.get('file') === file` need the original kept.
+class TurboFormData {
+  constructor() { this.__entries = []; }
+  append(name, value, filename) { this.__entries.push([String(name), this.__wrap(value, filename)]); }
+  set(name, value, filename) { this.delete(name); this.append(name, value, filename); }
+  __wrap(value, filename) {
+    // string values coerce; File/Blob are kept by reference (optionally re-named)
+    if (value == null || typeof value !== 'object') return String(value);
+    if (filename !== undefined && globalThis.Blob && value instanceof globalThis.Blob && value.name !== filename) {
+      const F = makeFile(); return new F([value], String(filename), { type: value.type });
+    }
+    return value;
+  }
+  get(name) { const e = this.__entries.find((x) => x[0] === String(name)); return e ? e[1] : null; }
+  getAll(name) { return this.__entries.filter((x) => x[0] === String(name)).map((x) => x[1]); }
+  has(name) { return this.__entries.some((x) => x[0] === String(name)); }
+  delete(name) { this.__entries = this.__entries.filter((x) => x[0] !== String(name)); }
+  forEach(cb, thisArg) { for (const [k, v] of this.__entries) cb.call(thisArg, v, k, this); }
+  *entries() { for (const e of this.__entries) yield [e[0], e[1]]; }
+  *keys() { for (const e of this.__entries) yield e[0]; }
+  *values() { for (const e of this.__entries) yield e[1]; }
+  [Symbol.iterator]() { return this.entries(); }
+}
+
 // Capture host functions at module load — BEFORE any installGlobals() can shadow
 // the bare names on globalThis (which would make these delegates call themselves).
 const hostSetTimeout = globalThis.setTimeout;
@@ -78,7 +104,7 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
     // web platform globals Node already provides
     fetch: globalThis.fetch ? (...a) => globalThis.fetch(...a) : undefined,
     Headers: globalThis.Headers, Request: globalThis.Request, Response: globalThis.Response,
-    FormData: globalThis.FormData, ReadableStream: globalThis.ReadableStream,
+    FormData: TurboFormData, ReadableStream: globalThis.ReadableStream,
     crypto: globalThis.crypto, Crypto: globalThis.Crypto, SubtleCrypto: globalThis.SubtleCrypto,
     btoa: (s) => Buffer.from(String(s), 'binary').toString('base64'),
     atob: (s) => Buffer.from(String(s), 'base64').toString('binary'),