@gjsify/dom-elements 0.1.0

package/lib/esm/index.js

@@ -0,0 +1,112 @@
+import { Attr } from "./attr.js";
+import { NamedNodeMap } from "./named-node-map.js";
+import { NodeList } from "./node-list.js";
+import { Node } from "./node.js";
+import { CharacterData } from "./character-data.js";
+import { Text } from "./text.js";
+import { Comment } from "./comment.js";
+import { DocumentFragment } from "./document-fragment.js";
+import { DOMTokenList } from "./dom-token-list.js";
+import { Element } from "./element.js";
+import { HTMLElement, CSSStyleDeclaration } from "./html-element.js";
+import { HTMLCanvasElement } from "./html-canvas-element.js";
+import { HTMLImageElement } from "./html-image-element.js";
+import { Image } from "./image.js";
+import { Document, document } from "./document.js";
+import { MutationObserver } from "./mutation-observer.js";
+import { ResizeObserver } from "./resize-observer.js";
+import { IntersectionObserver } from "./intersection-observer.js";
+import { NodeType } from "./node-type.js";
+import { NamespaceURI } from "./namespace-uri.js";
+import * as PropertySymbol from "./property-symbol.js";
+import { Text as Text2 } from "./text.js";
+import { Comment as Comment2 } from "./comment.js";
+import { DocumentFragment as DocumentFragment2 } from "./document-fragment.js";
+import { DOMTokenList as DOMTokenList2 } from "./dom-token-list.js";
+import { HTMLCanvasElement as HTMLCanvasElement2 } from "./html-canvas-element.js";
+import { HTMLImageElement as HTMLImageElement2 } from "./html-image-element.js";
+import { Image as Image2 } from "./image.js";
+import { document as document2 } from "./document.js";
+import { MutationObserver as MutationObserver2 } from "./mutation-observer.js";
+import { ResizeObserver as ResizeObserver2 } from "./resize-observer.js";
+import { IntersectionObserver as IntersectionObserver2 } from "./intersection-observer.js";
+Object.defineProperty(globalThis, "Text", {
+  value: Text2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "Comment", {
+  value: Comment2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "DocumentFragment", {
+  value: DocumentFragment2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "DOMTokenList", {
+  value: DOMTokenList2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "HTMLCanvasElement", {
+  value: HTMLCanvasElement2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "HTMLImageElement", {
+  value: HTMLImageElement2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "Image", {
+  value: Image2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "document", {
+  value: document2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "MutationObserver", {
+  value: MutationObserver2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "ResizeObserver", {
+  value: ResizeObserver2,
+  writable: true,
+  configurable: true
+});
+Object.defineProperty(globalThis, "IntersectionObserver", {
+  value: IntersectionObserver2,
+  writable: true,
+  configurable: true
+});
+export {
+  Attr,
+  CSSStyleDeclaration,
+  CharacterData,
+  Comment,
+  DOMTokenList,
+  Document,
+  DocumentFragment,
+  Element,
+  HTMLCanvasElement,
+  HTMLElement,
+  HTMLImageElement,
+  Image,
+  IntersectionObserver,
+  MutationObserver,
+  NamedNodeMap,
+  NamespaceURI,
+  Node,
+  NodeList,
+  NodeType,
+  PropertySymbol,
+  ResizeObserver,
+  Text,
+  document
+};

package/lib/esm/intersection-observer.js

@@ -0,0 +1,19 @@
+class IntersectionObserver {
+  constructor(_callback, options) {
+    this.root = options?.root ?? null;
+    this.rootMargin = options?.rootMargin ?? "0px";
+    this.thresholds = Array.isArray(options?.threshold) ? options.threshold : [options?.threshold ?? 0];
+  }
+  observe(_target) {
+  }
+  unobserve(_target) {
+  }
+  disconnect() {
+  }
+  takeRecords() {
+    return [];
+  }
+}
+export {
+  IntersectionObserver
+};

package/lib/esm/mutation-observer.js

@@ -0,0 +1,14 @@
+class MutationObserver {
+  constructor(_callback) {
+  }
+  observe(_target, _options) {
+  }
+  disconnect() {
+  }
+  takeRecords() {
+    return [];
+  }
+}
+export {
+  MutationObserver
+};

package/lib/esm/named-node-map.js

@@ -0,0 +1,124 @@
+import { Attr } from "./attr.js";
+import { NamespaceURI } from "./namespace-uri.js";
+class NamedNodeMap {
+  constructor(ownerElement) {
+    this._items = [];
+    this._ownerElement = ownerElement;
+  }
+  get length() {
+    return this._items.length;
+  }
+  item(index) {
+    return this._items[index] ?? null;
+  }
+  getNamedItem(qualifiedName) {
+    return this._findByName(qualifiedName);
+  }
+  getNamedItemNS(namespace, localName) {
+    const ns = namespace === "" ? null : namespace;
+    for (const attr of this._items) {
+      if (attr.namespaceURI === ns && attr.localName === localName) {
+        return attr;
+      }
+    }
+    return null;
+  }
+  setNamedItem(attr) {
+    return this._setAttr(attr);
+  }
+  setNamedItemNS(attr) {
+    return this._setAttr(attr);
+  }
+  removeNamedItem(qualifiedName) {
+    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, localName) {
+    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]() {
+    return this._items[Symbol.iterator]();
+  }
+  get [Symbol.toStringTag]() {
+    return "NamedNodeMap";
+  }
+  // -- Internal helpers --
+  /** @internal Add or replace an attribute by name. */
+  _setNamedItem(name, value, namespaceURI = null, prefix = null) {
+    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) {
+    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, localName) {
+    const existing = this.getNamedItemNS(namespace, localName);
+    if (existing) {
+      this._removeAttr(existing);
+      return true;
+    }
+    return false;
+  }
+  _findByName(qualifiedName) {
+    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;
+  }
+  _setAttr(attr) {
+    let existing = 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;
+  }
+  _removeAttr(attr) {
+    const idx = this._items.indexOf(attr);
+    if (idx !== -1) {
+      this._items.splice(idx, 1);
+    }
+  }
+}
+export {
+  NamedNodeMap
+};

package/lib/esm/namespace-uri.js

@@ -0,0 +1,10 @@
+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/"
+};
+export {
+  NamespaceURI
+};

package/lib/esm/node-list.js

@@ -0,0 +1,34 @@
+class NodeList {
+  constructor(items) {
+    this._items = items;
+  }
+  get length() {
+    return this._items.length;
+  }
+  item(index) {
+    return this._items[index] ?? null;
+  }
+  forEach(callback, thisArg) {
+    for (let i = 0; i < this._items.length; i++) {
+      callback.call(thisArg, this._items[i], i, this);
+    }
+  }
+  entries() {
+    return this._items.entries();
+  }
+  keys() {
+    return this._items.keys();
+  }
+  values() {
+    return this._items.values();
+  }
+  [Symbol.iterator]() {
+    return this._items[Symbol.iterator]();
+  }
+  get [Symbol.toStringTag]() {
+    return "NodeList";
+  }
+}
+export {
+  NodeList
+};

package/lib/esm/node-type.js

@@ -0,0 +1,14 @@
+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
+};
+export {
+  NodeType
+};

package/lib/esm/node.js

@@ -0,0 +1,227 @@
+var _a, _b, _c, _d, _e;
+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";
+class Node extends EventTarget {
+  constructor() {
+    super(...arguments);
+    // Instance node type constants (mirror static for spec compliance)
+    this.ELEMENT_NODE = NodeType.ELEMENT_NODE;
+    this.ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE;
+    this.TEXT_NODE = NodeType.TEXT_NODE;
+    this.CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE;
+    this.PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE;
+    this.COMMENT_NODE = NodeType.COMMENT_NODE;
+    this.DOCUMENT_NODE = NodeType.DOCUMENT_NODE;
+    this.DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE;
+    this.DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE;
+    // Internal state
+    this[_e] = NodeType.ELEMENT_NODE;
+    this[_d] = null;
+    this[_c] = [];
+    this[_b] = [];
+    this[_a] = false;
+  }
+  static {
+    // Static node type constants
+    this.ELEMENT_NODE = NodeType.ELEMENT_NODE;
+  }
+  static {
+    this.ATTRIBUTE_NODE = NodeType.ATTRIBUTE_NODE;
+  }
+  static {
+    this.TEXT_NODE = NodeType.TEXT_NODE;
+  }
+  static {
+    this.CDATA_SECTION_NODE = NodeType.CDATA_SECTION_NODE;
+  }
+  static {
+    this.PROCESSING_INSTRUCTION_NODE = NodeType.PROCESSING_INSTRUCTION_NODE;
+  }
+  static {
+    this.COMMENT_NODE = NodeType.COMMENT_NODE;
+  }
+  static {
+    this.DOCUMENT_NODE = NodeType.DOCUMENT_NODE;
+  }
+  static {
+    this.DOCUMENT_TYPE_NODE = NodeType.DOCUMENT_TYPE_NODE;
+  }
+  static {
+    this.DOCUMENT_FRAGMENT_NODE = NodeType.DOCUMENT_FRAGMENT_NODE;
+  }
+  static {
+    // DOCUMENT_POSITION constants
+    this.DOCUMENT_POSITION_DISCONNECTED = 1;
+  }
+  static {
+    this.DOCUMENT_POSITION_PRECEDING = 2;
+  }
+  static {
+    this.DOCUMENT_POSITION_FOLLOWING = 4;
+  }
+  static {
+    this.DOCUMENT_POSITION_CONTAINS = 8;
+  }
+  static {
+    this.DOCUMENT_POSITION_CONTAINED_BY = 16;
+  }
+  static {
+    this.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32;
+  }
+  get nodeType() {
+    return this[PS.nodeType];
+  }
+  get nodeName() {
+    return "";
+  }
+  get parentNode() {
+    return this[PS.parentNode];
+  }
+  get parentElement() {
+    const parent = this[PS.parentNode];
+    return parent && parent[PS.nodeType] === NodeType.ELEMENT_NODE ? parent : null;
+  }
+  get childNodes() {
+    return new NodeList(this[PS.childNodesList]);
+  }
+  get firstChild() {
+    return this[PS.childNodesList][0] ?? null;
+  }
+  get lastChild() {
+    const children = this[PS.childNodesList];
+    return children[children.length - 1] ?? null;
+  }
+  get previousSibling() {
+    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() {
+    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() {
+    return null;
+  }
+  set textContent(_value) {
+  }
+  get nodeValue() {
+    return null;
+  }
+  set nodeValue(_value) {
+  }
+  get ownerDocument() {
+    return null;
+  }
+  get isConnected() {
+    return this[PS.isConnected];
+  }
+  hasChildNodes() {
+    return this[PS.childNodesList].length > 0;
+  }
+  contains(other) {
+    if (other === null) return false;
+    if (other === this) return true;
+    let node = other;
+    while (node) {
+      if (node === this) return true;
+      node = node[PS.parentNode];
+    }
+    return false;
+  }
+  getRootNode() {
+    let node = this;
+    while (node[PS.parentNode]) {
+      node = node[PS.parentNode];
+    }
+    return node;
+  }
+  appendChild(node) {
+    if (node[PS.parentNode]) {
+      node[PS.parentNode].removeChild(node);
+    }
+    node[PS.parentNode] = this;
+    this[PS.childNodesList].push(node);
+    if (node[PS.nodeType] === NodeType.ELEMENT_NODE) {
+      this[PS.elementChildren].push(node);
+    }
+    return node;
+  }
+  removeChild(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;
+    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, referenceNode) {
+    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"
+      );
+    }
+    if (newNode[PS.parentNode]) {
+      newNode[PS.parentNode].removeChild(newNode);
+    }
+    newNode[PS.parentNode] = this;
+    children.splice(refIdx, 0, newNode);
+    if (newNode[PS.nodeType] === NodeType.ELEMENT_NODE) {
+      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, oldChild) {
+    this.insertBefore(newChild, oldChild);
+    this.removeChild(oldChild);
+    return oldChild;
+  }
+  cloneNode(deep = false) {
+    const clone = new this.constructor();
+    clone[PS.nodeType] = this[PS.nodeType];
+    if (deep) {
+      for (const child of this[PS.childNodesList]) {
+        clone.appendChild(child.cloneNode(true));
+      }
+    }
+    return clone;
+  }
+  get [(_e = PS.nodeType, _d = PS.parentNode, _c = PS.childNodesList, _b = PS.elementChildren, _a = PS.isConnected, Symbol.toStringTag)]() {
+    return "Node";
+  }
+}
+export {
+  Node
+};

package/lib/esm/property-symbol.js

@@ -0,0 +1,30 @@
+const nodeType = /* @__PURE__ */ Symbol("nodeType");
+const parentNode = /* @__PURE__ */ Symbol("parentNode");
+const childNodesList = /* @__PURE__ */ Symbol("childNodesList");
+const elementChildren = /* @__PURE__ */ Symbol("elementChildren");
+const isConnected = /* @__PURE__ */ Symbol("isConnected");
+const tagName = /* @__PURE__ */ Symbol("tagName");
+const localName = /* @__PURE__ */ Symbol("localName");
+const namespaceURI = /* @__PURE__ */ Symbol("namespaceURI");
+const prefix = /* @__PURE__ */ Symbol("prefix");
+const attributes = /* @__PURE__ */ Symbol("attributes");
+const propertyEventListeners = /* @__PURE__ */ Symbol("propertyEventListeners");
+const name = /* @__PURE__ */ Symbol("name");
+const value = /* @__PURE__ */ Symbol("value");
+const ownerElement = /* @__PURE__ */ Symbol("ownerElement");
+export {
+  attributes,
+  childNodesList,
+  elementChildren,
+  isConnected,
+  localName,
+  name,
+  namespaceURI,
+  nodeType,
+  ownerElement,
+  parentNode,
+  prefix,
+  propertyEventListeners,
+  tagName,
+  value
+};

package/lib/esm/resize-observer.js

@@ -0,0 +1,13 @@
+class ResizeObserver {
+  constructor(_callback) {
+  }
+  observe(_target) {
+  }
+  unobserve(_target) {
+  }
+  disconnect() {
+  }
+}
+export {
+  ResizeObserver
+};

package/lib/esm/text.js

@@ -0,0 +1,51 @@
+import { CharacterData } from "./character-data.js";
+import { NodeType } from "./node-type.js";
+import * as PS from "./property-symbol.js";
+class Text extends CharacterData {
+  constructor(data = "") {
+    super(data);
+    this[PS.nodeType] = NodeType.TEXT_NODE;
+  }
+  get nodeName() {
+    return "#text";
+  }
+  /**
+   * Returns the combined text of this node and all adjacent Text siblings.
+   */
+  get wholeText() {
+    let text = this.data;
+    let prev = this.previousSibling;
+    while (prev && prev instanceof Text) {
+      text = prev.data + text;
+      prev = prev.previousSibling;
+    }
+    let next = this.nextSibling;
+    while (next && next instanceof Text) {
+      text += next.data;
+      next = next.nextSibling;
+    }
+    return text;
+  }
+  /**
+   * Splits the text node at the given offset, returning the new Text node
+   * containing the text after the offset.
+   */
+  splitText(offset) {
+    const newData = this.data.substring(offset);
+    this.data = this.data.substring(0, offset);
+    const newNode = new Text(newData);
+    if (this.parentNode) {
+      this.parentNode.insertBefore(newNode, this.nextSibling);
+    }
+    return newNode;
+  }
+  cloneNode(_deep = false) {
+    return new Text(this.data);
+  }
+  get [Symbol.toStringTag]() {
+    return "Text";
+  }
+}
+export {
+  Text
+};

package/lib/esm/types/index.js

@@ -0,0 +1,3 @@
+export * from "./i-html-image-element.js";
+export * from "./image-data.js";
+export * from "./predefined-color-space.js";

package/lib/types/attr.d.ts

@@ -0,0 +1,22 @@
+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 declare class Attr {
+    [PS.name]: string;
+    [PS.value]: string;
+    [PS.ownerElement]: Element | null;
+    readonly localName: string;
+    readonly namespaceURI: string | null;
+    readonly prefix: string | null;
+    readonly specified = true;
+    constructor(name: string, value: string, namespaceURI?: string | null, prefix?: string | null, ownerElement?: Element | null);
+    get name(): string;
+    get value(): string;
+    set value(value: string);
+    get ownerElement(): Element | null;
+    get [Symbol.toStringTag](): string;
+}