@derivesome/tree-web 0.1.1

package/src/velement.ts~

@@ -0,0 +1,856 @@
+// virtual-dom.ts
+// A lightweight virtual DOM implementation for unit testing browser code without a real browser.
+
+// ---------------------------------------------------------------------------
+// Node type constants (mirrors the real DOM)
+// ---------------------------------------------------------------------------
+export const enum NodeType {
+  ELEMENT_NODE = 1,
+  TEXT_NODE = 3,
+  COMMENT_NODE = 8,
+  DOCUMENT_NODE = 9,
+  DOCUMENT_TYPE_NODE = 10,
+  DOCUMENT_FRAGMENT_NODE = 11,
+}
+
+// ---------------------------------------------------------------------------
+// VNode — abstract base for every node
+// ---------------------------------------------------------------------------
+export abstract class VNode {
+  abstract readonly nodeType: NodeType;
+  abstract readonly nodeName: string;
+  abstract textContent: string | null;
+
+  parentNode: VNode | null = null;
+  childNodes: VNode[] = [];
+  ownerDocument: VDocument | null = null;
+
+  get firstChild(): VNode | null {
+    return this.childNodes[0] ?? null;
+  }
+
+  get lastChild(): VNode | null {
+    return this.childNodes[this.childNodes.length - 1] ?? null;
+  }
+
+  get nextSibling(): VNode | null {
+    if (!this.parentNode) return null;
+    const siblings = this.parentNode.childNodes;
+    const idx = siblings.indexOf(this);
+    return siblings[idx + 1] ?? null;
+  }
+
+  get previousSibling(): VNode | null {
+    if (!this.parentNode) return null;
+    const siblings = this.parentNode.childNodes;
+    const idx = siblings.indexOf(this);
+    return idx > 0 ? (siblings[idx - 1] ?? null) : null;
+  }
+
+  get parentElement(): VElement | null {
+    return this.parentNode instanceof VElement ? this.parentNode : null;
+  }
+
+  // ---- Mutation helpers ----
+
+  appendChild<T extends VNode>(child: T): T {
+    this._removeFromParent(child);
+    child.parentNode = this;
+    child.ownerDocument = this.ownerDocument;
+    this.childNodes.push(child);
+    return child;
+  }
+
+  insertBefore<T extends VNode>(newChild: T, refChild: VNode | null): T {
+    if (refChild === null) return this.appendChild(newChild);
+    const idx = this.childNodes.indexOf(refChild);
+    if (idx === -1) throw new Error("refChild is not a child of this node");
+    this._removeFromParent(newChild);
+    newChild.parentNode = this;
+    newChild.ownerDocument = this.ownerDocument;
+    this.childNodes.splice(idx, 0, newChild);
+    return newChild;
+  }
+
+  removeChild<T extends VNode>(child: T): T {
+    const idx = this.childNodes.indexOf(child);
+    if (idx === -1) throw new Error("Node is not a child of this node");
+    this.childNodes.splice(idx, 1);
+    child.parentNode = null;
+    return child;
+  }
+
+  replaceChild<T extends VNode>(newChild: VNode, oldChild: T): T {
+    const idx = this.childNodes.indexOf(oldChild);
+    if (idx === -1) throw new Error("oldChild is not a child of this node");
+    this._removeFromParent(newChild);
+    newChild.parentNode = this;
+    newChild.ownerDocument = this.ownerDocument;
+    this.childNodes.splice(idx, 1, newChild);
+    oldChild.parentNode = null;
+    return oldChild;
+  }
+
+  hasChildNodes(): boolean {
+    return this.childNodes.length > 0;
+  }
+
+  contains(other: VNode | null): boolean {
+    if (!other) return false;
+    let current: VNode | null = other;
+    while (current) {
+      if (current === this) return true;
+      current = current.parentNode;
+    }
+    return false;
+  }
+
+  cloneNode(deep: boolean = false): VNode {
+    return this._clone(deep);
+  }
+
+  protected abstract _clone(deep: boolean): VNode;
+
+  /** Remove a node from its current parent before re-parenting. */
+  protected _removeFromParent(child: VNode): void {
+    if (child.parentNode) {
+      child.parentNode.removeChild(child);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VText
+// ---------------------------------------------------------------------------
+export class VText extends VNode {
+  readonly nodeType = NodeType.TEXT_NODE as const;
+  readonly nodeName = "#text";
+
+  constructor(public data: string) {
+    super();
+  }
+
+  get textContent(): string {
+    return this.data;
+  }
+  set textContent(value: string | null) {
+    this.data = value ?? "";
+  }
+
+  get nodeValue(): string {
+    return this.data;
+  }
+  set nodeValue(value: string | null) {
+    this.data = value ?? "";
+  }
+
+  protected _clone(_deep: boolean): VText {
+    return new VText(this.data);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VComment
+// ---------------------------------------------------------------------------
+export class VComment extends VNode {
+  readonly nodeType = NodeType.COMMENT_NODE as const;
+  readonly nodeName = "#comment";
+
+  constructor(public data: string) {
+    super();
+  }
+
+  get textContent(): string {
+    return this.data;
+  }
+  set textContent(value: string | null) {
+    this.data = value ?? "";
+  }
+
+  get nodeValue(): string {
+    return this.data;
+  }
+  set nodeValue(value: string | null) {
+    this.data = value ?? "";
+  }
+
+  protected _clone(_deep: boolean): VComment {
+    return new VComment(this.data);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Attr map — case-insensitive for HTML-like behaviour
+// ---------------------------------------------------------------------------
+class AttributeMap {
+  private _map = new Map<string, string>();
+
+  get(name: string): string | null {
+    return this._map.get(name.toLowerCase()) ?? null;
+  }
+
+  set(name: string, value: string): void {
+    this._map.set(name.toLowerCase(), value);
+  }
+
+  has(name: string): boolean {
+    return this._map.has(name.toLowerCase());
+  }
+
+  remove(name: string): boolean {
+    return this._map.delete(name.toLowerCase());
+  }
+
+  entries(): IterableIterator<[string, string]> {
+    return this._map.entries();
+  }
+
+  get size(): number {
+    return this._map.size;
+  }
+
+  clone(): AttributeMap {
+    const copy = new AttributeMap();
+    for (const [k, v] of this._map) copy._map.set(k, v);
+    return copy;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// ClassList — minimal DOMTokenList stand-in
+// ---------------------------------------------------------------------------
+export class VClassList {
+  constructor(private _el: VElement) {}
+
+  private _tokens(): string[] {
+    const raw = this._el.getAttribute("class") ?? "";
+    return raw
+      .split(/\s+/)
+      .filter(Boolean);
+  }
+
+  private _write(tokens: string[]): void {
+    this._el.setAttribute("class", tokens.join(" "));
+  }
+
+  add(...tokens: string[]): void {
+    const set = new Set(this._tokens());
+    for (const t of tokens) set.add(t);
+    this._write([...set]);
+  }
+
+  remove(...tokens: string[]): void {
+    const set = new Set(this._tokens());
+    for (const t of tokens) set.delete(t);
+    this._write([...set]);
+  }
+
+  toggle(token: string, force?: boolean): boolean {
+    const set = new Set(this._tokens());
+    const shouldAdd = force !== undefined ? force : !set.has(token);
+    if (shouldAdd) {
+      set.add(token);
+    } else {
+      set.delete(token);
+    }
+    this._write([...set]);
+    return shouldAdd;
+  }
+
+  contains(token: string): boolean {
+    return this._tokens().includes(token);
+  }
+
+  replace(oldToken: string, newToken: string): boolean {
+    const tokens = this._tokens();
+    const idx = tokens.indexOf(oldToken);
+    if (idx === -1) return false;
+    tokens.splice(idx, 1, newToken);
+    this._write(tokens);
+    return true;
+  }
+
+  get length(): number {
+    return this._tokens().length;
+  }
+
+  toString(): string {
+    return this._tokens().join(" ");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Style — minimal CSSStyleDeclaration stand-in
+// ---------------------------------------------------------------------------
+export class VStyle {
+  [prop: string]: string | ((...args: any[]) => any);
+
+  private _props = new Map<string, string>();
+
+  getPropertyValue(name: string): string {
+    return this._props.get(name) ?? "";
+  }
+
+  setProperty(name: string, value: string | null): void {
+    if (value === null || value === "") {
+      this._props.delete(name);
+    } else {
+      this._props.set(name, value);
+    }
+  }
+
+  removeProperty(name: string): string {
+    const old = this._props.get(name) ?? "";
+    this._props.delete(name);
+    return old;
+  }
+
+  get cssText(): string {
+    return [...this._props.entries()]
+      .map(([k, v]) => `${k}: ${v};`)
+      .join(" ");
+  }
+
+  set cssText(value: string) {
+    this._props.clear();
+    if (!value) return;
+    for (const decl of value.split(";")) {
+      const colon = decl.indexOf(":");
+      if (colon === -1) continue;
+      const prop = decl.slice(0, colon).trim();
+      const val = decl.slice(colon + 1).trim();
+      if (prop) this._props.set(prop, val);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VElement
+// ---------------------------------------------------------------------------
+export class VElement extends VNode {
+  readonly nodeType = NodeType.ELEMENT_NODE as const;
+  readonly tagName: string;
+  readonly classList: VClassList;
+  readonly style: VStyle;
+
+  private _attrs = new AttributeMap();
+  private _eventListeners = new Map<string, Array<VEventListenerOrObject>>();
+  private _dataset: Record<string, string> = {};
+
+  constructor(tagName: string) {
+    super();
+    this.tagName = tagName.toUpperCase();
+    this.classList = new VClassList(this);
+    this.style = new VStyle();
+
+    // Return a proxy so element.id, element.className etc. work naturally
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        // Built-in properties first
+        if (prop in target || typeof prop === "symbol") {
+          return Reflect.get(target, prop, receiver);
+        }
+        // Fallback: treat as an attribute shorthand (e.g. el.id, el.href)
+        if (typeof prop === "string") {
+          return target.getAttribute(prop) ?? undefined;
+        }
+        return undefined;
+      },
+      set(target, prop, value, receiver) {
+        if (prop in target || typeof prop === "symbol") {
+          return Reflect.set(target, prop, value, receiver);
+        }
+        if (typeof prop === "string") {
+          target.setAttribute(prop, String(value));
+          return true;
+        }
+        return false;
+      },
+    });
+  }
+
+  get nodeName(): string {
+    return this.tagName;
+  }
+
+  // ---- id / className shortcuts ----
+
+  get id(): string {
+    return this.getAttribute("id") ?? "";
+  }
+  set id(value: string) {
+    this.setAttribute("id", value);
+  }
+
+  get className(): string {
+    return this.getAttribute("class") ?? "";
+  }
+  set className(value: string) {
+    this.setAttribute("class", value);
+  }
+
+  // ---- dataset ----
+
+  get dataset(): Record<string, string> {
+    return this._dataset;
+  }
+
+  // ---- textContent / innerHTML ----
+
+  get textContent(): string {
+    return this.childNodes.map((c) => c.textContent ?? "").join("");
+  }
+  set textContent(value: string | null) {
+    this.childNodes = [];
+    if (value) {
+      this.appendChild(new VText(value));
+    }
+  }
+
+  get innerHTML(): string {
+    return this.childNodes.map((c) => serializeNode(c)).join("");
+  }
+  set innerHTML(html: string) {
+    // Minimal: just set the raw text. A real implementation would parse HTML.
+    this.childNodes = [];
+    if (html) {
+      this.appendChild(new VText(html));
+    }
+  }
+
+  get outerHTML(): string {
+    return serializeNode(this);
+  }
+
+  // ---- Attributes ----
+
+  getAttribute(name: string): string | null {
+    return this._attrs.get(name);
+  }
+
+  setAttribute(name: string, value: string): void {
+    this._attrs.set(name, value);
+    // Keep dataset in sync
+    if (name.startsWith("data-")) {
+      this._dataset[camelCase(name.slice(5))] = value;
+    }
+  }
+
+  removeAttribute(name: string): void {
+    this._attrs.remove(name);
+    if (name.startsWith("data-")) {
+      delete this._dataset[camelCase(name.slice(5))];
+    }
+  }
+
+  hasAttribute(name: string): boolean {
+    return this._attrs.has(name);
+  }
+
+  getAttributeNames(): string[] {
+    return [...this._attrs.entries()].map(([k]) => k);
+  }
+
+  // ---- Query helpers ----
+
+  getElementById(id: string): VElement | null {
+    return this._query((el) => el.getAttribute("id") === id);
+  }
+
+  getElementsByClassName(className: string): VElement[] {
+    const target = className.trim();
+    return this._queryAll((el) => el.classList.contains(target));
+  }
+
+  getElementsByTagName(tag: string): VElement[] {
+    const upper = tag.toUpperCase();
+    return this._queryAll((el) => upper === "*" || el.tagName === upper);
+  }
+
+  querySelector(selector: string): VElement | null {
+    return this._query(makeSimpleMatcher(selector));
+  }
+
+  querySelectorAll(selector: string): VElement[] {
+    return this._queryAll(makeSimpleMatcher(selector));
+  }
+
+  closest(selector: string): VElement | null {
+    const matcher = makeSimpleMatcher(selector);
+    let current: VNode | null = this as VNode;
+    while (current) {
+      if (current instanceof VElement && matcher(current)) {
+        return current;
+      }
+      current = current.parentNode;
+    }
+    return null;
+  }
+
+  matches(selector: string): boolean {
+    return makeSimpleMatcher(selector)(this);
+  }
+
+  // ---- Events (record & replay for testing) ----
+
+  addEventListener(
+    type: string,
+    listener: VEventListenerOrObject,
+  ): void {
+    let list = this._eventListeners.get(type);
+    if (!list) {
+      list = [];
+      this._eventListeners.set(type, list);
+    }
+    list.push(listener);
+  }
+
+  removeEventListener(
+    type: string,
+    listener: VEventListenerOrObject,
+  ): void {
+    const arr = this._eventListeners.get(type);
+    if (!arr) return;
+    const idx = arr.indexOf(listener);
+    if (idx !== -1) arr.splice(idx, 1);
+  }
+
+  dispatchEvent(event: VEvent): boolean {
+    const listeners = this._eventListeners.get(event.type) ?? [];
+    for (const l of listeners) {
+      if (typeof l === "function") l(event);
+      else l.handleEvent(event);
+    }
+    return true;
+  }
+
+  /** Click shorthand — dispatches a "click" VEvent. */
+  click(): void {
+    this.dispatchEvent(new VEvent("click"));
+  }
+
+  // ---- Children helpers ----
+
+  get children(): VElement[] {
+    return this.childNodes.filter((c): c is VElement => c instanceof VElement);
+  }
+
+  get childElementCount(): number {
+    return this.children.length;
+  }
+
+  get firstElementChild(): VElement | null {
+    return this.children[0] ?? null;
+  }
+
+  get lastElementChild(): VElement | null {
+    const ch = this.children;
+    return ch[ch.length - 1] ?? null;
+  }
+
+  // ---- Clone ----
+
+  protected _clone(deep: boolean): VElement {
+    const el = new VElement(this.tagName);
+    el._attrs = this._attrs.clone();
+    el._dataset = { ...this._dataset };
+    el.style.cssText = this.style.cssText;
+    if (deep) {
+      for (const child of this.childNodes) {
+        el.appendChild(child.cloneNode(true));
+      }
+    }
+    return el;
+  }
+
+  // ---- Internal query helpers ----
+
+  private _query(pred: (el: VElement) => boolean): VElement | null {
+    for (const child of this.childNodes) {
+      if (child instanceof VElement) {
+        if (pred(child)) return child;
+        const found = child._query(pred);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  private _queryAll(pred: (el: VElement) => boolean): VElement[] {
+    const results: VElement[] = [];
+    for (const child of this.childNodes) {
+      if (child instanceof VElement) {
+        if (pred(child)) results.push(child);
+        results.push(...child._queryAll(pred));
+      }
+    }
+    return results;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VDocumentFragment
+// ---------------------------------------------------------------------------
+export class VDocumentFragment extends VNode {
+  readonly nodeType = NodeType.DOCUMENT_FRAGMENT_NODE as const;
+  readonly nodeName = "#document-fragment";
+
+  get textContent(): string {
+    return this.childNodes.map((c) => c.textContent ?? "").join("");
+  }
+  set textContent(value: string | null) {
+    this.childNodes = [];
+    if (value) this.appendChild(new VText(value));
+  }
+
+  protected _clone(deep: boolean): VDocumentFragment {
+    const frag = new VDocumentFragment();
+    if (deep) {
+      for (const child of this.childNodes) {
+        frag.appendChild(child.cloneNode(true));
+      }
+    }
+    return frag;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VDocument
+// ---------------------------------------------------------------------------
+export class VDocument extends VNode {
+  readonly nodeType = NodeType.DOCUMENT_NODE as const;
+  readonly nodeName = "#document";
+
+  body: VElement;
+  head: VElement;
+  documentElement: VElement;
+
+  constructor() {
+    super();
+    this.ownerDocument = this;
+    this.documentElement = this._make("html");
+    this.head = this._make("head");
+    this.body = this._make("body");
+    this.documentElement.appendChild(this.head);
+    this.documentElement.appendChild(this.body);
+    this.appendChild(this.documentElement);
+  }
+
+  get textContent(): string | null {
+    return null; // matches real DOM behaviour
+  }
+  set textContent(_value: string | null) {
+    // no-op for Document, matches real DOM
+  }
+
+  createElement(tagName: string): VElement {
+    const el = new VElement(tagName);
+    el.ownerDocument = this;
+    return el;
+  }
+
+  createTextNode(data: string): VText {
+    const t = new VText(data);
+    t.ownerDocument = this;
+    return t;
+  }
+
+  createComment(data: string): VComment {
+    const c = new VComment(data);
+    c.ownerDocument = this;
+    return c;
+  }
+
+  createDocumentFragment(): VDocumentFragment {
+    const f = new VDocumentFragment();
+    f.ownerDocument = this;
+    return f;
+  }
+
+  getElementById(id: string): VElement | null {
+    return this.documentElement.getElementById(id);
+  }
+
+  getElementsByClassName(className: string): VElement[] {
+    return this.documentElement.getElementsByClassName(className);
+  }
+
+  getElementsByTagName(tag: string): VElement[] {
+    return this.documentElement.getElementsByTagName(tag);
+  }
+
+  querySelector(selector: string): VElement | null {
+    return this.documentElement.querySelector(selector);
+  }
+
+  querySelectorAll(selector: string): VElement[] {
+    return this.documentElement.querySelectorAll(selector);
+  }
+
+  protected _clone(deep: boolean): VDocument {
+    const doc = new VDocument();
+    if (deep) {
+      // Already has html > head + body structure; skip re-creating
+    }
+    return doc;
+  }
+
+  private _make(tag: string): VElement {
+    const el = new VElement(tag);
+    el.ownerDocument = this;
+    return el;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// VEvent — lightweight Event stand-in
+// ---------------------------------------------------------------------------
+export class VEvent {
+  readonly type: string;
+  bubbles: boolean;
+  cancelable: boolean;
+  defaultPrevented = false;
+  target: VNode | null = null;
+  currentTarget: VNode | null = null;
+
+  constructor(
+    type: string,
+    opts: { bubbles?: boolean; cancelable?: boolean } = {},
+  ) {
+    this.type = type;
+    this.bubbles = opts.bubbles ?? false;
+    this.cancelable = opts.cancelable ?? false;
+  }
+
+  preventDefault(): void {
+    if (this.cancelable) this.defaultPrevented = true;
+  }
+
+  stopPropagation(): void {
+    /* noop for now */
+  }
+
+  stopImmediatePropagation(): void {
+    /* noop for now */
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Event listener types (self-contained, no lib.dom dependency)
+// ---------------------------------------------------------------------------
+export type VEventListener = (event: VEvent) => void;
+
+export interface VEventListenerObject {
+  handleEvent(event: VEvent): void;
+}
+
+export type VEventListenerOrObject = VEventListener | VEventListenerObject;
+
+// ---------------------------------------------------------------------------
+// Serialization helper  (outerHTML / innerHTML)
+// ---------------------------------------------------------------------------
+const VOID_ELEMENTS = new Set([
+  "AREA", "BASE", "BR", "COL", "EMBED", "HR", "IMG",
+  "INPUT", "LINK", "META", "PARAM", "SOURCE", "TRACK", "WBR",
+]);
+
+function serializeNode(node: VNode): string {
+  if (node instanceof VText) return escapeHtml(node.data);
+  if (node instanceof VComment) return `<!--${node.data}-->`;
+  if (node instanceof VElement) {
+    const tag = node.tagName.toLowerCase();
+    let attrs = "";
+    for (const name of node.getAttributeNames()) {
+      const val = node.getAttribute(name) ?? "";
+      attrs += ` ${name}="${escapeAttr(val)}"`;
+    }
+    if (VOID_ELEMENTS.has(node.tagName)) {
+      return `<${tag}${attrs} />`;
+    }
+    const inner = node.childNodes.map(serializeNode).join("");
+    return `<${tag}${attrs}>${inner}</${tag}>`;
+  }
+  if (node instanceof VDocumentFragment) {
+    return node.childNodes.map(serializeNode).join("");
+  }
+  return "";
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
+// ---------------------------------------------------------------------------
+// Very small CSS-selector matcher (covers the common cases)
+//   Supports: tag, .class, #id, [attr], [attr=value], and combos thereof
+// ---------------------------------------------------------------------------
+function makeSimpleMatcher(selector: string): (el: VElement) => boolean {
+  // Split on commas for ,‑separated selectors
+  const parts = selector.split(",").map((s) => s.trim());
+  const matchers = parts.map(parseSingleSelector);
+  return (el) => matchers.some((m) => m(el));
+}
+
+function parseSingleSelector(sel: string): (el: VElement) => boolean {
+  const checks: Array<(el: VElement) => boolean> = [];
+
+  // Tag name (must be at the start, before any # . or [)
+  const tagMatch = sel.match(/^([a-zA-Z][a-zA-Z0-9-]*)/);
+  if (tagMatch) {
+    const tag = tagMatch[1]!.toUpperCase();
+    checks.push((el) => el.tagName === tag);
+  }
+
+  // #id
+  for (const m of sel.matchAll(/#([a-zA-Z0-9_-]+)/g)) {
+    const id = m[1]!;
+    checks.push((el) => el.getAttribute("id") === id);
+  }
+
+  // .class
+  for (const m of sel.matchAll(/\.([a-zA-Z0-9_-]+)/g)) {
+    const cls = m[1]!;
+    checks.push((el) => el.classList.contains(cls));
+  }
+
+  // [attr] and [attr=value] and [attr="value"]
+  for (const m of sel.matchAll(/\[([a-zA-Z0-9_-]+)(?:=["']?([^"'\]]*)["']?)?\]/g)) {
+    const attr = m[1]!;
+    const val = m[2];
+    if (val !== undefined) {
+      checks.push((el) => el.getAttribute(attr) === val);
+    } else {
+      checks.push((el) => el.hasAttribute(attr));
+    }
+  }
+
+  if (checks.length === 0) {
+    return () => false;
+  }
+  return (el) => checks.every((fn) => fn(el));
+}
+
+// ---------------------------------------------------------------------------
+// Utility
+// ---------------------------------------------------------------------------
+function camelCase(s: string): string {
+  return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+// ---------------------------------------------------------------------------
+// Convenience factory (drop-in for tests)
+// ---------------------------------------------------------------------------
+
+/** Create a fresh virtual document, ready to use like `window.document`. */
+export function createDocument(): VDocument {
+  return new VDocument();
+}
+
+export const toHTML = (node: VNode): string => serializeNode(node);