@remote-dom/polyfill 1.5.1 → 1.6.0

package/source/MutationObserver.ts

@@ -1,3 +1,281 @@
+import type {Node} from './Node.ts';
+import {NodeList} from './NodeList.ts';
+
+export interface MutationObserverInit {
+  attributes?: boolean;
+  attributeFilter?: string[];
+  attributeOldValue?: boolean;
+  characterData?: boolean;
+  characterDataOldValue?: boolean;
+  childList?: boolean;
+  subtree?: boolean;
+}
+
+export interface MutationRecord {
+  readonly addedNodes: NodeList;
+  readonly attributeName: string | null;
+  readonly attributeNamespace: string | null;
+  readonly nextSibling: Node | null;
+  readonly oldValue: string | null;
+  readonly previousSibling: Node | null;
+  readonly removedNodes: NodeList;
+  readonly target: Node;
+  readonly type: 'attributes' | 'characterData' | 'childList';
+}
+
+export type MutationCallback = (
+  mutations: MutationRecord[],
+  observer: MutationObserver,
+) => void;
+
+interface NormalizedMutationObserverInit {
+  attributes: boolean;
+  attributeFilter?: Set<string>;
+  attributeOldValue: boolean;
+  characterData: boolean;
+  characterDataOldValue: boolean;
+  childList: boolean;
+  subtree: boolean;
+}
+
+type MutationRecordInit = Pick<MutationRecord, 'target' | 'type'> &
+  Partial<
+    Pick<
+      MutationRecord,
+      | 'addedNodes'
+      | 'attributeName'
+      | 'attributeNamespace'
+      | 'nextSibling'
+      | 'oldValue'
+      | 'previousSibling'
+      | 'removedNodes'
+    >
+  >;
+
+type Registrations = WeakMap<
+  Node,
+  Map<MutationObserver, NormalizedMutationObserverInit>
+>;
+
+let registrations: Registrations | undefined;
+let registrationCount = 0;
+let attributeRegistrationCount = 0;
+let characterDataRegistrationCount = 0;
+let childListRegistrationCount = 0;
+
+// Mutation sites read these live bindings before capturing old values or
+// allocating record data. Keep them split so observing one mutation type does
+// not add work to unrelated mutations.
+/** @internal */
+export let attributeObserversActive = false;
+/** @internal */
+export let characterDataObserversActive = false;
+/** @internal */
+export let childListObserversActive = false;
+
 export class MutationObserver {
-  // stub implementation
+  readonly #callback: MutationCallback;
+  readonly #records: MutationRecord[] = [];
+  readonly #targets = new Set<Node>();
+  #scheduled = false;
+
+  constructor(callback: MutationCallback) {
+    if (typeof callback !== 'function') {
+      throw new TypeError('MutationObserver callback must be a function');
+    }
+
+    this.#callback = callback;
+  }
+
+  observe(target: Node, options: MutationObserverInit = {}) {
+    const normalizedOptions = normalizeOptions(options);
+    const currentRegistrations = (registrations ??= new WeakMap());
+    let targetRegistrations = currentRegistrations.get(target);
+
+    if (targetRegistrations == null) {
+      targetRegistrations = new Map();
+      currentRegistrations.set(target, targetRegistrations);
+    }
+
+    const previousOptions = targetRegistrations.get(this);
+    if (previousOptions == null) {
+      registrationCount++;
+    } else {
+      updateRegistrationCounts(previousOptions, -1);
+    }
+
+    targetRegistrations.set(this, normalizedOptions);
+    updateRegistrationCounts(normalizedOptions, 1);
+    this.#targets.add(target);
+  }
+
+  disconnect() {
+    const currentRegistrations = registrations;
+    if (currentRegistrations == null) return;
+
+    for (const target of this.#targets) {
+      const targetRegistrations = currentRegistrations.get(target);
+      const options = targetRegistrations?.get(this);
+      if (options != null) {
+        targetRegistrations!.delete(this);
+        registrationCount--;
+        updateRegistrationCounts(options, -1);
+      }
+
+      if (targetRegistrations?.size === 0) {
+        currentRegistrations.delete(target);
+      }
+    }
+
+    this.#targets.clear();
+    this.#records.length = 0;
+
+    if (registrationCount === 0) {
+      registrations = undefined;
+    }
+  }
+
+  takeRecords() {
+    return this.#records.splice(0);
+  }
+
+  /** @internal */
+  enqueue(record: MutationRecord) {
+    this.#records.push(record);
+
+    if (this.#scheduled) return;
+    this.#scheduled = true;
+
+    queueMicrotask(() => {
+      this.#scheduled = false;
+      const records = this.takeRecords();
+
+      if (records.length > 0) {
+        this.#callback.call(this, records, this);
+      }
+    });
+  }
+}
+
+/** @internal */
+export function queueMutationRecord(init: MutationRecordInit) {
+  const currentRegistrations = registrations;
+  if (currentRegistrations == null) return;
+
+  const interestedObservers = new Map<MutationObserver, boolean>();
+  let node: Node | null = init.target;
+
+  while (node) {
+    const targetRegistrations = currentRegistrations.get(node);
+
+    if (targetRegistrations) {
+      for (const [observer, options] of targetRegistrations) {
+        if (node !== init.target && !options.subtree) continue;
+
+        let includeOldValue = false;
+
+        if (init.type === 'attributes') {
+          if (!options.attributes) continue;
+          if (
+            options.attributeFilter &&
+            !options.attributeFilter.has(init.attributeName ?? '')
+          ) {
+            continue;
+          }
+          includeOldValue = options.attributeOldValue;
+        } else if (init.type === 'characterData') {
+          if (!options.characterData) continue;
+          includeOldValue = options.characterDataOldValue;
+        } else if (!options.childList) {
+          continue;
+        }
+
+        interestedObservers.set(
+          observer,
+          interestedObservers.get(observer) === true || includeOldValue,
+        );
+      }
+    }
+
+    node = node.parentNode;
+  }
+
+  for (const [observer, includeOldValue] of interestedObservers) {
+    observer.enqueue({
+      addedNodes: init.addedNodes ?? new NodeList(),
+      attributeName: init.attributeName ?? null,
+      attributeNamespace: init.attributeNamespace ?? null,
+      nextSibling: init.nextSibling ?? null,
+      oldValue: includeOldValue ? (init.oldValue ?? null) : null,
+      previousSibling: init.previousSibling ?? null,
+      removedNodes: init.removedNodes ?? new NodeList(),
+      target: init.target,
+      type: init.type,
+    });
+  }
+}
+
+/** @internal */
+export function mutationNodeList(...nodes: Node[]) {
+  const list = new NodeList();
+  list.push(...nodes);
+  return list;
+}
+
+function normalizeOptions(
+  options: MutationObserverInit,
+): NormalizedMutationObserverInit {
+  if (
+    options.attributes === false &&
+    (options.attributeOldValue || options.attributeFilter != null)
+  ) {
+    throw new TypeError(
+      'attributeOldValue and attributeFilter require attributes to be enabled',
+    );
+  }
+
+  if (options.characterData === false && options.characterDataOldValue) {
+    throw new TypeError(
+      'characterDataOldValue requires characterData to be enabled',
+    );
+  }
+
+  const attributes =
+    options.attributes ??
+    (options.attributeOldValue === true || options.attributeFilter != null);
+  const characterData =
+    options.characterData ?? options.characterDataOldValue === true;
+  const childList = options.childList === true;
+
+  if (!attributes && !characterData && !childList) {
+    throw new TypeError(
+      'MutationObserver options must enable childList, attributes, or characterData',
+    );
+  }
+
+  return {
+    attributes,
+    attributeFilter:
+      options.attributeFilter == null
+        ? undefined
+        : new Set(options.attributeFilter.map(String)),
+    attributeOldValue: options.attributeOldValue === true,
+    characterData,
+    characterDataOldValue: options.characterDataOldValue === true,
+    childList,
+    subtree: options.subtree === true,
+  };
+}
+
+function updateRegistrationCounts(
+  options: NormalizedMutationObserverInit,
+  delta: 1 | -1,
+) {
+  if (options.attributes) attributeRegistrationCount += delta;
+  if (options.characterData) characterDataRegistrationCount += delta;
+  if (options.childList) childListRegistrationCount += delta;
+
+  attributeObserversActive = attributeRegistrationCount > 0;
+  characterDataObserversActive = characterDataRegistrationCount > 0;
+  childListObserversActive = childListRegistrationCount > 0;
 }

package/source/NamedNodeMap.ts

@@ -1,13 +1,24 @@
 import {
   CHILD,
   OWNER_ELEMENT,
+  OWNER_DOCUMENT,
   NS,
   NEXT,
-  NamespaceURI,
+  type NamespaceURI,
   HOOKS,
+  HTML_NAMESPACE,
+  asciiLowercase,
 } from './constants.ts';
+import {normalizeNamespace} from './names.ts';
 import type {Attr} from './Attr.ts';
 import type {Element} from './Element.ts';
+import {
+  attributeObserversActive,
+  queueMutationRecord,
+} from './MutationObserver.ts';
+import {performWithCustomElementReactions} from './custom-element-reactions.ts';
+import {enqueueAttributeReaction} from './attribute-reactions.ts';
+import {createDOMException} from './dom-exception.ts';
 
 export class NamedNodeMap {
   [CHILD]: Attr | null = null;
@@ -18,13 +29,27 @@ export class NamedNodeMap {
   }
 
   getNamedItem(name: string) {
-    return this.getNamedItemNS(null, name);
+    const qualifiedName = String(name);
+    const normalizedName =
+      this[OWNER_ELEMENT][NS] === HTML_NAMESPACE
+        ? asciiLowercase(qualifiedName)
+        : qualifiedName;
+
+    let attr = this[CHILD];
+    while (attr) {
+      if (attr.name === normalizedName) return attr;
+      attr = attr[NEXT];
+    }
+    return null;
   }
 
-  getNamedItemNS(namespaceURI: NamespaceURI | null, name: string) {
+  getNamedItemNS(namespaceURI: NamespaceURI, localName: string) {
+    const namespace = normalizeNamespace(namespaceURI);
+    const normalizedLocalName = String(localName);
+
     let attr = this[CHILD];
     while (attr) {
-      if (attr.name === name && attr[NS] == namespaceURI) {
+      if (attr.localName === normalizedLocalName && attr[NS] === namespace) {
         return attr;
       }
       attr = attr[NEXT];
@@ -53,23 +78,62 @@ export class NamedNodeMap {
   }
 
   removeNamedItem(name: string) {
-    return this.removeNamedItemNS(null, name);
+    const qualifiedName = String(name);
+    const normalizedName =
+      this[OWNER_ELEMENT][NS] === HTML_NAMESPACE
+        ? asciiLowercase(qualifiedName)
+        : qualifiedName;
+
+    return performWithCustomElementReactions(() =>
+      this.removeNamedItemImmediately((attr) => attr.name === normalizedName),
+    );
+  }
+
+  removeNamedItemNS(namespaceURI: NamespaceURI, localName: string) {
+    const namespace = normalizeNamespace(namespaceURI);
+    const normalizedLocalName = String(localName);
+
+    return performWithCustomElementReactions(() =>
+      this.removeNamedItemImmediately(
+        (attr) =>
+          attr.localName === normalizedLocalName && attr[NS] === namespace,
+      ),
+    );
   }
 
-  removeNamedItemNS(namespaceURI: NamespaceURI | null, name: string) {
+  private removeNamedItemImmediately(matches: (attr: Attr) => boolean) {
     const ownerElement = this[OWNER_ELEMENT];
     let attr = this[CHILD];
     let prev: typeof attr | null = null;
 
     while (attr != null) {
-      if (attr.name === name && attr[NS] == namespaceURI) {
+      if (matches(attr)) {
         if (prev) prev[NEXT] = attr[NEXT];
         if (this[CHILD] === attr) this[CHILD] = attr[NEXT];
-        updateElementAttribute(ownerElement, attr.name, attr.value, null);
+        const oldValue = attr.value;
+        attr[NEXT] = null;
+        attr[OWNER_ELEMENT] = null;
+
+        if (attributeObserversActive) {
+          queueMutationRecord({
+            type: 'attributes',
+            target: ownerElement,
+            attributeName: attr.name,
+            attributeNamespace: attr[NS],
+            oldValue,
+          });
+        }
         ownerElement[HOOKS].removeAttribute?.(
           ownerElement as any,
-          name,
-          namespaceURI,
+          attr.name,
+          attr[NS],
+        );
+        enqueueAttributeReaction(
+          ownerElement,
+          attr.localName,
+          oldValue,
+          null,
+          attr[NS],
         );
         return attr;
       }
@@ -82,42 +146,73 @@ export class NamedNodeMap {
   }
 
   setNamedItem(attr: Attr) {
+    return performWithCustomElementReactions(() =>
+      this.setNamedItemImmediately(attr),
+    );
+  }
+
+  private setNamedItemImmediately(attr: Attr) {
     const ownerElement = this[OWNER_ELEMENT];
+    const currentOwner = attr[OWNER_ELEMENT];
+
+    if (currentOwner != null && currentOwner !== ownerElement) {
+      throw createDOMException(
+        'The attribute is already in use by another element.',
+        'InUseAttributeError',
+      );
+    }
+
     let old = null;
     let child = this[CHILD];
-    attr[OWNER_ELEMENT] = ownerElement;
-    if (child == null) {
-      this[CHILD] = attr;
-      // return null;
-    } else {
-      let prev;
-      while (child) {
-        if (child.name === attr.name && child[NS] == attr[NS]) {
-          if (prev) prev[NEXT] = attr;
-          else this[CHILD] = attr;
-          attr[NEXT] = child[NEXT];
-          child[NEXT] = null;
-          old = child;
-          break;
-          // return child;
-        }
-        prev = child;
-        child = child[NEXT];
+    let prev: Attr | null = null;
+
+    while (child) {
+      if (child.localName === attr.localName && child[NS] === attr[NS]) {
+        if (child === attr) return child;
+
+        if (prev) prev[NEXT] = attr;
+        else this[CHILD] = attr;
+        attr[NEXT] = child[NEXT];
+        child[NEXT] = null;
+        old = child;
+        break;
       }
+
+      prev = child;
+      child = child[NEXT];
+    }
+
+    if (old == null) {
       if (prev) prev[NEXT] = attr;
       else this[CHILD] = attr;
-      // return null;
     }
 
-    // only invoke the protocol if the value changed
-    if (!old || old.value !== attr.value) {
-      updateElementAttribute(
-        ownerElement,
-        attr.name,
-        old?.value ?? null,
-        attr.value,
+    attr[OWNER_ELEMENT] = ownerElement;
+    attr[OWNER_DOCUMENT] = ownerElement[OWNER_DOCUMENT];
+    if (old) old[OWNER_ELEMENT] = null;
+
+    const valueChanged = old == null || old.value !== attr.value;
+    const qualifiedNameChanged = old != null && old.name !== attr.name;
+
+    if (valueChanged && attributeObserversActive) {
+      queueMutationRecord({
+        type: 'attributes',
+        target: ownerElement,
+        attributeName: attr.name,
+        attributeNamespace: attr[NS],
+        oldValue: old?.value ?? null,
+      });
+    }
+
+    if (qualifiedNameChanged) {
+      ownerElement[HOOKS].removeAttribute?.(
+        ownerElement as any,
+        old!.name,
+        old![NS],
       );
+    }
 
+    if (valueChanged || qualifiedNameChanged) {
       ownerElement[HOOKS].setAttribute?.(
         ownerElement as any,
         attr.name,
@@ -126,6 +221,16 @@ export class NamedNodeMap {
       );
     }
 
+    if (valueChanged) {
+      enqueueAttributeReaction(
+        ownerElement,
+        attr.localName,
+        old?.value ?? null,
+        attr.value,
+        attr[NS],
+      );
+    }
+
     return old;
   }
 
@@ -141,27 +246,3 @@ export class NamedNodeMap {
     }
   }
 }
-
-function updateElementAttribute(
-  element: Element,
-  name: string,
-  oldValue: string | null,
-  newValue: string | null,
-) {
-  const {observedAttributes} = element.constructor as typeof Element;
-  const {attributeChangedCallback} = element;
-
-  if (name === 'slot') {
-    element.slot = newValue ?? '';
-  }
-
-  if (
-    attributeChangedCallback == null ||
-    observedAttributes == null ||
-    !observedAttributes.includes(name)
-  ) {
-    return;
-  }
-
-  return attributeChangedCallback.call(element, name, oldValue, newValue);
-}

package/source/Node.ts

@@ -2,17 +2,28 @@ import {
   OWNER_DOCUMENT,
   NAME,
   PARENT,
+  HOST,
   CHILD,
   PREV,
   NEXT,
-  NamespaceURI,
-  NodeType,
+  NODE_TYPE_ATTRIBUTE,
+  NODE_TYPE_DOCUMENT,
+  NODE_TYPE_DOCUMENT_FRAGMENT,
+  NODE_TYPE_DOCUMENT_TYPE,
+  NODE_TYPE_ELEMENT,
+  NODE_TYPE_NODE,
+  XMLNS_NAMESPACE,
+  type NodeType,
   HOOKS,
+  HOOKS_DISPATCH,
   IS_CONNECTED,
 } from './constants.ts';
+import type {Attr} from './Attr.ts';
 import type {Document} from './Document.ts';
+import type {Element} from './Element.ts';
 import type {ParentNode} from './ParentNode.ts';
 import {EventTarget} from './EventTarget.ts';
+import {normalizeNamespace} from './names.ts';
 import {
   isCharacterData,
   isParentNode,
@@ -22,18 +33,19 @@ import {
 } from './shared.ts';
 
 export class Node extends EventTarget {
-  nodeType = NodeType.NODE;
+  nodeType: NodeType = NODE_TYPE_NODE;
 
   [OWNER_DOCUMENT]!: Document;
   [NAME] = '';
   [PARENT]: ParentNode | null = null;
+  [HOST]: Node | null = null;
   [CHILD]: Node | null = null;
   [PREV]: Node | null = null;
   [NEXT]: Node | null = null;
   [IS_CONNECTED] = false;
 
   protected get [HOOKS]() {
-    return this[OWNER_DOCUMENT].defaultView[HOOKS];
+    return this[OWNER_DOCUMENT].defaultView[HOOKS_DISPATCH];
   }
 
   get localName() {
@@ -41,7 +53,7 @@ export class Node extends EventTarget {
   }
 
   get nodeName() {
-    return this[NAME].toUpperCase();
+    return this[NAME];
   }
 
   get ownerDocument() {
@@ -52,8 +64,9 @@ export class Node extends EventTarget {
     return this[IS_CONNECTED];
   }
 
-  isDefaultNamespace(namespace: string) {
-    return namespace === NamespaceURI.XHTML;
+  isDefaultNamespace(namespace: string | null): boolean {
+    const normalizedNamespace = normalizeNamespace(namespace);
+    return locateNamespace(this) === normalizedNamespace;
   }
 
   get parentNode() {
@@ -142,11 +155,12 @@ export class Node extends EventTarget {
     if (isCharacterData(this)) {
       this.data = data;
     } else if (isParentNode(this)) {
-      let child;
-      while ((child = this[CHILD])) {
-        this.removeChild(child);
+      const text = data == null ? '' : String(data);
+      if (text === '') {
+        this.replaceChildren();
+      } else {
+        this.replaceChildren(text);
       }
-      this.append(data);
     }
   }
 
@@ -157,10 +171,52 @@ export class Node extends EventTarget {
   contains(node: Node | null) {
     let currentNode: Node | null = node;
 
-    while (true) {
-      if (currentNode == null) return false;
+    while (currentNode != null) {
       if (currentNode === this) return true;
-      currentNode = node!.parentNode;
+      currentNode = currentNode.parentNode;
     }
+
+    return false;
   }
 }
+
+function locateNamespace(node: Node | null): string | null {
+  let current = node;
+
+  while (current) {
+    switch (current.nodeType) {
+      case NODE_TYPE_ELEMENT: {
+        const element = current as Element;
+
+        if (element.prefix == null && element.namespaceURI != null) {
+          return element.namespaceURI;
+        }
+
+        const namespace = element.attributes.getNamedItemNS(
+          XMLNS_NAMESPACE,
+          'xmlns',
+        );
+
+        if (namespace != null && namespace.prefix == null) {
+          return normalizeNamespace(namespace.value);
+        }
+
+        current = element.parentElement;
+        break;
+      }
+      case NODE_TYPE_DOCUMENT:
+        current = (current as Document).documentElement;
+        break;
+      case NODE_TYPE_DOCUMENT_TYPE:
+      case NODE_TYPE_DOCUMENT_FRAGMENT:
+        return null;
+      case NODE_TYPE_ATTRIBUTE:
+        current = (current as Attr).ownerElement;
+        break;
+      default:
+        current = current.parentElement;
+    }
+  }
+
+  return null;
+}