@miaskiewicz/turbo-dom 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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/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') ?? ''; }
@@ -425,6 +434,16 @@ export class Element extends Node {
   set placeholder(x) { this.setAttribute('placeholder', x); }
   get href() { return this.getAttribute('href') ?? ''; }
   set href(x) { this.setAttribute('href', x); }
+  get download() { return this.getAttribute('download') ?? ''; }
+  set download(x) { this.setAttribute('download', x); }
+  get rel() { return this.getAttribute('rel') ?? ''; }
+  set rel(x) { this.setAttribute('rel', x); }
+  get referrerPolicy() { return this.getAttribute('referrerpolicy') ?? ''; }
+  set referrerPolicy(x) { this.setAttribute('referrerpolicy', x); }
+  get src() { return this.getAttribute('src') ?? ''; }
+  set src(x) { this.setAttribute('src', x); }
+  get alt() { return this.getAttribute('alt') ?? ''; }
+  set alt(x) { this.setAttribute('alt', x); }
 
   // option
   get selected() { return this.__selected !== undefined ? this.__selected : this.hasAttribute('selected'); }
@@ -860,6 +879,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,11 +135,71 @@ 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;
+    // positional pseudo-classes (1-based, support An+B / odd / even)
+    case 'nth-child':
+      return nthMatch(p.arg, siblingIndex(el) + 1);
+    case 'nth-last-child':
+      return nthMatch(p.arg, siblingCount(el) - siblingIndex(el));
+    case 'nth-of-type':
+      return nthMatch(p.arg, typeIndex(el) + 1);
+    case 'nth-last-of-type':
+      return nthMatch(p.arg, typeCount(el) - typeIndex(el));
+    case 'first-of-type':
+      return typeIndex(el) === 0;
+    case 'last-of-type':
+      return typeIndex(el) === typeCount(el) - 1;
+    case 'only-of-type':
+      return typeCount(el) === 1;
     default:
       return false; // unknown pseudo: never matches (honest, not a silent true)
   }
 }
 
+function elementSiblings(el) {
+  const p = el.parentNode;
+  if (!p) return [el];
+  const kids = typeof p.__children === 'function' ? p.__children() : Array.from(p.childNodes || []);
+  return kids.filter((n) => n.nodeType === 1);
+}
+function siblingIndex(el) { return elementSiblings(el).indexOf(el); }
+function siblingCount(el) { return elementSiblings(el).length; }
+function typeIndex(el) { return elementSiblings(el).filter((n) => n.localName === el.localName).indexOf(el); }
+function typeCount(el) { return elementSiblings(el).filter((n) => n.localName === el.localName).length; }
+
+// match An+B / odd / even / integer against a 1-based index
+function nthMatch(arg, index) {
+  const a0 = String(arg || '').trim().toLowerCase();
+  if (a0 === 'odd') return index % 2 === 1;
+  if (a0 === 'even') return index % 2 === 0;
+  const m = /^([+-]?\d*)n\s*([+-]\s*\d+)?$/.exec(a0.replace(/\s+/g, ''));
+  if (m) {
+    let a = m[1] === '' || m[1] === '+' ? 1 : m[1] === '-' ? -1 : parseInt(m[1], 10);
+    const b = m[2] ? parseInt(m[2].replace(/\s/g, ''), 10) : 0;
+    if (a === 0) return index === b;
+    return (index - b) % a === 0 && (index - b) / a >= 0;
+  }
+  const n = parseInt(a0, 10);
+  return !Number.isNaN(n) && index === n;
+}
+
 function previousElement(el) {
   let n = el.previousSibling;
   while (n && n.nodeType !== 1) n = n.previousSibling;