@miaskiewicz/turbo-dom 0.1.20 → 0.1.22

package/README.md

@@ -105,13 +105,17 @@ the suite row (ms/file, lower = faster):
 
 | benchmark | turbo-dom | happy-dom | jsdom |
 |---|---:|---:|---:|
-| **per-file setup + 1 query** (ops/s) | **5,950** | 611 | 260 |
-| **realistic suite**, 200 files (ms/file) | **0.13** | 1.50 | 3.38 |
+| **per-file setup + 1 query** (ops/s) | **5,900** | 600 | 250 |
+| **realistic suite**, 200 files (ms/file) | **0.15** | 2.1 | 4.9 |
 | **parse 56 KB SSR** (ops/s) | **478** | 43 | 26 |
 | **parse 20 KB real page** (ops/s) | **4,203** | 190 | 114 |
-| repeated query throughput (iters/s) | **915k** | 615k | 3k |
+| repeated query throughput (iters/s) | **920k** | 600k | 3k |
 | html5lib conformance | **99.72%** | 37.35% | 97.03% |
 
+Roughly **~25–30× jsdom** and **~10–14× happy-dom** on per-file setup / realistic
+suites, **18–37×** on parsing, and it edges happy-dom on repeated queries while
+staying 99.7% spec-correct.
+
 **turbo-dom wins across the board on what test suites actually do**: per-file
 construction (~10× happy-dom, ~23× jsdom), parsing, realistic suites (~10× happy-dom,
 ~23× jsdom), spec-correctness (99.7% vs 37%), **and** repeated queries.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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.",
   "license": "MIT",
   "main": "index.js",

package/src/runtime/dom.mjs

@@ -98,8 +98,12 @@ export class Node extends EventTarget {
   }
 
   get childNodes() {
+    // the NodeList reads __children() live, so one cached object per node is
+    // always correct — avoids re-allocating a Proxy on every .childNodes access
+    // (React/RTL hit this constantly).
+    if (this.__childNodesList) return this.__childNodesList;
     const self = this;
-    return liveNodeList(() => self.__children());
+    return (this.__childNodesList = liveNodeList(() => self.__children()));
   }
   get firstChild() { const k = this.__children(); return k[0] ?? null; }
   get lastChild() { const k = this.__children(); return k[k.length - 1] ?? null; }
@@ -523,8 +527,9 @@ export class Element extends Node {
 
   // ---- element-only traversal (live) ----
   get children() {
+    if (this.__childrenList) return this.__childrenList;
     const self = this;
-    return liveHTMLCollection(() => self.__children().filter((n) => n.nodeType === ELEMENT_NODE));
+    return (this.__childrenList = liveHTMLCollection(() => self.__children().filter((n) => n.nodeType === ELEMENT_NODE)));
   }
   get childElementCount() { return this.__children().filter((n) => n.nodeType === ELEMENT_NODE).length; }
   get firstElementChild() { return this.__children().find((n) => n.nodeType === ELEMENT_NODE) ?? null; }
@@ -750,7 +755,7 @@ export class DocumentFragment extends Node {
   get nodeName() { return '#document-fragment'; }
   querySelector(sel) { return cachedQS(this, sel); }
   querySelectorAll(sel) { return cachedQSA(this, sel); }
-  get children() { const self = this; return liveHTMLCollection(() => self.__children().filter((n) => n.nodeType === ELEMENT_NODE)); }
+  get children() { if (this.__childrenList) return this.__childrenList; const self = this; return (this.__childrenList = liveHTMLCollection(() => self.__children().filter((n) => n.nodeType === ELEMENT_NODE))); }
   append(...nodes) { for (const n of nodes) this.appendChild(toNode(this.ownerDocument, n)); }
   cloneNode(deep = false) { const f = new DocumentFragment(this.ownerDocument); if (deep) for (const c of this.__children()) f.appendChild(c.cloneNode(true)); return f; }
 }

package/src/runtime/events.mjs

@@ -150,8 +150,20 @@ export class EventTarget {
   dispatchEvent(event) {
     if (!(event instanceof Event)) throw new TypeError('dispatchEvent requires an Event');
     event.target = this;
-    event._path = this.__eventPath();
-    const path = event._path;
+
+    // Single ancestor walk: build the path AND note whether any node on it has a
+    // listener for this type. React fires thousands of events with zero matching
+    // listeners on the path — those skip the capture/target/bubble invoke loops.
+    const type = event.type;
+    const path = [];
+    let hasListener = false;
+    let node = this;
+    while (node) {
+      path.push(node);
+      if (!hasListener) { const l = node.__listeners && node.__listeners.get(type); if (l && l.length) hasListener = true; }
+      node = node.parentNode || node.__owner || null;
+    }
+    event._path = path;
 
     // pre-click activation (WHATWG): checkbox/radio toggle BEFORE click listeners
     // run, so React's change detection sees the new value. Undone if preventDefault.
@@ -185,18 +197,21 @@ export class EventTarget {
       }
     };
 
-    // capturing: root -> just before target
-    for (let i = path.length - 1; i >= 1; i--) {
-      if (event._stopPropagation) break;
-      invoke(path[i], PHASE_CAPTURING);
-    }
-    // at target
-    if (!event._stopPropagation) invoke(path[0], PHASE_AT_TARGET);
-    // bubbling: target's parent -> root
-    if (event.bubbles) {
-      for (let i = 1; i < path.length; i++) {
+    // no listener anywhere on the path → skip all three propagation phases
+    if (hasListener) {
+      // capturing: root -> just before target
+      for (let i = path.length - 1; i >= 1; i--) {
         if (event._stopPropagation) break;
-        invoke(path[i], PHASE_BUBBLING);
+        invoke(path[i], PHASE_CAPTURING);
+      }
+      // at target
+      if (!event._stopPropagation) invoke(path[0], PHASE_AT_TARGET);
+      // bubbling: target's parent -> root
+      if (event.bubbles) {
+        for (let i = 1; i < path.length; i++) {
+          if (event._stopPropagation) break;
+          invoke(path[i], PHASE_BUBBLING);
+        }
       }
     }
 

package/src/runtime/stubs.mjs

@@ -83,8 +83,13 @@ export function makeMatchMedia() {
 // invents cascade/layout numbers. A property that wasn't set reads as ''.
 export function makeGetComputedStyle() {
   return (el) => {
+    // The Proxy reads el.style LIVE on each access, so one cached Proxy per
+    // element is always correct (no version needed) — avoids re-allocating a
+    // Proxy on every call, which dom-accessibility-api does per element in
+    // getByRole/getByText visibility checks.
+    if (el && el.__computedStyle) return el.__computedStyle;
     const style = el && el.style ? el.style : null;
-    return new Proxy({}, {
+    const proxy = new Proxy({}, {
       get(_t, key) {
         if (key === 'getPropertyValue') return (p) => (style ? style.getPropertyValue(p) : '');
         if (key === '__honest') return 'computed style is inline-only; no layout/cascade available';
@@ -92,6 +97,8 @@ export function makeGetComputedStyle() {
         return style ? style[key] : '';
       },
     });
+    if (el) el.__computedStyle = proxy;
+    return proxy;
   };
 }
 

package/src/runtime/window.mjs

@@ -87,72 +87,20 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
   const touched = new Set();
   let windowProxy;
 
-  // Universal globals (touched by ~every test) — eager, no point lazifying.
+  // Per-env globals: only the ~11 that capture document/url/windowProxy. Everything
+  // stateless (constructors, timers, stateless window methods) lives in the shared
+  // module-level STATIC_BASE, built ONCE — not rebuilt per createWindow (per test
+  // file). The Proxy below reads base first, then STATIC_BASE, then lazy; a
+  // `window.x = y` assignment writes to base, shadowing STATIC_BASE per-env.
   const base = {
     document,
     name: '',
     closed: false,
     origin: new URL(url).origin,
-    // constructors are cheap class refs — expose eagerly
-    Node, Element, Text, Comment, Document, DocumentFragment, DocumentType,
-    EventTarget,
-    Event, CustomEvent,
-    UIEvent, MouseEvent, PointerEvent, KeyboardEvent, InputEvent, FocusEvent,
-    CompositionEvent, WheelEvent, TouchEvent, DragEvent, ProgressEvent, ClipboardEvent,
-    DataTransfer,
-    // every element is a plain Element → `el instanceof HTMLElement` is true.
-    // Tag-specific interfaces match by localName via Symbol.hasInstance, so
-    // `el instanceof HTMLAnchorElement` is true ONLY for <a> (not every element),
-    // and React's `while (el instanceof HTMLIFrameElement)` loop terminates.
-    HTMLElement: Element, SVGElement: Element,
-    HTMLAnchorElement: tagClass('a'), HTMLInputElement: tagClass('input'),
-    HTMLTextAreaElement: tagClass('textarea'), HTMLSelectElement: tagClass('select'),
-    HTMLOptionElement: tagClass('option'), HTMLButtonElement: tagClass('button'),
-    HTMLFormElement: tagClass('form'), HTMLImageElement: tagClass('img'),
-    HTMLCanvasElement: tagClass('canvas'), HTMLTemplateElement: tagClass('template'),
-    HTMLLabelElement: tagClass('label'), HTMLDivElement: tagClass('div'),
-    HTMLSpanElement: tagClass('span'), HTMLParagraphElement: tagClass('p'),
-    HTMLUListElement: tagClass('ul'), HTMLLIElement: tagClass('li'),
-    HTMLBodyElement: tagClass('body'), HTMLIFrameElement: tagClass('iframe'),
-    HTMLHeadingElement: tagClass(/^h[1-6]$/),
-    HTMLDocument: Document, DocumentFragment, ShadowRoot: DocumentFragment,
-    MutationObserver, DOMParser, XMLSerializer,
-    URL: makeURL(), URLSearchParams,
-    Blob: globalThis.Blob, File: makeFile(), FileReader,
     customElements: makeCustomElements(),
-    AbortController: globalThis.AbortController, AbortSignal: globalThis.AbortSignal,
-    TextEncoder: globalThis.TextEncoder, TextDecoder: globalThis.TextDecoder,
-    // web platform globals Node already provides
-    fetch: globalThis.fetch ? (...a) => globalThis.fetch(...a) : undefined,
-    Headers: globalThis.Headers, Request: globalThis.Request, Response: globalThis.Response,
-    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'),
-    MessageChannel: globalThis.MessageChannel, MessagePort: globalThis.MessagePort,
-    BroadcastChannel: globalThis.BroadcastChannel, EventSource: globalThis.EventSource,
-    reportError: (e) => { /* swallow; tests assert via handlers */ void e; },
-    requestIdleCallback: (cb) => hostSetTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 0),
-    cancelIdleCallback: (id) => hostClearTimeout(id),
-    CSS: { supports: () => true, escape: (s) => String(s).replace(/[^a-zA-Z0-9_-]/g, (c) => '\\' + c) },
-    XMLHttpRequest: makeXHR(),
     Image: function Image(w, h) { const img = document.createElement('img'); if (w != null) img.setAttribute('width', w); if (h != null) img.setAttribute('height', h); return img; },
     Audio: function Audio(src) { const a = document.createElement('audio'); if (src) a.setAttribute('src', src); return a; },
-    Worker: class Worker { constructor() {} postMessage() {} terminate() {} addEventListener() {} removeEventListener() {} },
-    // timers delegate to the captured host fns (NOT the bare names — once these
-    // are installed on globalThis the bare names resolve back here → recursion)
-    setTimeout: (...a) => hostSetTimeout(...a),
-    clearTimeout: (...a) => hostClearTimeout(...a),
-    setInterval: (...a) => hostSetInterval(...a),
-    clearInterval: (...a) => hostClearInterval(...a),
-    queueMicrotask: (...a) => hostQueueMicrotask(...a),
-    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),
     removeEventListener: (...a) => document.removeEventListener(...a),
@@ -196,7 +144,8 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
   windowProxy = new Proxy(base, {
     get(t, k) {
       if (k === 'window' || k === 'self' || k === 'globalThis' || k === 'parent' || k === 'top') return windowProxy;
-      if (k in t) return t[k];
+      if (k in t) return t[k];            // per-env (incl. overrides + materialized lazy)
+      if (k in STATIC_BASE) return STATIC_BASE[k];  // shared stateless globals
       const factory = lazy[k];
       if (factory) {
         touched.add(k);
@@ -206,11 +155,19 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
       }
       return undefined;
     },
-    set(t, k, v) { t[k] = v; return true; },
+    set(t, k, v) { t[k] = v; return true; },  // writes to base → shadows STATIC_BASE per-env
     has(t, k) {
-      return k in t || k in lazy ||
+      return k in t || k in STATIC_BASE || k in lazy ||
         k === 'window' || k === 'self' || k === 'globalThis' || k === 'parent' || k === 'top';
     },
+    // so vi.spyOn(window, 'scrollTo'/'open'/…) finds STATIC_BASE methods as own
+    // props; spyOn then defineProperty's the spy onto base (target), shadowing it.
+    getOwnPropertyDescriptor(t, k) {
+      const own = Object.getOwnPropertyDescriptor(t, k);
+      if (own) return own;
+      if (k in STATIC_BASE) return { configurable: true, enumerable: true, writable: true, value: STATIC_BASE[k] };
+      return undefined;
+    },
   });
 
   document.defaultView = windowProxy;
@@ -220,7 +177,7 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
     // which lazy globals this test materialized (the "DOM surface used" report)
     touched: () => [...touched],
     // every global name this window can provide (for environment adapters)
-    globalKeys: [...Object.keys(base), ...Object.keys(lazy)],
+    globalKeys: [...Object.keys(base), ...Object.keys(STATIC_BASE), ...Object.keys(lazy)],
     // Layer 5: drop materialized global slots, keep the class machinery warm.
     resetGlobals() {
       for (const k of touched) delete base[k];
@@ -247,6 +204,9 @@ function makeFile() {
     constructor(bits = [], name = 'file', opts = {}) { super(bits, opts); this.name = String(name); this.lastModified = opts.lastModified || 0; }
   };
 }
+// stateless — build the classes ONCE, not per createWindow() (per test file).
+const TURBO_URL = makeURL();
+const TURBO_FILE = makeFile();
 
 // Minimal XMLHttpRequest backed by fetch — enough that libraries that construct
 // one and issue a request don't crash. No-network setups still get a clean object.
@@ -276,3 +236,60 @@ function makeXHR() {
     }
   };
 }
+
+// Stateless globals — identical for every window, so built ONCE at module load
+// instead of per createWindow() (per test file). createWindow's Proxy falls back
+// to this after its tiny per-env `base`. Nothing here captures document/url/window.
+const STATIC_BASE = {
+  // DOM + event constructors (cheap class refs)
+  Node, Element, Text, Comment, Document, DocumentFragment, DocumentType, EventTarget,
+  Event, CustomEvent,
+  UIEvent, MouseEvent, PointerEvent, KeyboardEvent, InputEvent, FocusEvent,
+  CompositionEvent, WheelEvent, TouchEvent, DragEvent, ProgressEvent, ClipboardEvent,
+  DataTransfer,
+  // every element is a plain Element → `el instanceof HTMLElement` is true.
+  // Tag-specific interfaces match by localName via Symbol.hasInstance.
+  HTMLElement: Element, SVGElement: Element,
+  HTMLAnchorElement: tagClass('a'), HTMLInputElement: tagClass('input'),
+  HTMLTextAreaElement: tagClass('textarea'), HTMLSelectElement: tagClass('select'),
+  HTMLOptionElement: tagClass('option'), HTMLButtonElement: tagClass('button'),
+  HTMLFormElement: tagClass('form'), HTMLImageElement: tagClass('img'),
+  HTMLCanvasElement: tagClass('canvas'), HTMLTemplateElement: tagClass('template'),
+  HTMLLabelElement: tagClass('label'), HTMLDivElement: tagClass('div'),
+  HTMLSpanElement: tagClass('span'), HTMLParagraphElement: tagClass('p'),
+  HTMLUListElement: tagClass('ul'), HTMLLIElement: tagClass('li'),
+  HTMLBodyElement: tagClass('body'), HTMLIFrameElement: tagClass('iframe'),
+  HTMLHeadingElement: tagClass(/^h[1-6]$/),
+  HTMLDocument: Document, ShadowRoot: DocumentFragment,
+  MutationObserver, DOMParser, XMLSerializer,
+  URL: TURBO_URL, URLSearchParams,
+  Blob: globalThis.Blob, File: TURBO_FILE, FileReader,
+  AbortController: globalThis.AbortController, AbortSignal: globalThis.AbortSignal,
+  TextEncoder: globalThis.TextEncoder, TextDecoder: globalThis.TextDecoder,
+  fetch: globalThis.fetch ? (...a) => globalThis.fetch(...a) : undefined,
+  Headers: globalThis.Headers, Request: globalThis.Request, Response: globalThis.Response,
+  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'),
+  MessageChannel: globalThis.MessageChannel, MessagePort: globalThis.MessagePort,
+  BroadcastChannel: globalThis.BroadcastChannel, EventSource: globalThis.EventSource,
+  reportError: (e) => { void e; },
+  requestIdleCallback: (cb) => hostSetTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 0),
+  cancelIdleCallback: (id) => hostClearTimeout(id),
+  CSS: { supports: () => true, escape: (s) => String(s).replace(/[^a-zA-Z0-9_-]/g, (c) => '\\' + c) },
+  XMLHttpRequest: makeXHR(),
+  Worker: class Worker { constructor() {} postMessage() {} terminate() {} addEventListener() {} removeEventListener() {} },
+  // timers delegate to captured host fns (NOT bare names — installed bare names
+  // would resolve back here → recursion)
+  setTimeout: (...a) => hostSetTimeout(...a),
+  clearTimeout: (...a) => hostClearTimeout(...a),
+  setInterval: (...a) => hostSetInterval(...a),
+  clearInterval: (...a) => hostClearInterval(...a),
+  queueMicrotask: (...a) => hostQueueMicrotask(...a),
+  structuredClone: (...a) => hostStructuredClone(...a),
+  scrollTo() {}, scroll() {}, scrollBy() {},
+  open: () => null, close() {}, stop() {}, print() {}, focus() {}, blur() {},
+  moveTo() {}, moveBy() {}, resizeTo() {}, resizeBy() {},
+  alert() {}, confirm: () => false, prompt: () => null,
+};