@miaskiewicz/turbo-dom 0.2.2 → 0.2.4

package/Cargo.lock

@@ -490,7 +490,7 @@ dependencies = [
 
 [[package]]
 name = "turbo-dom-parser"
-version = "0.0.1"
+version = "0.2.4"
 dependencies = [
  "html5ever",
  "markup5ever_rcdom",

package/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "turbo-dom-parser"
-version = "0.0.1"
+version = "0.2.4"
 edition = "2021"
 description = "html5ever-backed native parser for turbo-dom (Layer 1)"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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",
@@ -75,7 +75,7 @@
     "build:wasm:pkg": "wasm-pack build --target nodejs --out-dir pkg --no-default-features --features wasm-bind",
     "build:wasm:web": "wasm-pack build --target web --out-dir pkg-web --no-default-features --features wasm-bind",
     "test": "node --test 'test/*.mjs'",
-    "test:cov": "node --test --experimental-test-coverage --test-coverage-include='src/runtime/**' --test-coverage-lines=99 --test-coverage-functions=92 --test-coverage-branches=88 'test/*.mjs'",
+    "test:cov": "node --test --experimental-test-coverage --test-coverage-include='src/runtime/**' --test-coverage-lines=99 --test-coverage-functions=95 --test-coverage-branches=95 'test/*.mjs'",
     "test:rust": "cargo test --lib",
     "test:all": "npm run build && npm run test:rust && npm test",
     "prepare": "git config core.hooksPath .githooks || true",

package/src/runtime/dom.mjs

@@ -826,17 +826,17 @@ export class Element extends Node {
     this.dispatchEvent(new FocusEvent('blur'));
     this.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
   }
-  getBoundingClientRect() { return zeroRect(); }
-  getClientRects() { return []; }
+  getBoundingClientRect() { const w = synthWidth(this), h = synthHeight(this); return { x: 0, y: 0, top: 0, left: 0, right: w, bottom: h, width: w, height: h, toJSON() { return this; } }; }
+  getClientRects() { const r = this.getBoundingClientRect(); return (r.width || r.height) ? [r] : []; }
   scrollIntoView() {}
   scroll() {} scrollTo() {} scrollBy() {}
-  // honest zero geometry (no layout)
-  get offsetWidth() { return 0; } get offsetHeight() { return 0; }
+  // synthetic box model (no real layout) — see synthWidth/synthHeight below
+  get offsetWidth() { return synthWidth(this); } get offsetHeight() { return synthHeight(this); }
   get offsetTop() { return 0; } get offsetLeft() { return 0; }
   get offsetParent() { return null; }
-  get clientWidth() { return 0; } get clientHeight() { return 0; }
+  get clientWidth() { return synthWidth(this); } get clientHeight() { return synthHeight(this); }
   get clientTop() { return 0; } get clientLeft() { return 0; }
-  get scrollWidth() { return 0; } get scrollHeight() { return 0; }
+  get scrollWidth() { return synthWidth(this); } get scrollHeight() { return synthHeight(this); }
   get scrollTop() { return 0; } set scrollTop(_v) {} get scrollLeft() { return 0; } set scrollLeft(_v) {}
 
   // namespaced attributes
@@ -1140,6 +1140,54 @@ function zeroRect() {
   return { x: 0, y: 0, top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0, toJSON() { return this; } };
 }
 
+// ---- synthetic geometry --------------------------------------------------
+// Honest zero geometry deadlocks layout-driven React: a component measures 0,
+// setState()s to "fix" it, re-renders, measures 0 again — forever (MUI Popper /
+// autosizers / virtual lists / useLayoutEffect). So instead of a real layout
+// engine we return a cheap synthetic box model whose values are (1) non-zero &
+// plausible, (2) STABLE for the same DOM state, (3) internally consistent
+// (children fit parents; right-left === width). Width depends only on ancestors,
+// height only on descendants — no cycle. Memoized per node keyed on
+// Document.__version (`__rw`/`__rh`), like __computedStyle, so a mutation
+// invalidates it and a measure→setState→measure cycle sees the same value twice
+// and settles. Test-time only — parse/query/match/events never call these.
+const INLINE_TAGS = new Set(['a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i', 'img', 'input', 'kbd', 'label', 'mark', 'output', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'select', 'small', 'span', 'strong', 'sub', 'sup', 'textarea', 'time', 'u', 'var', 'wbr']);
+const LINE_HEIGHT = 18;
+const CHAR_W = 8;
+function viewportWidth(el) { const w = el.ownerDocument && el.ownerDocument.defaultView; return (w && w.innerWidth) || 1024; }
+function synthWidth(el) {
+  const doc = el.ownerDocument || el;
+  const v = doc.__version || 0;
+  const c = el.__rw;
+  if (c && c.v === v) return c.w;
+  const p = el.parentNode;
+  const pw = (p && p.nodeType === ELEMENT_NODE) ? synthWidth(p) : viewportWidth(el);
+  // inline boxes shrink-wrap their text (capped at the parent); blocks fill it
+  const w = INLINE_TAGS.has(el.localName)
+    ? Math.min(pw, Math.max(CHAR_W, (el.textContent || '').length * CHAR_W))
+    : pw;
+  el.__rw = { v, w };
+  return w;
+}
+function synthHeight(el) {
+  const doc = el.ownerDocument || el;
+  const v = doc.__version || 0;
+  const c = el.__rh;
+  if (c && c.v === v) return c.h;
+  const kids = el.__children ? el.__children() : [];
+  let elemKids = 0, stacked = 0;
+  for (let i = 0; i < kids.length; i++) { const k = kids[i]; if (k.nodeType === ELEMENT_NODE) { elemKids++; stacked += synthHeight(k); } }
+  let h;
+  if (elemKids) h = Math.max(LINE_HEIGHT, stacked);  // block flow: element children stack
+  else {
+    const chars = (el.textContent || '').length;
+    const perLine = Math.max(1, Math.floor(synthWidth(el) / CHAR_W));
+    h = Math.max(1, Math.ceil(chars / perLine)) * LINE_HEIGHT;
+  }
+  el.__rh = { v, h };
+  return h;
+}
+
 // child index of `node` within its parent (per spec: the node's "index")
 function nodeIndex(node) {
   const p = node.parentNode;

package/src/runtime/index.mjs

@@ -18,6 +18,10 @@ export * from './dom.mjs';
 // or force 'wasm' | 'native' | 'auto'. See parser.mjs.
 export { setParser, setParserMode, getParser } from './parser.mjs';
 
+// Clock seam (public API): install a virtual clock so time-gated rAF loops (MUI
+// transitions) terminate under a synchronous timer-drain render tier. See window.mjs.
+export { setClock } from './window.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

package/src/runtime/stubs.mjs

@@ -66,10 +66,34 @@ export class Storage {
   clear() { this.__map.clear(); }
 }
 
-export function makeMatchMedia() {
+// matchMedia: parse width/height/orientation features and evaluate them against
+// the window's innerWidth/innerHeight (default 1024×768). Responsive components
+// (`useMediaQuery`, MUI breakpoints) branch on this; a flat `false` made them
+// mis-branch and thrash. `matches` is a getter so it re-evaluates if innerWidth
+// is overridden — still stable for a given viewport. Unknown/feature-less queries
+// stay honestly `false`.
+const MQ_FEATURE = /\(\s*(min-width|max-width|min-height|max-height|orientation)\s*:\s*([^)]+?)\s*\)/g;
+function evalMediaQuery(query, win) {
+  const W = (win && win.innerWidth) || 1024;
+  const H = (win && win.innerHeight) || 768;
+  const q = String(query).toLowerCase();
+  let matched = true, any = false, m;
+  MQ_FEATURE.lastIndex = 0;
+  while ((m = MQ_FEATURE.exec(q))) {
+    any = true;
+    const feat = m[1], val = m[2].trim();
+    if (feat === 'min-width') matched = matched && W >= parseFloat(val);
+    else if (feat === 'max-width') matched = matched && W <= parseFloat(val);
+    else if (feat === 'min-height') matched = matched && H >= parseFloat(val);
+    else if (feat === 'max-height') matched = matched && H <= parseFloat(val);
+    else matched = matched && val === (W >= H ? 'landscape' : 'portrait'); // orientation
+  }
+  return any && matched;
+}
+export function makeMatchMedia(win) {
   return (query) => ({
-    matches: false,                 // honest: no real media context in a headless runner
-    media: query,
+    media: String(query),
+    get matches() { return evalMediaQuery(query, win); },
     onchange: null,
     addEventListener() {},
     removeEventListener() {},
@@ -82,17 +106,46 @@ export function makeMatchMedia() {
 // getComputedStyle lives in cascade.mjs — it resolves injected <style> sheets +
 // inline styles (a strict superset of the old inline-only stub once here).
 
-class ObserverStub {
+// Resize/Intersection observers fire their callback ONCE, async, with a single
+// initial entry — never on a loop. Components that gate first render on the first
+// observer callback (lazy lists, MUI autosize, visibility-gated mounts) then
+// proceed and settle. The entry's rect is the element's synthetic box (dom.mjs).
+function rectOf(el) {
+  const r = el && typeof el.getBoundingClientRect === 'function' ? el.getBoundingClientRect() : { width: 0, height: 0 };
+  return { x: 0, y: 0, top: 0, left: 0, right: r.width, bottom: r.height, width: r.width, height: r.height };
+}
+export class ResizeObserver {
   constructor(cb) { this.__cb = cb; }
-  observe() {}
+  observe(el) {
+    const cb = this.__cb;
+    Promise.resolve().then(() => {
+      const r = rectOf(el);
+      const entry = { target: el, contentRect: r, borderBoxSize: [{ inlineSize: r.width, blockSize: r.height }], contentBoxSize: [{ inlineSize: r.width, blockSize: r.height }], devicePixelContentBoxSize: [{ inlineSize: r.width, blockSize: r.height }] };
+      try { cb([entry], this); } catch { /* don't crash the render tier on a callback throw */ }
+    });
+  }
   unobserve() {}
   disconnect() {}
-  takeRecords() { return []; }
 }
-export class IntersectionObserver extends ObserverStub {
-  constructor(cb) { super(cb); this.root = null; this.rootMargin = '0px'; this.thresholds = [0]; }
+export class IntersectionObserver {
+  constructor(cb, opts = {}) {
+    this.__cb = cb;
+    this.root = opts.root ?? null;
+    this.rootMargin = opts.rootMargin ?? '0px';
+    this.thresholds = Array.isArray(opts.threshold) ? opts.threshold : [opts.threshold ?? 0];
+  }
+  observe(el) {
+    const cb = this.__cb;
+    Promise.resolve().then(() => {
+      const r = rectOf(el);
+      const entry = { target: el, isIntersecting: true, intersectionRatio: 1, boundingClientRect: r, intersectionRect: r, rootBounds: null, time: 0 };
+      try { cb([entry], this); } catch { /* same */ }
+    });
+  }
+  unobserve() {}
+  disconnect() {}
+  takeRecords() { return []; }
 }
-export class ResizeObserver extends ObserverStub {}
 
 // MutationObserver: real enough to be useful — fires on observed mutations would
 // require hooking every mutation; v1 is an honest queue-based stub that records

package/src/runtime/window.mjs

@@ -81,6 +81,38 @@ function tagClass(matcher) {
 const hostSetTimeout = globalThis.setTimeout;
 const hostClearTimeout = globalThis.clearTimeout;
 
+// MessageChannel/MessagePort — React 19's scheduler posts its work loop through a
+// MessagePort hop (falling back to setTimeout only if absent). We ship a real,
+// self-contained polyfill whose delivery is scheduled via the LIVE globalThis.
+// setTimeout (read at call time, like rAF), so a render tier that owns setTimeout
+// (a virtual-clock pump) catches every scheduler hop → React runs in virtual time,
+// bounded by the drain/deadline — and it exists in the bare V8 isolate, which has
+// no host MessageChannel. See MESSAGECHANNEL-VIRTUALIZE.md + the clock note in
+// CLAUDE.md. Delivery uses delay 0 (a yield, not elapsed time — animations get
+// their time from rAF's 16ms frame).
+class MessagePort extends EventTarget {
+  constructor() { super(); this.onmessage = null; this.onmessageerror = null; this.__other = null; }
+  start() {}
+  close() { this.__other = null; }
+  postMessage(data) {
+    const target = this.__other;
+    if (!target) return;
+    (globalThis.setTimeout || hostSetTimeout)(() => {
+      const ev = new Event('message'); ev.data = data;
+      if (typeof target.onmessage === 'function') target.onmessage(ev);
+      target.dispatchEvent(ev);
+    }, 0);
+  }
+}
+class MessageChannel {
+  constructor() {
+    this.port1 = new MessagePort();
+    this.port2 = new MessagePort();
+    this.port1.__other = this.port2;
+    this.port2.__other = this.port1;
+  }
+}
+
 // Env-independent lazy global factories — built ONCE at module load, shared by
 // every window (none capture document/url/windowProxy). Materialization still
 // self-replaces onto the per-env base, so each env gets its own instance; only
@@ -89,12 +121,16 @@ const SHARED_LAZY = {
   customElements: () => makeCustomElements(), // fresh registry per env, built on first access
   localStorage: () => new Storage(),
   sessionStorage: () => new Storage(),
-  matchMedia: () => makeMatchMedia(),
   getComputedStyle: () => makeGetComputedStyle(),
   IntersectionObserver: () => IntersectionObserver,
   ResizeObserver: () => ResizeObserver,
-  requestAnimationFrame: () => (cb) => hostSetTimeout(() => cb(performanceNow()), 0),
-  cancelAnimationFrame: () => (id) => hostClearTimeout(id),
+  // rAF: schedule via the LIVE setTimeout (so a render tier that swaps in a timer
+  // queue catches the reschedule) with a non-zero frame delay, and stamp the
+  // callback with the injectable clock now() — a virtual clock that ADVANCES per
+  // frame lets time-gated transitions (MUI Fade/Grow, react-transition-group:
+  // progress = (now-start)/duration) reach progress>=1 and stop rescheduling.
+  requestAnimationFrame: () => (cb) => (globalThis.setTimeout || hostSetTimeout)(() => cb(now()), 16),
+  cancelAnimationFrame: () => (id) => (globalThis.clearTimeout || hostClearTimeout)(id),
   navigator: () => ({
     userAgent: 'Mozilla/5.0 (turbo-dom) AppleWebKit/537.36',
     platform: 'turbo-dom', vendor: '', language: 'en-US', languages: ['en-US'],
@@ -104,7 +140,7 @@ const SHARED_LAZY = {
     permissions: { query: async () => ({ state: 'prompt', addEventListener() {}, removeEventListener() {} }) },
     sendBeacon: () => true, vibrate: () => false,
   }),
-  performance: () => ({ now: performanceNow, timeOrigin: 0, mark() {}, measure() {}, getEntriesByName: () => [], getEntriesByType: () => [], clearMarks() {}, clearMeasures() {} }),
+  performance: () => ({ now, timeOrigin: 0, mark() {}, measure() {}, getEntriesByName: () => [], getEntriesByType: () => [], clearMarks() {}, clearMeasures() {} }),
   Storage: () => Storage,
   devicePixelRatio: () => 1,
   innerWidth: () => 1024,
@@ -154,6 +190,8 @@ export function createWindow(document, { url = 'http://localhost/' } = {}) {
     // subsystem grouping: history co-materializes with (and shares) location
     location: () => makeLocation(url),
     history: () => makeHistory(windowProxy.location),
+    // per-env so matchMedia can evaluate queries against THIS window's viewport
+    matchMedia: () => makeMatchMedia(windowProxy),
   };
 
   windowProxy = new Proxy(base, {
@@ -210,6 +248,17 @@ const performanceNow = typeof hostPerformance?.now === 'function'
   ? () => hostPerformance.now()
   : () => Date.now();
 
+// Injectable clock. `window.performance.now()` and the rAF callback timestamp both
+// read through now(), so a single setClock() drives both. Default (null) → real
+// host clock, no behavior change for vitest/jest. The render tier installs a VIRTUAL
+// clock that advances per drained frame so time-gated rAF loops terminate (see the
+// synthetic-geometry/clock note in CLAUDE.md). Resolves performanceNow lazily, so it
+// stays defined regardless of where setClock is called. (Date.now is the embedder's
+// to override — turbo-dom never shadows it.)
+let __clock = null;
+function now() { return __clock ? __clock() : performanceNow(); }
+export function setClock(fn) { __clock = typeof fn === 'function' ? fn : null; }
+
 // base64 without depending on the Node `Buffer` global — prefer the platform
 // btoa/atob, then Buffer (Node), then a pure-JS fallback so a bare-isolate page
 // that calls btoa/atob doesn't throw.
@@ -385,7 +434,7 @@ const STATIC_BASE = {
   crypto: globalThis.crypto, Crypto: globalThis.Crypto, SubtleCrypto: globalThis.SubtleCrypto,
   btoa: (s) => turboBtoa(String(s)),
   atob: (s) => turboAtob(String(s)),
-  MessageChannel: globalThis.MessageChannel, MessagePort: globalThis.MessagePort,
+  MessageChannel, MessagePort,
   BroadcastChannel: globalThis.BroadcastChannel, EventSource: globalThis.EventSource,
   reportError: (e) => { void e; },
   requestIdleCallback: (cb) => hostSetTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50 }), 0),