@remote-dom/polyfill 1.5.0 → 1.6.0

package/build/typescript/tests/window-set-global.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-set-global.test.d.ts","sourceRoot":"","sources":["../../../source/tests/window-set-global.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -7,7 +7,7 @@
     "access": "public",
     "@remote-dom/registry": "https://registry.npmjs.org"
   },
-  "version": "1.5.0",
+  "version": "1.6.0",
   "engines": {
     "node": ">=14.0.0"
   },

package/source/Attr.ts

@@ -4,21 +4,28 @@ import {
   VALUE,
   OWNER_ELEMENT,
   NAME,
-  NamespaceURI,
-  NodeType,
+  NODE_TYPE_ATTRIBUTE,
+  type NamespaceURI,
+  type NodeType,
   HOOKS,
 } from './constants.ts';
 import {Node} from './Node.ts';
 import type {Element} from './Element.ts';
+import {
+  attributeObserversActive,
+  queueMutationRecord,
+} from './MutationObserver.ts';
+import {enqueueAttributeReaction} from './attribute-reactions.ts';
+import {performWithCustomElementReactions} from './custom-element-reactions.ts';
 
 export class Attr extends Node {
-  nodeType = NodeType.ATTRIBUTE_NODE;
-  [NS]: NamespaceURI | null = null;
+  nodeType: NodeType = NODE_TYPE_ATTRIBUTE;
+  [NS]: NamespaceURI = null;
   [NEXT]: Attr | null = null;
   [VALUE]: string;
   [OWNER_ELEMENT]: Element | null = null;
 
-  constructor(name: string, value: string, namespace?: NamespaceURI | null) {
+  constructor(name: string, value: string, namespace?: NamespaceURI) {
     super();
     this[NAME] = name;
     this[VALUE] = value;
@@ -35,16 +42,61 @@ export class Attr extends Node {
   }
 
   set name(_readonly: string) {}
+
+  get localName() {
+    if (this[NS] == null) return this[NAME];
+
+    const separator = this[NAME].indexOf(':');
+    return separator < 0 ? this[NAME] : this[NAME].slice(separator + 1);
+  }
+
+  get prefix() {
+    if (this[NS] == null) return null;
+
+    const separator = this[NAME].indexOf(':');
+    return separator < 0 ? null : this[NAME].slice(0, separator);
+  }
   get value() {
     return this[VALUE];
   }
 
   set value(value: string) {
     const str = String(value);
-    this[VALUE] = str;
     const ownerElement = this[OWNER_ELEMENT];
-    if (!ownerElement) return;
-    this[HOOKS].setAttribute?.(ownerElement as any, this[NAME], str, this[NS]);
+
+    if (!ownerElement) {
+      this[VALUE] = str;
+      return;
+    }
+
+    performWithCustomElementReactions(() => {
+      const oldValue = this[VALUE];
+      this[VALUE] = str;
+
+      if (attributeObserversActive && oldValue !== str) {
+        queueMutationRecord({
+          type: 'attributes',
+          target: ownerElement,
+          attributeName: this[NAME],
+          attributeNamespace: this[NS],
+          oldValue,
+        });
+      }
+
+      this[HOOKS].setAttribute?.(
+        ownerElement as any,
+        this[NAME],
+        str,
+        this[NS],
+      );
+      enqueueAttributeReaction(
+        ownerElement,
+        this.localName,
+        oldValue,
+        str,
+        this[NS],
+      );
+    });
   }
 
   get nodeValue() {

package/source/CharacterData.ts

@@ -1,5 +1,9 @@
 import {DATA, HOOKS} from './constants.ts';
 import {ChildNode} from './ChildNode.ts';
+import {
+  characterDataObserversActive,
+  queueMutationRecord,
+} from './MutationObserver.ts';
 
 export class CharacterData extends ChildNode {
   [DATA] = '';
@@ -10,11 +14,20 @@ export class CharacterData extends ChildNode {
   }
 
   protected setData(data: any) {
+    const shouldQueueMutation = characterDataObserversActive;
+    const oldValue = shouldQueueMutation ? this[DATA] : null;
     let str = '';
     if (data != null) {
       str = typeof data === 'string' ? data : String(data);
     }
     this[DATA] = str;
+    if (shouldQueueMutation && oldValue !== str) {
+      queueMutationRecord({
+        type: 'characterData',
+        target: this,
+        oldValue,
+      });
+    }
     this[HOOKS].setText?.(this as any, str);
   }
 

package/source/ChildNode.ts

@@ -1,7 +1,14 @@
-import {NEXT} from './constants.ts';
+import {HOST, NEXT, PARENT, PREV} from './constants.ts';
+import {performWithCustomElementReactions} from './custom-element-reactions.ts';
+import {performHookEffects, type HookEffect} from './hook-effects.ts';
+import {createDOMException} from './dom-exception.ts';
 import type {ParentNode} from './ParentNode.ts';
 import {Node} from './Node.ts';
 
+export const INSERT_NODE = Symbol('insertNode');
+export const PREFLIGHT_INSERTIONS = Symbol('preflightInsertions');
+export const REPLACE_NODE = Symbol('replaceNode');
+
 export class ChildNode extends Node {
   remove() {
     const parent = this.parentNode;
@@ -10,36 +17,122 @@ export class ChildNode extends Node {
   }
 
   replaceWith(...nodes: (Node | string)[]) {
+    const staged = stageNodes(nodes);
     const parent = this.parentNode;
     if (!parent) return;
-    const node = toNode(parent, nodes[0]);
-    const next = node[NEXT];
-    parent.replaceChild(this, node);
-    for (let i = 1; i < nodes.length; i++) {
-      parent.insertBefore(toNode(parent, nodes[i]), next);
-    }
+
+    return performChildNodeMutation((hookEffects) => {
+      validateInsertionNodes(parent, staged);
+
+      let next = this[NEXT];
+      while (next && staged.includes(next)) next = next[NEXT];
+
+      const replacement = convertNodesIntoNode(parent, staged, hookEffects);
+      if (this.parentNode === parent) {
+        parent[REPLACE_NODE](replacement, this, hookEffects);
+      } else {
+        parent[INSERT_NODE](replacement, next, hookEffects);
+      }
+    });
   }
 
   before(...nodes: (Node | string)[]) {
+    const staged = stageNodes(nodes);
     const parent = this.parentNode;
     if (!parent) return;
-    for (const node of nodes) {
-      parent.insertBefore(toNode(parent, node), this);
-    }
+
+    return performChildNodeMutation((hookEffects) => {
+      validateInsertionNodes(parent, staged);
+
+      let previous = this[PREV];
+      while (previous && staged.includes(previous)) previous = previous[PREV];
+
+      const node = convertNodesIntoNode(parent, staged, hookEffects);
+      parent[INSERT_NODE](
+        node,
+        previous ? previous[NEXT] : parent.firstChild,
+        hookEffects,
+      );
+    });
   }
 
   after(...nodes: (Node | string)[]) {
+    const staged = stageNodes(nodes);
     const parent = this.parentNode;
     if (!parent) return;
-    const next = this[NEXT];
-    for (const node of nodes) {
-      parent.insertBefore(toNode(parent, node), next);
-    }
+
+    return performChildNodeMutation((hookEffects) => {
+      validateInsertionNodes(parent, staged);
+
+      let next = this[NEXT];
+      while (next && staged.includes(next)) next = next[NEXT];
+
+      const node = convertNodesIntoNode(parent, staged, hookEffects);
+      parent[INSERT_NODE](node, next, hookEffects);
+    });
   }
 }
 
+function performChildNodeMutation(
+  mutation: (hookEffects: HookEffect[]) => void,
+) {
+  return performWithCustomElementReactions(() => {
+    const hookEffects: HookEffect[] = [];
+    try {
+      mutation(hookEffects);
+    } catch (error) {
+      try {
+        performHookEffects(hookEffects);
+      } catch {}
+      throw error;
+    }
+    performHookEffects(hookEffects);
+  });
+}
+
+export function stageNodes(nodes: (Node | string)[]) {
+  return nodes.map((node) => (node instanceof Node ? node : String(node)));
+}
+
 export function toNode(parent: ParentNode, node: Node | any) {
   if (node instanceof Node) return node;
   const ownerDocument = parent.ownerDocument;
   return ownerDocument.createTextNode(String(node));
 }
+
+export function validateInsertionNodes(
+  parent: ParentNode,
+  nodes: (Node | string)[],
+) {
+  for (const node of nodes) {
+    if (!(node instanceof Node)) continue;
+
+    let ancestor: Node | null = parent;
+    while (ancestor) {
+      if (ancestor === node) {
+        throw createDOMException(
+          'Cannot insert a node into itself or one of its descendants',
+          'HierarchyRequestError',
+        );
+      }
+      ancestor = ancestor[PARENT] ?? ancestor[HOST];
+    }
+  }
+}
+
+function convertNodesIntoNode(
+  parent: ParentNode,
+  nodes: (Node | string)[],
+  hookEffects: HookEffect[],
+): Node {
+  const convertedNodes: Node[] = [];
+  for (const node of nodes) convertedNodes.push(toNode(parent, node));
+  if (convertedNodes.length === 1) return convertedNodes[0]!;
+
+  const fragment = parent.ownerDocument.createDocumentFragment();
+  fragment[PREFLIGHT_INSERTIONS](convertedNodes);
+  for (const node of convertedNodes) {
+    fragment[INSERT_NODE](node, null, hookEffects);
+  }
+  return fragment;
+}

package/source/Comment.ts

@@ -1,7 +1,7 @@
-import {NAME} from './constants.ts';
+import {NAME, NODE_TYPE_COMMENT, type NodeType} from './constants.ts';
 import {CharacterData} from './CharacterData.ts';
 
 export class Comment extends CharacterData {
-  nodeType = 8;
+  nodeType: NodeType = NODE_TYPE_COMMENT;
   [NAME] = '#comment';
 }

package/source/CustomElementRegistry.ts

@@ -1,3 +1,33 @@
+import {createDOMException} from './dom-exception.ts';
+
+const VALID_CUSTOM_ELEMENT_NAME =
+  /^[a-z][^A-Z\u0000\t\n\f\r />]*-[^A-Z\u0000\t\n\f\r />]*$/u;
+
+const RESERVED_CUSTOM_ELEMENT_NAMES = new Set([
+  'annotation-xml',
+  'color-profile',
+  'font-face',
+  'font-face-src',
+  'font-face-uri',
+  'font-face-format',
+  'font-face-name',
+  'missing-glyph',
+]);
+
+function isValidCustomElementName(name: string) {
+  return (
+    VALID_CUSTOM_ELEMENT_NAME.test(name) &&
+    !RESERVED_CUSTOM_ELEMENT_NAMES.has(name)
+  );
+}
+
+function createInvalidCustomElementNameError(name: string) {
+  return createDOMException(
+    `Invalid custom element name: "${name}"`,
+    'SyntaxError',
+  );
+}
+
 export class CustomElementRegistryImplementation
   implements CustomElementRegistry
 {
@@ -12,6 +42,24 @@ export class CustomElementRegistryImplementation
     Constructor: CustomElementConstructor,
     _options?: ElementDefinitionOptions,
   ) {
+    if (!isValidCustomElementName(name)) {
+      throw createInvalidCustomElementNameError(name);
+    }
+
+    if (this.registry.has(name)) {
+      throw createDOMException(
+        `A custom element named "${name}" has already been defined`,
+        'NotSupportedError',
+      );
+    }
+
+    if (this.getName(Constructor) != null) {
+      throw createDOMException(
+        'This constructor has already been registered in this custom element registry',
+        'NotSupportedError',
+      );
+    }
+
     this.registry.set(name, Constructor);
 
     const listeners = this.listenersByName.get(name);
@@ -38,6 +86,10 @@ export class CustomElementRegistryImplementation
   }
 
   whenDefined(name: string) {
+    if (!isValidCustomElementName(name)) {
+      return Promise.reject(createInvalidCustomElementNameError(name));
+    }
+
     const Constructor = this.registry.get(name);
 
     if (Constructor != null) return Promise.resolve(Constructor);
@@ -57,4 +109,8 @@ export class CustomElementRegistryImplementation
   upgrade(_root: Node) {
     // TODO
   }
+
+  initialize(_root: Node) {
+    // TODO
+  }
 }

package/source/CustomEvent.ts

@@ -10,7 +10,7 @@ export class CustomEvent<T = any> extends Event {
 
   constructor(type: string, eventInitDict?: CustomEventInit<T>) {
     super(type, eventInitDict);
-    this.detail = eventInitDict?.detail as any;
+    this.detail = (eventInitDict?.detail ?? null) as any;
   }
 
   /**
@@ -25,6 +25,6 @@ export class CustomEvent<T = any> extends Event {
     detail?: T,
   ) {
     super.initEvent(type, bubbles, cancelable);
-    (this as any).detail = detail;
+    (this as any).detail = detail ?? null;
   }
 }

package/source/Document.ts

@@ -1,29 +1,48 @@
 import {
   NS,
   NAME,
-  NamespaceURI,
-  NodeType,
+  PREFIX,
+  NODE_TYPE_DOCUMENT,
+  HTML_NAMESPACE,
+  SVG_NAMESPACE,
+  type NamespaceURI,
+  type NodeType,
   OWNER_DOCUMENT,
   HOOKS,
   IS_CONNECTED,
+  CREATE_ELEMENT,
+  asciiLowercase,
 } from './constants.ts';
+import {
+  validateAndExtractQualifiedName,
+  validateElementLocalName,
+} from './names.ts';
 import type {Window} from './Window.ts';
 import type {Node} from './Node.ts';
 import {Event} from './Event.ts';
-import {ParentNode} from './ParentNode.ts';
+import {ParentNode, removeChildForAdoption} from './ParentNode.ts';
 import {Element} from './Element.ts';
 import {SVGElement} from './SVGElement.ts';
 import {Text} from './Text.ts';
 import {Comment} from './Comment.ts';
 import {DocumentFragment} from './DocumentFragment.ts';
 import {HTMLTemplateElement} from './HTMLTemplateElement.ts';
-import {isParentNode, cloneNode} from './shared.ts';
+import {
+  adoptNodes,
+  cloneNode,
+  collectAdoptionSnapshot,
+  getElementById as findElementById,
+  getElementsByClassName as findElementsByClassName,
+  getElementsByTagName as findElementsByTagName,
+} from './shared.ts';
 import {HTMLBodyElement} from './HTMLBodyElement.ts';
 import {HTMLHeadElement} from './HTMLHeadElement.ts';
 import {HTMLHtmlElement} from './HTMLHtmlElement.ts';
+import {performWithCustomElementReactions} from './custom-element-reactions.ts';
+import {createDOMException} from './dom-exception.ts';
 
 export class Document extends ParentNode {
-  nodeType = NodeType.DOCUMENT_NODE;
+  nodeType: NodeType = NODE_TYPE_DOCUMENT;
   [NAME] = '#document';
   body: HTMLBodyElement;
   head: HTMLHeadElement;
@@ -44,17 +63,51 @@ export class Document extends ParentNode {
     this.documentElement.appendChild(this.body);
   }
 
+  get textContent(): string | null {
+    return null;
+  }
+
+  set textContent(data: any) {
+    if (data != null) void `${data}`;
+  }
+
+  getElementsByClassName(classNames: string) {
+    return findElementsByClassName(this, classNames);
+  }
+
   createElement(localName: string) {
-    return createElement(this, localName);
+    const name = String(localName);
+    validateElementLocalName(name);
+    return createElement(this, asciiLowercase(name));
+  }
+
+  createElementNS(namespaceURI: NamespaceURI, qualifiedName: string) {
+    const name = validateAndExtractQualifiedName(
+      namespaceURI,
+      qualifiedName,
+      'element',
+    );
+    return createElement(
+      this,
+      name.qualifiedName,
+      name.namespace,
+      name.prefix,
+      name.localName,
+    );
   }
 
-  createElementNS(namespaceURI: NamespaceURI, localName: string) {
-    return createElement(this, localName, namespaceURI);
+  [CREATE_ELEMENT](
+    qualifiedName: string,
+    namespace: NamespaceURI,
+    prefix: string | null,
+    localName: string,
+  ) {
+    return createElement(this, qualifiedName, namespace, prefix, localName);
   }
 
   createTextNode(data: any) {
     const text = createNode(new Text(data), this);
-    this[HOOKS].createText?.(text as any, String(data));
+    this[HOOKS].createText?.(text as any, text.data);
     return text;
   }
 
@@ -70,17 +123,35 @@ export class Document extends ParentNode {
     return new Event('');
   }
 
+  getElementById(elementId: string) {
+    return findElementById(this, elementId);
+  }
+
+  getElementsByTagName(qualifiedName: string) {
+    return findElementsByTagName(this, qualifiedName);
+  }
+
   importNode(node: Node, deep?: boolean) {
+    if (node.nodeType === NODE_TYPE_DOCUMENT) {
+      throw createDOMException(
+        'Cannot import a document node',
+        'NotSupportedError',
+      );
+    }
+
     return cloneNode(node, deep, this);
   }
 
   adoptNode(node: Node) {
     if (node[OWNER_DOCUMENT] === this) return node;
 
-    node.parentNode?.removeChild(node);
-    adoptNode(node, this);
-
-    return node;
+    const adoption = collectAdoptionSnapshot(node);
+    return performWithCustomElementReactions(() => {
+      const parent = node.parentNode;
+      if (parent) removeChildForAdoption(parent, node, adoption, this);
+      else adoptNodes(adoption.nodes, this);
+      return node;
+    });
   }
 }
 
@@ -96,49 +167,44 @@ export function createNode<T extends Node>(node: T, ownerDocument: Document) {
 
 export function createElement<T extends Element>(
   ownerDocument: Document,
-  name: string,
-  namespace?: NamespaceURI,
+  qualifiedName: string,
+  namespace: NamespaceURI = HTML_NAMESPACE,
+  prefix: string | null = null,
+  localName = qualifiedName,
 ) {
   let element: T;
-  const lowerName = String(name).toLowerCase();
 
-  if (namespace === NamespaceURI.SVG) {
+  if (namespace === SVG_NAMESPACE) {
     element = new SVGElement() as any;
-  } else if (lowerName === 'template') {
+  } else if (namespace === HTML_NAMESPACE && localName === 'template') {
     element = new HTMLTemplateElement() as any;
-  } else {
-    const CustomElement = ownerDocument.defaultView.customElements.get(name);
+  } else if (namespace === HTML_NAMESPACE) {
+    const CustomElement =
+      ownerDocument.defaultView.customElements.get(localName);
     element = CustomElement ? (new CustomElement() as any) : new Element();
+  } else {
+    element = new Element() as any;
   }
 
-  return setupElement(element, ownerDocument, name, namespace);
+  return setupElement(element, ownerDocument, qualifiedName, namespace, prefix);
 }
 
 export function setupElement<T extends Element>(
   element: T,
   ownerDocument: Document,
-  name: string,
-  namespace?: NamespaceURI,
+  qualifiedName: string,
+  namespace: NamespaceURI = HTML_NAMESPACE,
+  prefix: string | null = null,
 ) {
   createNode(element, ownerDocument);
 
-  Object.defineProperty(element, NAME, {value: name});
-
-  if (namespace) {
-    Object.defineProperty(element, NS, {value: namespace});
-  }
+  Object.defineProperties(element, {
+    [NAME]: {value: qualifiedName},
+    [NS]: {value: namespace},
+    [PREFIX]: {value: prefix},
+  });
 
   ownerDocument[HOOKS].createElement?.(element as any, namespace);
 
   return element;
 }
-
-export function adoptNode(node: Node, document: Document) {
-  node[OWNER_DOCUMENT] = document;
-
-  if (isParentNode(node)) {
-    for (const child of node.childNodes) {
-      adoptNode(child, document);
-    }
-  }
-}

package/source/DocumentFragment.ts

@@ -1,8 +1,20 @@
-import {NAME, OWNER_DOCUMENT, NodeType} from './constants.ts';
+import {
+  NAME,
+  OWNER_DOCUMENT,
+  NODE_TYPE_DOCUMENT_FRAGMENT,
+  type NodeType,
+} from './constants.ts';
 import {ParentNode} from './ParentNode.ts';
+import {getElementById as findElementById} from './shared.ts';
 
 export class DocumentFragment extends ParentNode {
-  nodeType = NodeType.DOCUMENT_FRAGMENT_NODE;
+  nodeType: NodeType = NODE_TYPE_DOCUMENT_FRAGMENT;
   [NAME] = '#document-fragment';
-  [OWNER_DOCUMENT] = window.document as any;
+  [OWNER_DOCUMENT] = (typeof window !== 'undefined'
+    ? window.document
+    : null) as any;
+
+  getElementById(elementId: string) {
+    return findElementById(this, elementId);
+  }
 }