@miaskiewicz/turbo-dom 0.1.61 → 0.1.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miaskiewicz/turbo-dom",
-  "version": "0.1.61",
+  "version": "0.1.62",
   "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

@@ -15,6 +15,7 @@ import { liveNodeList, liveHTMLCollection } from './collections.mjs';
 import { matchesSelector, querySelector as qsel, querySelectorAll as qselAll } from './selectors.mjs';
 import { serializeInner, serializeOuter } from './html-serialize.mjs';
 import { CSSStyleSheet, styleSheetList } from './cssom.mjs';
+import { SVGAnimatedString, SVGAnimatedLength, SVGAnimatedRect, SVG_LENGTH_ATTRS } from './svg.mjs';
 
 // Per-node query-result cache keyed by (selector, document version). querySelectorAll
 // returns a STATIC list per spec, so caching is safe until the next mutation bumps
@@ -724,7 +725,7 @@ export class Element extends Node {
   }
 
   cloneNode(deep = false) {
-    const el = new Element(this.ownerDocument, this.localName, this.__ns);
+    const el = newElement(this.ownerDocument, this.localName, this.__ns);
     el.__attrs = (this.__attrs ?? (this.__attrs = this.__buildAttrs())).map((a) => ({ ...a }));
     if (deep) {
       // build the cloned child array directly — the clone is detached, so per-child
@@ -935,6 +936,46 @@ export class Element extends Node {
 }
 
 
+// ------------------------------------------------------------- SVGElement ----
+// SVG elements expose their geometry/identity attributes as SVGAnimated{String,Length,
+// Rect} objects (el.className.baseVal, rect.width.baseVal.value, svg.viewBox.baseVal),
+// not the plain strings/numbers HTML uses. A real subclass keeps these off every HTML
+// element (zero regression, zero hot-path cost — the wrappers are built on access only).
+// Instantiated by newElement() whenever the namespace is "svg".
+export class SVGElement extends Element {
+  // className is a readonly SVGAnimatedString in the spec; we still allow assigning a
+  // string (common habit) by writing the class attribute, but reads return the wrapper.
+  get className() { return new SVGAnimatedString(this, 'class'); }
+  set className(v) { this.setAttribute('class', String(v)); }
+
+  get viewBox() { return new SVGAnimatedRect(this, 'viewBox'); }
+
+  // Honest geometry stubs (consistent with stubs.mjs — no layout engine, so zeros).
+  getBBox() { return { x: 0, y: 0, width: 0, height: 0 }; }
+  getCTM() { return null; }
+  getScreenCTM() { return null; }
+  get ownerSVGElement() {
+    let p = this.parentNode;
+    while (p && p.nodeType === ELEMENT_NODE) { if (p.localName === 'svg') return p; p = p.parentNode; }
+    return null;
+  }
+}
+// Length-valued geometry attributes → SVGAnimatedLength (built lazily per read).
+for (const attr of SVG_LENGTH_ATTRS) {
+  Object.defineProperty(SVGElement.prototype, attr, {
+    configurable: true,
+    get() { return new SVGAnimatedLength(this, attr); },
+    set(v) { this.setAttribute(attr, v != null && v.baseVal ? String(v.baseVal.value) : String(v)); },
+  });
+}
+
+// Element factory: SVG namespace → SVGElement, everything else → Element. One place so
+// every construction site (buffer inflation, innerHTML, cloneNode, createElementNS) agrees.
+function newElement(doc, tag, ns) {
+  return ns === 'svg' ? new SVGElement(doc, tag, ns) : new Element(doc, tag, ns);
+}
+
+
 // ---------------------------------------------------- DocumentFragment ----
 export class DocumentFragment extends Node {
   get nodeType() { return DOCUMENT_FRAGMENT_NODE; }
@@ -1473,7 +1514,7 @@ export class Document extends Node {
     switch (nt) {
       case ELEMENT_NODE: {
         const tag = buf.tagName(idx); // read once (was read twice — ctor + template check)
-        node = new Element(this, tag, buf.ns(idx));
+        node = newElement(this, tag, buf.ns(idx));
         node.__idx = idx;
         node.__attrIdx = idx; // attrs lazy (constructor left __attrs undefined)
         // template content fragment: a child node typed 11 named "content"
@@ -1505,7 +1546,7 @@ export class Document extends Node {
     let node;
     switch (raw.nodeType) {
       case ELEMENT_NODE:
-        node = new Element(this, raw.name, raw.namespace || '');
+        node = newElement(this, raw.name, raw.namespace || '');
         node.__attrs = raw.attrs.map((a) => ({ name: a.name, value: a.value, prefix: a.prefix || '' }));
         if (raw.name === 'template') {
           const contentRaw = raw.children.find((c) => c.nodeType === DOCUMENT_FRAGMENT_NODE && c.name === 'content');
@@ -1567,7 +1608,7 @@ export class Document extends Node {
   createElementNS(ns, qualified) {
     const short = ns === SVG_NS ? 'svg' : ns === MATHML_NS ? 'math' : '';
     const local = qualified.includes(':') ? qualified.split(':')[1] : qualified;
-    return new Element(this, local, short);
+    return newElement(this, local, short);
   }
   createTextNode(data) { return new Text(this, String(data)); }
   createComment(data) { return new Comment(this, String(data)); }

package/src/runtime/svg.mjs

@@ -0,0 +1,70 @@
+// Minimal SVG DOM-property wrappers. SVG IDL attributes are not plain strings/numbers
+// like HTML reflected attributes — they're SVGAnimated{String,Length,Rect} objects with
+// .baseVal / .animVal. Component code (and the libraries that render SVG icons) reads
+// `el.className.baseVal`, `rect.width.baseVal.value`, `svg.viewBox.baseVal`, etc.; without
+// these wrappers those reads throw "Cannot read properties of undefined (reading 'baseVal')".
+//
+// HONEST + LIVE: every wrapper reads/writes the underlying attribute on demand (no cached
+// snapshot), so it always reflects the current attribute and never invents a value. There's
+// no animation engine — animVal === baseVal. Only attached to real SVGElement instances
+// (see dom.mjs), so HTML elements are completely unaffected.
+
+// SVGLength — the unit-bearing value behind an SVGAnimatedLength. valueOf() returns the
+// number so `rect.width.baseVal` used in arithmetic/comparisons coerces correctly, while
+// `rect.width.baseVal.value` reads the same number explicitly.
+export class SVGLength {
+  constructor(host, attr) { this.__host = host; this.__attr = attr; }
+  get value() { const v = parseFloat(this.__host.getAttribute(this.__attr)); return Number.isNaN(v) ? 0 : v; }
+  set value(v) { this.__host.setAttribute(this.__attr, String(v)); }
+  get valueInSpecifiedUnits() { return this.value; }
+  get unitType() { return 1; } // SVG_LENGTHTYPE_NUMBER
+  get valueAsString() { return this.__host.getAttribute(this.__attr) || '0'; }
+  set valueAsString(s) { this.__host.setAttribute(this.__attr, String(s)); }
+  valueOf() { return this.value; }
+  toString() { return this.valueAsString; }
+}
+
+export class SVGAnimatedLength {
+  constructor(host, attr) {
+    const base = new SVGLength(host, attr);
+    this.baseVal = base;
+    this.animVal = base; // no animation engine — animated value tracks the base value
+  }
+}
+
+export class SVGAnimatedString {
+  constructor(host, attr) { this.__host = host; this.__attr = attr; }
+  get baseVal() { return this.__host.getAttribute(this.__attr) || ''; }
+  set baseVal(v) { this.__host.setAttribute(this.__attr, String(v)); }
+  get animVal() { return this.baseVal; }
+}
+
+// SVGRect / SVGAnimatedRect — backs `viewBox`. Parses the four-number list lazily.
+export class SVGRect {
+  constructor(host, attr) { this.__host = host; this.__attr = attr; }
+  #nums() {
+    const raw = this.__host.getAttribute(this.__attr) || '';
+    const parts = raw.split(/[\s,]+/).map(parseFloat);
+    return [parts[0] || 0, parts[1] || 0, parts[2] || 0, parts[3] || 0];
+  }
+  get x() { return this.#nums()[0]; }
+  get y() { return this.#nums()[1]; }
+  get width() { return this.#nums()[2]; }
+  get height() { return this.#nums()[3]; }
+}
+
+export class SVGAnimatedRect {
+  constructor(host, attr) {
+    const base = new SVGRect(host, attr);
+    this.baseVal = base;
+    this.animVal = base;
+  }
+}
+
+// Attributes that surface as SVGAnimatedLength on SVG elements. Covers the common
+// geometry set (shapes, gradients, markers); any not listed still works via getAttribute.
+export const SVG_LENGTH_ATTRS = [
+  'width', 'height', 'x', 'y', 'cx', 'cy', 'r', 'rx', 'ry',
+  'x1', 'y1', 'x2', 'y2', 'dx', 'dy', 'fx', 'fy', 'refX', 'refY',
+  'markerWidth', 'markerHeight', 'startOffset', 'textLength',
+];

package/src/runtime/window.mjs

@@ -13,7 +13,7 @@ import {
 import { makeGetComputedStyle } from './cascade.mjs';
 import { CSSStyleSheet } from './cssom.mjs';
 import {
-  Node, Element, Text, Comment, Document, DocumentFragment, DocumentType, Event, CustomEvent,
+  Node, Element, SVGElement, Text, Comment, Document, DocumentFragment, DocumentType, Event, CustomEvent,
   MutationObserver, DOMParser, XMLSerializer, ShadowRoot,
 } from './dom.mjs';
 import {
@@ -282,7 +282,7 @@ const STATIC_BASE = {
   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,
+  HTMLElement: Element, SVGElement,
   // SVG interface globals. Libs (and test setup mocks) do
   // `Object.defineProperty(SVGSVGElement.prototype, 'viewBox', …)` and
   // `el instanceof SVGSVGElement`; an undefined global is a hard ReferenceError.