@miaskiewicz/turbo-dom 0.2.2 → 0.2.3

package/Cargo.lock

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

package/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "turbo-dom-parser"
-version = "0.0.1"
+version = "0.2.3"
 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.3",
   "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/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

@@ -89,7 +89,6 @@ 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,
@@ -154,6 +153,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, {