@gjsify/dom-elements 0.1.0

package/README.md

@@ -0,0 +1,31 @@
+# @gjsify/dom-elements
+
+GJS implementation of DOM elements including Node, Element, HTMLElement, HTMLCanvasElement, HTMLImageElement, Document, and more. Backed by GdkPixbuf.
+
+Part of the [gjsify](https://github.com/gjsify/gjsify) project — Node.js and Web APIs for GJS (GNOME JavaScript).
+
+## Installation
+
+```bash
+npm install @gjsify/dom-elements
+# or
+yarn add @gjsify/dom-elements
+```
+
+## Usage
+
+```typescript
+import '@gjsify/dom-elements';
+
+// Registers globalThis.document, globalThis.Image, globalThis.HTMLCanvasElement
+const img = new Image();
+img.src = 'path/to/image.png';
+
+const canvas = document.createElement('canvas');
+canvas.width = 800;
+canvas.height = 600;
+```
+
+## License
+
+MIT

package/lib/esm/attr.js

@@ -0,0 +1,31 @@
+import * as PS from "./property-symbol.js";
+class Attr {
+  constructor(name, value, namespaceURI = null, prefix = null, ownerElement = null) {
+    this.specified = true;
+    this[PS.name] = name;
+    this[PS.value] = value;
+    this[PS.ownerElement] = ownerElement;
+    this.namespaceURI = namespaceURI;
+    this.prefix = prefix;
+    const colonIndex = name.indexOf(":");
+    this.localName = colonIndex !== -1 ? name.slice(colonIndex + 1) : name;
+  }
+  get name() {
+    return this[PS.name];
+  }
+  get value() {
+    return this[PS.value];
+  }
+  set value(value) {
+    this[PS.value] = value;
+  }
+  get ownerElement() {
+    return this[PS.ownerElement];
+  }
+  get [(PS.name, PS.value, PS.ownerElement, Symbol.toStringTag)]() {
+    return "Attr";
+  }
+}
+export {
+  Attr
+};

package/lib/esm/character-data.js

@@ -0,0 +1,56 @@
+import { Node } from "./node.js";
+import { NodeType } from "./node-type.js";
+import * as PS from "./property-symbol.js";
+class CharacterData extends Node {
+  constructor(data = "") {
+    super();
+    this[PS.nodeType] = NodeType.TEXT_NODE;
+    this._data = data;
+  }
+  get data() {
+    return this._data;
+  }
+  set data(value) {
+    this._data = value;
+  }
+  get textContent() {
+    return this._data;
+  }
+  set textContent(value) {
+    this._data = value;
+  }
+  get nodeValue() {
+    return this._data;
+  }
+  set nodeValue(value) {
+    this._data = value;
+  }
+  get length() {
+    return this._data.length;
+  }
+  appendData(data) {
+    this._data += data;
+  }
+  deleteData(offset, count) {
+    this._data = this._data.substring(0, offset) + this._data.substring(offset + count);
+  }
+  insertData(offset, data) {
+    this._data = this._data.substring(0, offset) + data + this._data.substring(offset);
+  }
+  replaceData(offset, count, data) {
+    this._data = this._data.substring(0, offset) + data + this._data.substring(offset + count);
+  }
+  substringData(offset, count) {
+    return this._data.substring(offset, offset + count);
+  }
+  cloneNode(_deep = false) {
+    const clone = new this.constructor(this._data);
+    return clone;
+  }
+  get [Symbol.toStringTag]() {
+    return "CharacterData";
+  }
+}
+export {
+  CharacterData
+};

package/lib/esm/comment.js

@@ -0,0 +1,21 @@
+import { CharacterData } from "./character-data.js";
+import { NodeType } from "./node-type.js";
+import * as PS from "./property-symbol.js";
+class Comment extends CharacterData {
+  constructor(data = "") {
+    super(data);
+    this[PS.nodeType] = NodeType.COMMENT_NODE;
+  }
+  get nodeName() {
+    return "#comment";
+  }
+  cloneNode(_deep = false) {
+    return new Comment(this.data);
+  }
+  get [Symbol.toStringTag]() {
+    return "Comment";
+  }
+}
+export {
+  Comment
+};

package/lib/esm/document-fragment.js

@@ -0,0 +1,112 @@
+import { Node } from "./node.js";
+import { Text } from "./text.js";
+import { NodeType } from "./node-type.js";
+import * as PS from "./property-symbol.js";
+class DocumentFragment extends Node {
+  constructor() {
+    super();
+    this[PS.nodeType] = NodeType.DOCUMENT_FRAGMENT_NODE;
+  }
+  get nodeName() {
+    return "#document-fragment";
+  }
+  /** Element children only (excludes text/comment nodes) */
+  get children() {
+    return this[PS.elementChildren];
+  }
+  get childElementCount() {
+    return this[PS.elementChildren].length;
+  }
+  get firstElementChild() {
+    return this[PS.elementChildren][0] ?? null;
+  }
+  get lastElementChild() {
+    const children = this[PS.elementChildren];
+    return children[children.length - 1] ?? null;
+  }
+  get textContent() {
+    let text = "";
+    for (const child of this.childNodes) {
+      if (child.textContent !== null) {
+        text += child.textContent;
+      }
+    }
+    return text;
+  }
+  set textContent(value) {
+    while (this.firstChild) {
+      this.removeChild(this.firstChild);
+    }
+    if (value) {
+      this.appendChild(new Text(value));
+    }
+  }
+  /**
+   * Append nodes or strings to this fragment.
+   */
+  append(...nodes) {
+    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) {
+    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) {
+    while (this.firstChild) {
+      this.removeChild(this.firstChild);
+    }
+    this.append(...nodes);
+  }
+  /**
+   * Find an element by ID in this fragment's children.
+   */
+  getElementById(id) {
+    for (const child of this.children) {
+      if (child.id === id) return child;
+      const found = this._findById(child, id);
+      if (found) return found;
+    }
+    return null;
+  }
+  _findById(element, id) {
+    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) {
+    const clone = new DocumentFragment();
+    if (deep) {
+      for (const child of this.childNodes) {
+        clone.appendChild(child.cloneNode(true));
+      }
+    }
+    return clone;
+  }
+  get [Symbol.toStringTag]() {
+    return "DocumentFragment";
+  }
+}
+export {
+  DocumentFragment
+};

package/lib/esm/document.js

@@ -0,0 +1,83 @@
+import { Node } from "./node.js";
+import { HTMLElement } from "./html-element.js";
+import { HTMLImageElement } from "./html-image-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";
+class Document extends Node {
+  constructor() {
+    super(...arguments);
+    /** Stub body element */
+    this.body = new HTMLElement();
+    /** Stub head element */
+    this.head = new HTMLElement();
+    /** Stub documentElement */
+    this.documentElement = new HTMLElement();
+  }
+  static {
+    /** External packages register element factories here (e.g. @gjsify/iframe registers 'iframe') */
+    this._elementFactories = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 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, factory) {
+    Document._elementFactories.set(tagName.toLowerCase(), factory);
+  }
+  createElementNS(_namespace, tagName) {
+    const tag = tagName.toLowerCase();
+    switch (tag) {
+      case "img":
+        return new HTMLImageElement();
+      case "canvas":
+        return new HTMLCanvasElement();
+      default: {
+        const factory = Document._elementFactories.get(tag);
+        if (factory) return factory();
+        return new HTMLElement();
+      }
+    }
+  }
+  createElement(tagName) {
+    return this.createElementNS("http://www.w3.org/1999/xhtml", tagName);
+  }
+  createTextNode(data) {
+    return new Text(data);
+  }
+  createComment(data) {
+    return new Comment(data);
+  }
+  createDocumentFragment() {
+    return new DocumentFragment();
+  }
+  createEvent(type) {
+    return new Event(type);
+  }
+  /**
+   * Find an element by ID. Searches body's descendants.
+   */
+  getElementById(id) {
+    return this._findById(this.body, id);
+  }
+  _findById(element, id) {
+    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]() {
+    return "Document";
+  }
+}
+const document = new Document();
+export {
+  Document,
+  document
+};

package/lib/esm/dom-token-list.js

@@ -0,0 +1,109 @@
+class DOMTokenList {
+  constructor(ownerElement, attributeName) {
+    this._ownerElement = ownerElement;
+    this._attributeName = attributeName;
+  }
+  _getTokens() {
+    const value = this._ownerElement.getAttribute(this._attributeName);
+    if (!value) return [];
+    return value.split(/\s+/).filter((t) => t.length > 0);
+  }
+  _setTokens(tokens) {
+    const value = tokens.join(" ");
+    if (value) {
+      this._ownerElement.setAttribute(this._attributeName, value);
+    } else {
+      this._ownerElement.removeAttribute(this._attributeName);
+    }
+  }
+  get length() {
+    return this._getTokens().length;
+  }
+  get value() {
+    return this._ownerElement.getAttribute(this._attributeName) ?? "";
+  }
+  set value(val) {
+    if (val) {
+      this._ownerElement.setAttribute(this._attributeName, val);
+    } else {
+      this._ownerElement.removeAttribute(this._attributeName);
+    }
+  }
+  item(index) {
+    const tokens = this._getTokens();
+    return index >= 0 && index < tokens.length ? tokens[index] : null;
+  }
+  contains(token) {
+    return this._getTokens().includes(token);
+  }
+  add(...tokens) {
+    const current = this._getTokens();
+    for (const token of tokens) {
+      if (token && !current.includes(token)) {
+        current.push(token);
+      }
+    }
+    this._setTokens(current);
+  }
+  remove(...tokens) {
+    const current = this._getTokens().filter((t) => !tokens.includes(t));
+    this._setTokens(current);
+  }
+  toggle(token, force) {
+    const has = this.contains(token);
+    if (force !== void 0) {
+      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, newToken) {
+    const tokens = this._getTokens();
+    const idx = tokens.indexOf(token);
+    if (idx === -1) return false;
+    tokens[idx] = newToken;
+    this._setTokens(tokens);
+    return true;
+  }
+  supports(_token) {
+    return true;
+  }
+  forEach(callback) {
+    const tokens = this._getTokens();
+    for (let i = 0; i < tokens.length; i++) {
+      callback(tokens[i], i, this);
+    }
+  }
+  keys() {
+    return this._getTokens().keys();
+  }
+  values() {
+    return this._getTokens().values();
+  }
+  entries() {
+    return this._getTokens().entries();
+  }
+  [Symbol.iterator]() {
+    return this._getTokens().values();
+  }
+  toString() {
+    return this.value;
+  }
+  get [Symbol.toStringTag]() {
+    return "DOMTokenList";
+  }
+}
+export {
+  DOMTokenList
+};

package/lib/esm/element.js

@@ -0,0 +1,237 @@
+var _a, _b, _c, _d, _e, _f;
+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";
+class Element extends Node {
+  constructor() {
+    super();
+    this[_f] = "";
+    this[_e] = "";
+    this[_d] = NamespaceURI.html;
+    this[_c] = null;
+    this[_b] = new NamedNodeMap(this);
+    this[_a] = /* @__PURE__ */ new Map();
+    this[PS.nodeType] = NodeType.ELEMENT_NODE;
+  }
+  get tagName() {
+    return this[PS.tagName];
+  }
+  get localName() {
+    return this[PS.localName];
+  }
+  get namespaceURI() {
+    return this[PS.namespaceURI];
+  }
+  get prefix() {
+    return this[PS.prefix];
+  }
+  get nodeName() {
+    return this[PS.tagName];
+  }
+  get attributes() {
+    return this[PS.attributes];
+  }
+  get id() {
+    return this.getAttribute("id") ?? "";
+  }
+  set id(value) {
+    this.setAttribute("id", value);
+  }
+  get className() {
+    return this.getAttribute("class") ?? "";
+  }
+  set className(value) {
+    this.setAttribute("class", value);
+  }
+  get children() {
+    return this[PS.elementChildren];
+  }
+  get childElementCount() {
+    return this[PS.elementChildren].length;
+  }
+  get firstElementChild() {
+    return this[PS.elementChildren][0] ?? null;
+  }
+  get lastElementChild() {
+    const children = this[PS.elementChildren];
+    return children[children.length - 1] ?? null;
+  }
+  get previousElementSibling() {
+    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] : null;
+  }
+  get nextElementSibling() {
+    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] : null;
+  }
+  get textContent() {
+    let text = "";
+    for (const child of this[PS.childNodesList]) {
+      if (child.textContent !== null) {
+        text += child.textContent;
+      }
+    }
+    return text;
+  }
+  set textContent(_value) {
+    const children = this[PS.childNodesList];
+    while (children.length > 0) {
+      this.removeChild(children[0]);
+    }
+  }
+  // -- Attribute methods --
+  getAttribute(qualifiedName) {
+    const attr = this[PS.attributes].getNamedItem(qualifiedName);
+    return attr ? attr.value : null;
+  }
+  getAttributeNS(namespace, localName) {
+    const attr = this[PS.attributes].getNamedItemNS(namespace, localName);
+    return attr ? attr.value : null;
+  }
+  setAttribute(qualifiedName, value) {
+    this[PS.attributes]._setNamedItem(qualifiedName, String(value));
+  }
+  setAttributeNS(namespace, qualifiedName, value) {
+    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) {
+    this[PS.attributes]._removeNamedItem(qualifiedName);
+  }
+  removeAttributeNS(namespace, localName) {
+    const ns = namespace === "" ? null : namespace;
+    this[PS.attributes]._removeNamedItemNS(ns, localName);
+  }
+  hasAttribute(qualifiedName) {
+    return this[PS.attributes].getNamedItem(qualifiedName) !== null;
+  }
+  hasAttributeNS(namespace, localName) {
+    return this[PS.attributes].getNamedItemNS(namespace, localName) !== null;
+  }
+  getAttributeNode(qualifiedName) {
+    return this[PS.attributes].getNamedItem(qualifiedName);
+  }
+  setAttributeNode(attr) {
+    return this[PS.attributes].setNamedItem(attr);
+  }
+  removeAttributeNode(attr) {
+    const existing = this[PS.attributes].getNamedItem(attr.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, force) {
+    if (force !== void 0) {
+      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() {
+    return this[PS.attributes].length > 0;
+  }
+  // -- Override dispatchEvent to call on* property handlers --
+  dispatchEvent(event) {
+    const result = super.dispatchEvent(event);
+    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) {
+    return null;
+  }
+  querySelectorAll(_selectors) {
+    return [];
+  }
+  matches(_selectors) {
+    return false;
+  }
+  closest(_selectors) {
+    return null;
+  }
+  getElementsByTagName(tagName) {
+    const results = [];
+    const upperTag = tagName.toUpperCase();
+    const walk = (node) => {
+      for (const child of node[PS.childNodesList]) {
+        if (child[PS.nodeType] === NodeType.ELEMENT_NODE) {
+          const el = child;
+          if (tagName === "*" || el[PS.tagName] === upperTag) {
+            results.push(el);
+          }
+          walk(el);
+        }
+      }
+    };
+    walk(this);
+    return results;
+  }
+  getElementsByClassName(className) {
+    const results = [];
+    const targetClasses = className.split(/\s+/).filter(Boolean);
+    const walk = (node) => {
+      for (const child of node[PS.childNodesList]) {
+        if (child[PS.nodeType] === NodeType.ELEMENT_NODE) {
+          const el = child;
+          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) {
+    const clone = super.cloneNode(false);
+    clone[PS.tagName] = this[PS.tagName];
+    clone[PS.localName] = this[PS.localName];
+    clone[PS.namespaceURI] = this[PS.namespaceURI];
+    clone[PS.prefix] = this[PS.prefix];
+    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;
+  }
+  get [(_f = PS.tagName, _e = PS.localName, _d = PS.namespaceURI, _c = PS.prefix, _b = PS.attributes, _a = PS.propertyEventListeners, Symbol.toStringTag)]() {
+    return "Element";
+  }
+}
+export {
+  Element
+};