@gjsify/dom-elements 0.4.0 → 0.4.4

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';
-	}
-}

package/src/element.ts

@@ -1,316 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/element/Element.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify — no innerHTML/outerHTML, no querySelector/CSS selectors,
-//   no Shadow DOM, no classList/DOMTokenList, no computed styles
-
-import { Event } from '@gjsify/dom-events';
-
-import { Node } from './node.js';
-import { NodeType } from './node-type.js';
-import { NamedNodeMap } from './named-node-map.js';
-import { NamespaceURI } from './namespace-uri.js';
-import * as PS from './property-symbol.js';
-
-/**
- * DOM Element class.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element
- */
-export class Element extends Node {
-	public [PS.tagName]: string = '';
-	public [PS.localName]: string = '';
-	public [PS.namespaceURI]: string | null = NamespaceURI.html;
-	public [PS.prefix]: string | null = null;
-	public [PS.attributes]: NamedNodeMap = new NamedNodeMap(this);
-	public [PS.propertyEventListeners]: Map<string, ((event: Event) => void) | null> = new Map();
-
-	constructor() {
-		super();
-		this[PS.nodeType] = NodeType.ELEMENT_NODE;
-	}
-
-	get tagName(): string {
-		return this[PS.tagName];
-	}
-
-	get localName(): string {
-		return this[PS.localName];
-	}
-
-	get namespaceURI(): string | null {
-		return this[PS.namespaceURI];
-	}
-
-	get prefix(): string | null {
-		return this[PS.prefix];
-	}
-
-	get nodeName(): string {
-		return this[PS.tagName];
-	}
-
-	get attributes(): NamedNodeMap {
-		return this[PS.attributes];
-	}
-
-	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);
-	}
-
-	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 previousElementSibling(): Element | null {
-		const parent = this[PS.parentNode];
-		if (!parent) return null;
-		const siblings = parent[PS.elementChildren];
-		const idx = siblings.indexOf(this);
-		return idx > 0 ? (siblings[idx - 1] as Element) : null;
-	}
-
-	get nextElementSibling(): Element | null {
-		const parent = this[PS.parentNode];
-		if (!parent) return null;
-		const siblings = parent[PS.elementChildren];
-		const idx = siblings.indexOf(this);
-		return idx !== -1 && idx < siblings.length - 1 ? (siblings[idx + 1] as Element) : null;
-	}
-
-	get textContent(): string {
-		let text = '';
-		for (const child of this[PS.childNodesList]) {
-			if (child.textContent !== null) {
-				text += child.textContent;
-			}
-		}
-		return text;
-	}
-
-	set textContent(_value: string | null) {
-		// Remove all children
-		const children = this[PS.childNodesList];
-		while (children.length > 0) {
-			this.removeChild(children[0]);
-		}
-	}
-
-	// -- Attribute methods --
-
-	getAttribute(qualifiedName: string): string | null {
-		const attr = this[PS.attributes].getNamedItem(qualifiedName);
-		return attr ? attr.value : null;
-	}
-
-	getAttributeNS(namespace: string | null, localName: string): string | null {
-		const attr = this[PS.attributes].getNamedItemNS(namespace, localName);
-		return attr ? attr.value : null;
-	}
-
-	setAttribute(qualifiedName: string, value: string): void {
-		this[PS.attributes]._setNamedItem(qualifiedName, String(value));
-	}
-
-	setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void {
-		const ns = namespace === '' ? null : namespace;
-		const parts = qualifiedName.split(':');
-		const prefix = parts.length > 1 ? parts[0] : null;
-		this[PS.attributes]._setNamedItem(qualifiedName, String(value), ns, prefix);
-	}
-
-	removeAttribute(qualifiedName: string): void {
-		this[PS.attributes]._removeNamedItem(qualifiedName);
-	}
-
-	removeAttributeNS(namespace: string | null, localName: string): void {
-		const ns = namespace === '' ? null : namespace;
-		this[PS.attributes]._removeNamedItemNS(ns, localName);
-	}
-
-	hasAttribute(qualifiedName: string): boolean {
-		return this[PS.attributes].getNamedItem(qualifiedName) !== null;
-	}
-
-	hasAttributeNS(namespace: string | null, localName: string): boolean {
-		return this[PS.attributes].getNamedItemNS(namespace, localName) !== null;
-	}
-
-	getAttributeNode(qualifiedName: string): unknown {
-		return this[PS.attributes].getNamedItem(qualifiedName);
-	}
-
-	setAttributeNode(attr: unknown): unknown {
-		return this[PS.attributes].setNamedItem(attr as any);
-	}
-
-	removeAttributeNode(attr: unknown): unknown {
-		const existing = this[PS.attributes].getNamedItem((attr as any).name);
-		if (!existing) {
-			throw new DOMException(
-				"Failed to execute 'removeAttributeNode' on 'Element': The attribute is not owned by this element.",
-				'NotFoundError',
-			);
-		}
-		this[PS.attributes].removeNamedItem(existing.name);
-		return existing;
-	}
-
-	toggleAttribute(qualifiedName: string, force?: boolean): boolean {
-		if (force !== undefined) {
-			if (force) {
-				this.setAttribute(qualifiedName, '');
-				return true;
-			}
-			this.removeAttribute(qualifiedName);
-			return false;
-		}
-		if (this.hasAttribute(qualifiedName)) {
-			this.removeAttribute(qualifiedName);
-			return false;
-		}
-		this.setAttribute(qualifiedName, '');
-		return true;
-	}
-
-	hasAttributes(): boolean {
-		return this[PS.attributes].length > 0;
-	}
-
-	// -- Override dispatchEvent to call on* property handlers --
-
-	dispatchEvent(event: Event): boolean {
-		const result = super.dispatchEvent(event);
-
-		// Call on<type> property handler if registered
-		const handler = this[PS.propertyEventListeners].get('on' + event.type);
-		if (typeof handler === 'function') {
-			handler.call(this, event);
-		}
-
-		return result;
-	}
-
-	// -- Stubs for commonly expected methods --
-
-	querySelector(_selectors: string): Element | null {
-		return null;
-	}
-
-	querySelectorAll(_selectors: string): Element[] {
-		return [];
-	}
-
-	matches(_selectors: string): boolean {
-		return false;
-	}
-
-	closest(_selectors: string): Element | null {
-		return null;
-	}
-
-	getElementsByTagName(tagName: string): Element[] {
-		const results: Element[] = [];
-		const upperTag = tagName.toUpperCase();
-		const walk = (node: Node): void => {
-			for (const child of node[PS.childNodesList]) {
-				if (child[PS.nodeType] === NodeType.ELEMENT_NODE) {
-					const el = child as Element;
-					if (tagName === '*' || el[PS.tagName] === upperTag) {
-						results.push(el);
-					}
-					walk(el);
-				}
-			}
-		};
-		walk(this);
-		return results;
-	}
-
-	getElementsByClassName(className: string): Element[] {
-		const results: Element[] = [];
-		const targetClasses = className.split(/\s+/).filter(Boolean);
-		const walk = (node: Node): void => {
-			for (const child of node[PS.childNodesList]) {
-				if (child[PS.nodeType] === NodeType.ELEMENT_NODE) {
-					const el = child as Element;
-					const elClasses = el.className.split(/\s+/);
-					if (targetClasses.every(c => elClasses.includes(c))) {
-						results.push(el);
-					}
-					walk(el);
-				}
-			}
-		};
-		walk(this);
-		return results;
-	}
-
-	// -- Clone --
-
-	cloneNode(deep = false): Element {
-		const clone = super.cloneNode(false) as Element;
-		clone[PS.tagName] = this[PS.tagName];
-		clone[PS.localName] = this[PS.localName];
-		clone[PS.namespaceURI] = this[PS.namespaceURI];
-		clone[PS.prefix] = this[PS.prefix];
-
-		// Clone attributes
-		for (const attr of this[PS.attributes]) {
-			clone.setAttributeNS(attr.namespaceURI, attr.name, attr.value);
-		}
-
-		if (deep) {
-			for (const child of this[PS.childNodesList]) {
-				clone.appendChild(child.cloneNode(true));
-			}
-		}
-
-		return clone;
-	}
-
-	// -- Pointer capture (no-op stubs, GTK tracks pointer implicitly) --
-	// Reference: refs/happy-dom/packages/happy-dom/src/nodes/element/Element.ts
-
-	private _pointerCaptures = new Set<number>();
-
-	setPointerCapture(pointerId: number): void {
-		this._pointerCaptures.add(pointerId);
-	}
-
-	releasePointerCapture(pointerId: number): void {
-		this._pointerCaptures.delete(pointerId);
-	}
-
-	hasPointerCapture(pointerId: number): boolean {
-		return this._pointerCaptures.has(pointerId);
-	}
-
-	get [Symbol.toStringTag](): string {
-		return 'Element';
-	}
-}

package/src/font-face.ts

@@ -1,97 +0,0 @@
-// FontFace implementation for GJS — registers custom TTF fonts in PangoCairo
-// so that Canvas2D fillText uses the correct font family.
-//
-// Flow (Excalibur): XHR(blob) → /tmp/gjsify-blob-N.ttf → createObjectURL →
-//   new FontFace(family, 'url(file:///tmp/gjsify-blob-N.ttf)') → face.load()
-// The file is already on disk when load() is called; we just tell PangoCairo
-// about it via font_map_get_default().add_font_file(path).
-//
-// Node.js: dynamic gi:// import fails gracefully → status='loaded' still set.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/FontFace
-
-export class FontFace {
-    readonly family: string;
-    readonly source: string;
-    status: 'unloaded' | 'loading' | 'loaded' | 'error' = 'unloaded';
-    loaded: Promise<FontFace>;
-    display = 'auto';
-    style = 'normal';
-    weight = 'normal';
-    stretch = 'normal';
-    unicodeRange = 'U+0-10FFFF';
-    variant = 'normal';
-    featureSettings = 'normal';
-
-    constructor(family: string, source: string | ArrayBuffer | ArrayBufferView, _descriptors?: Record<string, string>) {
-        this.family = family;
-        this.source = typeof source === 'string' ? source : '[binary]';
-        this.loaded = Promise.resolve(this);
-    }
-
-    // Parses: url(file:///path), url("file:///path"), url('file:///path')
-    private _extractFilePath(): string | null {
-        const m = this.source.match(/url\s*\(\s*["']?(file:\/\/\/[^"')]+)["']?\s*\)/i);
-        if (!m) return null;
-        // Strip file:// prefix → /path/to/file.ttf
-        return m[1].replace(/^file:\/\//, '');
-    }
-
-    async load(): Promise<FontFace> {
-        this.status = 'loading';
-        const filePath = this._extractFilePath();
-        if (filePath) {
-            try {
-                // gi:// only available in GJS — fails gracefully on Node.js
-                // @ts-ignore
-                const { default: PangoCairo } = await import('gi://PangoCairo?version=1.0');
-                PangoCairo.font_map_get_default().add_font_file(filePath);
-            } catch {
-                // Not in GJS, or font file not found — fall through to loaded
-                // Canvas fillText will use system font fallback (acceptable)
-            }
-        }
-        this.status = 'loaded';
-        return this;
-    }
-}
-
-/**
- * FontFaceSet — tracks loaded FontFace objects and exposes them to consumers.
- *
- * Intentionally does NOT extend EventTarget. The dom-elements /register module
- * runs before dom-events/register in the inject order, so EventTarget may not
- * yet exist when this class is defined at module load time. All event methods
- * are provided as no-ops; consumers that call addEventListener('loadingdone')
- * etc. will silently receive nothing.
- */
-export class FontFaceSet {
-    status: 'loading' | 'loaded' = 'loaded';
-    ready: Promise<FontFaceSet> = Promise.resolve(this);
-
-    private _faces = new Set<FontFace>();
-
-    addEventListener(_type: string, _listener: unknown): void {}
-    removeEventListener(_type: string, _listener: unknown): void {}
-    dispatchEvent(_event: unknown): boolean { return true; }
-
-    add(face: FontFace): FontFaceSet {
-        this._faces.add(face);
-        return this;
-    }
-    delete(face: FontFace): boolean { return this._faces.delete(face); }
-    clear(): void { this._faces.clear(); }
-    has(face: FontFace): boolean { return this._faces.has(face); }
-    check(_font: string, _text?: string): boolean { return false; }
-    load(_font: string, _text?: string): Promise<FontFace[]> { return Promise.resolve([]); }
-    forEach(callback: (value: FontFace, key: FontFace, parent: FontFaceSet) => void): void {
-        this._faces.forEach(f => callback(f, f, this));
-    }
-    values(): IterableIterator<FontFace> { return this._faces.values(); }
-    keys(): IterableIterator<FontFace> { return this._faces.values(); }
-    entries(): IterableIterator<[FontFace, FontFace]> {
-        const faces = Array.from(this._faces);
-        return faces.map(f => [f, f] as [FontFace, FontFace])[Symbol.iterator]() as IterableIterator<[FontFace, FontFace]>;
-    }
-    [Symbol.iterator](): Iterator<FontFace> { return this._faces[Symbol.iterator](); }
-    get size(): number { return this._faces.size; }
-}

package/src/gst-time.ts

@@ -1,26 +0,0 @@
-// Conversions between seconds (Web video API) and GStreamer's nanosecond
-// `BigInt` timebase (used by `Gst.Format.TIME` throughout GStreamer). Lives
-// in @gjsify/dom-elements so HTMLVideoElement/HTMLAudioElement can use it
-// directly; @gjsify/video re-exports these for consumers of the bridge
-// package. Kept as pure number math — no runtime Gst import required.
-
-const NS_PER_SECOND = 1_000_000_000;
-
-/**
- * Convert seconds (number) to GStreamer nanoseconds (bigint).
- * Rounds to the nearest nanosecond to avoid floating-point drift over
- * repeated back-and-forth conversions.
- */
-export function secondsToGstTime(seconds: number): bigint {
-    return BigInt(Math.round(seconds * NS_PER_SECOND));
-}
-
-/**
- * Convert GStreamer nanoseconds to seconds (number).
- * Accepts both `bigint` (the runtime type from GStreamer queries) and `number`
- * (what the `@girs/gst-1.0` typings currently declare — a known GIR bug for
- * `gint64` return values in `query_position` / `query_duration`).
- */
-export function gstTimeToSeconds(nanoseconds: bigint | number): number {
-    return Number(nanoseconds) / NS_PER_SECOND;
-}

package/src/html-canvas-element.ts

@@ -1,90 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/nodes/html-canvas-element/HTMLCanvasElement.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Simplified for gjsify — stubs only, no window reference, no MediaStream/OffscreenCanvas deps.
-//   getContext() overridden in @gjsify/webgl with GTK.GLArea-backed implementation.
-
-import { HTMLElement } from './html-element.js';
-
-/**
- * HTMLCanvasElement base class.
- *
- * This is a DOM-spec-compliant stub. The GTK-backed implementation lives in
- * `@gjsify/webgl` and extends this class, overriding `getContext()`.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
- */
-export class HTMLCanvasElement extends HTMLElement {
-    // Context factory registry — packages register their context types here.
-    // e.g. @gjsify/canvas2d registers '2d', @gjsify/webgl registers 'webgl'.
-    private static _contextFactories = new Map<string, (canvas: HTMLCanvasElement, options?: any) => any>();
-
-    /**
-     * Register a rendering context factory for a given context type.
-     * Called by packages like @gjsify/canvas2d and @gjsify/webgl to plug in their implementations.
-     */
-    static registerContextFactory(contextId: string, factory: (canvas: HTMLCanvasElement, options?: any) => any): void {
-        HTMLCanvasElement._contextFactories.set(contextId, factory);
-    }
-
-    // WebGL context event handlers
-    oncontextlost: ((ev: Event) => any) | null = null;
-    oncontextrestored: ((ev: Event) => any) | null = null;
-    onwebglcontextcreationerror: ((ev: Event) => any) | null = null;
-    onwebglcontextlost: ((ev: Event) => any) | null = null;
-    onwebglcontextrestored: ((ev: Event) => any) | null = null;
-
-    /** Returns the width of the canvas element. Default: 300. */
-    get width(): number {
-        const w = this.getAttribute('width');
-        return w !== null ? Number(w) : 300;
-    }
-
-    set width(value: number) {
-        this.setAttribute('width', String(value));
-    }
-
-    /** Returns the height of the canvas element. Default: 150. */
-    get height(): number {
-        const h = this.getAttribute('height');
-        return h !== null ? Number(h) : 150;
-    }
-
-    set height(value: number) {
-        this.setAttribute('height', String(value));
-    }
-
-    /**
-     * Returns a rendering context.
-     * Checks the static context factory registry for a matching factory.
-     * Subclasses (e.g. @gjsify/webgl) may override and fall through via super.getContext().
-     */
-    getContext(contextId: string, options?: any): any {
-        const factory = HTMLCanvasElement._contextFactories.get(contextId);
-        if (factory) return factory(this, options);
-        return null;
-    }
-
-    /** Returns a data URL representing the canvas image. Delegates to the active 2D context if available. */
-    toDataURL(type?: string, quality?: any): string {
-        const ctx = this.getContext('2d') as any;
-        if (ctx && typeof ctx._toDataURL === 'function') return ctx._toDataURL(type, quality);
-        return '';
-    }
-
-    /** Converts the canvas to a Blob and passes it to the callback. Delegates to the active 2D context if available. */
-    toBlob(callback: ((blob: Blob | null) => void), type?: string, quality?: any): void {
-        const dataUrl = this.toDataURL(type, quality);
-        if (!dataUrl) { callback(null); return; }
-        const [header, b64] = dataUrl.split(',');
-        const mime = header.split(':')[1].split(';')[0];
-        const bytes = atob(b64);
-        const arr = new Uint8Array(bytes.length);
-        for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
-        callback(new Blob([arr], { type: mime }));
-    }
-
-    /** Returns a MediaStream capturing the canvas. Stub — returns empty object. */
-    captureStream(_frameRequestRate?: number): any {
-        return {};
-    }
-}