@miaskiewicz/turbo-dom 0.1.22 → 0.1.24

package/README.md

@@ -14,7 +14,7 @@ npm install -D @miaskiewicz/turbo-dom
 
 - ✅ **More compatible than happy-dom** — 99.72% on html5lib-tests vs happy-dom's 37%.
   Runs React Testing Library, `user-event`, downshift, Radix UI, and Headless UI unmodified.
-- ⚡ **Faster than both** — ~23× jsdom / ~10× happy-dom on per-file setup, 18–37× faster HTML parsing, and (with per-version query-result caching) it matches/beats happy-dom on repeated queries while staying 99.7% spec-correct.
+- ⚡ **Faster than both** — ~120× jsdom / ~40× happy-dom on a realistic suite (parse-memoized repeated shells), 18–37× faster HTML parsing, and it beats happy-dom on repeated queries while staying 99.7% spec-correct.
 - 🎯 **Honest, not lying** — no fake layout numbers; `getBoundingClientRect()` is zeros and
   `getComputedStyle` reflects only what you set. Geometry tests belong in a real browser.
 
@@ -105,20 +105,26 @@ the suite row (ms/file, lower = faster):
 
 | benchmark | turbo-dom | happy-dom | jsdom |
 |---|---:|---:|---:|
-| **per-file setup + 1 query** (ops/s) | **5,900** | 600 | 250 |
-| **realistic suite**, 200 files (ms/file) | **0.15** | 2.1 | 4.9 |
+| **realistic suite**, 200 files (ms/file) | **0.022** | 1.12 | 3.47 |
+| **per-file setup** (ops/s) | **~500k** | 396 | 144 |
 | **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) | **920k** | 600k | 3k |
+| **parse 20 KB real page** (ops/s) | **2,800** | 600 | 290 |
+| repeated query throughput (iters/s) | **994k** | 692k | 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.
+On a realistic suite — 200 files of construct + queries + events — turbo-dom is
+**~40× happy-dom and ~120× jsdom**, edges happy-dom on repeated queries, and parses
+**18–37×** faster, all at 99.7% conformance.
+
+The per-file setup number is so high because the parser **memoizes the read-only
+SoA buffer by HTML string**: a suite calls the env setup with the same document
+shell every file, so it's parsed once and the buffer (never mutated — all changes
+go to per-Document overlays) is reused. The first parse of a given shell pays full
+cost (the parse rows above); every reuse is near-free.
 
 **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.
+construction (~40× happy-dom, ~120× jsdom on a repeated-shell suite), parsing,
+spec-correctness (99.7% vs 37%), **and** repeated queries.
 
 How the query speed holds up against happy-dom (whose whole design trades correctness
 for query speed): the selector/match engine is allocation-free on the hot paths (no

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "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/collections.mjs

@@ -5,23 +5,32 @@ function makeLive(getArray, extra = {}) {
   const target = function () {};
   return new Proxy(target, {
     get(_t, key) {
-      const arr = getArray();
-      if (key === 'length') return arr.length;
-      if (key === 'item') return (i) => arr[i] ?? null;
-      if (key === 'forEach') return (cb, thisArg) => arr.forEach(cb, thisArg);
-      if (key === 'entries') return () => arr.entries();
-      if (key === 'keys') return () => arr.keys();
-      if (key === 'values') return () => arr[Symbol.iterator]();
-      if (key === Symbol.iterator) return () => arr[Symbol.iterator]();
-      if (key === 'toString') return () => '[object NodeList]';
-      if (key in extra) return extra[key](arr);
-      if (typeof key === 'string' && /^\d+$/.test(key)) return arr[Number(key)] ?? undefined;
+      if (typeof key === 'string') {
+        // hot path: indexed access coll[i]. A property key starting with a digit
+        // is a numeric index — detect via charCode, no regex, no string-compare
+        // chain. getArray() is called only when actually needed.
+        const c = key.charCodeAt(0);
+        if (c >= 48 && c <= 57) return getArray()[+key];
+        if (key === 'length') return getArray().length;
+        if (key === 'item') return (i) => getArray()[i] ?? null;
+        if (key === 'forEach') return (cb, thisArg) => getArray().forEach(cb, thisArg);
+        if (key === 'entries') return () => getArray().entries();
+        if (key === 'keys') return () => getArray().keys();
+        if (key === 'values') return () => getArray()[Symbol.iterator]();
+        if (key === 'toString') return () => '[object NodeList]';
+        if (key in extra) return extra[key](getArray());
+        return undefined;
+      }
+      if (key === Symbol.iterator) return () => getArray()[Symbol.iterator]();
       return undefined;
     },
     has(_t, key) {
-      const arr = getArray();
-      if (typeof key === 'string' && /^\d+$/.test(key)) return Number(key) < arr.length;
-      return key === 'length' || key === 'item' || key === 'forEach' || key in extra;
+      if (typeof key === 'string') {
+        const c = key.charCodeAt(0);
+        if (c >= 48 && c <= 57) return +key < getArray().length;
+        return key === 'length' || key === 'item' || key === 'forEach' || key in extra;
+      }
+      return false;
     },
     ownKeys() {
       const arr = getArray();
@@ -30,8 +39,11 @@ function makeLive(getArray, extra = {}) {
     getOwnPropertyDescriptor(_t, key) {
       const arr = getArray();
       if (key === 'length') return { configurable: true, enumerable: false, value: arr.length };
-      if (typeof key === 'string' && /^\d+$/.test(key) && Number(key) < arr.length) {
-        return { configurable: true, enumerable: true, value: arr[Number(key)] };
+      if (typeof key === 'string') {
+        const c = key.charCodeAt(0);
+        if (c >= 48 && c <= 57 && +key < arr.length) {
+          return { configurable: true, enumerable: true, value: arr[+key] };
+        }
       }
       return undefined;
     },

package/src/runtime/dom.mjs

@@ -30,6 +30,18 @@ function cachedQSA(node, sel) {
   cache.set('a:' + sel, { v, r });
   return r;
 }
+// memoize the className → class-list split (pure; the regex split showed up per
+// getElementsByClassName call in profiles)
+const __classSplit = new Map();
+function splitClasses(cls) {
+  let c = __classSplit.get(cls);
+  if (c === undefined) {
+    c = cls.split(/\s+/).filter(Boolean);
+    if (__classSplit.size > 2000) __classSplit.clear();
+    __classSplit.set(cls, c);
+  }
+  return c;
+}
 function cachedQS(node, sel) {
   const doc = node.ownerDocument || node;
   const v = doc.__version || 0;
@@ -327,6 +339,7 @@ export class Element extends Node {
     this.localName = localName;
     this.__ns = namespace;            // '', 'svg', 'math'
     this.__attrs = [];                // [{name, value, prefix}]
+    this.__attrIdx = -1;              // buffer index for lazy attr inflation
     this.content = null;              // <template> content fragment
     this.shadowRoot = null;           // open shadow root, if attached
   }
@@ -337,10 +350,15 @@ export class Element extends Node {
   get namespaceURI() { return nsUri(this.__ns); }
 
   // ---- attributes ----
-  getAttribute(name) { const at = this.__attrs; for (let i = 0; i < at.length; i++) if (at[i].name === name) return at[i].value; return null; }
-  hasAttribute(name) { const at = this.__attrs; for (let i = 0; i < at.length; i++) if (at[i].name === name) return true; return false; }
-  getAttributeNames() { return this.__attrs.map((a) => a.name); }
+  // attrs inflate lazily: a buffer-backed element leaves __attrs undefined and
+  // builds the array from the SoA only when an attribute is first touched (many
+  // elements are inflated for traversal but never have attrs read).
+  __buildAttrs() { const doc = this.ownerDocument, buf = doc && doc.__buf; return (this.__attrIdx >= 0 && buf) ? buf.attrs(this.__attrIdx) : []; }
+  getAttribute(name) { const at = this.__attrs ?? (this.__attrs = this.__buildAttrs()); for (let i = 0; i < at.length; i++) if (at[i].name === name) return at[i].value; return null; }
+  hasAttribute(name) { const at = this.__attrs ?? (this.__attrs = this.__buildAttrs()); for (let i = 0; i < at.length; i++) if (at[i].name === name) return true; return false; }
+  getAttributeNames() { return (this.__attrs ?? (this.__attrs = this.__buildAttrs())).map((a) => a.name); }
   setAttribute(name, value) {
+    if (this.__attrs === undefined) this.__attrs = this.__buildAttrs();
     const a = this.__attrs.find((x) => x.name === name);
     const old = a ? a.value : null;
     if (a) a.value = String(value);
@@ -348,6 +366,7 @@ export class Element extends Node {
     notifyMutation(this, { type: 'attributes', target: this, attributeName: name, oldValue: old, addedNodes: [], removedNodes: [] });
   }
   removeAttribute(name) {
+    if (this.__attrs === undefined) this.__attrs = this.__buildAttrs();
     const a = this.__attrs.find((x) => x.name === name);
     this.__attrs = this.__attrs.filter((x) => x.name !== name);
     if (a) notifyMutation(this, { type: 'attributes', target: this, attributeName: name, oldValue: a.value, addedNodes: [], removedNodes: [] });
@@ -358,7 +377,7 @@ export class Element extends Node {
     this.removeAttribute(name); return false;
   }
   get attributes() {
-    return this.__attrs.map((a) => ({
+    return (this.__attrs ?? (this.__attrs = this.__buildAttrs())).map((a) => ({
       name: a.name, localName: a.name, value: a.value, prefix: a.prefix || null,
       namespaceURI: a.prefix === 'xlink' ? 'http://www.w3.org/1999/xlink' : null,
     }));
@@ -551,7 +570,7 @@ export class Element extends Node {
   querySelector(sel) { return cachedQS(this, sel); }
   querySelectorAll(sel) { return cachedQSA(this, sel); }
   getElementsByTagName(tag) { const self = this; return liveHTMLCollection(() => collectByTag(self, tag.toLowerCase())); }
-  getElementsByClassName(cls) { const self = this; const classes = cls.split(/\s+/).filter(Boolean); return liveHTMLCollection(() => collectByClass(self, classes)); }
+  getElementsByClassName(cls) { const self = this; const classes = splitClasses(cls); return liveHTMLCollection(() => collectByClass(self, classes)); }
 
   // ---- innerHTML / outerHTML ----
   get innerHTML() { return serializeInner(this); }
@@ -586,7 +605,7 @@ export class Element extends Node {
 
   cloneNode(deep = false) {
     const el = new Element(this.ownerDocument, this.localName, this.__ns);
-    el.__attrs = this.__attrs.map((a) => ({ ...a }));
+    el.__attrs = (this.__attrs ?? (this.__attrs = this.__buildAttrs())).map((a) => ({ ...a }));
     if (deep) for (const c of this.__children()) el.appendChild(c.cloneNode(true));
     return el;
   }
@@ -684,7 +703,7 @@ export class Element extends Node {
   setAttributeNS(_ns, name, value) { this.setAttribute(name, value); }
   hasAttributeNS(_ns, name) { return this.hasAttribute(name); }
   removeAttributeNS(_ns, name) { this.removeAttribute(name); }
-  getAttributeNode(name) { const a = this.__attrs.find((x) => x.name === name); return a ? { name: a.name, value: a.value, ownerElement: this } : null; }
+  getAttributeNode(name) { const a = (this.__attrs ?? (this.__attrs = this.__buildAttrs())).find((x) => x.name === name); return a ? { name: a.name, value: a.value, ownerElement: this } : null; }
 
   // adjacency
   insertAdjacentElement(position, el) {
@@ -1087,7 +1106,7 @@ export class Document extends Node {
       case ELEMENT_NODE: {
         node = new Element(this, buf.tagName(idx), buf.ns(idx));
         node.__idx = idx;
-        node.__attrs = buf.attrs(idx);
+        node.__attrIdx = idx; node.__attrs = undefined; // lazy: build on first attr access
         // template content fragment: a child node typed 11 named "content"
         if (buf.tagName(idx) === 'template') {
           for (let c = buf.firstChild(idx); c !== -1; c = buf.nextSib(c)) {
@@ -1266,7 +1285,7 @@ export class Document extends Node {
     return arr;
   }
   getElementsByTagName(tag) { const self = this; const t = tag.toLowerCase(); return liveHTMLCollection(() => self.__byTag(t)); }
-  getElementsByClassName(cls) { const self = this; const classes = cls.split(/\s+/).filter(Boolean); return liveHTMLCollection(() => self.__byClass(cls, classes)); }
+  getElementsByClassName(cls) { const self = this; const classes = splitClasses(cls); return liveHTMLCollection(() => self.__byClass(cls, classes)); }
   contains(node) { return Node.prototype.contains.call(this, node); }
 
   // cookie jar: store name=value, strip attributes (path/Secure/SameSite/…),

package/src/runtime/events.mjs

@@ -114,13 +114,16 @@ function normalizeOptions(options) {
 
 export class EventTarget {
   constructor() {
-    // type -> array of { callback, capture, once, passive }
-    this.__listeners = new Map();
+    // type -> array of { callback, capture, once, passive }. Lazily created on
+    // first addEventListener — most inflated nodes never get a listener, so this
+    // skips a Map allocation per node (inflation is a top hot path).
+    this.__listeners = null;
   }
 
   addEventListener(type, callback, options) {
     if (callback == null) return;
     const o = normalizeOptions(options);
+    if (!this.__listeners) this.__listeners = new Map();
     let list = this.__listeners.get(type);
     if (!list) { list = []; this.__listeners.set(type, list); }
     // dedupe on (callback, capture) per spec
@@ -129,6 +132,7 @@ export class EventTarget {
   }
 
   removeEventListener(type, callback, options) {
+    if (!this.__listeners) return;
     const o = normalizeOptions(options);
     const list = this.__listeners.get(type);
     if (!list) return;

package/src/runtime/index.mjs

@@ -16,9 +16,24 @@ const native = require('../../index.js');
 export { Document } from './dom.mjs';
 export * from './dom.mjs';
 
+// Parse cache: the SoA buffer is READ-ONLY (every mutation goes to a Document's
+// own __kids/__attrs/__cache overlay, never the buffer), so the same buffer can
+// back many Documents. Test suites call setup with the SAME html per file
+// (usually the empty default) → parse once, reuse for every file, skipping the
+// native parse + boundary marshaling entirely. Bounded (fixtures are few).
+const __parseCache = new Map();
+function parseBufferCached(html) {
+  const hit = __parseCache.get(html);
+  if (hit !== undefined) return hit;
+  const soa = native.parseBuffer(html);
+  if (__parseCache.size > 64) __parseCache.clear();
+  __parseCache.set(html, soa);
+  return soa;
+}
+
 export function createEnvironment(html = '<!doctype html><html><head></head><body></body></html>', options = {}) {
   // Layer 1: native parse → immutable SoA buffer (typed arrays, one boundary copy).
-  let soa = native.parseBuffer(String(html));
+  let soa = parseBufferCached(String(html));
 
   // Layer 2: Document over the buffer (nodes inflate lazily from the arrays).
   const document = new Document();
@@ -36,7 +51,7 @@ export function createEnvironment(html = '<!doctype html><html><head></head><bod
     // Layer 5: arena-style reset. Re-point at the (re)parsed buffer, drop the
     // owned overlay + node cache + materialized globals. Class machinery stays warm.
     reset(nextHtml) {
-      if (nextHtml !== undefined) soa = native.parseBuffer(String(nextHtml));
+      if (nextHtml !== undefined) soa = parseBufferCached(String(nextHtml));
       document.__load(soa);       // drops __cache + __kids overlay, keeps the buffer if reused
       win.resetGlobals();
       document.__active = null;