@remote-dom/polyfill 1.5.0 → 1.6.0

package/source/serialization.ts

@@ -1,110 +1,268 @@
 import {
   ATTRIBUTES,
   CHILD,
+  CONTENT,
+  CREATE_ELEMENT,
   DATA,
+  HTML_NAMESPACE,
   NAME,
   NEXT,
+  NS,
+  SVG_NAMESPACE,
   VALUE,
-  NodeType,
+  NODE_TYPE_COMMENT,
+  NODE_TYPE_ELEMENT,
+  NODE_TYPE_TEXT,
+  asciiLowercase,
 } 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';
+import type {HTMLTemplateElement} from './HTMLTemplateElement.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 CHARACTER_REFERENCES: Readonly<Record<string, string>> = {
+  amp: '&',
+  AMP: '&',
+  apos: "'",
+  gt: '>',
+  GT: '>',
+  lt: '<',
+  LT: '<',
+  quot: '"',
+  QUOT: '"',
+};
 
-const elementTokenizer =
-  /(?:<([a-z][a-z0-9-:]*)((?:[\s]+[^<>'"=\s]+(?:=(['"])[^]*?\3|=[^>'"\s]*|))*)[\s]*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^&<>]+))/gi;
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
 
-const attributeTokenizer =
-  /\s([^<>'"=\n\s]+)(?:=(["'])([\s\S]*?)\2|=([^>'"\n\s]*)|)/g;
+const ELEMENT_TOKENIZER =
+  /(?:<([a-z][a-z0-9-:]*)((?:[\s]+[^<>'"=/\s]+(?:=(['"])[^]*?\3|=[^>'"\s]*|))*)[\s]*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^<>]+))/gi;
+const ATTRIBUTE_TOKENIZER =
+  /\s([^<>'"=/\n\s]+)(?:=(["'])([\s\S]*?)\2|=([^>'"\n\s]*)|)/g;
+const SVG_HTML_BREAKOUTS =
+  '|b|big|blockquote|body|br|center|code|dd|div|dl|dt|em|embed|h1|h2|h3|h4|h5|h6|head|hr|i|img|li|listing|menu|meta|nobr|ol|p|pre|ruby|s|small|span|strong|strike|sub|sup|table|tt|u|ul|var|';
+const SVG_HTML_FONT_ATTRIBUTE = /^(?:color|face|size)$/i;
+
+function decodeCharacterReferences(value: string) {
+  return value.replace(
+    /&(?:(amp|AMP|apos|gt|GT|lt|LT|quot|QUOT)|#(\d+)|#[xX]([\da-fA-F]+));/g,
+    (reference, name: string | undefined, decimal, hexadecimal) => {
+      if (name) return CHARACTER_REFERENCES[name]!;
+
+      const codePoint = Number.parseInt(
+        decimal ?? hexadecimal,
+        decimal ? 10 : 16,
+      );
+
+      try {
+        return String.fromCodePoint(codePoint);
+      } catch {
+        return reference;
+      }
+    },
+  );
+}
+
+function isVoidElement(element: Element) {
+  return (
+    element.namespaceURI === HTML_NAMESPACE &&
+    VOID_ELEMENTS.has(element.localName)
+  );
+}
+
+function isHtmlIntegrationPoint(element: Element) {
+  const name = element.localName;
+  return (
+    element[NS] === SVG_NAMESPACE &&
+    (name === 'foreignObject' || name === 'desc' || name === 'title')
+  );
+}
+
+function isSvgHtmlBreakout(tag: string, attributes: string) {
+  if (SVG_HTML_BREAKOUTS.includes(`|${tag}|`)) return true;
+  if (tag !== 'font') return false;
+
+  for (const attribute of attributes.matchAll(ATTRIBUTE_TOKENIZER)) {
+    if (SVG_HTML_FONT_ATTRIBUTE.test(attribute[1]!)) return true;
+  }
+  return false;
+}
 
 export function parseHtml(html: string, contextNode: Node) {
   const document = contextNode.ownerDocument;
   const root = document.createDocumentFragment();
-  const stack: Node[] = [root];
+  const stack: {element: Element; target: ParentNode}[] = [];
   let parent: ParentNode = root;
-  let token: RegExpExecArray | null;
-  elementTokenizer.lastIndex = 0;
-  while ((token = elementTokenizer.exec(html))) {
+  for (const token of html.matchAll(ELEMENT_TOKENIZER)) {
     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] || '');
+      const normalizedTag = asciiLowercase(tag);
+      const openElement =
+        stack[stack.length - 1]?.element ?? (contextNode as Element);
+      let namespace =
+        openElement[NS] === SVG_NAMESPACE ? SVG_NAMESPACE : HTML_NAMESPACE;
+
+      if (normalizedTag === 'svg') {
+        namespace = SVG_NAMESPACE;
+      } else if (namespace === SVG_NAMESPACE) {
+        if (isHtmlIntegrationPoint(openElement)) {
+          namespace = HTML_NAMESPACE;
+        } else if (isSvgHtmlBreakout(normalizedTag, attrs)) {
+          while (stack.length > 0) {
+            const frame = stack[stack.length - 1]!;
+            if (
+              frame.element[NS] !== SVG_NAMESPACE ||
+              isHtmlIntegrationPoint(frame.element)
+            ) {
+              break;
+            }
+
+            stack.pop();
+            parent = frame.target;
+          }
+          namespace = HTML_NAMESPACE;
+        }
+      }
+
+      const name = namespace === HTML_NAMESPACE ? normalizedTag : tag;
+      const node = document[CREATE_ELEMENT](name, namespace, null, name);
+      for (const attribute of attrs.matchAll(ATTRIBUTE_TOKENIZER)) {
+        node.setAttribute(
+          attribute[1]!,
+          decodeCharacterReferences(attribute[3] || attribute[4] || ''),
+        );
       }
       parent.append(node);
-      // if (voidElements[tag] === true) continue;
-      stack.push(parent);
-      parent = node;
+      if (isVoidElement(node) || (namespace !== HTML_NAMESPACE && token[4])) {
+        continue;
+      }
+      stack.push({element: node, target: parent});
+      parent =
+        namespace === HTML_NAMESPACE && normalizedTag === 'template'
+          ? (node as HTMLTemplateElement).content
+          : node;
     } else if (token[5]) {
-      parent = (stack.pop() as ParentNode) || root;
+      const closingTag = asciiLowercase(token[5]);
+      for (let index = stack.length - 1; index >= 0; index--) {
+        const frame = stack[index]!;
+        const frameName = asciiLowercase(frame.element[NAME]);
+        if (frameName === closingTag) {
+          parent = frame.target;
+          stack.length = index;
+          break;
+        }
+        if (frame.element[NS] === HTML_NAMESPACE && frameName === 'template') {
+          break;
+        }
+      }
     } else if (token[6]) {
       parent.append(document.createComment(token[6]!));
     } else {
-      parent.append(token[7]!);
+      parent.append(decodeCharacterReferences(token[7]!));
     }
   }
   return root;
 }
 
+type SerializationWorkItem =
+  | {type: 'opening'; node: Node}
+  | {type: 'content'; child: Node | null}
+  | {type: 'closing'; name: string};
+
 export function serializeChildren(parentNode: ParentNode) {
-  let out = '';
-  let child = parentNode[CHILD];
-  while (child) {
-    out += serializeNode(child);
-    child = child[NEXT];
-  }
-  return out;
+  return serialize([{type: 'content', child: parentNode[CHILD]}]);
 }
 
 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}"`;
+  return serialize([{type: 'opening', node}]);
+}
+
+function serialize(workItems: SerializationWorkItem[]) {
+  const chunks: string[] = [];
+  let workItem: SerializationWorkItem | undefined;
+
+  while ((workItem = workItems.pop())) {
+    switch (workItem.type) {
+      case 'opening': {
+        const node = workItem.node;
+        switch (node.nodeType) {
+          case NODE_TYPE_ELEMENT: {
+            const el = node as Element;
+            chunks.push(`<${el[NAME]}`);
+            let attr = el[ATTRIBUTES]?.[CHILD];
+            while (attr) {
+              chunks.push(` ${attr[NAME]}`);
+              let value = attr[VALUE];
+              if (value !== '') {
+                value = String(value)
+                  .replace(/&/g, '&amp;')
+                  .replace(/"/g, '&quot;');
+                chunks.push(`="${value}"`);
+              }
+              attr = attr[NEXT];
+            }
+            chunks.push('>');
+            if (isVoidElement(el)) break;
+
+            const content =
+              el.namespaceURI === HTML_NAMESPACE && el.localName === 'template'
+                ? (el as {[CONTENT]?: ParentNode})[CONTENT]
+                : el;
+            workItems.push({type: 'closing', name: el[NAME]});
+            workItems.push({
+              type: 'content',
+              child: content?.[CHILD] ?? null,
+            });
+            break;
+          }
+          case NODE_TYPE_TEXT: {
+            const text = node as Text;
+            chunks.push(
+              text[DATA].replace(/&/g, '&amp;')
+                .replace(/"/g, '&quot;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;'),
+            );
+            break;
+          }
+          case NODE_TYPE_COMMENT: {
+            const text = node as Comment;
+            chunks.push(`<!--${text[DATA]}-->`);
+            break;
+          }
         }
-        attr = attr[NEXT];
+        break;
       }
-      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]}-->`;
+      case 'content': {
+        const child = workItem.child;
+        if (child) {
+          workItems.push({type: 'content', child: child[NEXT]});
+          workItems.push({type: 'opening', node: child});
+        }
+        break;
+      }
+      case 'closing':
+        chunks.push(`</${workItem.name}>`);
+        break;
     }
   }
-  return '';
+
+  return chunks.join('');
 }

package/source/shared.ts

@@ -2,9 +2,21 @@ import {
   DATA,
   OWNER_DOCUMENT,
   ATTRIBUTES,
-  NodeType,
+  NODE_TYPE_ATTRIBUTE,
+  NODE_TYPE_COMMENT,
+  NODE_TYPE_DOCUMENT_FRAGMENT,
+  NODE_TYPE_ELEMENT,
+  NODE_TYPE_TEXT,
+  NODE_TYPE_DOCUMENT,
   CHILD,
   NEXT,
+  NAME,
+  PREFIX,
+  CONTENT,
+  HTML_NAMESPACE,
+  CREATE_ELEMENT,
+  asciiLowercase,
+  splitOnASCIIWhitespace,
 } from './constants.ts';
 import type {Document} from './Document.ts';
 import type {DocumentFragment} from './DocumentFragment.ts';
@@ -12,73 +24,133 @@ import type {Node} from './Node.ts';
 import type {Comment} from './Comment.ts';
 import type {ParentNode} from './ParentNode.ts';
 import type {Element} from './Element.ts';
+import type {Attr} from './Attr.ts';
+import type {HTMLTemplateElement} from './HTMLTemplateElement.ts';
 import type {CharacterData} from './CharacterData.ts';
 import type {Text} from './Text.ts';
+import {
+  MATCHER_CLASS,
+  MATCHER_ID,
+  querySelector,
+  querySelectorAll,
+} from './selectors.ts';
+import {createDOMException} from './dom-exception.ts';
+
+export function isAttributeNode(node: Node): node is Attr {
+  return node.nodeType === NODE_TYPE_ATTRIBUTE;
+}
 
 export function isCharacterData(node: Node): node is CharacterData {
   return DATA in node;
 }
 
 export function isTextNode(node: Node): node is Text {
-  return node.nodeType === NodeType.TEXT_NODE;
+  return node.nodeType === NODE_TYPE_TEXT;
 }
 
 export function isCommentNode(node: Node): node is Comment {
-  return node.nodeType === NodeType.COMMENT_NODE;
+  return node.nodeType === NODE_TYPE_COMMENT;
 }
 
 export function isElementNode(node: Node): node is Element {
-  return node.nodeType === NodeType.ELEMENT_NODE;
+  return node.nodeType === NODE_TYPE_ELEMENT;
 }
 
 export function isDocumentFragmentNode(node: Node): node is DocumentFragment {
-  return node.nodeType === NodeType.DOCUMENT_FRAGMENT_NODE;
+  return node.nodeType === NODE_TYPE_DOCUMENT_FRAGMENT;
 }
 
 export function isParentNode(node: Node): node is ParentNode {
   return 'appendChild' in node;
 }
 
-export function cloneNode(
-  node: Node,
-  deep?: boolean,
-  document: Document = node.ownerDocument,
-): Node {
+export function collectAdoptionSnapshot(root: Node) {
+  const nodes: Node[] = [];
+  const pendingRoots = [root];
+  const pending = new Set<Node>(pendingRoots);
+  const visited = new Set<Node>();
+  let treeNodes: Node[] | undefined;
+
+  while (pendingRoots.length > 0) {
+    const currentRoot = pendingRoots.pop()!;
+    pending.delete(currentRoot);
+    if (visited.has(currentRoot)) continue;
+
+    const currentTreeNodes: Node[] = [];
+    for (const node of selfAndDescendants(currentRoot)) {
+      if (visited.has(node)) continue;
+
+      visited.add(node);
+      nodes.push(node);
+      currentTreeNodes.push(node);
+      if (!isElementNode(node)) continue;
+
+      const attributes = node[ATTRIBUTES];
+      if (attributes) {
+        for (const attribute of attributes) {
+          if (visited.has(attribute)) continue;
+          visited.add(attribute);
+          nodes.push(attribute);
+        }
+      }
+
+      const content = (node as HTMLTemplateElement)[CONTENT];
+      if (content && !visited.has(content) && !pending.has(content)) {
+        pending.add(content);
+        pendingRoots.push(content);
+      }
+    }
+
+    treeNodes ??= currentTreeNodes;
+  }
+
+  return {nodes, treeNodes: treeNodes!};
+}
+
+export function adoptNodes(nodes: Node[], document: Document) {
+  for (const node of nodes) node[OWNER_DOCUMENT] = document;
+}
+
+function cloneAttribute(attribute: Attr, document: Document) {
+  const Attribute = attribute.constructor as new (
+    name: string,
+    value: string,
+    namespace?: string | null,
+  ) => Attr;
+  const cloned = new Attribute(
+    attribute.name,
+    attribute.value,
+    attribute.namespaceURI,
+  );
+  cloned[OWNER_DOCUMENT] = document;
+  return cloned;
+}
+
+function cloneNodeShallow(node: Node, document: Document): Node {
   if (isTextNode(node)) {
     return document.createTextNode(node.data);
   } else if (isCommentNode(node)) {
     return document.createComment(node.data);
+  } else if (isAttributeNode(node)) {
+    return cloneAttribute(node, document);
   } else if (isElementNode(node)) {
-    const cloned = document.createElement(node.localName);
+    const cloned = document[CREATE_ELEMENT](
+      node[NAME],
+      node.namespaceURI,
+      node[PREFIX],
+      node.localName,
+    );
 
     if (node[ATTRIBUTES]) {
       for (let i = 0; i < node[ATTRIBUTES].length; i++) {
         const attribute = node[ATTRIBUTES].item(i)!;
-        cloned.setAttributeNS(
-          attribute.namespaceURI,
-          attribute.name,
-          attribute.value,
-        );
-      }
-    }
-
-    if (deep) {
-      for (const child of node.childNodes) {
-        cloned.appendChild(cloneNode(child, true, document));
+        cloned.attributes.setNamedItem(cloneAttribute(attribute, document));
       }
     }
 
     return cloned;
   } else if (isDocumentFragmentNode(node)) {
-    const fragment = document.createDocumentFragment();
-
-    if (deep) {
-      for (const child of (node as DocumentFragment).childNodes) {
-        fragment.appendChild(cloneNode(child, true, document));
-      }
-    }
-
-    return fragment;
+    return document.createDocumentFragment();
   } else {
     const cloned = new (node.constructor as any)();
     cloned[OWNER_DOCUMENT] = document;
@@ -86,17 +158,174 @@ export function cloneNode(
   }
 }
 
+type CloneParent = Element | DocumentFragment;
+
+interface CloneFrame {
+  source: CloneParent;
+  destination: CloneParent;
+  appendTo?: ParentNode;
+  childIndex: number;
+  cloningContent: boolean;
+  contentSource?: DocumentFragment;
+  contentDestination?: DocumentFragment;
+}
+
+export function cloneNode(
+  node: Node,
+  deep?: boolean,
+  document: Document = node.ownerDocument,
+): Node {
+  if (node.nodeType === NODE_TYPE_DOCUMENT) {
+    throw createDOMException(
+      'Cannot clone a document node',
+      'NotSupportedError',
+    );
+  }
+
+  const cloned = cloneNodeShallow(node, document);
+
+  if (!deep || (!isElementNode(node) && !isDocumentFragmentNode(node))) {
+    return cloned;
+  }
+
+  const visited = new Set<Node>([node]);
+  const frames: CloneFrame[] = [
+    {
+      source: node,
+      destination: cloned as CloneParent,
+      childIndex: 0,
+      cloningContent: false,
+    },
+  ];
+
+  while (frames.length > 0) {
+    const frame = frames[frames.length - 1]!;
+    let sourceChild: Node | undefined;
+    let destinationParent: ParentNode;
+
+    if (!frame.cloningContent) {
+      sourceChild = frame.source.childNodes[frame.childIndex++];
+      destinationParent = frame.destination;
+
+      if (!sourceChild) {
+        frame.cloningContent = true;
+        frame.childIndex = 0;
+
+        if (
+          isElementNode(frame.source) &&
+          frame.source.namespaceURI === HTML_NAMESPACE &&
+          frame.source.localName === 'template'
+        ) {
+          const content = (frame.source as HTMLTemplateElement)[CONTENT];
+          if (content) {
+            if (visited.has(content)) throwCloneGraphError();
+            visited.add(content);
+            frame.contentSource = content;
+            frame.contentDestination = (
+              frame.destination as HTMLTemplateElement
+            ).content;
+          }
+        }
+
+        continue;
+      }
+    } else if (frame.contentSource && frame.contentDestination) {
+      sourceChild = frame.contentSource.childNodes[frame.childIndex++];
+      destinationParent = frame.contentDestination;
+    } else {
+      frames.pop();
+      if (frame.appendTo) frame.appendTo.appendChild(frame.destination);
+      continue;
+    }
+
+    if (!sourceChild) {
+      frames.pop();
+      if (frame.appendTo) frame.appendTo.appendChild(frame.destination);
+      continue;
+    }
+
+    if (visited.has(sourceChild)) throwCloneGraphError();
+    visited.add(sourceChild);
+    const clonedChild = cloneNodeShallow(sourceChild, document);
+
+    if (isElementNode(sourceChild) || isDocumentFragmentNode(sourceChild)) {
+      frames.push({
+        source: sourceChild,
+        destination: clonedChild as CloneParent,
+        appendTo: destinationParent,
+        childIndex: 0,
+        cloningContent: false,
+      });
+    } else {
+      destinationParent.appendChild(clonedChild);
+    }
+  }
+
+  return cloned;
+}
+
+function throwCloneGraphError(): never {
+  throw new Error('Cannot clone a cyclic or repeated node graph');
+}
+
+export function getElementById(within: ParentNode, elementId: string) {
+  const id = String(elementId);
+  if (id === '') return null;
+
+  return querySelector(within, [{type: MATCHER_ID, name: id}]);
+}
+
+export function getElementsByClassName(within: ParentNode, classNames: string) {
+  const names = [...new Set(splitOnASCIIWhitespace(String(classNames)))];
+
+  return querySelectorAll(
+    within,
+    names.map((name) => ({type: MATCHER_CLASS, name})),
+  );
+}
+
+export function getElementsByTagName(
+  within: ParentNode,
+  qualifiedName: string,
+) {
+  const name = String(qualifiedName);
+  const normalizedHtmlName = asciiLowercase(name);
+  const elements: Element[] = [];
+
+  for (const node of descendants(within)) {
+    if (!isElementNode(node)) continue;
+
+    if (
+      name === '*' ||
+      (node.namespaceURI === HTML_NAMESPACE
+        ? node[NAME] === normalizedHtmlName
+        : node[NAME] === name)
+    ) {
+      elements.push(node);
+    }
+  }
+
+  return elements;
+}
+
 export function descendants(node: Node) {
   const nodes: Node[] = [];
-  const walk = (node: Node) => {
-    nodes.push(node);
-    const child = node[CHILD];
-    if (child) walk(child);
-    const sibling = node[NEXT];
-    if (sibling) walk(sibling);
-  };
-  const child = node[CHILD];
-  if (child) walk(child);
+  const pendingSiblings: Node[] = [];
+  let current = node[CHILD];
+
+  while (current) {
+    nodes.push(current);
+
+    const child = current[CHILD];
+    const sibling = current[NEXT];
+    if (child) {
+      if (sibling) pendingSiblings.push(sibling);
+      current = child;
+    } else {
+      current = sibling ?? pendingSiblings.pop() ?? null;
+    }
+  }
+
   return nodes;
 }