@remote-dom/polyfill 0.0.1

package/source/ParentNode.ts

@@ -0,0 +1,158 @@
+import {hooks} from './hooks.ts';
+import {
+  CHILD,
+  NEXT,
+  PREV,
+  PARENT,
+  OWNER_DOCUMENT,
+  NodeType,
+} from './constants.ts';
+import type {Node} from './Node.ts';
+import {ChildNode, toNode} from './ChildNode.ts';
+import {NodeList} from './NodeList.ts';
+import {querySelectorAll, querySelector} from './selectors.ts';
+
+export class ParentNode extends ChildNode {
+  readonly childNodes = new NodeList();
+  readonly children = new NodeList();
+
+  appendChild(child: Node) {
+    this.insertInto(child, null);
+  }
+
+  insertBefore(child: Node, ref?: Node | null) {
+    this.insertInto(child, ref || null);
+  }
+
+  append(...nodes: (Node | string)[]) {
+    for (const child of nodes) {
+      if (child == null) continue;
+      this.appendChild(toNode(this, child));
+    }
+  }
+
+  prepend(...nodes: (Node | string)[]) {
+    const before = this.firstChild;
+    for (const child of nodes) {
+      if (child == null) continue;
+      this.insertBefore(toNode(this, child), before);
+    }
+  }
+
+  replaceChildren(...nodes: (Node | string)[]) {
+    let child;
+    while ((child = this.firstChild)) {
+      this.removeChild(child);
+    }
+    this.append(...nodes);
+  }
+
+  removeChild(child: Node) {
+    if (child.parentNode !== this) throw Error(`not a child of this node`);
+    const prev = child[PREV];
+    const next = child[NEXT];
+    if (prev) prev[NEXT] = next;
+    else this[CHILD] = next;
+    if (next) next[PREV] = prev;
+
+    const childNodes = this.childNodes;
+
+    const childNodesIndex = childNodes.indexOf(child);
+
+    childNodes.splice(childNodesIndex, 1);
+
+    if (child.nodeType === 1) {
+      const children = this.children;
+      children.splice(children.indexOf(child), 1);
+    }
+
+    hooks.removeChild?.(this as any, child as any, childNodesIndex);
+  }
+
+  replaceChild(newChild: Node, oldChild: Node) {
+    if (oldChild.parentNode !== this) {
+      throw Error('reference node is not a child of this parent');
+    }
+    const next = oldChild[NEXT];
+    this.removeChild(oldChild);
+    this.insertInto(newChild, next);
+  }
+
+  querySelectorAll(selector: string) {
+    return querySelectorAll(this, selector);
+  }
+
+  querySelector(selector: string) {
+    return querySelector(this, selector);
+  }
+
+  private insertInto(child: Node, before: Node | null) {
+    // append the children of a DocumentFragment:
+    if (child.nodeType === NodeType.DOCUMENT_FRAGMENT_NODE) {
+      let node = child[CHILD];
+      while (node) {
+        const next = node[NEXT];
+        this.insertInto(node, before);
+        node = next;
+      }
+      return;
+    }
+
+    if (child.parentNode !== null) {
+      child.parentNode.removeChild(child);
+    }
+
+    if (before) {
+      if (before.parentNode !== this) {
+        throw Error('reference node is not a child of this parent');
+      }
+      child[NEXT] = before;
+      child[PREV] = before[PREV];
+      if (before[PREV] === null) this[CHILD] = child;
+      before[PREV] = child;
+    } else {
+      child[NEXT] = null;
+      let last = this[CHILD];
+      if (last) {
+        let next;
+        while ((next = last[NEXT])) last = next;
+        last[NEXT] = child;
+        child[PREV] = last;
+      } else {
+        this[CHILD] = child;
+        child[PREV] = null;
+      }
+    }
+
+    const ownerDocument = this[OWNER_DOCUMENT];
+    const isElement = child.nodeType === NodeType.ELEMENT_NODE;
+
+    child[PARENT] = this;
+    child[OWNER_DOCUMENT] = ownerDocument;
+
+    const childNodes = this.childNodes;
+    let insertIndex: number;
+
+    if (before) {
+      insertIndex = childNodes.indexOf(before);
+      childNodes.splice(insertIndex, 0, child);
+
+      if (isElement) {
+        const children = this.children;
+        let ref: Node | null = before;
+        while (ref && ref.nodeType !== 1) ref = ref[NEXT];
+        if (ref) {
+          children.splice(children.indexOf(ref), 0, child);
+        } else {
+          children.push(child);
+        }
+      }
+    } else {
+      insertIndex = childNodes.length;
+      childNodes.push(child);
+      if (isElement) this.children.push(child);
+    }
+
+    hooks.insertChild?.(this as any, child as any, insertIndex);
+  }
+}

package/source/SVGElement.ts

@@ -0,0 +1,16 @@
+import {NS, NamespaceURI} from './constants.ts';
+import {Element} from './Element.ts';
+
+export class SVGElement extends Element {
+  [NS] = NamespaceURI.SVG;
+
+  get ownerSVGElement() {
+    let root: SVGElement | null = null;
+    let parent = this.parentNode;
+    while (parent instanceof SVGElement) {
+      root = parent;
+      parent = parent.parentNode;
+    }
+    return root;
+  }
+}

package/source/Text.ts

@@ -0,0 +1,7 @@
+import {NAME, NodeType} from './constants.ts';
+import {CharacterData} from './CharacterData.ts';
+
+export class Text extends CharacterData {
+  nodeType = NodeType.TEXT_NODE;
+  [NAME] = '#text';
+}

package/source/Window.ts

@@ -0,0 +1,64 @@
+import {Document} from './Document.ts';
+import {Event} from './Event.ts';
+import {EventTarget} from './EventTarget.ts';
+import {CustomEvent} from './CustomEvent.ts';
+import {Node} from './Node.ts';
+import {ParentNode} from './ParentNode.ts';
+import {ChildNode} from './ChildNode.ts';
+import {Element} from './Element.ts';
+import {HTMLElement} from './HTMLElement.ts';
+import {SVGElement} from './SVGElement.ts';
+import {CharacterData} from './CharacterData.ts';
+import {Text} from './Text.ts';
+import {Comment} from './Comment.ts';
+import {DocumentFragment} from './DocumentFragment.ts';
+import {HTMLTemplateElement} from './HTMLTemplateElement.ts';
+import {CustomElementRegistryImplementation} from './CustomElementRegistry.ts';
+import {MutationObserver} from './MutationObserver.ts';
+
+export class Window extends EventTarget {
+  name = '';
+  parent = this;
+  self = this;
+  top = this;
+  document = new Document(this);
+  customElements = new CustomElementRegistryImplementation();
+  location = globalThis.location;
+  navigator = globalThis.navigator;
+  Event = Event;
+  EventTarget = EventTarget;
+  CustomEvent = CustomEvent;
+  Node = Node;
+  ParentNode = ParentNode;
+  ChildNode = ChildNode;
+  DocumentFragment = DocumentFragment;
+  Document = Document;
+  CharacterData = CharacterData;
+  Comment = Comment;
+  Text = Text;
+  Element = Element;
+  HTMLElement = HTMLElement;
+  SVGElement = SVGElement;
+  HTMLTemplateElement = HTMLTemplateElement;
+  MutationObserver = MutationObserver;
+
+  static setGlobal(window: Window) {
+    const properties = Object.getOwnPropertyDescriptors(window);
+
+    delete (properties as any).self;
+
+    Object.defineProperties(globalThis, {
+      ...properties,
+      window: {value: window},
+    });
+
+    if (typeof self === 'undefined') {
+      Object.defineProperty(globalThis, 'self', {value: window});
+    } else {
+      // There can already be a `self`, like when polyfilling the DOM
+      // in a Web Worker. In those cases, just mirror all the `Window`
+      // properties onto `self`, rather than wholly redefining it.
+      Object.defineProperties(self, properties);
+    }
+  }
+}

package/source/constants.ts

@@ -0,0 +1,37 @@
+export const NAME = Symbol('name');
+export const VALUE = Symbol('value');
+export const NS = Symbol('ns');
+export const OWNER_ELEMENT = Symbol('owner');
+export const OWNER_DOCUMENT = Symbol('owner_document');
+export const ATTRIBUTES = Symbol('attributes');
+export const PREV = Symbol('prev');
+export const NEXT = Symbol('next');
+export const CHILD = Symbol('child');
+export const PARENT = Symbol('parent');
+export const DATA = Symbol('data');
+export const USER_PROPERTIES = Symbol('user_properties');
+export const LISTENERS = Symbol('listeners');
+export const IS_TRUSTED = Symbol('isTrusted');
+export const CONTENT = Symbol('content');
+export const SLOT = Symbol('slot');
+
+// @TODO remove explicit values
+export const enum NodeType {
+  NODE = 0,
+  ELEMENT_NODE = 1,
+  ATTRIBUTE_NODE = 2,
+  TEXT_NODE = 3,
+  CDATA_SECTION_NODE = 4,
+  ENTITY_REFERENCE_NODE = 5,
+  ENTITY_NODE = 6,
+  PROCESSING_INSTRUCTION_NODE = 7,
+  COMMENT_NODE = 8,
+  DOCUMENT_NODE = 9,
+  DOCUMENT_TYPE_NODE = 10,
+  DOCUMENT_FRAGMENT_NODE = 11,
+}
+
+export const enum NamespaceURI {
+  XHTML = 'http://www.w3.org/1999/xhtml',
+  SVG = 'http://www.w3.org/2000/svg',
+}

package/source/hooks.ts

@@ -0,0 +1,28 @@
+export interface Hooks {
+  createElement(element: Element, ns?: string | null): void;
+  setAttribute(
+    element: Element,
+    name: string,
+    value: string,
+    ns?: string | null,
+  ): void;
+  removeAttribute(element: Element, name: string, ns?: string | null): void;
+  createText(text: Text, data: string): void;
+  setText(text: Text, data: string): void;
+  insertChild(parent: Element, node: Element | Text, index: number): void;
+  removeChild(parent: Element, node: Element | Text, index: number): void;
+  addEventListener(
+    element: EventTarget,
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  removeEventListener(
+    element: EventTarget,
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
+export const hooks: Partial<Hooks> = {};

package/source/index.ts

@@ -0,0 +1,2 @@
+export {hooks, type Hooks} from './hooks.ts';
+export {Window} from './Window.ts';

package/source/selectors.ts

@@ -0,0 +1,230 @@
+import {CHILD, NEXT, PARENT, PREV} from './constants.ts';
+import {isElementNode} from './shared.ts';
+
+import type {Node} from './Node.ts';
+import type {Element} from './Element.ts';
+import type {ParentNode} from './ParentNode.ts';
+
+const enum Combinator {
+  Descendant,
+  Child,
+  Sibling,
+  Adjacent,
+  Inner,
+}
+
+const enum MatcherType {
+  Unknown,
+  Element,
+  Id,
+  Class,
+  Attribute,
+  Pseudo,
+  Function,
+}
+
+interface Part {
+  combinator: Combinator;
+  matchers: Matcher[];
+}
+
+interface Matcher {
+  type: MatcherType;
+  name: string;
+  value?: string;
+}
+
+const ELEMENT_SELECTOR_TEST = /[a-z]/;
+
+export function querySelector(within: ParentNode, selector: string) {
+  const parts = parseSelector(selector);
+  let result: Element | null = null;
+
+  const child = within[CHILD];
+  if (child && parts[0]!.matchers.length) {
+    walkNodesForSelector(child, parts, (node) => {
+      result = node;
+      return false;
+    });
+  }
+  return result;
+}
+
+export function querySelectorAll(within: ParentNode, selector: string) {
+  const parts = parseSelector(selector);
+  const results: Element[] = [];
+
+  const child = within[CHILD];
+  if (child && parts[0]!.matchers.length) {
+    walkNodesForSelector(child, parts, (node) => {
+      results.push(node);
+    });
+  }
+  return results;
+}
+
+export function parseSelector(selector: string) {
+  let part: Part = {combinator: Combinator.Inner, matchers: []};
+  const parts = [part];
+  const tokenizer =
+    /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:]+)|:(\w+)(?:\((.*?)\))?)/gi;
+  let token;
+  while ((token = tokenizer.exec(selector))) {
+    // [1]: ancestor/parent/sibling/adjacent
+    // [2]: attribute name
+    // [4]: attribute value
+    // [5]: id/class sigil
+    // [6]: id/class name
+    // [7]: :pseudo/:function() name
+    // [8]: :function(argument) value
+    if (token[1]) {
+      // Update the combinator on the (now parent) Part:
+      if (token[1] === '>') part.combinator = Combinator.Child;
+      else if (token[1] === '+') part.combinator = Combinator.Adjacent;
+      else if (token[1] === '~') part.combinator = Combinator.Sibling;
+      else part.combinator = Combinator.Descendant;
+      // Add a new Part for the next selector parts:
+      part = {combinator: Combinator.Inner, matchers: []};
+      parts.push(part);
+    }
+
+    let type = MatcherType.Unknown;
+    if (token[2]) {
+      type = MatcherType.Attribute;
+    } else if (token[5]) {
+      type = token[5] === '#' ? MatcherType.Id : MatcherType.Class;
+    } else if (token[7]) {
+      type = token[8] == null ? MatcherType.Pseudo : MatcherType.Function;
+    } else if (token[6] && ELEMENT_SELECTOR_TEST.test(token[6])) {
+      type = MatcherType.Element;
+    }
+    part.matchers.push({
+      type,
+      name: (token[2] || token[6] || token[7])!,
+      value: token[4] ?? token[6] ?? token[8],
+    });
+  }
+  return parts;
+}
+
+function matchesSelector(element: Element, selector: string) {
+  const parsed = parseSelector(selector);
+  let part: Part | undefined;
+  while ((part = parsed.pop())) {
+    if (!matchesSelectorPart(element, part)) return false;
+  }
+  return true;
+}
+
+function walkNodesForSelector(
+  node: Node,
+  parts: Part[],
+  callback: (node: Element) => boolean | void,
+) {
+  if (isElementNode(node)) {
+    if (matchesSelectorRecursive(node, parts)) {
+      if (callback(node) === false) return false;
+    }
+    const child = node[CHILD];
+    if (child && walkNodesForSelector(child, parts, callback) === false) {
+      return false;
+    }
+  }
+  const next = node[NEXT];
+  if (next && walkNodesForSelector(next, parts, callback) === false) {
+    return false;
+  }
+  return true;
+}
+
+function matchesSelectorRecursive(element: Element, parts: Part[]): boolean {
+  const {combinator, matchers} = parts[parts.length - 1]!;
+  if (combinator === Combinator.Inner) {
+    if (!matchesSelectorMatcher(element, matchers)) return false;
+    const pp = parts.slice(0, -1);
+    return pp.length === 0 || matchesSelectorRecursive(element, pp);
+  }
+  const link =
+    combinator === Combinator.Child || combinator === Combinator.Descendant
+      ? PARENT
+      : PREV;
+  let ref = element[link];
+  if (!ref || !matchesSelectorMatcher(ref as Element, matchers)) {
+    return false;
+  }
+  if (
+    combinator === Combinator.Descendant ||
+    combinator === Combinator.Sibling
+  ) {
+    while ((ref = ref[link])) {
+      if (matchesSelectorMatcher(ref as Element, matchers)) {
+        const pp = parts.slice(0, -1);
+        if (pp.length === 0) return true;
+        if (matchesSelectorRecursive(element, pp)) return true;
+      }
+    }
+  }
+  return false;
+}
+
+function matchesSelectorPart(element: Element, {combinator, matchers}: Part) {
+  if (combinator === Combinator.Inner) {
+    return matchesSelectorMatcher(element, matchers);
+  }
+  const link =
+    combinator === Combinator.Child || combinator === Combinator.Descendant
+      ? PARENT
+      : PREV;
+  let ref = element[link];
+  if (!ref || !matchesSelectorMatcher(ref as Element, matchers)) {
+    return false;
+  }
+  if (
+    combinator === Combinator.Descendant ||
+    combinator === Combinator.Sibling
+  ) {
+    while ((ref = ref[link])) {
+      if (matchesSelectorMatcher(ref as Element, matchers)) return true;
+    }
+  }
+  return false;
+}
+
+function matchesSelectorMatcher(
+  element: Element | null,
+  matcher: Matcher | Matcher[],
+) {
+  if (!element) return false;
+  if (Array.isArray(matcher)) {
+    for (const single of matcher) {
+      if (matchesSelectorMatcher(element, single) === false) return false;
+    }
+    return true;
+  }
+  const {type, name, value} = matcher;
+  switch (type) {
+    case MatcherType.Element:
+      return element.localName === name;
+    case MatcherType.Id:
+      return element.getAttribute('id') === name;
+    case MatcherType.Class:
+      return element.getAttribute('class') === name;
+    case MatcherType.Attribute:
+      return value == null
+        ? element.hasAttribute(name)
+        : element.getAttribute(name) === value;
+    case MatcherType.Pseudo:
+      switch (name) {
+        default:
+          throw Error(`Pseudo :${name} not implemented`);
+      }
+    case MatcherType.Function:
+      switch (name) {
+        case 'has':
+          return matchesSelector(element, value || '');
+        default:
+          throw Error(`Function :${name}(${value}) not implemented`);
+      }
+  }
+  return false;
+}

package/source/serialization.ts

@@ -0,0 +1,110 @@
+import {
+  ATTRIBUTES,
+  CHILD,
+  DATA,
+  NAME,
+  NEXT,
+  VALUE,
+  NodeType,
+} from './constants.ts';
+import type {Node} from './Node.ts';
+import type {Text} from './Text.ts';
+import type {Comment} from './Comment.ts';
+import type {ParentNode} from './ParentNode.ts';
+import type {Element} from './Element.ts';
+
+// const voidElements = {
+//   img: true,
+//   image: true,
+// };
+// const elementTokenizer =
+//   /(?:<([a-z][a-z0-9-:]*)( [^<>'"\n=\s]+=(['"])[^>'"\n]*\3)*\s*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|([^&<>]+))/gi;
+// const attributeTokenizer = / ([^<>'"\n=\s]+)=(['"])([^>'"\n]*)\2/g;
+
+const elementTokenizer =
+  /(?:<([a-z][a-z0-9-:]*)((?:\s[^<>'"=\n\s]+(?:=(['"])[^\n]*?\3|=[^>'"\n\s]*|))*)\s*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^&<>]+))/gi;
+
+const attributeTokenizer =
+  /\s([^<>'"=\n\s]+)(?:=(['"])([^\n]*?)\2|=([^>'"\n\s]*)|)/g;
+
+export function parseHtml(html: string, contextNode: Node) {
+  const document = contextNode.ownerDocument;
+  const root = document.createDocumentFragment();
+  const stack: Node[] = [root];
+  let parent: ParentNode = root;
+  let token: RegExpExecArray | null;
+  elementTokenizer.lastIndex = 0;
+  while ((token = elementTokenizer.exec(html))) {
+    const tag = token[1];
+    if (tag) {
+      const node = document.createElement(tag);
+      const attrs = token[2]!;
+      attributeTokenizer.lastIndex = 0;
+      let t: RegExpExecArray | null;
+      while ((t = attributeTokenizer.exec(attrs))) {
+        node.setAttribute(t[1]!, t[3] || t[4] || '');
+      }
+      parent.append(node);
+      // if (voidElements[tag] === true) continue;
+      stack.push(parent);
+      parent = node;
+    } else if (token[5]) {
+      parent = (stack.pop() as ParentNode) || root;
+    } else if (token[6]) {
+      parent.append(document.createComment(token[6]!));
+    } else {
+      parent.append(token[7]!);
+    }
+  }
+  return root;
+}
+
+export function serializeChildren(parentNode: ParentNode) {
+  let out = '';
+  let child = parentNode[CHILD];
+  while (child) {
+    out += serializeNode(child);
+    child = child[NEXT];
+  }
+  return out;
+}
+
+export function serializeNode(node: Node) {
+  switch (node.nodeType) {
+    case NodeType.ELEMENT_NODE: {
+      const el = node as Element;
+      let out = `<${el[NAME]}`;
+      let attr = el[ATTRIBUTES]?.[CHILD];
+      while (attr) {
+        out += ` ${attr[NAME]}`;
+        let value = attr[VALUE];
+        if (value !== '') {
+          value = String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+          out += `="${value}"`;
+        }
+        attr = attr[NEXT];
+      }
+      out += '>';
+      out += serializeChildren(el);
+      // let child = el[CHILD];
+      // while (child) {
+      //   out += serialize(child);
+      //   child = child[NEXT];
+      // }
+      out += `</${el[NAME]}>`;
+      return out;
+    }
+    case NodeType.TEXT_NODE: {
+      const text = node as Text;
+      return text[DATA].replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+    case NodeType.COMMENT_NODE: {
+      const text = node as Comment;
+      return `<!--${text[DATA]}-->`;
+    }
+  }
+  return '';
+}