@remote-dom/polyfill 1.5.1 → 1.6.0

package/source/Element.ts

@@ -1,19 +1,56 @@
-import {NS, ATTRIBUTES, NamespaceURI, NodeType} from './constants.ts';
+import {
+  NS,
+  NAME,
+  PREFIX,
+  ATTRIBUTES,
+  HTML_NAMESPACE,
+  NODE_TYPE_ELEMENT,
+  type NamespaceURI,
+  type NodeType,
+  asciiLowercase,
+  asciiUppercase,
+} from './constants.ts';
+import {
+  normalizeNamespace,
+  validateAndExtractQualifiedName,
+  validateAttributeLocalName,
+} from './names.ts';
 import {ParentNode} from './ParentNode.ts';
 import {NamedNodeMap} from './NamedNodeMap.ts';
 import {Attr} from './Attr.ts';
 import {serializeNode, serializeChildren, parseHtml} from './serialization.ts';
+import {
+  getElementsByClassName as findElementsByClassName,
+  getElementsByTagName as findElementsByTagName,
+} from './shared.ts';
 
 export class Element extends ParentNode {
   static readonly observedAttributes?: string[];
 
-  nodeType = NodeType.ELEMENT_NODE;
+  nodeType: NodeType = NODE_TYPE_ELEMENT;
+
+  [NS]: NamespaceURI = HTML_NAMESPACE;
+  [PREFIX]: string | null = null;
 
-  [NS] = NamespaceURI.XHTML;
   get namespaceURI() {
     return this[NS];
   }
 
+  get prefix() {
+    return this[PREFIX];
+  }
+
+  get localName() {
+    const prefix = this[PREFIX];
+    return prefix == null ? this[NAME] : this[NAME].slice(prefix.length + 1);
+  }
+
+  get nodeName() {
+    return this[NS] === HTML_NAMESPACE
+      ? asciiUppercase(this[NAME])
+      : this[NAME];
+  }
+
   get tagName() {
     return this.nodeName;
   }
@@ -22,14 +59,22 @@ export class Element extends ParentNode {
 
   [anyProperty: string]: any;
 
+  get id() {
+    return this.getAttributeNS(null, 'id') ?? '';
+  }
+
+  set id(id: string) {
+    this.setAttribute('id', String(id));
+  }
+
   get slot() {
-    return this.getAttribute('slot') ?? '';
+    return this.getAttributeNS(null, 'slot') ?? '';
   }
 
   set slot(slot: string) {
     const finalSlot = String(slot);
 
-    if (this.getAttribute('slot') !== finalSlot) {
+    if (this.getAttributeNS(null, 'slot') !== finalSlot) {
       this.attributes.setNamedItem(new Attr('slot', finalSlot));
     }
   }
@@ -47,11 +92,19 @@ export class Element extends ParentNode {
     return [...this.attributes].map((attr) => attr.name);
   }
 
-  get firstElementChild() {
+  getElementsByTagName(qualifiedName: string) {
+    return findElementsByTagName(this, qualifiedName);
+  }
+
+  get firstElementChild(): Element | null {
     return this.children[0] ?? null;
   }
 
-  get lastElementChild() {
+  getElementsByClassName(classNames: string) {
+    return findElementsByClassName(this, classNames);
+  }
+
+  get lastElementChild(): Element | null {
     return this.children[this.children.length - 1] ?? null;
   }
 
@@ -68,11 +121,68 @@ export class Element extends ParentNode {
   }
 
   setAttribute(name: string, value: string) {
-    this.attributes.setNamedItem(new Attr(name, String(value)));
+    const qualifiedName = String(name);
+    const normalizedValue = String(value);
+    validateAttributeLocalName(qualifiedName);
+    const normalizedName =
+      this[NS] === HTML_NAMESPACE
+        ? asciiLowercase(qualifiedName)
+        : qualifiedName;
+    const attribute = this.attributes.getNamedItemNS(null, normalizedName);
+
+    if (attribute) {
+      attribute.value = normalizedValue;
+    } else {
+      this.attributes.setNamedItem(new Attr(normalizedName, normalizedValue));
+    }
   }
 
-  setAttributeNS(namespace: NamespaceURI | null, name: string, value: string) {
-    this.attributes.setNamedItemNS(new Attr(name, String(value), namespace));
+  setAttributeNS(
+    namespace: NamespaceURI,
+    qualifiedName: string,
+    value: string,
+  ) {
+    const normalizedNamespace = normalizeNamespace(namespace);
+    const normalizedQualifiedName = String(qualifiedName);
+    const normalizedValue = String(value);
+    const name = validateAndExtractQualifiedName(
+      normalizedNamespace,
+      normalizedQualifiedName,
+      'attribute',
+    );
+    const attribute = this.attributes.getNamedItemNS(
+      name.namespace,
+      name.localName,
+    );
+
+    if (attribute) {
+      attribute.value = normalizedValue;
+    } else {
+      this.attributes.setNamedItemNS(
+        new Attr(name.qualifiedName, normalizedValue, name.namespace),
+      );
+    }
+  }
+
+  toggleAttribute(name: string, force?: boolean) {
+    const qualifiedName = String(name);
+    validateAttributeLocalName(qualifiedName);
+    const normalizedName =
+      this[NS] === HTML_NAMESPACE
+        ? asciiLowercase(qualifiedName)
+        : qualifiedName;
+    const attribute = this.attributes.getNamedItemNS(null, normalizedName);
+    const normalizedForce = force === undefined ? undefined : Boolean(force);
+
+    if (attribute == null) {
+      if (normalizedForce === false) return false;
+      this.attributes.setNamedItem(new Attr(normalizedName, ''));
+      return true;
+    }
+
+    if (normalizedForce === true) return true;
+    this.attributes.removeNamedItemNS(null, normalizedName);
+    return false;
   }
 
   getAttribute(name: string) {
@@ -80,7 +190,7 @@ export class Element extends ParentNode {
     return attr && attr.value;
   }
 
-  getAttributeNS(namespace: NamespaceURI | null, name: string) {
+  getAttributeNS(namespace: NamespaceURI, name: string) {
     const attr = this.attributes.getNamedItemNS(namespace, name);
     return attr && attr.value;
   }
@@ -90,16 +200,21 @@ export class Element extends ParentNode {
     return attr != null;
   }
 
-  hasAttributeNS(namespace: NamespaceURI | null, name: string) {
+  hasAttributeNS(namespace: NamespaceURI, name: string) {
     const attr = this.attributes.getNamedItemNS(namespace, name);
     return attr != null;
   }
 
   removeAttribute(name: string) {
-    this.attributes.removeNamedItem(name);
+    const qualifiedName = String(name);
+    const normalizedName =
+      this[NS] === HTML_NAMESPACE
+        ? asciiLowercase(qualifiedName)
+        : qualifiedName;
+    this.attributes.removeNamedItemNS(null, normalizedName);
   }
 
-  removeAttributeNS(namespace: NamespaceURI | null, name: string) {
+  removeAttributeNS(namespace: NamespaceURI, name: string) {
     this.attributes.removeNamedItemNS(namespace, name);
   }
 

package/source/Event.ts

@@ -1,4 +1,5 @@
 import {
+  DISPATCHING,
   PATH,
   IS_TRUSTED,
   LISTENERS,
@@ -6,14 +7,12 @@ import {
 } from './constants.ts';
 import type {EventTarget} from './EventTarget.ts';
 
-export const enum EventPhase {
-  NONE = 0,
-  CAPTURING_PHASE = 1,
-  AT_TARGET = 2,
-  BUBBLING_PHASE = 3,
-}
+export const EVENT_PHASE_NONE = 0;
+export const EVENT_PHASE_CAPTURING = 1;
+export const EVENT_PHASE_AT_TARGET = 2;
+export const EVENT_PHASE_BUBBLING = 3;
 
-export const CAPTURE_MARKER = '@';
+export type EventPhase = number;
 
 export interface EventInit {
   bubbles?: boolean;
@@ -27,16 +26,17 @@ const now =
     : performance.now.bind(performance);
 
 export class Event {
-  static NONE = EventPhase.NONE;
-  static CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
-  static AT_TARGET = EventPhase.AT_TARGET;
-  static BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+  static NONE: EventPhase = EVENT_PHASE_NONE;
+  static CAPTURING_PHASE: EventPhase = EVENT_PHASE_CAPTURING;
+  static AT_TARGET: EventPhase = EVENT_PHASE_AT_TARGET;
+  static BUBBLING_PHASE: EventPhase = EVENT_PHASE_BUBBLING;
 
-  // NONE = EventPhase.NONE;
-  // CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
-  // AT_TARGET = EventPhase.AT_TARGET;
-  // BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+  // NONE = EVENT_PHASE_NONE;
+  // CAPTURING_PHASE = EVENT_PHASE_CAPTURING;
+  // AT_TARGET = EVENT_PHASE_AT_TARGET;
+  // BUBBLING_PHASE = EVENT_PHASE_BUBBLING;
 
+  type: string;
   timeStamp = now();
   target: EventTarget | null = null;
   currentTarget: EventTarget | null = null;
@@ -46,17 +46,16 @@ export class Event {
   composed = false;
   defaultPrevented = false;
   cancelBubble = false;
-  eventPhase: EventPhase = 0;
+  eventPhase: EventPhase = EVENT_PHASE_NONE;
   // private inPassiveListener = false;
   data?: any;
   [PATH]: EventTarget[] = [];
   [IS_TRUSTED]!: boolean;
   [STOP_IMMEDIATE_PROPAGATION] = false;
+  [DISPATCHING] = false;
 
-  constructor(
-    public type: string,
-    options?: EventInit,
-  ) {
+  constructor(type: string, options?: EventInit) {
+    this.type = type;
     Object.defineProperty(this, IS_TRUSTED, {writable: true, value: false});
     if (options) {
       if (options.bubbles) this.bubbles = options.bubbles;
@@ -70,7 +69,7 @@ export class Event {
   }
 
   composedPath() {
-    return this[PATH];
+    return [...this[PATH]];
   }
 
   stopPropagation() {
@@ -83,15 +82,15 @@ export class Event {
   }
 
   preventDefault() {
-    this.defaultPrevented = true;
+    if (this.cancelable) this.defaultPrevented = true;
   }
 
   set returnValue(value) {
-    this.defaultPrevented = value;
+    if (!value) this.preventDefault();
   }
 
   get returnValue() {
-    return this.defaultPrevented;
+    return !this.defaultPrevented;
   }
 
   /** @deprecated */
@@ -105,22 +104,25 @@ export class Event {
 export function fireEvent(
   event: Event,
   currentTarget: EventTarget,
-  phase: EventPhase.BUBBLING_PHASE | EventPhase.CAPTURING_PHASE,
+  phase: typeof EVENT_PHASE_BUBBLING | typeof EVENT_PHASE_CAPTURING,
 ): void {
+  if (event.cancelBubble) return;
+
   const listeners = currentTarget[LISTENERS];
-  const list = listeners?.get(
-    `${event.type}${
-      phase === EventPhase.CAPTURING_PHASE ? CAPTURE_MARKER : ''
-    }`,
-  );
+  const list = listeners?.get(event.type)?.[
+    phase === EVENT_PHASE_CAPTURING ? 'capture' : 'bubble'
+  ];
 
   if (!list) return;
 
-  for (const listener of list) {
+  for (const registration of [...list]) {
+    if (!list.has(registration) || registration.signal?.aborted) continue;
+
     event.eventPhase =
-      event.target === currentTarget ? EventPhase.AT_TARGET : phase;
+      event.target === currentTarget ? EVENT_PHASE_AT_TARGET : phase;
     event.currentTarget = currentTarget;
 
+    const listener = registration.normalizedListener;
     try {
       if (typeof listener === 'object') {
         listener.handleEvent(event as any);

package/source/EventTarget.ts

@@ -1,18 +1,51 @@
-import {HOOKS, PATH, LISTENERS, OWNER_DOCUMENT} from './constants.ts';
-import {fireEvent, EventPhase} from './Event.ts';
-import {CAPTURE_MARKER, type Event} from './Event.ts';
+import {
+  DISPATCHING,
+  HOOKS_DISPATCH,
+  PATH,
+  LISTENERS,
+  OWNER_DOCUMENT,
+  STOP_IMMEDIATE_PROPAGATION,
+} from './constants.ts';
+import {createDOMException} from './dom-exception.ts';
+import {
+  EVENT_PHASE_NONE,
+  EVENT_PHASE_BUBBLING,
+  EVENT_PHASE_CAPTURING,
+  fireEvent,
+} from './Event.ts';
+import {type Event} from './Event.ts';
 import type {ChildNode} from './ChildNode.ts';
 import type {Document} from './Document.ts';
 
-const ONCE_LISTENERS = Symbol('onceListeners');
+const LISTENER_REGISTRATIONS = Symbol('listenerRegistrations');
+
+type ListenerPhase = 'bubble' | 'capture';
+
+interface EventListenersForType {
+  bubble?: Set<ListenerRegistration>;
+  capture?: Set<ListenerRegistration>;
+}
+
+interface ListenerRegistrationsForType {
+  bubble?: Map<EventListenerOrEventListenerObject, ListenerRegistration>;
+  capture?: Map<EventListenerOrEventListenerObject, ListenerRegistration>;
+}
+
+interface ListenerRegistration {
+  type: string;
+  listener: EventListenerOrEventListenerObject;
+  capture: boolean;
+  once: boolean;
+  normalizedListener: EventListenerOrEventListenerObject;
+  signal?: AbortSignal;
+  abortListener?: EventListener;
+}
 
 export class EventTarget {
-  [LISTENERS]:
-    | Map<string, Set<EventListenerOrEventListenerObject>>
-    | undefined = undefined;
+  [LISTENERS]: Map<string, EventListenersForType> | undefined = undefined;
 
-  [ONCE_LISTENERS]:
-    | WeakMap<EventListenerOrEventListenerObject, EventListener>
+  [LISTENER_REGISTRATIONS]:
+    | Map<string, ListenerRegistrationsForType>
     | undefined = undefined;
 
   /**
@@ -28,31 +61,59 @@ export class EventTarget {
   ) {
     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 (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;
 
-    if (once) {
-      normalizedListener = function normalizedListener(
+    const target = this;
+    const registration: ListenerRegistration = {
+      type,
+      listener,
+      capture,
+      once,
+      normalizedListener: listener,
+      signal,
+    };
+
+    if (once || signal) {
+      registration.normalizedListener = function normalizedListener(
         this: EventTarget,
         ...args: Parameters<EventListener>
       ) {
-        this.removeEventListener(type, listener, options);
+        if (registration.signal?.aborted) {
+          removeListenerRegistration(target, registration);
+          return;
+        }
+        if (registration.once) removeListenerRegistration(target, registration);
 
-        return typeof listener === 'object'
-          ? listener.handleEvent(...args)
-          : listener.call(this, ...args);
+        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];
@@ -61,24 +122,29 @@ export class EventTarget {
       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},
-    );
+    registrationsForPhase.set(listener, registration);
+    list.add(registration);
 
-    list.add(normalizedListener);
-    this[OWNER_DOCUMENT]?.defaultView[HOOKS].addEventListener?.(
+    if (signal) {
+      const abortListener = () => {
+        removeListenerRegistration(target, registration);
+      };
+      registration.abortListener = abortListener;
+      signal.addEventListener('abort', abortListener, {once: true});
+    }
+    this[OWNER_DOCUMENT]?.defaultView[HOOKS_DISPATCH].addEventListener?.(
       this as any,
       type,
       listener,
@@ -99,33 +165,51 @@ export class EventTarget {
   // }
 
   dispatchEvent(event: Event) {
-    const path: EventTarget[] = [];
-    // instanceof here is just to keep TypeScript happy
-    let target = this as unknown as ChildNode | null;
-    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]!, EventPhase.CAPTURING_PHASE);
-      if (event.cancelBubble) return event.defaultPrevented;
+    if (event[DISPATCHING]) {
+      throw createDOMException(
+        `Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.`,
+        'InvalidStateError',
+      );
     }
 
-    const bubblePath = event.bubbles ? path : path.slice(0, 1);
+    event[DISPATCHING] = true;
 
-    for (let i = 0; i < bubblePath.length; i++) {
-      fireEvent(event, bubblePath[i]!, EventPhase.BUBBLING_PHASE);
-      if (event.cancelBubble) return event.defaultPrevented;
-    }
+    try {
+      const path: EventTarget[] = [];
+      // instanceof here is just to keep TypeScript happy
+      let target = this as unknown as ChildNode | null;
+      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;
+      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] = [];
+    }
   }
 }
 
@@ -137,24 +221,64 @@ function removeEventListener(
 ) {
   if (listener == null) return;
 
-  const onceListeners = this[ONCE_LISTENERS];
-  const normalizedListener = onceListeners?.get(listener) ?? listener;
+  const capture = options === true || (options && options.capture === true);
+  const phase = listenerPhase(Boolean(capture));
+  const registration =
+    this[LISTENER_REGISTRATIONS]?.get(type)?.[phase]?.get(listener);
+  if (!registration) return;
 
-  onceListeners?.delete(listener);
+  removeListenerRegistration(this, registration);
+}
 
-  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 as any,
-        type,
-        listener,
-        options,
-      );
-    }
+function listenerPhase(capture: boolean): ListenerPhase {
+  return capture ? 'capture' : 'bubble';
+}
+
+function removeListenerRegistration(
+  target: EventTarget,
+  registration: ListenerRegistration,
+) {
+  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 as any,
+    registration.type,
+    registration.listener,
+    registration.capture,
+  );
 }

package/source/HTMLTemplateElement.ts

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