@remote-dom/polyfill 1.5.1 → 1.6.0

package/build/esm/serialization.mjs

@@ -1,93 +1,196 @@
-import { CHILD, NEXT, NodeType, DATA, NAME, ATTRIBUTES, VALUE } from './constants.mjs';
+import { CHILD, asciiLowercase, NS, SVG_NAMESPACE, HTML_NAMESPACE, CREATE_ELEMENT, NAME, NEXT, NODE_TYPE_COMMENT, DATA, NODE_TYPE_TEXT, NODE_TYPE_ELEMENT, ATTRIBUTES, VALUE, CONTENT } from './constants.mjs';
 
-// 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]+[^<>'"=\s]+(?:=(['"])[^]*?\3|=[^>'"\s]*|))*)[\s]*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^&<>]+))/gi;
-const attributeTokenizer = /\s([^<>'"=\n\s]+)(?:=(["'])([\s\S]*?)\2|=([^>'"\n\s]*)|)/g;
+const CHARACTER_REFERENCES = {
+  amp: '&',
+  AMP: '&',
+  apos: "'",
+  gt: '>',
+  GT: '>',
+  lt: '<',
+  LT: '<',
+  quot: '"',
+  QUOT: '"'
+};
+const VOID_ELEMENTS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+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) {
+  return value.replace(/&(?:(amp|AMP|apos|gt|GT|lt|LT|quot|QUOT)|#(\d+)|#[xX]([\da-fA-F]+));/g, (reference, name, 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) {
+  return element.namespaceURI === HTML_NAMESPACE && VOID_ELEMENTS.has(element.localName);
+}
+function isHtmlIntegrationPoint(element) {
+  const name = element.localName;
+  return element[NS] === SVG_NAMESPACE && (name === 'foreignObject' || name === 'desc' || name === 'title');
+}
+function isSvgHtmlBreakout(tag, attributes) {
+  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;
+}
 function parseHtml(html, contextNode) {
   const document = contextNode.ownerDocument;
   const root = document.createDocumentFragment();
-  const stack = [root];
+  const stack = [];
   let parent = root;
-  let token;
-  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;
-      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;
+      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.content : node;
     } else if (token[5]) {
-      parent = stack.pop() || 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;
 }
 function serializeChildren(parentNode) {
-  let out = '';
-  let child = parentNode[CHILD];
-  while (child) {
-    out += serializeNode(child);
-    child = child[NEXT];
-  }
-  return out;
+  return serialize([{
+    type: 'content',
+    child: parentNode[CHILD]
+  }]);
 }
 function serializeNode(node) {
-  switch (node.nodeType) {
-    case NodeType.ELEMENT_NODE:
-      {
-        const el = node;
-        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) {
+  const chunks = [];
+  let workItem;
+  while (workItem = workItems.pop()) {
+    switch (workItem.type) {
+      case 'opening':
+        {
+          const node = workItem.node;
+          switch (node.nodeType) {
+            case NODE_TYPE_ELEMENT:
+              {
+                const el = node;
+                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[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;
+                chunks.push(text[DATA].replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+                break;
+              }
+            case NODE_TYPE_COMMENT:
+              {
+                const text = node;
+                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;
-        return text[DATA].replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      }
-    case NodeType.COMMENT_NODE:
-      {
-        const text = node;
-        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('');
 }
 
 export { parseHtml, serializeChildren, serializeNode };

package/build/esm/shared.mjs

@@ -1,67 +1,210 @@
-import { DATA, NodeType, ATTRIBUTES, OWNER_DOCUMENT, CHILD, NEXT } from './constants.mjs';
+import { asciiLowercase, HTML_NAMESPACE, NAME, splitOnASCIIWhitespace, NODE_TYPE_DOCUMENT, CONTENT, ATTRIBUTES, DATA, CHILD, NEXT, NODE_TYPE_TEXT, OWNER_DOCUMENT, NODE_TYPE_ELEMENT, CREATE_ELEMENT, PREFIX, NODE_TYPE_DOCUMENT_FRAGMENT, NODE_TYPE_COMMENT, NODE_TYPE_ATTRIBUTE } from './constants.mjs';
+import { querySelectorAll, querySelector, MATCHER_ID, MATCHER_CLASS } from './selectors.mjs';
+import { createDOMException } from './dom-exception.mjs';
 
+function isAttributeNode(node) {
+  return node.nodeType === NODE_TYPE_ATTRIBUTE;
+}
 function isCharacterData(node) {
   return DATA in node;
 }
 function isTextNode(node) {
-  return node.nodeType === NodeType.TEXT_NODE;
+  return node.nodeType === NODE_TYPE_TEXT;
 }
 function isCommentNode(node) {
-  return node.nodeType === NodeType.COMMENT_NODE;
+  return node.nodeType === NODE_TYPE_COMMENT;
 }
 function isElementNode(node) {
-  return node.nodeType === NodeType.ELEMENT_NODE;
+  return node.nodeType === NODE_TYPE_ELEMENT;
 }
 function isDocumentFragmentNode(node) {
-  return node.nodeType === NodeType.DOCUMENT_FRAGMENT_NODE;
+  return node.nodeType === NODE_TYPE_DOCUMENT_FRAGMENT;
 }
 function isParentNode(node) {
   return 'appendChild' in node;
 }
-function cloneNode(node, deep, document = node.ownerDocument) {
+function collectAdoptionSnapshot(root) {
+  const nodes = [];
+  const pendingRoots = [root];
+  const pending = new Set(pendingRoots);
+  const visited = new Set();
+  let treeNodes;
+  while (pendingRoots.length > 0) {
+    const currentRoot = pendingRoots.pop();
+    pending.delete(currentRoot);
+    if (visited.has(currentRoot)) continue;
+    const currentTreeNodes = [];
+    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[CONTENT];
+      if (content && !visited.has(content) && !pending.has(content)) {
+        pending.add(content);
+        pendingRoots.push(content);
+      }
+    }
+    treeNodes ??= currentTreeNodes;
+  }
+  return {
+    nodes,
+    treeNodes: treeNodes
+  };
+}
+function adoptNodes(nodes, document) {
+  for (const node of nodes) node[OWNER_DOCUMENT] = document;
+}
+function cloneAttribute(attribute, document) {
+  const Attribute = attribute.constructor;
+  const cloned = new Attribute(attribute.name, attribute.value, attribute.namespaceURI);
+  cloned[OWNER_DOCUMENT] = document;
+  return cloned;
+}
+function cloneNodeShallow(node, document) {
   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.childNodes) {
-        fragment.appendChild(cloneNode(child, true, document));
-      }
-    }
-    return fragment;
+    return document.createDocumentFragment();
   } else {
     const cloned = new node.constructor();
     cloned[OWNER_DOCUMENT] = document;
     return cloned;
   }
 }
+function cloneNode(node, deep, document = node.ownerDocument) {
+  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]);
+  const frames = [{
+    source: node,
+    destination: cloned,
+    childIndex: 0,
+    cloningContent: false
+  }];
+  while (frames.length > 0) {
+    const frame = frames[frames.length - 1];
+    let sourceChild;
+    let destinationParent;
+    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[CONTENT];
+          if (content) {
+            if (visited.has(content)) throwCloneGraphError();
+            visited.add(content);
+            frame.contentSource = content;
+            frame.contentDestination = frame.destination.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,
+        appendTo: destinationParent,
+        childIndex: 0,
+        cloningContent: false
+      });
+    } else {
+      destinationParent.appendChild(clonedChild);
+    }
+  }
+  return cloned;
+}
+function throwCloneGraphError() {
+  throw new Error('Cannot clone a cyclic or repeated node graph');
+}
+function getElementById(within, elementId) {
+  const id = String(elementId);
+  if (id === '') return null;
+  return querySelector(within, [{
+    type: MATCHER_ID,
+    name: id
+  }]);
+}
+function getElementsByClassName(within, classNames) {
+  const names = [...new Set(splitOnASCIIWhitespace(String(classNames)))];
+  return querySelectorAll(within, names.map(name => ({
+    type: MATCHER_CLASS,
+    name
+  })));
+}
+function getElementsByTagName(within, qualifiedName) {
+  const name = String(qualifiedName);
+  const normalizedHtmlName = asciiLowercase(name);
+  const elements = [];
+  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;
+}
 function descendants(node) {
   const nodes = [];
-  const walk = 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 = [];
+  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;
 }
 function selfAndDescendants(node) {
@@ -70,4 +213,4 @@ function selfAndDescendants(node) {
   return nodes;
 }
 
-export { cloneNode, descendants, isCharacterData, isCommentNode, isDocumentFragmentNode, isElementNode, isParentNode, isTextNode, selfAndDescendants };
+export { adoptNodes, cloneNode, collectAdoptionSnapshot, descendants, getElementById, getElementsByClassName, getElementsByTagName, isAttributeNode, isCharacterData, isCommentNode, isDocumentFragmentNode, isElementNode, isParentNode, isTextNode, selfAndDescendants };

package/build/esnext/Attr.esnext

@@ -1,8 +1,11 @@
-import { NodeType, NS, NEXT, VALUE, OWNER_ELEMENT, NAME, HOOKS } from './constants.esnext';
+import { NODE_TYPE_ATTRIBUTE, NS, NEXT, VALUE, OWNER_ELEMENT, NAME, HOOKS } from './constants.esnext';
 import { Node } from './Node.esnext';
+import { attributeObserversActive, queueMutationRecord } from './MutationObserver.esnext';
+import { enqueueAttributeReaction } from './attribute-reactions.esnext';
+import { performWithCustomElementReactions } from './custom-element-reactions.esnext';
 
 class Attr extends Node {
-  nodeType = NodeType.ATTRIBUTE_NODE;
+  nodeType = NODE_TYPE_ATTRIBUTE;
   [NS] = null;
   [NEXT] = null;
   [VALUE];
@@ -23,15 +26,52 @@ class Attr extends Node {
   }
   set name(_readonly) {
   }
+  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) {
     const str = String(value);
-    this[VALUE] = str;
     const ownerElement = this[OWNER_ELEMENT];
-    if (!ownerElement) return;
-    this[HOOKS].setAttribute?.(ownerElement, 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,
+        this[NAME],
+        str,
+        this[NS]
+      );
+      enqueueAttributeReaction(
+        ownerElement,
+        this.localName,
+        oldValue,
+        str,
+        this[NS]
+      );
+    });
   }
   get nodeValue() {
     return this.value;

package/build/esnext/CharacterData.esnext

@@ -1,5 +1,6 @@
 import { DATA, HOOKS } from './constants.esnext';
 import { ChildNode } from './ChildNode.esnext';
+import { queueMutationRecord, characterDataObserversActive } from './MutationObserver.esnext';
 
 class CharacterData extends ChildNode {
   [DATA] = "";
@@ -8,11 +9,20 @@ class CharacterData extends ChildNode {
     this[DATA] = data == null ? "" : String(data);
   }
   setData(data) {
+    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, str);
   }
   get data() {