@gjsify/dom-elements 0.4.0 → 0.4.3

package/lib/types/location-stub.d.ts

@@ -14,7 +14,7 @@ export declare const location: {
     toString(): string;
     ancestorOrigins: {
         length: number;
-        item: () => null;
+        item: () => any;
         contains: () => boolean;
         [Symbol.iterator]: () => Generator<string>;
     };

package/package.json

@@ -1,80 +1,83 @@
 {
-  "name": "@gjsify/dom-elements",
-  "version": "0.4.0",
-  "description": "DOM element hierarchy (Node, Element, HTMLElement, HTMLImageElement) for GJS",
-  "type": "module",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/types/index.d.ts",
-      "default": "./lib/esm/index.js"
+    "name": "@gjsify/dom-elements",
+    "version": "0.4.3",
+    "description": "DOM element hierarchy (Node, Element, HTMLElement, HTMLImageElement) for GJS",
+    "type": "module",
+    "module": "lib/esm/index.js",
+    "types": "lib/types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "default": "./lib/esm/index.js"
+        },
+        "./register": {
+            "types": "./lib/types/register.d.ts",
+            "default": "./lib/esm/register.js"
+        },
+        "./register/document": {
+            "default": "./lib/esm/register/document.js"
+        },
+        "./register/canvas": {
+            "default": "./lib/esm/register/canvas.js"
+        },
+        "./register/image": {
+            "default": "./lib/esm/register/image.js"
+        },
+        "./register/observers": {
+            "default": "./lib/esm/register/observers.js"
+        },
+        "./register/font-face": {
+            "default": "./lib/esm/register/font-face.js"
+        },
+        "./register/match-media": {
+            "default": "./lib/esm/register/match-media.js"
+        },
+        "./register/location": {
+            "default": "./lib/esm/register/location.js"
+        },
+        "./register/navigator": {
+            "default": "./lib/esm/register/navigator.js"
+        }
     },
-    "./register": {
-      "types": "./lib/types/register.d.ts",
-      "default": "./lib/esm/register.js"
+    "files": [
+        "lib"
+    ],
+    "sideEffects": [
+        "./lib/esm/register.js",
+        "./lib/esm/register/*.js"
+    ],
+    "scripts": {
+        "clear": "rm -rf lib tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo test.gjs.mjs test.node.mjs || exit 0",
+        "check": "tsc --noEmit",
+        "build": "gjsify run build:gjsify && gjsify run build:types",
+        "build:gjsify": "gjsify build --library 'src/**/*.{ts,js}' --exclude 'src/**/*.spec.{mts,ts}' 'src/test.{mts,ts}'",
+        "build:types": "tsc",
+        "build:test": "gjsify run build:test:gjs",
+        "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
+        "build:test:browser": "gjsify build src/test.browser.mts --app browser --outfile dist/test.browser.mjs",
+        "test": "gjsify run build:gjsify && gjsify run build:test && gjsify run test:gjs",
+        "test:gjs": "gjsify run test.gjs.mjs"
     },
-    "./register/document": {
-      "default": "./lib/esm/register/document.js"
+    "keywords": [
+        "gjs",
+        "dom",
+        "element",
+        "node"
+    ],
+    "dependencies": {
+        "@girs/gdkpixbuf-2.0": "2.0.0-4.0.0-rc.15",
+        "@girs/gjs": "4.0.0-rc.15",
+        "@girs/glib-2.0": "2.88.0-4.0.0-rc.15",
+        "@gjsify/abort-controller": "workspace:^",
+        "@gjsify/canvas2d-core": "workspace:^",
+        "@gjsify/dom-events": "workspace:^",
+        "@gjsify/fetch": "workspace:^"
     },
-    "./register/canvas": {
-      "default": "./lib/esm/register/canvas.js"
-    },
-    "./register/image": {
-      "default": "./lib/esm/register/image.js"
-    },
-    "./register/observers": {
-      "default": "./lib/esm/register/observers.js"
-    },
-    "./register/font-face": {
-      "default": "./lib/esm/register/font-face.js"
-    },
-    "./register/match-media": {
-      "default": "./lib/esm/register/match-media.js"
-    },
-    "./register/location": {
-      "default": "./lib/esm/register/location.js"
-    },
-    "./register/navigator": {
-      "default": "./lib/esm/register/navigator.js"
+    "devDependencies": {
+        "@girs/gst-1.0": "1.28.1-4.0.0-rc.15",
+        "@gjsify/cli": "workspace:^",
+        "@gjsify/unit": "workspace:^",
+        "@types/node": "^25.6.2",
+        "typescript": "^6.0.3"
     }
-  },
-  "sideEffects": [
-    "./lib/esm/register.js",
-    "./lib/esm/register/*.js"
-  ],
-  "scripts": {
-    "clear": "rm -rf lib tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo test.gjs.mjs test.node.mjs || exit 0",
-    "check": "tsc --noEmit",
-    "build": "yarn build:gjsify && yarn build:types",
-    "build:gjsify": "gjsify build --library 'src/**/*.{ts,js}' --exclude 'src/**/*.spec.{mts,ts}' 'src/test.{mts,ts}'",
-    "build:types": "tsc",
-    "build:test": "yarn build:test:gjs",
-    "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
-    "build:test:browser": "gjsify build src/test.browser.mts --app browser --outfile dist/test.browser.mjs",
-    "test": "yarn build:gjsify && yarn build:test && yarn test:gjs",
-    "test:gjs": "gjsify run test.gjs.mjs"
-  },
-  "keywords": [
-    "gjs",
-    "dom",
-    "element",
-    "node"
-  ],
-  "dependencies": {
-    "@girs/gdkpixbuf-2.0": "2.0.0-4.0.0-rc.15",
-    "@girs/gjs": "4.0.0-rc.15",
-    "@girs/glib-2.0": "2.88.0-4.0.0-rc.15",
-    "@gjsify/abort-controller": "^0.4.0",
-    "@gjsify/canvas2d-core": "^0.4.0",
-    "@gjsify/dom-events": "^0.4.0",
-    "@gjsify/fetch": "^0.4.0"
-  },
-  "devDependencies": {
-    "@girs/gst-1.0": "1.28.1-4.0.0-rc.15",
-    "@gjsify/cli": "^0.4.0",
-    "@gjsify/unit": "^0.4.0",
-    "@types/node": "^25.6.2",
-    "typescript": "^6.0.3"
-  }
-}
+}

package/src/attr.ts

@@ -1,61 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/attr/Attr.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify — lightweight data holder, does not extend Node
-
-import * as PS from './property-symbol.js';
-
-import type { Element } from './element.js';
-
-/**
- * Represents a DOM attribute.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Attr
- */
-export class Attr {
-	public [PS.name]: string;
-	public [PS.value]: string;
-	public [PS.ownerElement]: Element | null;
-
-	public readonly localName: string;
-	public readonly namespaceURI: string | null;
-	public readonly prefix: string | null;
-	public readonly specified = true;
-
-	constructor(
-		name: string,
-		value: string,
-		namespaceURI: string | null = null,
-		prefix: string | null = null,
-		ownerElement: Element | null = null,
-	) {
-		this[PS.name] = name;
-		this[PS.value] = value;
-		this[PS.ownerElement] = ownerElement;
-		this.namespaceURI = namespaceURI;
-		this.prefix = prefix;
-
-		// localName is the part after the prefix colon, or the full name if no prefix
-		const colonIndex = name.indexOf(':');
-		this.localName = colonIndex !== -1 ? name.slice(colonIndex + 1) : name;
-	}
-
-	get name(): string {
-		return this[PS.name];
-	}
-
-	get value(): string {
-		return this[PS.value];
-	}
-
-	set value(value: string) {
-		this[PS.value] = value;
-	}
-
-	get ownerElement(): Element | null {
-		return this[PS.ownerElement];
-	}
-
-	get [Symbol.toStringTag](): string {
-		return 'Attr';
-	}
-}

package/src/character-data.ts

@@ -1,79 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/character-data/CharacterData.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify — no ChildNode utilities, no mutation observer hooks
-
-import { Node } from './node.js';
-import { NodeType } from './node-type.js';
-import * as PS from './property-symbol.js';
-
-/**
- * CharacterData base class for Text and Comment nodes.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/CharacterData
- */
-export class CharacterData extends Node {
-	private _data: string;
-
-	constructor(data = '') {
-		super();
-		this[PS.nodeType] = NodeType.TEXT_NODE;
-		this._data = data;
-	}
-
-	get data(): string {
-		return this._data;
-	}
-
-	set data(value: string) {
-		this._data = value;
-	}
-
-	get textContent(): string {
-		return this._data;
-	}
-
-	set textContent(value: string) {
-		this._data = value;
-	}
-
-	get nodeValue(): string {
-		return this._data;
-	}
-
-	set nodeValue(value: string) {
-		this._data = value;
-	}
-
-	get length(): number {
-		return this._data.length;
-	}
-
-	appendData(data: string): void {
-		this._data += data;
-	}
-
-	deleteData(offset: number, count: number): void {
-		this._data = this._data.substring(0, offset) + this._data.substring(offset + count);
-	}
-
-	insertData(offset: number, data: string): void {
-		this._data = this._data.substring(0, offset) + data + this._data.substring(offset);
-	}
-
-	replaceData(offset: number, count: number, data: string): void {
-		this._data = this._data.substring(0, offset) + data + this._data.substring(offset + count);
-	}
-
-	substringData(offset: number, count: number): string {
-		return this._data.substring(offset, offset + count);
-	}
-
-	cloneNode(_deep = false): CharacterData {
-		const clone = new (this.constructor as typeof CharacterData)(this._data);
-		return clone;
-	}
-
-	get [Symbol.toStringTag](): string {
-		return 'CharacterData';
-	}
-}

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;