@remote-dom/polyfill 0.0.1

package/source/Event.ts

@@ -0,0 +1,142 @@
+import {IS_TRUSTED, LISTENERS} 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 CAPTURE_MARKER = '@';
+
+export interface EventInit {
+  bubbles?: boolean;
+  cancelable?: boolean;
+  composed?: boolean;
+}
+
+const now =
+  typeof performance === 'undefined'
+    ? Date.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;
+
+  // NONE = EventPhase.NONE;
+  // CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
+  // AT_TARGET = EventPhase.AT_TARGET;
+  // BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+
+  timeStamp = now();
+  target: EventTarget | null = null;
+  currentTarget: EventTarget | null = null;
+  srcElement: EventTarget | null = null;
+  bubbles = false;
+  cancelable = false;
+  composed = false;
+  defaultPrevented = false;
+  cancelBubble = false;
+  immediatePropagationStopped = false;
+  eventPhase: EventPhase = 0;
+  path: EventTarget[] = [];
+  // private inPassiveListener = false;
+  data?: any;
+  [IS_TRUSTED]!: boolean;
+
+  constructor(
+    public type: string,
+    options?: EventInit,
+  ) {
+    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: string, bubbles?: boolean, cancelable?: boolean) {
+    this.type = type;
+    this.bubbles = Boolean(bubbles);
+    this.cancelable = Boolean(cancelable);
+  }
+}
+
+export function fireEvent(
+  event: Event,
+  target: EventTarget,
+  phase: EventPhase,
+) {
+  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 as any);
+      } else {
+        listener.call(target, event as any);
+      }
+    } catch (err) {
+      setTimeout(thrower, 0, err);
+    }
+
+    if (event.defaultPrevented === true) {
+      defaultPrevented = true;
+    }
+
+    if (event.immediatePropagationStopped) {
+      break;
+    }
+  }
+
+  return defaultPrevented;
+}
+
+function thrower(error: any) {
+  throw error;
+}

package/source/EventTarget.ts

@@ -0,0 +1,139 @@
+import {hooks} from './hooks.ts';
+import {LISTENERS} from './constants.ts';
+import {fireEvent, EventPhase} from './Event.ts';
+import {CAPTURE_MARKER, type Event} from './Event.ts';
+import type {ChildNode} from './ChildNode.ts';
+
+const ONCE_LISTENERS = Symbol('onceListeners');
+
+export class EventTarget {
+  [LISTENERS]?: Map<string, Set<EventListenerOrEventListenerObject>>;
+  [ONCE_LISTENERS]?: WeakMap<EventListenerOrEventListenerObject, EventListener>;
+
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | AddEventListenerOptions,
+  ) {
+    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(
+        this: EventTarget,
+        ...args: Parameters<EventListener>
+      ) {
+        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 as any, type, listener, options);
+  }
+
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject | null,
+    options?: boolean | EventListenerOptions,
+  ) {
+    return removeEventListener.call(this, type, listener, options);
+  }
+
+  // function isChildNode(node: EventTarget): node is ChildNode {
+  //   return PARENT in node;
+  // }
+
+  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;
+    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(
+  this: EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject | null,
+  options?: boolean | EventListenerOptions,
+) {
+  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 as any, type, listener, options);
+    }
+  }
+}

package/source/HTMLElement.ts

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

package/source/HTMLTemplateElement.ts

@@ -0,0 +1,28 @@
+import {CONTENT} from './constants.ts';
+import {DocumentFragment} from './DocumentFragment.ts';
+import {Element} from './Element.ts';
+import {parseHtml, serializeChildren} from './serialization.ts';
+
+export class HTMLTemplateElement extends Element {
+  [CONTENT]?: DocumentFragment;
+
+  get content() {
+    let content = this[CONTENT];
+    if (!content) {
+      content = this.ownerDocument.createDocumentFragment();
+      this[CONTENT] = content;
+    }
+    return content;
+  }
+
+  set content(_) {}
+
+  set innerHTML(html) {
+    this.content.replaceChildren(parseHtml(String(html), this));
+  }
+
+  get innerHTML() {
+    const content = this[CONTENT];
+    return content ? serializeChildren(content) : '';
+  }
+}

package/source/MutationObserver.ts

@@ -0,0 +1,3 @@
+export class MutationObserver {
+  // stub implementation
+}

package/source/NamedNodeMap.ts

@@ -0,0 +1,156 @@
+import {hooks} from './hooks.ts';
+import {CHILD, OWNER_ELEMENT, NS, NEXT, NamespaceURI} from './constants.ts';
+import type {Attr} from './Attr.ts';
+import type {Element} from './Element.ts';
+
+export class NamedNodeMap {
+  [CHILD]: Attr | null = null;
+  [OWNER_ELEMENT]: Element;
+
+  constructor(ownerElement: Element) {
+    this[OWNER_ELEMENT] = ownerElement;
+  }
+
+  getNamedItem(name: string) {
+    return this.getNamedItemNS(null, name);
+  }
+
+  getNamedItemNS(namespaceURI: NamespaceURI | null, name: string) {
+    let attr = this[CHILD];
+    while (attr) {
+      if (attr.name === name && attr[NS] == namespaceURI) {
+        return attr;
+      }
+      attr = attr[NEXT];
+    }
+    return null;
+  }
+
+  item(index: number) {
+    let attr = this[CHILD];
+    let i = 0;
+    while (attr) {
+      if (i++ === index) return attr;
+      attr = attr[NEXT];
+    }
+    return null;
+  }
+
+  get length() {
+    let index = 0;
+    let attr = this[CHILD];
+    while (attr) {
+      index++;
+      attr = attr[NEXT];
+    }
+    return index;
+  }
+
+  removeNamedItem(name: string) {
+    return this.removeNamedItemNS(null, name);
+  }
+
+  removeNamedItemNS(namespaceURI: NamespaceURI | null, name: string) {
+    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 (prev) prev[NEXT] = attr[NEXT];
+        if (this[CHILD] === attr) this[CHILD] = attr[NEXT];
+        updateElementAttribute(ownerElement, attr.name, attr.value, null);
+        hooks.removeAttribute?.(ownerElement as any, name, namespaceURI);
+        return attr;
+      }
+
+      prev = attr;
+      attr = attr[NEXT];
+    }
+
+    return null;
+  }
+
+  setNamedItem(attr: Attr) {
+    const ownerElement = this[OWNER_ELEMENT];
+    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];
+      }
+      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,
+      );
+
+      hooks.setAttribute?.(
+        ownerElement as any,
+        attr.name,
+        attr.value,
+        attr[NS],
+      );
+    }
+    return old;
+  }
+
+  setNamedItemNS(attr: Attr) {
+    return this.setNamedItem(attr);
+  }
+
+  *[Symbol.iterator]() {
+    let attr = this[CHILD];
+    while (attr) {
+      yield attr;
+      attr = attr[NEXT];
+    }
+  }
+}
+
+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) {
+    element.slot = newValue ?? '';
+  }
+
+  if (
+    attributeChangedCallback == null ||
+    observedAttributes == null ||
+    !observedAttributes.includes(name)
+  ) {
+    return;
+  }
+
+  return attributeChangedCallback.call(element, name, oldValue, newValue);
+}

package/source/Node.ts

@@ -0,0 +1,139 @@
+import {
+  OWNER_DOCUMENT,
+  NAME,
+  PARENT,
+  CHILD,
+  PREV,
+  NEXT,
+  NamespaceURI,
+  NodeType,
+} from './constants.ts';
+import type {Document} from './Document.ts';
+import type {ParentNode} from './ParentNode.ts';
+import {EventTarget} from './EventTarget.ts';
+import {
+  isCharacterData,
+  isParentNode,
+  isTextNode,
+  cloneNode,
+} from './shared.ts';
+
+export class Node extends EventTarget {
+  nodeType = NodeType.NODE;
+
+  [OWNER_DOCUMENT]!: Document;
+  [NAME] = '';
+  [PARENT]: ParentNode | null = null;
+  [CHILD]: Node | null = null;
+  [PREV]: Node | null = null;
+  [NEXT]: Node | null = null;
+
+  get localName() {
+    return this[NAME];
+  }
+
+  get nodeName() {
+    return this[NAME].toUpperCase();
+  }
+
+  get ownerDocument() {
+    return this[OWNER_DOCUMENT];
+  }
+
+  isDefaultNamespace(namespace: string) {
+    return namespace === NamespaceURI.XHTML;
+  }
+
+  get parentNode() {
+    return this[PARENT];
+  }
+
+  set parentNode(_readonly) {}
+
+  get previousSibling() {
+    return this[PREV];
+  }
+
+  set previousSibling(_readonly) {}
+
+  get nextSibling() {
+    return this[NEXT];
+  }
+
+  set nextSibling(_readonly) {}
+
+  get previousElementSibling() {
+    let sib = this[PREV];
+    while (sib && sib.nodeType !== 1) sib = sib[PREV];
+    return sib;
+  }
+
+  set previousElementSibling(_readonly) {}
+
+  get nextElementSibling() {
+    let sib = this[NEXT];
+    while (sib && sib.nodeType !== 1) sib = sib[NEXT];
+    return sib;
+  }
+
+  set nextElementSibling(_readonly) {}
+
+  get firstChild() {
+    return this[CHILD];
+  }
+
+  set firstChild(_readonly) {}
+
+  get lastChild() {
+    let child = this[CHILD];
+    while (child) {
+      const next = child[NEXT];
+      if (next == null) break;
+      child = next;
+    }
+    return child;
+  }
+
+  set lastChild(_readonly) {}
+
+  get nodeValue(): string | null {
+    if (isCharacterData(this)) return this.data;
+    return null;
+  }
+
+  set nodeValue(data: string | null | undefined) {
+    if (isCharacterData(this)) this.data = data;
+  }
+
+  get textContent(): string | null {
+    if (isCharacterData(this)) return this.data;
+    let text = '';
+    function walk(node: Node) {
+      if (isTextNode(node)) {
+        text += node.data;
+      }
+      const child = node[CHILD];
+      if (child) walk(child);
+      const sibling = node[NEXT];
+      if (sibling) walk(sibling);
+    }
+    walk(this);
+    return text;
+  }
+
+  set textContent(data: any) {
+    if (isCharacterData(this)) {
+      this.data = data;
+    } else if (isParentNode(this)) {
+      let child;
+      while ((child = this[CHILD])) {
+        this.removeChild(child);
+      }
+      this.append(data);
+    }
+  }
+
+  cloneNode(deep?: boolean) {
+    return cloneNode(this, deep);
+  }
+}

package/source/NodeList.ts

@@ -0,0 +1,5 @@
+export class NodeList extends Array {
+  item(index: number) {
+    return this[index];
+  }
+}