@gjsify/dom-elements 0.3.21 → 0.4.3

package/src/comment.ts

@@ -1,31 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/comment/Comment.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify
-
-import { CharacterData } from './character-data.js';
-import { NodeType } from './node-type.js';
-import * as PS from './property-symbol.js';
-
-/**
- * Comment node.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Comment
- */
-export class Comment extends CharacterData {
-	constructor(data = '') {
-		super(data);
-		this[PS.nodeType] = NodeType.COMMENT_NODE;
-	}
-
-	get nodeName(): string {
-		return '#comment';
-	}
-
-	cloneNode(_deep = false): Comment {
-		return new Comment(this.data);
-	}
-
-	get [Symbol.toStringTag](): string {
-		return 'Comment';
-	}
-}

package/src/document-fragment.ts

@@ -1,137 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/document-fragment/DocumentFragment.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify — no querySelector/querySelectorAll, no HTML parsing
-
-import { Node } from './node.js';
-import { Element } from './element.js';
-import { Text } from './text.js';
-import { NodeType } from './node-type.js';
-import * as PS from './property-symbol.js';
-
-/**
- * DocumentFragment.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
- */
-export class DocumentFragment extends Node {
-	constructor() {
-		super();
-		this[PS.nodeType] = NodeType.DOCUMENT_FRAGMENT_NODE;
-	}
-
-	get nodeName(): string {
-		return '#document-fragment';
-	}
-
-	/** Element children only (excludes text/comment nodes) */
-	get children(): Element[] {
-		return this[PS.elementChildren] as Element[];
-	}
-
-	get childElementCount(): number {
-		return this[PS.elementChildren].length;
-	}
-
-	get firstElementChild(): Element | null {
-		return (this[PS.elementChildren][0] as Element) ?? null;
-	}
-
-	get lastElementChild(): Element | null {
-		const children = this[PS.elementChildren];
-		return (children[children.length - 1] as Element) ?? null;
-	}
-
-	get textContent(): string {
-		let text = '';
-		for (const child of this.childNodes) {
-			if (child.textContent !== null) {
-				text += child.textContent;
-			}
-		}
-		return text;
-	}
-
-	set textContent(value: string) {
-		// Remove all children
-		while (this.firstChild) {
-			this.removeChild(this.firstChild);
-		}
-		// Add text node if value is non-empty
-		if (value) {
-			// Import Text lazily to avoid circular dependency
-this.appendChild(new Text(value));
-		}
-	}
-
-	/**
-	 * Append nodes or strings to this fragment.
-	 */
-	append(...nodes: (Node | string)[]): void {
-		for (const node of nodes) {
-			if (typeof node === 'string') {
-		this.appendChild(new Text(node));
-			} else {
-				this.appendChild(node);
-			}
-		}
-	}
-
-	/**
-	 * Prepend nodes or strings to this fragment.
-	 */
-	prepend(...nodes: (Node | string)[]): void {
-		const firstChild = this.firstChild;
-		for (const node of nodes) {
-			if (typeof node === 'string') {
-		this.insertBefore(new Text(node), firstChild);
-			} else {
-				this.insertBefore(node, firstChild);
-			}
-		}
-	}
-
-	/**
-	 * Replace all children with the given nodes.
-	 */
-	replaceChildren(...nodes: (Node | string)[]): void {
-		while (this.firstChild) {
-			this.removeChild(this.firstChild);
-		}
-		this.append(...nodes);
-	}
-
-	/**
-	 * Find an element by ID in this fragment's children.
-	 */
-	getElementById(id: string): Element | null {
-		for (const child of this.children) {
-			if (child.id === id) return child;
-			const found = this._findById(child, id);
-			if (found) return found;
-		}
-		return null;
-	}
-
-	private _findById(element: Element, id: string): Element | null {
-		for (const child of element.children) {
-			if (child.id === id) return child;
-			const found = this._findById(child, id);
-			if (found) return found;
-		}
-		return null;
-	}
-
-	cloneNode(deep = false): DocumentFragment {
-		const clone = new DocumentFragment();
-		if (deep) {
-			for (const child of this.childNodes) {
-				clone.appendChild(child.cloneNode(true));
-			}
-		}
-		return clone;
-	}
-
-	get [Symbol.toStringTag](): string {
-		return 'DocumentFragment';
-	}
-}

package/src/document.ts

@@ -1,103 +0,0 @@
-// Document stub for GJS — original implementation
-// Reference: refs/happy-dom/packages/happy-dom/src/nodes/document/Document.ts
-
-import { Node } from './node.js';
-import { Element } from './element.js';
-import { HTMLElement } from './html-element.js';
-import { HTMLImageElement } from './html-image-element.js';
-import { HTMLVideoElement } from './html-video-element.js';
-import { HTMLCanvasElement } from './html-canvas-element.js';
-import { Text } from './text.js';
-import { Comment } from './comment.js';
-import { DocumentFragment } from './document-fragment.js';
-import { Event } from '@gjsify/dom-events';
-
-type ElementFactory = () => HTMLElement;
-
-export class Document extends Node {
-    /** External packages register element factories here (e.g. @gjsify/iframe registers 'iframe') */
-    private static _elementFactories = new Map<string, ElementFactory>();
-
-    /** Stub body element */
-    readonly body: HTMLElement = new HTMLElement();
-
-    /** Stub head element */
-    readonly head: HTMLElement = new HTMLElement();
-
-    /** Stub documentElement */
-    readonly documentElement: HTMLElement = new HTMLElement();
-
-    constructor() {
-        super();
-        // Establish DOM tree: document → documentElement → body
-        // so event bubbling from any child of body reaches document.
-        this.appendChild(this.documentElement);
-        this.documentElement.appendChild(this.body);
-    }
-
-    /**
-     * Register a factory for a custom element tag name.
-     * Called as a side-effect by DOM packages to avoid circular dependencies.
-     *
-     * Example: `Document.registerElementFactory('iframe', () => new HTMLIFrameElement())`
-     */
-    static registerElementFactory(tagName: string, factory: ElementFactory): void {
-        Document._elementFactories.set(tagName.toLowerCase(), factory);
-    }
-
-    createElementNS(_namespace: string | null, tagName: string): HTMLElement {
-        const tag = tagName.toLowerCase();
-        switch (tag) {
-            case 'img': return new HTMLImageElement();
-            case 'video': return new HTMLVideoElement();
-            case 'canvas': return new HTMLCanvasElement();
-            default: {
-                const factory = Document._elementFactories.get(tag);
-                if (factory) return factory();
-                return new HTMLElement();
-            }
-        }
-    }
-
-    createElement(tagName: string): HTMLElement {
-        return this.createElementNS('http://www.w3.org/1999/xhtml', tagName);
-    }
-
-    createTextNode(data: string): Text {
-        return new Text(data);
-    }
-
-    createComment(data: string): Comment {
-        return new Comment(data);
-    }
-
-    createDocumentFragment(): DocumentFragment {
-        return new DocumentFragment();
-    }
-
-    createEvent(type: string): Event {
-        return new Event(type);
-    }
-
-    /**
-     * Find an element by ID. Searches body's descendants.
-     */
-    getElementById(id: string): Element | null {
-        return this._findById(this.body, id);
-    }
-
-    private _findById(element: Element, id: string): Element | null {
-        if (element.id === id) return element;
-        for (const child of element.children) {
-            const found = this._findById(child, id);
-            if (found) return found;
-        }
-        return null;
-    }
-
-    get [Symbol.toStringTag](): string {
-        return 'Document';
-    }
-}
-
-export const document = new Document();

package/src/dom-matrix.ts

@@ -1,109 +0,0 @@
-// DOMMatrix stub for GJS — minimal 2D/3D transformation matrix.
-// Libraries like Excalibur construct `new DOMMatrix([a,b,c,d,e,f])` and pass
-// the result to `ctx.setTransform(matrix)` — we store the 6 2D components
-// plus 16 3D components. Our Canvas 2D context's setTransform() accepts
-// either a DOMMatrix or six numbers, so this works transparently.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
-
-/**
- * Minimal DOMMatrix implementation — supports 2D and 3D construction, plus
- * 2D multiply/inverse/translate/scale operations used by Canvas 2D libraries
- * like Excalibur. Full 3D math (4x4 multiply, inverse) is NOT implemented.
- */
-export class DOMMatrix {
-    // 2D components
-    a = 1; b = 0; c = 0; d = 1; e = 0; f = 0;
-    // 3D components (column-major)
-    m11 = 1; m12 = 0; m13 = 0; m14 = 0;
-    m21 = 0; m22 = 1; m23 = 0; m24 = 0;
-    m31 = 0; m32 = 0; m33 = 1; m34 = 0;
-    m41 = 0; m42 = 0; m43 = 0; m44 = 1;
-    is2D = true;
-    isIdentity = true;
-
-    constructor(init?: number[] | string) {
-        if (Array.isArray(init)) {
-            if (init.length === 6) {
-                // 2D affine: [a, b, c, d, e, f]
-                this.a = this.m11 = init[0];
-                this.b = this.m12 = init[1];
-                this.c = this.m21 = init[2];
-                this.d = this.m22 = init[3];
-                this.e = this.m41 = init[4];
-                this.f = this.m42 = init[5];
-                this.is2D = true;
-            } else if (init.length === 16) {
-                // 3D: column-major 4x4
-                this.m11 = init[0];  this.m12 = init[1];  this.m13 = init[2];  this.m14 = init[3];
-                this.m21 = init[4];  this.m22 = init[5];  this.m23 = init[6];  this.m24 = init[7];
-                this.m31 = init[8];  this.m32 = init[9];  this.m33 = init[10]; this.m34 = init[11];
-                this.m41 = init[12]; this.m42 = init[13]; this.m43 = init[14]; this.m44 = init[15];
-                this.a = this.m11; this.b = this.m12;
-                this.c = this.m21; this.d = this.m22;
-                this.e = this.m41; this.f = this.m42;
-                this.is2D = false;
-            }
-            this.isIdentity =
-                this.a === 1 && this.b === 0 && this.c === 0 &&
-                this.d === 1 && this.e === 0 && this.f === 0;
-        }
-    }
-
-    /**
-     * Multiply this 2D matrix by another 2D matrix and return a new matrix.
-     * [a c e] [a' c' e']   [a*a'+c*b'  a*c'+c*d'  a*e'+c*f'+e]
-     * [b d f] [b' d' f'] = [b*a'+d*b'  b*c'+d*d'  b*e'+d*f'+f]
-     * [0 0 1] [0  0  1 ]   [0          0          1           ]
-     */
-    multiply(other: { a: number; b: number; c: number; d: number; e: number; f: number }): DOMMatrix {
-        const a = this.a * other.a + this.c * other.b;
-        const b = this.b * other.a + this.d * other.b;
-        const c = this.a * other.c + this.c * other.d;
-        const d = this.b * other.c + this.d * other.d;
-        const e = this.a * other.e + this.c * other.f + this.e;
-        const f = this.b * other.e + this.d * other.f + this.f;
-        return new DOMMatrix([a, b, c, d, e, f]);
-    }
-
-    /** In-place multiply; returns this. */
-    multiplySelf(other: { a: number; b: number; c: number; d: number; e: number; f: number }): DOMMatrix {
-        const result = this.multiply(other);
-        this.a = result.a; this.b = result.b;
-        this.c = result.c; this.d = result.d;
-        this.e = result.e; this.f = result.f;
-        this.m11 = this.a; this.m12 = this.b;
-        this.m21 = this.c; this.m22 = this.d;
-        this.m41 = this.e; this.m42 = this.f;
-        this.isIdentity = false;
-        return this;
-    }
-
-    /** 2D inverse. Throws if non-invertible (det === 0). */
-    inverse(): DOMMatrix {
-        const det = this.a * this.d - this.b * this.c;
-        if (det === 0) return new DOMMatrix([1, 0, 0, 1, 0, 0]);
-        const invDet = 1 / det;
-        return new DOMMatrix([
-            this.d * invDet,
-            -this.b * invDet,
-            -this.c * invDet,
-            this.a * invDet,
-            (this.c * this.f - this.d * this.e) * invDet,
-            (this.b * this.e - this.a * this.f) * invDet,
-        ]);
-    }
-
-    translate(tx = 0, ty = 0): DOMMatrix {
-        return this.multiply({ a: 1, b: 0, c: 0, d: 1, e: tx, f: ty });
-    }
-
-    scale(sx = 1, sy: number = sx): DOMMatrix {
-        return this.multiply({ a: sx, b: 0, c: 0, d: sy, e: 0, f: 0 });
-    }
-}
-
-/**
- * DOMMatrixReadOnly alias — MDN specifies this as the immutable base class.
- * We expose the same impl since consumers (Excalibur, three.js) rarely care.
- */
-export const DOMMatrixReadOnly = DOMMatrix;

package/src/dom-token-list.ts

@@ -1,140 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/dom/DOMTokenList.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify — no Proxy, plain array-based implementation
-
-import type { Element } from './element.js';
-
-/**
- * DOMTokenList — manages a set of space-separated tokens on an attribute.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList
- */
-export class DOMTokenList {
-	private _ownerElement: Element;
-	private _attributeName: string;
-
-	constructor(ownerElement: Element, attributeName: string) {
-		this._ownerElement = ownerElement;
-		this._attributeName = attributeName;
-	}
-
-	private _getTokens(): string[] {
-		const value = this._ownerElement.getAttribute(this._attributeName);
-		if (!value) return [];
-		return value.split(/\s+/).filter(t => t.length > 0);
-	}
-
-	private _setTokens(tokens: string[]): void {
-		const value = tokens.join(' ');
-		if (value) {
-			this._ownerElement.setAttribute(this._attributeName, value);
-		} else {
-			this._ownerElement.removeAttribute(this._attributeName);
-		}
-	}
-
-	get length(): number {
-		return this._getTokens().length;
-	}
-
-	get value(): string {
-		return this._ownerElement.getAttribute(this._attributeName) ?? '';
-	}
-
-	set value(val: string) {
-		if (val) {
-			this._ownerElement.setAttribute(this._attributeName, val);
-		} else {
-			this._ownerElement.removeAttribute(this._attributeName);
-		}
-	}
-
-	item(index: number): string | null {
-		const tokens = this._getTokens();
-		return index >= 0 && index < tokens.length ? tokens[index] : null;
-	}
-
-	contains(token: string): boolean {
-		return this._getTokens().includes(token);
-	}
-
-	add(...tokens: string[]): void {
-		const current = this._getTokens();
-		for (const token of tokens) {
-			if (token && !current.includes(token)) {
-				current.push(token);
-			}
-		}
-		this._setTokens(current);
-	}
-
-	remove(...tokens: string[]): void {
-		const current = this._getTokens().filter(t => !tokens.includes(t));
-		this._setTokens(current);
-	}
-
-	toggle(token: string, force?: boolean): boolean {
-		const has = this.contains(token);
-		if (force !== undefined) {
-			if (force) {
-				this.add(token);
-				return true;
-			} else {
-				this.remove(token);
-				return false;
-			}
-		}
-		if (has) {
-			this.remove(token);
-			return false;
-		} else {
-			this.add(token);
-			return true;
-		}
-	}
-
-	replace(token: string, newToken: string): boolean {
-		const tokens = this._getTokens();
-		const idx = tokens.indexOf(token);
-		if (idx === -1) return false;
-		tokens[idx] = newToken;
-		this._setTokens(tokens);
-		return true;
-	}
-
-	supports(_token: string): boolean {
-		// No validation — all tokens are supported
-		return true;
-	}
-
-	forEach(callback: (value: string, index: number, list: DOMTokenList) => void): void {
-		const tokens = this._getTokens();
-		for (let i = 0; i < tokens.length; i++) {
-			callback(tokens[i], i, this);
-		}
-	}
-
-	keys(): IterableIterator<number> {
-		return this._getTokens().keys();
-	}
-
-	values(): IterableIterator<string> {
-		return this._getTokens().values();
-	}
-
-	entries(): IterableIterator<[number, string]> {
-		return this._getTokens().entries();
-	}
-
-	[Symbol.iterator](): IterableIterator<string> {
-		return this._getTokens().values();
-	}
-
-	toString(): string {
-		return this.value;
-	}
-
-	get [Symbol.toStringTag](): string {
-		return 'DOMTokenList';
-	}
-}