@remote-dom/polyfill 1.5.1 → 1.6.0

package/build/esm/EventTarget.mjs

@@ -1,53 +1,86 @@
-import { LISTENERS, OWNER_DOCUMENT, HOOKS, PATH } from './constants.mjs';
-import { fireEvent, CAPTURE_MARKER, EventPhase } from './Event.mjs';
+import { LISTENERS, OWNER_DOCUMENT, HOOKS_DISPATCH, DISPATCHING, PATH, STOP_IMMEDIATE_PROPAGATION } from './constants.mjs';
+import { createDOMException } from './dom-exception.mjs';
+import { fireEvent, EVENT_PHASE_CAPTURING, EVENT_PHASE_BUBBLING, EVENT_PHASE_NONE } from './Event.mjs';
 
-const ONCE_LISTENERS = Symbol('onceListeners');
+const LISTENER_REGISTRATIONS = Symbol('listenerRegistrations');
 class EventTarget {
-  [LISTENERS] = (() => undefined)();
-  [ONCE_LISTENERS] = (() => undefined)();
+  [LISTENERS] = undefined;
+  [LISTENER_REGISTRATIONS] = undefined;
 
   /**
    * Property set by entities that extend this class that are part of the DOM tree.
    * @internal
    */
-  [OWNER_DOCUMENT] = (() => undefined)();
+  [OWNER_DOCUMENT] = undefined;
   addEventListener(type, listener, options) {
     if (listener == null) return;
-    const capture = options === true || options && options.capture === true;
+    const capture = options === true || typeof options === 'object' && options.capture === true;
     const once = typeof options === 'object' && options.once === true;
     const signal = typeof options === 'object' ? options.signal : undefined;
-    const key = `${type}${capture ? CAPTURE_MARKER : ''}`;
-    let normalizedListener = listener;
-    if (once) {
-      normalizedListener = function normalizedListener(...args) {
-        this.removeEventListener(type, listener, options);
-        return typeof listener === 'object' ? listener.handleEvent(...args) : listener.call(this, ...args);
+    if (signal?.aborted) return;
+    const phase = listenerPhase(capture);
+    let registrations = this[LISTENER_REGISTRATIONS];
+    if (!registrations) {
+      registrations = new Map();
+      this[LISTENER_REGISTRATIONS] = registrations;
+    }
+    let registrationsForType = registrations.get(type);
+    if (!registrationsForType) {
+      registrationsForType = {};
+      registrations.set(type, registrationsForType);
+    }
+    let registrationsForPhase = registrationsForType[phase];
+    if (!registrationsForPhase) {
+      registrationsForPhase = new Map();
+      registrationsForType[phase] = registrationsForPhase;
+    }
+    if (registrationsForPhase.has(listener)) return;
+    const target = this;
+    const registration = {
+      type,
+      listener,
+      capture,
+      once,
+      normalizedListener: listener,
+      signal
+    };
+    if (once || signal) {
+      registration.normalizedListener = function normalizedListener(...args) {
+        if (registration.signal?.aborted) {
+          removeListenerRegistration(target, registration);
+          return;
+        }
+        if (registration.once) removeListenerRegistration(target, registration);
+        return typeof registration.listener === 'object' ? registration.listener.handleEvent(...args) : registration.listener.call(this, ...args);
       };
-      let onceListeners = this[ONCE_LISTENERS];
-      if (!onceListeners) {
-        onceListeners = new WeakMap();
-        this[ONCE_LISTENERS] = onceListeners;
-      }
-      onceListeners.set(listener, normalizedListener);
     }
     let listeners = this[LISTENERS];
     if (!listeners) {
       listeners = new Map();
       this[LISTENERS] = listeners;
     }
-    let list = listeners.get(key);
+    let listenersForType = listeners.get(type);
+    if (!listenersForType) {
+      listenersForType = {};
+      listeners.set(type, listenersForType);
+    }
+    let list = listenersForType[phase];
     if (!list) {
       list = new Set();
-      listeners.set(key, list);
+      listenersForType[phase] = list;
     }
-    if (list.has(normalizedListener)) return;
-    signal?.addEventListener('abort', () => {
-      removeEventListener.call(this, type, listener, options);
-    }, {
-      once: true
-    });
-    list.add(normalizedListener);
-    this[OWNER_DOCUMENT]?.defaultView[HOOKS].addEventListener?.(this, type, listener, options);
+    registrationsForPhase.set(listener, registration);
+    list.add(registration);
+    if (signal) {
+      const abortListener = () => {
+        removeListenerRegistration(target, registration);
+      };
+      registration.abortListener = abortListener;
+      signal.addEventListener('abort', abortListener, {
+        once: true
+      });
+    }
+    this[OWNER_DOCUMENT]?.defaultView[HOOKS_DISPATCH].addEventListener?.(this, type, listener, options);
   }
   removeEventListener(type, listener, options) {
     return removeEventListener.call(this, type, listener, options);
@@ -58,45 +91,82 @@ class EventTarget {
   // }
 
   dispatchEvent(event) {
-    const path = [];
-    // instanceof here is just to keep TypeScript happy
-    let target = this;
-    while (target != null) {
-      path.push(target);
-      target = target.parentNode;
+    if (event[DISPATCHING]) {
+      throw createDOMException(`Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.`, 'InvalidStateError');
     }
-    // while (target instanceof Node && (target = target.parentNode)) {
-    //   path.push(target);
-    // }
-    event.target = this;
-    event.srcElement = this;
-    event[PATH] = path;
-    for (let i = path.length; i--;) {
-      fireEvent(event, path[i], EventPhase.CAPTURING_PHASE);
-      if (event.cancelBubble) return event.defaultPrevented;
-    }
-    const bubblePath = event.bubbles ? path : path.slice(0, 1);
-    for (let i = 0; i < bubblePath.length; i++) {
-      fireEvent(event, bubblePath[i], EventPhase.BUBBLING_PHASE);
-      if (event.cancelBubble) return event.defaultPrevented;
+    event[DISPATCHING] = true;
+    try {
+      const path = [];
+      // instanceof here is just to keep TypeScript happy
+      let target = this;
+      while (target != null) {
+        path.push(target);
+        target = target.parentNode;
+      }
+      // while (target instanceof Node && (target = target.parentNode)) {
+      //   path.push(target);
+      // }
+      event.target = this;
+      event.srcElement = this;
+      event[PATH] = path;
+      for (let i = path.length; i--;) {
+        fireEvent(event, path[i], EVENT_PHASE_CAPTURING);
+        if (event.cancelBubble) return !event.defaultPrevented;
+      }
+      const bubblePath = event.bubbles ? path : path.slice(0, 1);
+      for (let i = 0; i < bubblePath.length; i++) {
+        fireEvent(event, bubblePath[i], EVENT_PHASE_BUBBLING);
+        if (event.cancelBubble) return !event.defaultPrevented;
+      }
+      return !event.defaultPrevented;
+    } finally {
+      event[DISPATCHING] = false;
+      event.cancelBubble = false;
+      event[STOP_IMMEDIATE_PROPAGATION] = false;
+      event.eventPhase = EVENT_PHASE_NONE;
+      event.currentTarget = null;
+      event[PATH] = [];
     }
-    return event.defaultPrevented;
   }
 }
 function removeEventListener(type, listener, options) {
   if (listener == null) return;
-  const onceListeners = this[ONCE_LISTENERS];
-  const normalizedListener = onceListeners?.get(listener) ?? listener;
-  onceListeners?.delete(listener);
   const capture = options === true || options && options.capture === true;
-  const key = `${type}${capture ? CAPTURE_MARKER : ''}`;
-  const list = this[LISTENERS]?.get(key);
-  if (list) {
-    const deleted = list.delete(normalizedListener);
-    if (deleted) {
-      this[OWNER_DOCUMENT]?.defaultView[HOOKS].removeEventListener?.(this, type, listener, options);
-    }
+  const phase = listenerPhase(Boolean(capture));
+  const registration = this[LISTENER_REGISTRATIONS]?.get(type)?.[phase]?.get(listener);
+  if (!registration) return;
+  removeListenerRegistration(this, registration);
+}
+function listenerPhase(capture) {
+  return capture ? 'capture' : 'bubble';
+}
+function removeListenerRegistration(target, registration) {
+  const phase = listenerPhase(registration.capture);
+  const registrations = target[LISTENER_REGISTRATIONS];
+  const registrationsForType = registrations?.get(registration.type);
+  if (!registrationsForType) return;
+  const registrationsForPhase = registrationsForType[phase];
+  if (!registrationsForPhase || registrationsForPhase.get(registration.listener) !== registration) {
+    return;
+  }
+  registrationsForPhase.delete(registration.listener);
+  if (registrationsForPhase.size === 0) delete registrationsForType[phase];
+  if (!registrationsForType.bubble && !registrationsForType.capture) {
+    registrations?.delete(registration.type);
+  }
+  if (registration.signal && registration.abortListener) {
+    registration.signal.removeEventListener('abort', registration.abortListener);
+  }
+  const listeners = target[LISTENERS];
+  const listenersForType = listeners?.get(registration.type);
+  if (!listenersForType) return;
+  const list = listenersForType[phase];
+  if (!list?.delete(registration)) return;
+  if (list.size === 0) delete listenersForType[phase];
+  if (!listenersForType.bubble && !listenersForType.capture) {
+    listeners?.delete(registration.type);
   }
+  target[OWNER_DOCUMENT]?.defaultView[HOOKS_DISPATCH].removeEventListener?.(target, registration.type, registration.listener, registration.capture);
 }
 
 export { EventTarget };

package/build/esm/HTMLTemplateElement.mjs

@@ -1,4 +1,4 @@
-import { CONTENT } from './constants.mjs';
+import { CONTENT, HOST } from './constants.mjs';
 import { Element } from './Element.mjs';
 import { parseHtml, serializeChildren } from './serialization.mjs';
 
@@ -7,6 +7,7 @@ class HTMLTemplateElement extends Element {
     let content = this[CONTENT];
     if (!content) {
       content = this.ownerDocument.createDocumentFragment();
+      content[HOST] = this;
       this[CONTENT] = content;
     }
     return content;

package/build/esm/MutationObserver.mjs

@@ -1,5 +1,169 @@
+import { NodeList } from './NodeList.mjs';
+
+let registrations;
+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 */
+let attributeObserversActive = false;
+/** @internal */
+let characterDataObserversActive = false;
+/** @internal */
+let childListObserversActive = false;
 class MutationObserver {
-  // stub implementation
+  #callback;
+  #records = [];
+  #targets = new Set();
+  #scheduled = false;
+  constructor(callback) {
+    if (typeof callback !== 'function') {
+      throw new TypeError('MutationObserver callback must be a function');
+    }
+    this.#callback = callback;
+  }
+  observe(target, options = {}) {
+    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) {
+    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 */
+function queueMutationRecord(init) {
+  const currentRegistrations = registrations;
+  if (currentRegistrations == null) return;
+  const interestedObservers = new Map();
+  let node = 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 */
+function mutationNodeList(...nodes) {
+  const list = new NodeList();
+  list.push(...nodes);
+  return list;
+}
+function normalizeOptions(options) {
+  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, delta) {
+  if (options.attributes) attributeRegistrationCount += delta;
+  if (options.characterData) characterDataRegistrationCount += delta;
+  if (options.childList) childListRegistrationCount += delta;
+  attributeObserversActive = attributeRegistrationCount > 0;
+  characterDataObserversActive = characterDataRegistrationCount > 0;
+  childListObserversActive = childListRegistrationCount > 0;
 }
 
-export { MutationObserver };
+export { MutationObserver, attributeObserversActive, characterDataObserversActive, childListObserversActive, mutationNodeList, queueMutationRecord };

package/build/esm/NamedNodeMap.mjs

@@ -1,4 +1,9 @@
-import { CHILD, OWNER_ELEMENT, NS, NEXT, HOOKS } from './constants.mjs';
+import { CHILD, OWNER_ELEMENT, NS, HTML_NAMESPACE, asciiLowercase, NEXT, HOOKS, OWNER_DOCUMENT } from './constants.mjs';
+import { normalizeNamespace } from './names.mjs';
+import { attributeObserversActive, queueMutationRecord } from './MutationObserver.mjs';
+import { performWithCustomElementReactions } from './custom-element-reactions.mjs';
+import { enqueueAttributeReaction } from './attribute-reactions.mjs';
+import { createDOMException } from './dom-exception.mjs';
 
 class NamedNodeMap {
   [CHILD] = null;
@@ -6,12 +11,21 @@ class NamedNodeMap {
     this[OWNER_ELEMENT] = ownerElement;
   }
   getNamedItem(name) {
-    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, name) {
+  getNamedItemNS(namespaceURI, localName) {
+    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];
@@ -37,18 +51,37 @@ class NamedNodeMap {
     return index;
   }
   removeNamedItem(name) {
-    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, localName) {
+    const namespace = normalizeNamespace(namespaceURI);
+    const normalizedLocalName = String(localName);
+    return performWithCustomElementReactions(() => this.removeNamedItemImmediately(attr => attr.localName === normalizedLocalName && attr[NS] === namespace));
   }
-  removeNamedItemNS(namespaceURI, name) {
+  removeNamedItemImmediately(matches) {
     const ownerElement = this[OWNER_ELEMENT];
     let attr = this[CHILD];
     let prev = 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);
-        ownerElement[HOOKS].removeAttribute?.(ownerElement, name, namespaceURI);
+        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, attr.name, attr[NS]);
+        enqueueAttributeReaction(ownerElement, attr.localName, oldValue, null, attr[NS]);
         return attr;
       }
       prev = attr;
@@ -57,36 +90,55 @@ class NamedNodeMap {
     return null;
   }
   setNamedItem(attr) {
+    return performWithCustomElementReactions(() => this.setNamedItemImmediately(attr));
+  }
+  setNamedItemImmediately(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 = 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, old.name, old[NS]);
+    }
+    if (valueChanged || qualifiedNameChanged) {
       ownerElement[HOOKS].setAttribute?.(ownerElement, attr.name, attr.value, attr[NS]);
     }
+    if (valueChanged) {
+      enqueueAttributeReaction(ownerElement, attr.localName, old?.value ?? null, attr.value, attr[NS]);
+    }
     return old;
   }
   setNamedItemNS(attr) {
@@ -100,20 +152,5 @@ class NamedNodeMap {
     }
   }
 }
-function updateElementAttribute(element, name, oldValue, newValue) {
-  const {
-    observedAttributes
-  } = element.constructor;
-  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);
-}
 
 export { NamedNodeMap };