@gjsify/dom-elements 0.1.0

package/src/index.ts

@@ -0,0 +1,95 @@
+// DOM element hierarchy for GJS — original implementation adapted from happy-dom
+// Copyright (c) David Ortner (capricorn86). MIT license.
+
+export { Attr } from './attr.js';
+export { NamedNodeMap } from './named-node-map.js';
+export { NodeList } from './node-list.js';
+export { Node } from './node.js';
+export { CharacterData } from './character-data.js';
+export { Text } from './text.js';
+export { Comment } from './comment.js';
+export { DocumentFragment } from './document-fragment.js';
+export { DOMTokenList } from './dom-token-list.js';
+export { Element } from './element.js';
+export { HTMLElement, CSSStyleDeclaration } from './html-element.js';
+export { HTMLCanvasElement } from './html-canvas-element.js';
+export { HTMLImageElement } from './html-image-element.js';
+export { Image } from './image.js';
+export { Document, document } from './document.js';
+export { MutationObserver } from './mutation-observer.js';
+export { ResizeObserver } from './resize-observer.js';
+export { IntersectionObserver } from './intersection-observer.js';
+export { NodeType } from './node-type.js';
+export { NamespaceURI } from './namespace-uri.js';
+export * as PropertySymbol from './property-symbol.js';
+
+// Side-effect: register DOM globals on import.
+// Same pattern as @gjsify/node-globals (packages/node/globals/src/index.ts)
+// and @gjsify/web-globals (packages/web/web-globals/src/index.ts).
+import { Text } from './text.js';
+import { Comment } from './comment.js';
+import { DocumentFragment } from './document-fragment.js';
+import { DOMTokenList } from './dom-token-list.js';
+import { HTMLCanvasElement } from './html-canvas-element.js';
+import { HTMLImageElement } from './html-image-element.js';
+import { Image } from './image.js';
+import { document } from './document.js';
+import { MutationObserver } from './mutation-observer.js';
+import { ResizeObserver } from './resize-observer.js';
+import { IntersectionObserver } from './intersection-observer.js';
+
+Object.defineProperty(globalThis, 'Text', {
+    value: Text,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'Comment', {
+    value: Comment,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'DocumentFragment', {
+    value: DocumentFragment,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'DOMTokenList', {
+    value: DOMTokenList,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'HTMLCanvasElement', {
+    value: HTMLCanvasElement,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'HTMLImageElement', {
+    value: HTMLImageElement,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'Image', {
+    value: Image,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'document', {
+    value: document,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'MutationObserver', {
+    value: MutationObserver,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'ResizeObserver', {
+    value: ResizeObserver,
+    writable: true,
+    configurable: true,
+});
+Object.defineProperty(globalThis, 'IntersectionObserver', {
+    value: IntersectionObserver,
+    writable: true,
+    configurable: true,
+});

package/src/intersection-observer.ts

@@ -0,0 +1,42 @@
+// IntersectionObserver stub for GJS — original implementation
+// Reference: refs/happy-dom/packages/happy-dom/src/intersection-observer/IntersectionObserver.ts
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Stub implementation — no actual intersection tracking
+
+import type { Element } from './element.js';
+
+/**
+ * IntersectionObserver stub.
+ * Many libraries check for IntersectionObserver existence; this prevents crashes.
+ *
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+ */
+export class IntersectionObserver {
+	readonly root: Element | null;
+	readonly rootMargin: string;
+	readonly thresholds: readonly number[];
+
+	constructor(_callback: (...args: unknown[]) => void, options?: { root?: Element | null; rootMargin?: string; threshold?: number | number[] }) {
+		this.root = options?.root ?? null;
+		this.rootMargin = options?.rootMargin ?? '0px';
+		this.thresholds = Array.isArray(options?.threshold)
+			? options.threshold
+			: [options?.threshold ?? 0];
+	}
+
+	observe(_target: Element): void {
+		// Stub
+	}
+
+	unobserve(_target: Element): void {
+		// Stub
+	}
+
+	disconnect(): void {
+		// Stub
+	}
+
+	takeRecords(): unknown[] {
+		return [];
+	}
+}

package/src/mutation-observer.ts

@@ -0,0 +1,39 @@
+// MutationObserver stub for GJS — original implementation
+// Reference: refs/happy-dom/packages/happy-dom/src/mutation-observer/MutationObserver.ts
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Stub implementation — no actual mutation tracking
+
+import type { Node } from './node.js';
+
+interface MutationObserverOptions {
+	childList?: boolean;
+	attributes?: boolean;
+	characterData?: boolean;
+	subtree?: boolean;
+	attributeOldValue?: boolean;
+	characterDataOldValue?: boolean;
+	attributeFilter?: string[];
+}
+
+/**
+ * MutationObserver stub.
+ * Many libraries check for MutationObserver existence; this prevents crashes.
+ * Does not actually observe DOM mutations (no layout engine).
+ *
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+ */
+export class MutationObserver {
+	constructor(_callback: (...args: unknown[]) => void) {}
+
+	observe(_target: Node, _options?: MutationObserverOptions): void {
+		// Stub — no actual mutation tracking
+	}
+
+	disconnect(): void {
+		// Stub
+	}
+
+	takeRecords(): unknown[] {
+		return [];
+	}
+}

package/src/named-node-map.ts

@@ -0,0 +1,159 @@
+// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/named-node-map/NamedNodeMap.ts)
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Simplified for gjsify — single Map storage, no proxy factory
+
+import { Attr } from './attr.js';
+import { NamespaceURI } from './namespace-uri.js';
+
+import type { Element } from './element.js';
+
+/**
+ * Simplified NamedNodeMap for attribute storage.
+ *
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
+ */
+export class NamedNodeMap {
+	private _items: Attr[] = [];
+	private _ownerElement: Element;
+
+	constructor(ownerElement: Element) {
+		this._ownerElement = ownerElement;
+	}
+
+	get length(): number {
+		return this._items.length;
+	}
+
+	item(index: number): Attr | null {
+		return this._items[index] ?? null;
+	}
+
+	getNamedItem(qualifiedName: string): Attr | null {
+		return this._findByName(qualifiedName);
+	}
+
+	getNamedItemNS(namespace: string | null, localName: string): Attr | null {
+		const ns = namespace === '' ? null : namespace;
+		for (const attr of this._items) {
+			if (attr.namespaceURI === ns && attr.localName === localName) {
+				return attr;
+			}
+		}
+		return null;
+	}
+
+	setNamedItem(attr: Attr): Attr | null {
+		return this._setAttr(attr);
+	}
+
+	setNamedItemNS(attr: Attr): Attr | null {
+		return this._setAttr(attr);
+	}
+
+	removeNamedItem(qualifiedName: string): Attr {
+		const existing = this._findByName(qualifiedName);
+		if (!existing) {
+			throw new DOMException(
+				`Failed to execute 'removeNamedItem' on 'NamedNodeMap': No item with name '${qualifiedName}' was found.`,
+				'NotFoundError',
+			);
+		}
+		this._removeAttr(existing);
+		return existing;
+	}
+
+	removeNamedItemNS(namespace: string | null, localName: string): Attr {
+		const existing = this.getNamedItemNS(namespace, localName);
+		if (!existing) {
+			throw new DOMException(
+				`Failed to execute 'removeNamedItemNS' on 'NamedNodeMap': No item with namespace '${namespace}' and localName '${localName}' was found.`,
+				'NotFoundError',
+			);
+		}
+		this._removeAttr(existing);
+		return existing;
+	}
+
+	[Symbol.iterator](): IterableIterator<Attr> {
+		return this._items[Symbol.iterator]();
+	}
+
+	get [Symbol.toStringTag](): string {
+		return 'NamedNodeMap';
+	}
+
+	// -- Internal helpers --
+
+	/** @internal Add or replace an attribute by name. */
+	_setNamedItem(name: string, value: string, namespaceURI: string | null = null, prefix: string | null = null): void {
+		const existing = namespaceURI !== null
+			? this.getNamedItemNS(namespaceURI, name.includes(':') ? name.split(':')[1] : name)
+			: this._findByName(name);
+
+		if (existing) {
+			existing.value = value;
+		} else {
+			const attr = new Attr(name, value, namespaceURI, prefix, this._ownerElement);
+			this._items.push(attr);
+		}
+	}
+
+	/** @internal Remove an attribute by name. Returns true if removed. */
+	_removeNamedItem(name: string): boolean {
+		const existing = this._findByName(name);
+		if (existing) {
+			this._removeAttr(existing);
+			return true;
+		}
+		return false;
+	}
+
+	/** @internal Remove an attribute by namespace + localName. Returns true if removed. */
+	_removeNamedItemNS(namespace: string | null, localName: string): boolean {
+		const existing = this.getNamedItemNS(namespace, localName);
+		if (existing) {
+			this._removeAttr(existing);
+			return true;
+		}
+		return false;
+	}
+
+	private _findByName(qualifiedName: string): Attr | null {
+		// For HTML elements, attribute names are case-insensitive
+		const isHTML = this._ownerElement.namespaceURI === NamespaceURI.html;
+		const searchName = isHTML ? qualifiedName.toLowerCase() : qualifiedName;
+		for (const attr of this._items) {
+			const attrName = isHTML ? attr.name.toLowerCase() : attr.name;
+			if (attrName === searchName) {
+				return attr;
+			}
+		}
+		return null;
+	}
+
+	private _setAttr(attr: Attr): Attr | null {
+		// Find existing by namespace match or by name
+		let existing: Attr | null = null;
+		if (attr.namespaceURI !== null) {
+			existing = this.getNamedItemNS(attr.namespaceURI, attr.localName);
+		} else {
+			existing = this._findByName(attr.name);
+		}
+
+		if (existing) {
+			const oldAttr = new Attr(existing.name, existing.value, existing.namespaceURI, existing.prefix, existing.ownerElement);
+			existing.value = attr.value;
+			return oldAttr;
+		}
+
+		this._items.push(attr);
+		return null;
+	}
+
+	private _removeAttr(attr: Attr): void {
+		const idx = this._items.indexOf(attr);
+		if (idx !== -1) {
+			this._items.splice(idx, 1);
+		}
+	}
+}

package/src/namespace-uri.ts

@@ -0,0 +1,11 @@
+// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/config/NamespaceURI.ts)
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Simplified for gjsify — only commonly used namespaces
+
+export const NamespaceURI = {
+	html: 'http://www.w3.org/1999/xhtml',
+	svg: 'http://www.w3.org/2000/svg',
+	mathML: 'http://www.w3.org/1998/Math/MathML',
+	xml: 'http://www.w3.org/XML/1998/namespace',
+	xmlns: 'http://www.w3.org/2000/xmlns/',
+} as const;

package/src/node-list.ts

@@ -0,0 +1,52 @@
+// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/node/NodeList.ts)
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Simplified for gjsify — minimal live array wrapper
+
+import type { Node } from './node.js';
+
+/**
+ * Minimal NodeList backed by an external array.
+ *
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/NodeList
+ */
+export class NodeList {
+	private _items: Node[];
+
+	constructor(items: Node[]) {
+		this._items = items;
+	}
+
+	get length(): number {
+		return this._items.length;
+	}
+
+	item(index: number): Node | null {
+		return this._items[index] ?? null;
+	}
+
+	forEach(callback: (node: Node, index: number, list: NodeList) => void, thisArg?: unknown): void {
+		for (let i = 0; i < this._items.length; i++) {
+			callback.call(thisArg, this._items[i], i, this);
+		}
+	}
+
+	entries(): IterableIterator<[number, Node]> {
+		return this._items.entries();
+	}
+
+	keys(): IterableIterator<number> {
+		return this._items.keys();
+	}
+
+	values(): IterableIterator<Node> {
+		return this._items.values();
+	}
+
+	[Symbol.iterator](): IterableIterator<Node> {
+		return this._items[Symbol.iterator]();
+	}
+
+	get [Symbol.toStringTag](): string {
+		return 'NodeList';
+	}
+}

package/src/node-type.ts

@@ -0,0 +1,14 @@
+// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/node/NodeTypeEnum.ts)
+// Copyright (c) David Ortner (capricorn86). MIT license.
+
+export const NodeType = {
+	ELEMENT_NODE: 1,
+	ATTRIBUTE_NODE: 2,
+	TEXT_NODE: 3,
+	CDATA_SECTION_NODE: 4,
+	PROCESSING_INSTRUCTION_NODE: 7,
+	COMMENT_NODE: 8,
+	DOCUMENT_NODE: 9,
+	DOCUMENT_TYPE_NODE: 10,
+	DOCUMENT_FRAGMENT_NODE: 11,
+} as const;

package/src/node.ts

@@ -0,0 +1,250 @@
+// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/node/Node.ts)
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Simplified for gjsify — no Document, no MutationObserver, no cache system,
+//   extends @gjsify/dom-events EventTarget
+
+import { EventTarget } from '@gjsify/dom-events';
+
+import { NodeType } from './node-type.js';
+import { NodeList } from './node-list.js';
+import * as PS from './property-symbol.js';
+
+/**
+ * DOM Node base class.
+ *
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Node
+ */
+export class Node extends EventTarget {
+	// Static node type constants
+	static readonly ELEMENT_NODE = NodeType.ELEMENT_NODE;
+	static readonly ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE;
+	static readonly TEXT_NODE = NodeType.TEXT_NODE;
+	static readonly CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE;
+	static readonly PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE;
+	static readonly COMMENT_NODE = NodeType.COMMENT_NODE;
+	static readonly DOCUMENT_NODE = NodeType.DOCUMENT_NODE;
+	static readonly DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE;
+	static readonly DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE;
+
+	// Instance node type constants (mirror static for spec compliance)
+	readonly ELEMENT_NODE = NodeType.ELEMENT_NODE;
+	readonly ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE;
+	readonly TEXT_NODE = NodeType.TEXT_NODE;
+	readonly CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE;
+	readonly PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE;
+	readonly COMMENT_NODE = NodeType.COMMENT_NODE;
+	readonly DOCUMENT_NODE = NodeType.DOCUMENT_NODE;
+	readonly DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE;
+	readonly DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE;
+
+	// DOCUMENT_POSITION constants
+	static readonly DOCUMENT_POSITION_DISCONNECTED = 0x01;
+	static readonly DOCUMENT_POSITION_PRECEDING = 0x02;
+	static readonly DOCUMENT_POSITION_FOLLOWING = 0x04;
+	static readonly DOCUMENT_POSITION_CONTAINS = 0x08;
+	static readonly DOCUMENT_POSITION_CONTAINED_BY = 0x10;
+	static readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
+
+	// Internal state
+	public [PS.nodeType]: number = NodeType.ELEMENT_NODE;
+	public [PS.parentNode]: Node | null = null;
+	public [PS.childNodesList]: Node[] = [];
+	public [PS.elementChildren]: Node[] = [];
+	public [PS.isConnected] = false;
+
+	get nodeType(): number {
+		return this[PS.nodeType];
+	}
+
+	get nodeName(): string {
+		return '';
+	}
+
+	get parentNode(): Node | null {
+		return this[PS.parentNode];
+	}
+
+	get parentElement(): Node | null {
+		const parent = this[PS.parentNode];
+		return parent && parent[PS.nodeType] === NodeType.ELEMENT_NODE ? parent : null;
+	}
+
+	get childNodes(): NodeList {
+		return new NodeList(this[PS.childNodesList]);
+	}
+
+	get firstChild(): Node | null {
+		return this[PS.childNodesList][0] ?? null;
+	}
+
+	get lastChild(): Node | null {
+		const children = this[PS.childNodesList];
+		return children[children.length - 1] ?? null;
+	}
+
+	get previousSibling(): Node | null {
+		const parent = this[PS.parentNode];
+		if (!parent) return null;
+		const siblings = parent[PS.childNodesList];
+		const idx = siblings.indexOf(this);
+		return idx > 0 ? siblings[idx - 1] : null;
+	}
+
+	get nextSibling(): Node | null {
+		const parent = this[PS.parentNode];
+		if (!parent) return null;
+		const siblings = parent[PS.childNodesList];
+		const idx = siblings.indexOf(this);
+		return idx !== -1 && idx < siblings.length - 1 ? siblings[idx + 1] : null;
+	}
+
+	get textContent(): string | null {
+		return null;
+	}
+
+	set textContent(_value: string | null) {
+		// Override in subclasses
+	}
+
+	get nodeValue(): string | null {
+		return null;
+	}
+
+	set nodeValue(_value: string | null) {
+		// Override in subclasses
+	}
+
+	get ownerDocument(): null {
+		return null;
+	}
+
+	get isConnected(): boolean {
+		return this[PS.isConnected];
+	}
+
+	hasChildNodes(): boolean {
+		return this[PS.childNodesList].length > 0;
+	}
+
+	contains(other: Node | null): boolean {
+		if (other === null) return false;
+		if (other === this) return true;
+		let node: Node | null = other;
+		while (node) {
+			if (node === this) return true;
+			node = node[PS.parentNode];
+		}
+		return false;
+	}
+
+	getRootNode(): Node {
+		let node: Node = this;
+		while (node[PS.parentNode]) {
+			node = node[PS.parentNode]!;
+		}
+		return node;
+	}
+
+	appendChild(node: Node): Node {
+		// Remove from previous parent
+		if (node[PS.parentNode]) {
+			node[PS.parentNode]!.removeChild(node);
+		}
+
+		node[PS.parentNode] = this;
+		this[PS.childNodesList].push(node);
+
+		// Track element children
+		if (node[PS.nodeType] === NodeType.ELEMENT_NODE) {
+			this[PS.elementChildren].push(node);
+		}
+
+		return node;
+	}
+
+	removeChild(node: Node): Node {
+		const children = this[PS.childNodesList];
+		const idx = children.indexOf(node);
+		if (idx === -1) {
+			throw new DOMException(
+				"Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.",
+				'NotFoundError',
+			);
+		}
+
+		children.splice(idx, 1);
+		node[PS.parentNode] = null;
+
+		// Remove from element children
+		if (node[PS.nodeType] === NodeType.ELEMENT_NODE) {
+			const elemIdx = this[PS.elementChildren].indexOf(node);
+			if (elemIdx !== -1) {
+				this[PS.elementChildren].splice(elemIdx, 1);
+			}
+		}
+
+		return node;
+	}
+
+	insertBefore(newNode: Node, referenceNode: Node | null): Node {
+		if (referenceNode === null) {
+			return this.appendChild(newNode);
+		}
+
+		const children = this[PS.childNodesList];
+		const refIdx = children.indexOf(referenceNode);
+		if (refIdx === -1) {
+			throw new DOMException(
+				"Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.",
+				'NotFoundError',
+			);
+		}
+
+		// Remove from previous parent
+		if (newNode[PS.parentNode]) {
+			newNode[PS.parentNode]!.removeChild(newNode);
+		}
+
+		newNode[PS.parentNode] = this;
+		children.splice(refIdx, 0, newNode);
+
+		// Track element children
+		if (newNode[PS.nodeType] === NodeType.ELEMENT_NODE) {
+			// Find correct position in element children
+			const elemChildren = this[PS.elementChildren];
+			let elemIdx = elemChildren.length;
+			for (let i = refIdx; i < children.length; i++) {
+				if (children[i][PS.nodeType] === NodeType.ELEMENT_NODE && children[i] !== newNode) {
+					elemIdx = elemChildren.indexOf(children[i]);
+					break;
+				}
+			}
+			elemChildren.splice(elemIdx, 0, newNode);
+		}
+
+		return newNode;
+	}
+
+	replaceChild(newChild: Node, oldChild: Node): Node {
+		this.insertBefore(newChild, oldChild);
+		this.removeChild(oldChild);
+		return oldChild;
+	}
+
+	cloneNode(deep = false): Node {
+		const clone = new (this.constructor as new () => Node)();
+		clone[PS.nodeType] = this[PS.nodeType];
+
+		if (deep) {
+			for (const child of this[PS.childNodesList]) {
+				clone.appendChild(child.cloneNode(true));
+			}
+		}
+
+		return clone;
+	}
+
+	get [Symbol.toStringTag](): string {
+		return 'Node';
+	}
+}

package/src/property-symbol.ts

@@ -0,0 +1,23 @@
+// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/PropertySymbol.ts)
+// Copyright (c) David Ortner (capricorn86). MIT license.
+// Modifications: Minimal subset for gjsify — only symbols needed by Node/Element/HTMLElement
+
+// Node
+export const nodeType = Symbol('nodeType');
+export const parentNode = Symbol('parentNode');
+export const childNodesList = Symbol('childNodesList');
+export const elementChildren = Symbol('elementChildren');
+export const isConnected = Symbol('isConnected');
+
+// Element
+export const tagName = Symbol('tagName');
+export const localName = Symbol('localName');
+export const namespaceURI = Symbol('namespaceURI');
+export const prefix = Symbol('prefix');
+export const attributes = Symbol('attributes');
+export const propertyEventListeners = Symbol('propertyEventListeners');
+
+// Attr
+export const name = Symbol('name');
+export const value = Symbol('value');
+export const ownerElement = Symbol('ownerElement');