@miaskiewicz/turbo-dom 0.1.2

package/src/runtime/events.mjs

@@ -0,0 +1,213 @@
+// Event system — implemented fully (it's small and load-bearing; laziness saves
+// nothing here). Capture + target + bubble phases, composedPath, stop/prevent.
+
+const PHASE_NONE = 0;
+const PHASE_CAPTURING = 1;
+const PHASE_AT_TARGET = 2;
+const PHASE_BUBBLING = 3;
+
+export class Event {
+  static NONE = PHASE_NONE;
+  static CAPTURING_PHASE = PHASE_CAPTURING;
+  static AT_TARGET = PHASE_AT_TARGET;
+  static BUBBLING_PHASE = PHASE_BUBBLING;
+
+  constructor(type, init = {}) {
+    this.type = type;
+    this.bubbles = !!init.bubbles;
+    this.cancelable = !!init.cancelable;
+    this.composed = !!init.composed;
+    this.target = null;
+    this.currentTarget = null;
+    this.eventPhase = PHASE_NONE;
+    this.defaultPrevented = false;
+    this.isTrusted = false;
+    this.timeStamp = 0;
+    this._stopPropagation = false;
+    this._stopImmediate = false;
+    this._path = [];
+    this._passiveListener = false;
+  }
+
+  get NONE() { return PHASE_NONE; }
+  get CAPTURING_PHASE() { return PHASE_CAPTURING; }
+  get AT_TARGET() { return PHASE_AT_TARGET; }
+  get BUBBLING_PHASE() { return PHASE_BUBBLING; }
+
+  stopPropagation() { this._stopPropagation = true; }
+  stopImmediatePropagation() { this._stopPropagation = true; this._stopImmediate = true; }
+  preventDefault() { if (this.cancelable && !this._passiveListener) this.defaultPrevented = true; }
+  get returnValue() { return !this.defaultPrevented; }
+  set returnValue(v) { if (v === false) this.preventDefault(); }
+
+  composedPath() { return this._path.slice(); }
+}
+
+export class CustomEvent extends Event {
+  constructor(type, init = {}) {
+    super(type, init);
+    this.detail = init.detail ?? null;
+  }
+}
+
+// Typed events. Real libraries (RTL/user-event) construct these by name; we copy
+// the init dict onto the instance so common props (button, key, relatedTarget…) read back.
+const TYPED_DEFAULTS = {
+  UIEvent: { detail: 0, view: null },
+  MouseEvent: { button: 0, buttons: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0, relatedTarget: null, ctrlKey: false, shiftKey: false, altKey: false, metaKey: false },
+  PointerEvent: { pointerId: 0, pointerType: '', button: 0, buttons: 0, clientX: 0, clientY: 0 },
+  KeyboardEvent: { key: '', code: '', keyCode: 0, which: 0, ctrlKey: false, shiftKey: false, altKey: false, metaKey: false, repeat: false },
+  InputEvent: { data: null, inputType: '', isComposing: false },
+  FocusEvent: { relatedTarget: null },
+  CompositionEvent: { data: '' },
+  WheelEvent: { deltaX: 0, deltaY: 0, deltaZ: 0, deltaMode: 0 },
+  TouchEvent: { touches: [], targetTouches: [], changedTouches: [] },
+  DragEvent: { dataTransfer: null },
+  ProgressEvent: { lengthComputable: false, loaded: 0, total: 0 },
+};
+
+function makeTyped(name) {
+  const defaults = TYPED_DEFAULTS[name];
+  return class extends Event {
+    constructor(type, init = {}) {
+      super(type, init);
+      Object.assign(this, defaults, init);
+    }
+  };
+}
+
+export const UIEvent = makeTyped('UIEvent');
+export const MouseEvent = makeTyped('MouseEvent');
+export const PointerEvent = makeTyped('PointerEvent');
+export const KeyboardEvent = makeTyped('KeyboardEvent');
+export const InputEvent = makeTyped('InputEvent');
+export const FocusEvent = makeTyped('FocusEvent');
+export const CompositionEvent = makeTyped('CompositionEvent');
+export const WheelEvent = makeTyped('WheelEvent');
+export const TouchEvent = makeTyped('TouchEvent');
+export const DragEvent = makeTyped('DragEvent');
+export const ProgressEvent = makeTyped('ProgressEvent');
+
+function normalizeOptions(options) {
+  if (typeof options === 'boolean') return { capture: options, once: false, passive: false };
+  options = options || {};
+  return { capture: !!options.capture, once: !!options.once, passive: !!options.passive };
+}
+
+export class EventTarget {
+  constructor() {
+    // type -> array of { callback, capture, once, passive }
+    this.__listeners = new Map();
+  }
+
+  addEventListener(type, callback, options) {
+    if (callback == null) return;
+    const o = normalizeOptions(options);
+    let list = this.__listeners.get(type);
+    if (!list) { list = []; this.__listeners.set(type, list); }
+    // dedupe on (callback, capture) per spec
+    if (list.some((l) => l.callback === callback && l.capture === o.capture)) return;
+    list.push({ callback, capture: o.capture, once: o.once, passive: o.passive });
+  }
+
+  removeEventListener(type, callback, options) {
+    const o = normalizeOptions(options);
+    const list = this.__listeners.get(type);
+    if (!list) return;
+    const i = list.findIndex((l) => l.callback === callback && l.capture === o.capture);
+    if (i !== -1) list.splice(i, 1);
+  }
+
+  // Build the event path: target up through ancestors to the root.
+  __eventPath() {
+    const path = [];
+    let node = this;
+    while (node) {
+      path.push(node);
+      node = node.parentNode || node.__owner || null; // element->parent, then document->window
+    }
+    return path;
+  }
+
+  dispatchEvent(event) {
+    if (!(event instanceof Event)) throw new TypeError('dispatchEvent requires an Event');
+    event.target = this;
+    event._path = this.__eventPath();
+    const path = event._path;
+
+    const invoke = (node, phase) => {
+      const list = node.__listeners && node.__listeners.get(event.type);
+      if (!list || list.length === 0) return;
+      event.currentTarget = node;
+      event.eventPhase = phase;
+      // snapshot — listeners added during dispatch don't fire this round
+      for (const l of list.slice()) {
+        if (phase === PHASE_CAPTURING && !l.capture) continue;
+        if (phase === PHASE_BUBBLING && l.capture) continue;
+        if (l.once) {
+          const cur = node.__listeners.get(event.type);
+          const idx = cur ? cur.indexOf(l) : -1;
+          if (idx !== -1) cur.splice(idx, 1);
+        }
+        event._passiveListener = l.passive;
+        const handler = typeof l.callback === 'function' ? l.callback : l.callback.handleEvent;
+        try {
+          handler.call(node, event);
+        } finally {
+          event._passiveListener = false;
+        }
+        if (event._stopImmediate) return;
+      }
+    };
+
+    // 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++) {
+        if (event._stopPropagation) break;
+        invoke(path[i], PHASE_BUBBLING);
+      }
+    }
+
+    event.eventPhase = PHASE_NONE;
+    event.currentTarget = null;
+
+    // default actions (checkbox toggle, label→control, etc.) unless prevented
+    if (!event.defaultPrevented && typeof this.__runDefaultAction === 'function') {
+      this.__runDefaultAction(event);
+    }
+    return !event.defaultPrevented;
+  }
+}
+
+// on<event> handler properties (onclick, oninput, …). Defining these makes
+// `'oninput' in document` true, so React skips its legacy attachEvent polyfill,
+// and lets libraries assign el.onX = fn directly.
+const ON_EVENTS = [
+  'click', 'dblclick', 'input', 'change', 'focus', 'blur', 'focusin', 'focusout',
+  'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup', 'mousemove', 'mouseover',
+  'mouseout', 'mouseenter', 'mouseleave', 'submit', 'reset', 'load', 'error',
+  'scroll', 'wheel', 'contextmenu', 'pointerdown', 'pointerup', 'pointermove',
+  'pointerenter', 'pointerleave', 'pointercancel', 'touchstart', 'touchend',
+  'touchmove', 'animationstart', 'animationend', 'transitionend', 'paste', 'copy',
+  'cut', 'drop', 'dragstart', 'dragover', 'dragend', 'select', 'invalid', 'beforeinput',
+];
+for (const type of ON_EVENTS) {
+  const slot = '__on_' + type;
+  Object.defineProperty(EventTarget.prototype, 'on' + type, {
+    configurable: true,
+    get() { return this[slot] || null; },
+    set(fn) {
+      const prev = this[slot];
+      if (prev) this.removeEventListener(type, prev);
+      this[slot] = (typeof fn === 'function') ? fn : null;
+      if (this[slot]) this.addEventListener(type, this[slot]);
+    },
+  });
+}

package/src/runtime/html-serialize.mjs

@@ -0,0 +1,72 @@
+// HTML serialization for innerHTML / outerHTML (WHATWG-ish fragment serializer).
+
+const VOID = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link',
+  'meta', 'param', 'source', 'track', 'wbr',
+]);
+
+// Elements whose content is raw text (not escaped).
+const RAW_TEXT = new Set(['style', 'script', 'xmp', 'iframe', 'noembed', 'noframes', 'plaintext']);
+
+function escapeText(s) {
+  return s.replace(/&/g, '&amp;').replace(/ /g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, '&amp;').replace(/ /g, '&nbsp;').replace(/"/g, '&quot;');
+}
+
+function serializeNode(node, out) {
+  switch (node.nodeType) {
+    case 1: { // element
+      const tag = node.localName;
+      out.push('<' + tag);
+      for (const a of node.__attrs) {
+        const name = a.prefix ? `${a.prefix}:${a.name}` : a.name;
+        out.push(` ${name}="${escapeAttr(a.value)}"`);
+      }
+      out.push('>');
+      if (VOID.has(tag)) break;
+      if (tag === 'template' && node.content) {
+        serializeChildren(node.content, out);
+      } else {
+        serializeChildren(node, out);
+      }
+      out.push(`</${tag}>`);
+      break;
+    }
+    case 3: { // text
+      const parentTag = node.parentNode && node.parentNode.localName;
+      out.push(RAW_TEXT.has(parentTag) ? node.data : escapeText(node.data));
+      break;
+    }
+    case 8: // comment
+      out.push(`<!--${node.data}-->`);
+      break;
+    case 10: // doctype
+      out.push(`<!DOCTYPE ${node.name}>`);
+      break;
+    case 11: // fragment
+      serializeChildren(node, out);
+      break;
+  }
+}
+
+function serializeChildren(node, out) {
+  for (const c of node.childNodes) serializeNode(c, out);
+}
+
+export function serializeInner(node) {
+  const out = [];
+  if (node.nodeType === 1 && node.localName === 'template' && node.content) {
+    serializeChildren(node.content, out);
+  } else {
+    serializeChildren(node, out);
+  }
+  return out.join('');
+}
+
+export function serializeOuter(node) {
+  const out = [];
+  serializeNode(node, out);
+  return out.join('');
+}

package/src/runtime/index.mjs

@@ -0,0 +1,46 @@
+// turbo-dom test runtime — assembles Layers 1–5 into a jsdom-like environment.
+//
+//   import { createEnvironment } from './src/runtime/index.mjs';
+//   const env = createEnvironment('<!doctype html><body><div id=app></div></body>');
+//   env.window.document.querySelector('#app');
+//   env.reset();                 // Layer 5: cheap per-file reset
+//   env.reset('<body>next</body>');
+
+import { createRequire } from 'node:module';
+import { Document } from './dom.mjs';
+import { createWindow } from './window.mjs';
+
+const require = createRequire(import.meta.url);
+const native = require('../../index.js');
+
+export { Document } from './dom.mjs';
+export * from './dom.mjs';
+
+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));
+
+  // Layer 2: Document over the buffer (nodes inflate lazily from the arrays).
+  const document = new Document();
+  document.__load(soa);
+
+  // Layer 3: lazy window.
+  const win = createWindow(document, options);
+
+  return {
+    window: win.window,
+    document,
+    touched: win.touched,
+    globalKeys: win.globalKeys,
+
+    // 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));
+      document.__load(soa);       // drops __cache + __kids overlay, keeps the buffer if reused
+      win.resetGlobals();
+      document.__active = null;
+      document.__cookie = '';
+    },
+  };
+}

package/src/runtime/selectors.mjs

@@ -0,0 +1,239 @@
+// Compact CSS selector engine. Correctness-first, right-to-left matching.
+// Supports: type, *, #id, .class, [attr], [attr op val] (= ^= $= *= ~= |=),
+// combinators (descendant ' ', child '>', adjacent '+', sibling '~'),
+// comma selector lists, and :not(), :first-child, :last-child, :only-child,
+// :empty, :root. Enough for React Testing Library usage.
+
+const ATTR_RE = /\[\s*([^\]=~^$*|\s]+)\s*(?:([~^$*|]?=)\s*(?:"([^"]*)"|'([^']*)'|([^\]]*?))\s*)?\]/y;
+
+function parseCompound(src, i) {
+  const compound = { tag: null, id: null, classes: [], attrs: [], pseudos: [] };
+  let matchedAny = false;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '*') { compound.tag = '*'; i++; matchedAny = true; continue; }
+    if (/[a-zA-Z]/.test(c) && compound.tag === null && compound.id === null && !compound.classes.length && !compound.attrs.length && !compound.pseudos.length) {
+      let j = i;
+      while (j < src.length && /[a-zA-Z0-9_-]/.test(src[j])) j++;
+      compound.tag = src.slice(i, j).toLowerCase();
+      i = j; matchedAny = true; continue;
+    }
+    if (c === '#') {
+      let j = i + 1;
+      while (j < src.length && /[a-zA-Z0-9_-]/.test(src[j])) j++;
+      compound.id = src.slice(i + 1, j); i = j; matchedAny = true; continue;
+    }
+    if (c === '.') {
+      let j = i + 1;
+      while (j < src.length && /[a-zA-Z0-9_-]/.test(src[j])) j++;
+      compound.classes.push(src.slice(i + 1, j)); i = j; matchedAny = true; continue;
+    }
+    if (c === '[') {
+      ATTR_RE.lastIndex = i;
+      const m = ATTR_RE.exec(src);
+      if (!m) throw new SyntaxError(`bad attribute selector at ${src.slice(i)}`);
+      compound.attrs.push({ name: m[1], op: m[2] || null, value: m[3] ?? m[4] ?? m[5] ?? null });
+      i = ATTR_RE.lastIndex; matchedAny = true; continue;
+    }
+    if (c === ':') {
+      let j = i + 1;
+      while (j < src.length && /[a-zA-Z-]/.test(src[j])) j++;
+      const name = src.slice(i + 1, j);
+      let arg = null;
+      if (src[j] === '(') {
+        let depth = 1, k = j + 1;
+        while (k < src.length && depth > 0) { if (src[k] === '(') depth++; else if (src[k] === ')') depth--; k++; }
+        arg = src.slice(j + 1, k - 1);
+        j = k;
+      }
+      compound.pseudos.push({ name, arg });
+      i = j; matchedAny = true; continue;
+    }
+    break;
+  }
+  if (!matchedAny) throw new SyntaxError(`empty compound at ${src.slice(i)}`);
+  return { compound, i };
+}
+
+// Parse one complex selector into compounds[] + combinators[] (combinator[k]
+// relates compounds[k] to compounds[k+1], left to right).
+function parseComplex(src) {
+  let i = 0;
+  const compounds = [];
+  const combinators = [];
+  src = src.trim();
+  while (i < src.length) {
+    while (src[i] === ' ') i++;
+    const r = parseCompound(src, i);
+    compounds.push(r.compound);
+    i = r.i;
+    // read optional combinator
+    let sawSpace = false;
+    while (src[i] === ' ') { sawSpace = true; i++; }
+    if (i >= src.length) break;
+    if (src[i] === '>' || src[i] === '+' || src[i] === '~') {
+      combinators.push(src[i]); i++;
+      while (src[i] === ' ') i++;
+    } else if (sawSpace) {
+      combinators.push(' ');
+    } else {
+      throw new SyntaxError(`unexpected '${src[i]}' in selector`);
+    }
+  }
+  return { compounds, combinators };
+}
+
+export function parseSelectorList(selector) {
+  return splitTopLevel(selector, ',').map((s) => parseComplex(s.trim()));
+}
+
+function splitTopLevel(s, sep) {
+  const out = [];
+  let depth = 0, last = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth--;
+    else if (c === sep && depth === 0) { out.push(s.slice(last, i)); last = i + 1; }
+  }
+  out.push(s.slice(last));
+  return out;
+}
+
+function elementChildren(node) {
+  const kids = typeof node.__children === 'function' ? node.__children() : Array.from(node.childNodes || []);
+  return kids.filter((n) => n.nodeType === 1);
+}
+
+function matchAttr(el, a) {
+  if (!el.hasAttribute(a.name)) return false;
+  if (a.op === null) return true;
+  const v = el.getAttribute(a.name) ?? '';
+  const t = a.value ?? '';
+  switch (a.op) {
+    case '=': return v === t;
+    case '^=': return t !== '' && v.startsWith(t);
+    case '$=': return t !== '' && v.endsWith(t);
+    case '*=': return t !== '' && v.includes(t);
+    case '~=': return v.split(/\s+/).includes(t);
+    case '|=': return v === t || v.startsWith(t + '-');
+    default: return false;
+  }
+}
+
+function matchPseudo(el, p) {
+  switch (p.name) {
+    case 'not':
+      return !parseSelectorList(p.arg).some((cx) => matchComplex(el, cx));
+    case 'first-child':
+      return previousElement(el) === null;
+    case 'last-child':
+      return nextElement(el) === null;
+    case 'only-child':
+      return previousElement(el) === null && nextElement(el) === null;
+    case 'empty':
+      return el.childNodes.length === 0;
+    case 'root':
+      return el.parentNode == null || el.parentNode.nodeType === 9;
+    default:
+      return false; // unknown pseudo: never matches (honest, not a silent true)
+  }
+}
+
+function previousElement(el) {
+  let n = el.previousSibling;
+  while (n && n.nodeType !== 1) n = n.previousSibling;
+  return n || null;
+}
+function nextElement(el) {
+  let n = el.nextSibling;
+  while (n && n.nodeType !== 1) n = n.nextSibling;
+  return n || null;
+}
+
+function matchCompound(el, compound) {
+  if (!el || el.nodeType !== 1) return false;
+  if (compound.tag && compound.tag !== '*' && el.localName !== compound.tag) return false;
+  if (compound.id !== null && el.getAttribute('id') !== compound.id) return false;
+  for (const cls of compound.classes) if (!el.classList.contains(cls)) return false;
+  for (const a of compound.attrs) if (!matchAttr(el, a)) return false;
+  for (const p of compound.pseudos) if (!matchPseudo(el, p)) return false;
+  return true;
+}
+
+// Match a parsed complex selector against `el` (the rightmost compound applies to el).
+function matchComplex(el, cx) {
+  const { compounds, combinators } = cx;
+  const last = compounds.length - 1;
+  if (!matchCompound(el, compounds[last])) return false;
+
+  // walk leftward
+  let idx = last - 1;
+  let current = el;
+  while (idx >= 0) {
+    const comb = combinators[idx]; // relation between compounds[idx] and compounds[idx+1]
+    const target = compounds[idx];
+    if (comb === ' ') {
+      let anc = current.parentNode;
+      let matched = false;
+      while (anc && anc.nodeType === 1) {
+        if (matchCompound(anc, target)) { current = anc; matched = true; break; }
+        anc = anc.parentNode;
+      }
+      if (!matched) return false;
+    } else if (comb === '>') {
+      const parent = current.parentNode;
+      if (!parent || parent.nodeType !== 1 || !matchCompound(parent, target)) return false;
+      current = parent;
+    } else if (comb === '+') {
+      const prev = previousElement(current);
+      if (!prev || !matchCompound(prev, target)) return false;
+      current = prev;
+    } else if (comb === '~') {
+      let prev = previousElement(current);
+      let matched = false;
+      while (prev) {
+        if (matchCompound(prev, target)) { current = prev; matched = true; break; }
+        prev = previousElement(prev);
+      }
+      if (!matched) return false;
+    }
+    idx--;
+  }
+  return true;
+}
+
+export function matchesSelector(el, selector) {
+  const list = parseSelectorList(selector);
+  return list.some((cx) => matchComplex(el, cx));
+}
+
+export function querySelectorAll(root, selector) {
+  const list = parseSelectorList(selector);
+  const out = [];
+  const visit = (node) => {
+    for (const child of elementChildren(node)) {
+      if (list.some((cx) => matchComplex(child, cx))) out.push(child);
+      visit(child);
+    }
+  };
+  visit(root);
+  return out;
+}
+
+export function querySelector(root, selector) {
+  const list = parseSelectorList(selector);
+  let found = null;
+  const visit = (node) => {
+    for (const child of elementChildren(node)) {
+      if (found) return;
+      if (list.some((cx) => matchComplex(child, cx))) { found = child; return; }
+      visit(child);
+      if (found) return;
+    }
+  };
+  visit(root);
+  return found;
+}
+
+export const _internal = { parseComplex, parseSelectorList, matchCompound, matchComplex };