Work in progress

.gitignore

@@ -4,8 +4,14 @@ node_modules/
 types/
 cjs/*
 !cjs/package.json
-index.js
+esm/init.js
+init.js
 keyed.js
+!esm/keyed.js
+!esm/dom/keyed.js
+index.js
+!esm/index.js
+!esm/dom/index.js
 node.js
-init.js
-esm/init.js
+!esm/node.js
+!esm/dom/node.js

esm/dom/array.js

@@ -0,0 +1,20 @@
+import { DOCUMENT_FRAGMENT_NODE } from 'domconstants/constants';
+
+import { nodeType, childNodes } from './symbols.js';
+
+export const push = (array, nodes) => {
+  array.push(...nodes.flatMap(withoutFragments));
+};
+
+export const splice = (array, start, drop, nodes) => {
+  array.splice(start, drop, ...nodes.flatMap(withoutFragments));
+};
+
+export const unshift = (array, nodes) => {
+  array.unshift(...nodes.flatMap(withoutFragments));
+};
+
+const withoutFragments = node => (
+  node[nodeType] === DOCUMENT_FRAGMENT_NODE ?
+    node[childNodes].splice(0) : node
+);

esm/dom/attribute.js

@@ -0,0 +1,44 @@
+import { ATTRIBUTE_NODE } from 'domconstants/constants';
+
+import { escape } from 'html-escaper';
+
+import Node from './node.js';
+
+import { name, value, ownerElement, ownerDocument } from './symbols.js';
+
+export default class Attribute extends Node {
+  constructor(nodeName, nodeValue = '', owner = null) {
+    super(ATTRIBUTE_NODE, owner?.[ownerDocument]);
+    this[ownerElement] = owner;
+    this[name] = nodeName;
+    this.value = nodeValue;
+  }
+
+  get name() {
+    return this[name];
+  }
+
+  get localName() {
+    return this[name];
+  }
+
+  get nodeName() {
+    return this[name];
+  }
+
+  get value() {
+    return this[value];
+  }
+  set value(any) {
+    this[value] = String(any);
+  }
+
+  get nodeValue() {
+    return this[value];
+  }
+
+  toString() {
+    const { [name]: key, [value]: val } = this;
+    return val === '' ? key : `${key}="${escape(val)}"`;
+  }
+}

esm/dom/character-data.js

@@ -0,0 +1,28 @@
+import Node from './node.js';
+import { nodeName, value } from './symbols.js';
+
+export default class CharacterData extends Node {
+  constructor(type, name, data, owner) {
+    super(type, owner)[nodeName] = name;
+    this.data = data;
+  }
+
+  get data() {
+    return this[value];
+  }
+  set data(any) {
+    this[value] = String(any);
+  }
+
+  get nodeName() {
+    return this[nodeName];
+  }
+
+  get textContent() {
+    return this.data;
+  }
+
+  set textContent(data) {
+    this.data = data;
+  }
+}

esm/dom/comment.js

@@ -0,0 +1,14 @@
+import { COMMENT_NODE } from 'domconstants/constants';
+
+import CharacterData from './character-data.js';
+import { value } from './symbols.js';
+
+export default class Comment extends CharacterData {
+  constructor(data = '', owner = null) {
+    super(COMMENT_NODE, '#comment', data, owner);
+  }
+
+  toString() {
+    return `<!--${this[value]}-->`;
+  }
+}

esm/dom/document-type.js

@@ -0,0 +1,22 @@
+import { DOCUMENT_TYPE_NODE } from 'domconstants/constants';
+
+import Node from './node.js';
+import { nodeName } from './symbols.js';
+
+export default class DocumentType extends Node {
+  constructor(name, owner = null) {
+    super(DOCUMENT_TYPE_NODE, owner)[nodeName] = name;
+  }
+
+  get nodeName() {
+    return this[nodeName];
+  }
+
+  get name() {
+    return this[nodeName];
+  }
+
+  toString() {
+    return `<!DOCTYPE ${this[nodeName]}>`;
+  }
+}

esm/dom/document.fragment.js

@@ -0,0 +1,15 @@
+import { DOCUMENT_FRAGMENT_NODE } from 'domconstants/constants';
+
+import Parent from './parent.js';
+
+import { childNodes, nodeName } from './symbols.js';
+
+export default class DocumentFragment extends Parent {
+  constructor(owner = null) {
+    super(DOCUMENT_FRAGMENT_NODE, owner)[nodeName] = '#document-fragment';
+  }
+
+  toString() {
+    return this[childNodes].join('');
+  }
+}

esm/dom/document.js

@@ -0,0 +1,77 @@
+import { DOCUMENT_NODE } from 'domconstants/constants';
+
+import { setParentNode } from './utils.js';
+
+import { childNodes, nodeName, ownerDocument } from './symbols.js';
+
+import Attribute from './attribute.js';
+import Comment from './text.js';
+import DocumentFragment from './document.fragment.js';
+import DocumentType from './document-type.js';
+import Element from './element.js';
+import Parent from './parent.js';
+import Text from './text.js';
+
+const doctype = Symbol();
+const documentElement = Symbol();
+const head = Symbol();
+const body = Symbol();
+
+export default class Document extends Parent {
+  constructor(type = 'html') {
+    super(DOCUMENT_NODE, null)[nodeName] = '#document';
+    this[doctype] = setParentNode(new DocumentType(type), this);
+    this[documentElement] = setParentNode(new Element('html', this), this);
+    this[head] = setParentNode(new Element('head', this), this[documentElement]);
+    this[body] = setParentNode(new Element('body', this), this[documentElement]);
+    this[childNodes] = type ?
+      [this[doctype], this[documentElement]] :
+      [this[documentElement]]
+    ;
+    this[documentElement][childNodes] = [this[head], this[body]];
+  }
+
+  get doctype() {
+    return this[doctype];
+  }
+
+  get documentElement() {
+    return this[documentElement];
+  }
+
+  get head() {
+    return this[head];
+  }
+
+  get body() {
+    return this[body];
+  }
+
+  createAttribute(name) {
+    const attribute = new Attribute(name);
+    attribute[ownerDocument] = this;
+    return attribute;
+  }
+
+  createComment(data) {
+    return new Comment(data, this);
+  }
+
+  createDocumentFragment() {
+    return new DocumentFragment(this);
+  }
+
+  createElement(name, options = null) {
+    const element = new Element(name, this);
+    if (options?.is) element.setAttribute('is', options.is);
+    return element;
+  }
+
+  createTextNode(data) {
+    return new Text(data, this);
+  }
+
+  toString() {
+    return this[childNodes].join('');
+  }
+}