@remote-dom/polyfill 0.0.0-preview-20240219211553

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @remote-dom/polyfill
+
+## 0.0.0-preview-20240219211553
+
+### Major Changes
+
+- First release of Remote DOM. Read more about this [refactor of remote-ui on native DOM APIs](https://github.com/Shopify/remote-dom/discussions/267), and take a look at the [updated documentation](/README.md).
+
+## 1.0.0
+
+### Major Changes
+
+- [`37be652`](https://github.com/Shopify/remote-dom/commit/37be652f288d1eec170c0be13b2da516f8db5dcf) Thanks [@lemonmade](https://github.com/lemonmade)! - First release of Remote DOM. Read more about this [refactor of remote-ui on native DOM APIs](https://github.com/Shopify/remote-dom/discussions/267), and take a look at the [updated documentation](/README.md).
+
+## 0.1.0
+
+### Minor Changes
+
+- [`7061ded`](https://github.com/Shopify/remote-dom/commit/7061ded1da4699c6dd6a820eeb940a8af7c66d82) Thanks [@lemonmade](https://github.com/lemonmade)! - Test minor bump
+
+## 0.0.2
+
+### Patch Changes
+
+- [#251](https://github.com/Shopify/remote-dom/pull/251) [`5939cca`](https://github.com/Shopify/remote-dom/commit/5939cca8112417124327bd26f9e2c21f4bf9b20a) Thanks [@lemonmade](https://github.com/lemonmade)! - Test version bump

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2020-present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# `@remote-dom/polyfill`
+
+A polyfill for the browser APIs used by Remote DOM. This allows you to use Remote DOM in environments that don’t have a native DOM, like [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).
+
+This package provides a low-level polyfill, with hooks that allow other libraries to intercept changes to the DOM. Unless you know you need this package, you probably want to import from [`@remote-dom/core/polyfill`](../core/README.md#remote-domcorepolyfill) instead, which uses the hooks provided by this library to automatically synchronize remote elements between environments.
+
+## Installation
+
+```sh
+npm install @remote-dom/polyfill --save # npm
+pnpm install @remote-dom/polyfill --save # pnpm
+yarn add @remote-dom/polyfill # yarn
+```
+
+## Usage
+
+This package provides a `Window` class, which implements a limited subset of the [`Window` browser interface](https://developer.mozilla.org/en-US/docs/Web/API/Window). You’ll create an instance of the `Window` class and install it to the global environment using the `Window.setGlobal()` method.
+
+```ts
+import {Window} from '@remote-dom/polyfill';
+
+const window = new Window();
+Window.setGlobal(window);
+
+// Now you can use many important DOM APIs, like `document` and `Element`:
+const div = document.createElement('div');
+```
+
+This process will install polyfilled versions of the following globals:
+
+- [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window), [`parent`](https://developer.mozilla.org/en-US/docs/Web/API/Window/parent), [`top`](https://developer.mozilla.org/en-US/docs/Web/API/Window/top), and [`self`](https://developer.mozilla.org/en-US/docs/Web/API/Window/self) which are all references to the `Window` instance (`self` is only overwritten when it is not already defined, to avoid overwriting the Web Worker `self` binding).
+- [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document)
+- [`customElements`](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements)
+- [`location`](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) and [`navigator`](https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator), though these are just set to `globalThis.location` and `globalThis.navigator`.
+- The [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event), [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget), [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent), [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node), [`ParentNode`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode), [`ChildNode`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode), [`Document`](https://developer.mozilla.org/en-US/docs/Web/API/Document), [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment), [`CharacterData`](https://developer.mozilla.org/en-US/docs/Web/API/CharacterData), [`Comment`](https://developer.mozilla.org/en-US/docs/Web/API/Comment), [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text), [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element), [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement), [`SVGElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement), [`HTMLTemplateElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement), and [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) constructors.
+
+This polyfill lets you hook into many of the operations that happen in the DOM, like creating elements, updating attributes, and adding event listeners. You define these hooks by overwriting any of the properties on the `hooks` export of this library.
+
+```ts
+import {hooks} from '@remote-dom/polyfill';
+
+hooks.createElement = (element) => {
+  console.log('Creating element:', element);
+};
+```

package/build/esm/Attr.mjs

@@ -0,0 +1,52 @@
+import { hooks } from './hooks.mjs';
+import { NodeType, NS, NEXT, OWNER_ELEMENT, NAME, VALUE } from './constants.mjs';
+import { Node } from './Node.mjs';
+
+class Attr extends Node {
+  nodeType = NodeType.ATTRIBUTE_NODE;
+  [NS] = null;
+  [NEXT] = null;
+  [OWNER_ELEMENT] = null;
+  isConnected = false;
+  constructor(name, value, namespace) {
+    super();
+    this[NAME] = name;
+    this[VALUE] = value;
+    if (namespace) this[NS] = namespace;
+  }
+  get nodeName() {
+    return this[NAME];
+  }
+  set nodeName(_readonly) {}
+  get name() {
+    return this[NAME];
+  }
+  set name(_readonly) {}
+  get value() {
+    return this[VALUE];
+  }
+  set value(value) {
+    const str = String(value);
+    this[VALUE] = str;
+    const ownerElement = this[OWNER_ELEMENT];
+    if (!ownerElement) return;
+    hooks.setAttribute?.(ownerElement, this[NAME], str, this[NS]);
+  }
+  get nodeValue() {
+    return this.value;
+  }
+  set nodeValue(value) {
+    this.value = value;
+  }
+  get ownerElement() {
+    return this[OWNER_ELEMENT];
+  }
+  get namespaceURI() {
+    return this[NS];
+  }
+  get specified() {
+    return true;
+  }
+}
+
+export { Attr };

package/build/esm/CharacterData.mjs

@@ -0,0 +1,27 @@
+import { hooks } from './hooks.mjs';
+import { DATA } from './constants.mjs';
+import { ChildNode } from './ChildNode.mjs';
+
+class CharacterData extends ChildNode {
+  [DATA] = '';
+  constructor(data) {
+    super();
+    this.setData(data);
+  }
+  setData(data) {
+    let str = '';
+    if (data != null) {
+      str = typeof data === 'string' ? data : String(data);
+    }
+    this[DATA] = str;
+    hooks.setText?.(this, str);
+  }
+  get data() {
+    return this[DATA];
+  }
+  set data(data) {
+    this.setData(data);
+  }
+}
+
+export { CharacterData };

package/build/esm/ChildNode.mjs

@@ -0,0 +1,42 @@
+import { NEXT } from './constants.mjs';
+import { Node } from './Node.mjs';
+
+class ChildNode extends Node {
+  remove() {
+    const parent = this.parentNode;
+    if (!parent) return;
+    parent.removeChild(this);
+  }
+  replaceWith(...nodes) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const node = toNode(parent, nodes[0]);
+    const next = node[NEXT];
+    parent.replaceChild(this, node);
+    for (let i = 1; i < nodes.length; i++) {
+      parent.insertBefore(toNode(parent, nodes[i]), next);
+    }
+  }
+  before(...nodes) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    for (const node of nodes) {
+      parent.insertBefore(toNode(parent, node), this);
+    }
+  }
+  after(...nodes) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const next = this[NEXT];
+    for (const node of nodes) {
+      parent.insertBefore(toNode(parent, node), next);
+    }
+  }
+}
+function toNode(parent, node) {
+  if (node instanceof Node) return node;
+  const ownerDocument = parent.ownerDocument;
+  return ownerDocument.createTextNode(String(node));
+}
+
+export { ChildNode, toNode };

package/build/esm/Comment.mjs

@@ -0,0 +1,9 @@
+import { NAME } from './constants.mjs';
+import { CharacterData } from './CharacterData.mjs';
+
+class Comment extends CharacterData {
+  nodeType = 8;
+  [NAME] = '#comment';
+}
+
+export { Comment };

package/build/esm/CustomElementRegistry.mjs

@@ -0,0 +1,33 @@
+class CustomElementRegistryImplementation {
+  registry = new Map();
+  listenersByName = new Map();
+  define(name, Constructor, _options) {
+    this.registry.set(name, Constructor);
+    const listeners = this.listenersByName.get(name);
+    if (listeners == null) return;
+    this.listenersByName.delete(name);
+    for (const listener of listeners) {
+      listener(Constructor);
+    }
+  }
+  get(name) {
+    return this.registry.get(name);
+  }
+  whenDefined(name) {
+    const Constructor = this.registry.get(name);
+    if (Constructor != null) return Promise.resolve(Constructor);
+    let listeners = this.listenersByName.get(name);
+    if (listeners == null) {
+      listeners = [];
+      this.listenersByName.set(name, listeners);
+    }
+    return new Promise(resolve => {
+      listeners.push(resolve);
+    });
+  }
+  upgrade(_root) {
+    // TODO
+  }
+}
+
+export { CustomElementRegistryImplementation };

package/build/esm/CustomEvent.mjs

@@ -0,0 +1,26 @@
+import { Event } from './Event.mjs';
+
+class CustomEvent extends Event {
+  /**
+   * Returns any custom data event was created with. Typically used for synthetic events.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+   */
+
+  constructor(type, eventInitDict) {
+    super(type, eventInitDict);
+    this.detail = eventInitDict?.detail;
+  }
+
+  /**
+   * Returns any custom data event was created with. Typically used for synthetic events.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+   */
+  initCustomEvent(type, bubbles, cancelable, detail) {
+    super.initEvent(type, bubbles, cancelable);
+    this.detail = detail;
+  }
+}
+
+export { CustomEvent };

package/build/esm/Document.mjs

@@ -0,0 +1,89 @@
+import { NodeType, NAME, OWNER_DOCUMENT, NamespaceURI, NS } from './constants.mjs';
+import { Event } from './Event.mjs';
+import { ParentNode } from './ParentNode.mjs';
+import { Element } from './Element.mjs';
+import { SVGElement } from './SVGElement.mjs';
+import { Text } from './Text.mjs';
+import { Comment } from './Comment.mjs';
+import { DocumentFragment } from './DocumentFragment.mjs';
+import { HTMLTemplateElement } from './HTMLTemplateElement.mjs';
+import { cloneNode, isParentNode } from './shared.mjs';
+
+class Document extends ParentNode {
+  nodeType = NodeType.DOCUMENT_NODE;
+  [NAME] = '#document';
+  constructor(defaultView) {
+    super();
+    this.defaultView = defaultView;
+    this[OWNER_DOCUMENT] = this;
+  }
+  createElement(localName) {
+    const lowerName = String(localName).toLowerCase();
+    if (lowerName === 'template') {
+      return createElement(new HTMLTemplateElement(), this, 'template');
+    }
+    const CustomElement = this.defaultView.customElements.get(localName);
+    if (CustomElement) {
+      return createElement(new CustomElement(), this, localName);
+    } else {
+      return createElement(new Element(), this, localName);
+    }
+  }
+  createElementNS(localName, namespaceURI) {
+    if (namespaceURI === NamespaceURI.SVG) {
+      return createElement(new SVGElement(), this, localName);
+    }
+    return createElement(new Element(), this, localName, namespaceURI);
+  }
+  createTextNode(data) {
+    return createNode(new Text(data), this);
+  }
+  createComment(data) {
+    return createNode(new Comment(data), this);
+  }
+  createDocumentFragment() {
+    return createNode(new DocumentFragment(), this);
+  }
+  createEvent() {
+    return new Event('');
+  }
+  importNode(node, deep) {
+    return cloneNode(node, deep, this);
+  }
+  adoptNode(node) {
+    if (node[OWNER_DOCUMENT] === this) return node;
+    node.parentNode?.removeChild(node);
+    adoptNode(node, this);
+    return node;
+  }
+}
+function createNode(node, ownerDocument) {
+  Object.defineProperty(node, OWNER_DOCUMENT, {
+    value: ownerDocument,
+    writable: true,
+    enumerable: false
+  });
+  return node;
+}
+function createElement(element, ownerDocument, name, namespace) {
+  createNode(element, ownerDocument);
+  Object.defineProperty(element, NAME, {
+    value: name
+  });
+  if (namespace) {
+    Object.defineProperty(element, NS, {
+      value: namespace
+    });
+  }
+  return element;
+}
+function adoptNode(node, document) {
+  node[OWNER_DOCUMENT] = document;
+  if (isParentNode(node)) {
+    for (const child of node.childNodes) {
+      adoptNode(child, document);
+    }
+  }
+}
+
+export { Document, adoptNode, createElement, createNode };

package/build/esm/DocumentFragment.mjs

@@ -0,0 +1,10 @@
+import { NodeType, NAME, OWNER_DOCUMENT } from './constants.mjs';
+import { ParentNode } from './ParentNode.mjs';
+
+class DocumentFragment extends ParentNode {
+  nodeType = NodeType.DOCUMENT_FRAGMENT_NODE;
+  [NAME] = '#document-fragment';
+  [OWNER_DOCUMENT] = window.document;
+}
+
+export { DocumentFragment };

package/build/esm/Element.mjs

@@ -0,0 +1,95 @@
+import { NodeType, NS, NamespaceURI, SLOT, ATTRIBUTES } from './constants.mjs';
+import { ParentNode } from './ParentNode.mjs';
+import { NamedNodeMap } from './NamedNodeMap.mjs';
+import { Attr } from './Attr.mjs';
+import { serializeNode, serializeChildren, parseHtml } from './serialization.mjs';
+
+class Element extends ParentNode {
+  nodeType = NodeType.ELEMENT_NODE;
+  [NS] = NamespaceURI.XHTML;
+  [SLOT] = '';
+  get namespaceURI() {
+    return this[NS];
+  }
+  get tagName() {
+    return this.nodeName;
+  }
+  get slot() {
+    return this[SLOT];
+  }
+  set slot(slot) {
+    const finalSlot = String(slot);
+    this[SLOT] = finalSlot;
+    if (this.getAttribute('slot') !== finalSlot) {
+      this.attributes.setNamedItem(new Attr('slot', finalSlot));
+    }
+  }
+  get attributes() {
+    let attributes = this[ATTRIBUTES];
+    if (!attributes) {
+      attributes = new NamedNodeMap(this);
+      this[ATTRIBUTES] = attributes;
+    }
+    return attributes;
+  }
+  get firstElementChild() {
+    return this.children[0] ?? null;
+  }
+  get lastElementChild() {
+    return this.children[this.children.length - 1] ?? null;
+  }
+  get nextElementSibling() {
+    let sib = this.nextSibling;
+    while (sib && sib.nodeType !== 1) sib = sib.nextSibling;
+    return sib;
+  }
+  get previewElementSibling() {
+    let sib = this.previousSibling;
+    while (sib && sib.nodeType !== 1) sib = sib.previousSibling;
+    return sib;
+  }
+  setAttribute(name, value) {
+    this.attributes.setNamedItem(new Attr(name, String(value)));
+  }
+  setAttributeNS(namespace, name, value) {
+    this.attributes.setNamedItemNS(new Attr(name, String(value), namespace));
+  }
+  getAttribute(name) {
+    const attr = this.attributes.getNamedItem(name);
+    return attr && attr.value;
+  }
+  getAttributeNS(namespace, name) {
+    const attr = this.attributes.getNamedItemNS(namespace, name);
+    return attr && attr.value;
+  }
+  hasAttribute(name) {
+    const attr = this.attributes.getNamedItem(name);
+    return attr != null;
+  }
+  hasAttributeNS(namespace, name) {
+    const attr = this.attributes.getNamedItemNS(namespace, name);
+    return attr != null;
+  }
+  removeAttribute(name) {
+    this.attributes.removeNamedItem(name);
+  }
+  removeAttributeNS(namespace, name) {
+    this.attributes.removeNamedItemNS(namespace, name);
+  }
+  get outerHTML() {
+    return serializeNode(this);
+  }
+  get innerHTML() {
+    return serializeChildren(this);
+  }
+  set innerHTML(html) {
+    if (html == null || html === '') {
+      this.replaceChildren();
+    } else {
+      const fragment = parseHtml(String(html), this);
+      this.replaceChildren(fragment);
+    }
+  }
+}
+
+export { Element };

package/build/esm/Event.mjs

@@ -0,0 +1,108 @@
+import { IS_TRUSTED, LISTENERS } from './constants.mjs';
+
+let EventPhase = /*#__PURE__*/function (EventPhase) {
+  EventPhase[EventPhase["NONE"] = 0] = "NONE";
+  EventPhase[EventPhase["CAPTURING_PHASE"] = 1] = "CAPTURING_PHASE";
+  EventPhase[EventPhase["AT_TARGET"] = 2] = "AT_TARGET";
+  EventPhase[EventPhase["BUBBLING_PHASE"] = 3] = "BUBBLING_PHASE";
+  return EventPhase;
+}({});
+const CAPTURE_MARKER = '@';
+const now = typeof performance === 'undefined' ? Date.now : performance.now.bind(performance);
+class Event {
+  static NONE = EventPhase.NONE;
+  static CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
+  static AT_TARGET = EventPhase.AT_TARGET;
+  static BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+
+  // NONE = EventPhase.NONE;
+  // CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
+  // AT_TARGET = EventPhase.AT_TARGET;
+  // BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+
+  timeStamp = now();
+  target = null;
+  currentTarget = null;
+  srcElement = null;
+  bubbles = false;
+  cancelable = false;
+  composed = false;
+  defaultPrevented = false;
+  cancelBubble = false;
+  immediatePropagationStopped = false;
+  eventPhase = 0;
+  path = [];
+  // private inPassiveListener = false;
+
+  constructor(type, options) {
+    this.type = type;
+    Object.defineProperty(this, IS_TRUSTED, {
+      writable: true,
+      value: false
+    });
+    if (options) {
+      if (options.bubbles) this.bubbles = options.bubbles;
+      if (options.cancelable) this.cancelable = options.cancelable;
+      if (options.composed) this.composed = options.composed;
+    }
+  }
+  get composedPath() {
+    return this.path;
+  }
+  get isTrusted() {
+    return this[IS_TRUSTED];
+  }
+  stopPropagation() {
+    this.cancelBubble = true;
+  }
+  stopImmediatePropagation() {
+    this.immediatePropagationStopped = true;
+  }
+  preventDefault() {
+    this.defaultPrevented = true;
+  }
+  set returnValue(value) {
+    this.defaultPrevented = value;
+  }
+  get returnValue() {
+    return this.defaultPrevented;
+  }
+
+  /** @deprecated */
+  initEvent(type, bubbles, cancelable) {
+    this.type = type;
+    this.bubbles = Boolean(bubbles);
+    this.cancelable = Boolean(cancelable);
+  }
+}
+function fireEvent(event, target, phase) {
+  const listeners = target[LISTENERS];
+  const list = listeners?.get(`${event.type}${phase === EventPhase.CAPTURING_PHASE ? CAPTURE_MARKER : ''}`);
+  if (!list) return false;
+  let defaultPrevented = false;
+  for (const listener of list) {
+    event.eventPhase = phase;
+    event.currentTarget = target;
+    try {
+      if (typeof listener === 'object') {
+        listener.handleEvent(event);
+      } else {
+        listener.call(target, event);
+      }
+    } catch (err) {
+      setTimeout(thrower, 0, err);
+    }
+    if (event.defaultPrevented === true) {
+      defaultPrevented = true;
+    }
+    if (event.immediatePropagationStopped) {
+      break;
+    }
+  }
+  return defaultPrevented;
+}
+function thrower(error) {
+  throw error;
+}
+
+export { CAPTURE_MARKER, Event, EventPhase, fireEvent };

package/build/esm/EventTarget.mjs

@@ -0,0 +1,99 @@
+import { hooks } from './hooks.mjs';
+import { LISTENERS } from './constants.mjs';
+import { fireEvent, EventPhase, CAPTURE_MARKER } from './Event.mjs';
+
+const ONCE_LISTENERS = Symbol('onceListeners');
+class EventTarget {
+  addEventListener(type, listener, options) {
+    if (listener == null) return;
+    const capture = options === true || options && 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);
+      };
+      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);
+    if (!list) {
+      list = new Set();
+      listeners.set(key, list);
+    }
+    list.add(normalizedListener);
+    signal?.addEventListener('abort', () => {
+      removeEventListener.call(this, type, listener, options);
+    }, {
+      once: true
+    });
+    hooks.addEventListener?.(this, type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    return removeEventListener.call(this, type, listener, options);
+  }
+
+  // function isChildNode(node: EventTarget): node is ChildNode {
+  //   return PARENT in node;
+  // }
+
+  dispatchEvent(event) {
+    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;
+    let defaultPrevented = false;
+    for (let i = path.length; --i;) {
+      if (fireEvent(event, path[i], EventPhase.CAPTURING_PHASE)) {
+        defaultPrevented = true;
+      }
+    }
+    if (fireEvent(event, this, EventPhase.AT_TARGET)) {
+      defaultPrevented = true;
+    }
+    for (let i = 1; i < path.length; i++) {
+      if (fireEvent(event, path[i], EventPhase.BUBBLING_PHASE)) {
+        defaultPrevented = true;
+      }
+    }
+    return !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) {
+      hooks.removeEventListener?.(this, type, listener, options);
+    }
+  }
+}
+
+export { EventTarget };

package/build/esm/HTMLElement.mjs

@@ -0,0 +1,5 @@
+import { Element } from './Element.mjs';
+
+class HTMLElement extends Element {}
+
+export { HTMLElement };