@remote-dom/polyfill 1.5.0 → 1.6.0

package/source/Text.ts

@@ -1,7 +1,7 @@
-import {NAME, NodeType} from './constants.ts';
+import {NAME, NODE_TYPE_TEXT, type NodeType} from './constants.ts';
 import {CharacterData} from './CharacterData.ts';
 
 export class Text extends CharacterData {
-  nodeType = NodeType.TEXT_NODE;
+  nodeType: NodeType = NODE_TYPE_TEXT;
   [NAME] = '#text';
 }

package/source/Window.ts

@@ -20,7 +20,8 @@ import {DocumentFragment} from './DocumentFragment.ts';
 import {HTMLTemplateElement} from './HTMLTemplateElement.ts';
 import {CustomElementRegistryImplementation} from './CustomElementRegistry.ts';
 import {MutationObserver} from './MutationObserver.ts';
-import {HOOKS} from './constants.ts';
+import {EXTENSIONS, HOOKS, HOOKS_DISPATCH} from './constants.ts';
+import type {WindowExtension} from './extensions.ts';
 import type {Hooks} from './hooks.ts';
 
 type OnErrorHandler =
@@ -33,8 +34,104 @@ type OnErrorHandler =
     ) => void)
   | null;
 
+const EVENT_HANDLER_PROPERTIES = ['onerror', 'onunhandledrejection'] as const;
+const POLYFILL_GLOBAL_PROPERTY = Symbol.for(
+  '@remote-dom/polyfill/global-property',
+);
+
+type PropertyDescriptors = Record<PropertyKey, PropertyDescriptor>;
+
+function windowPropertyDescriptors(window: Window): PropertyDescriptors {
+  return Object.getOwnPropertyDescriptors(window);
+}
+
+function eventTargetPropertyDescriptors(window: Window): PropertyDescriptors {
+  const properties: PropertyDescriptors = {};
+
+  for (const [property, descriptor] of Object.entries(
+    Object.getOwnPropertyDescriptors(EventTarget.prototype),
+  )) {
+    if (property !== 'constructor' && typeof descriptor.value === 'function') {
+      descriptor.value = markPolyfillGlobalProperty(
+        descriptor.value.bind(window),
+      );
+      properties[property] = descriptor;
+    }
+  }
+
+  return properties;
+}
+
+function eventHandlerPropertyDescriptors(window: Window): PropertyDescriptors {
+  const properties: PropertyDescriptors = {};
+
+  for (const property of EVENT_HANDLER_PROPERTIES) {
+    properties[property] = {
+      configurable: true,
+      enumerable: true,
+      get: markPolyfillGlobalProperty(() => window[property]),
+      set: markPolyfillGlobalProperty((handler) => {
+        window[property] = handler as any;
+      }),
+    };
+  }
+
+  return properties;
+}
+
+function globalPropertyDescriptors(window: Window): PropertyDescriptors {
+  return Object.assign(
+    windowPropertyDescriptors(window),
+    eventTargetPropertyDescriptors(window),
+    eventHandlerPropertyDescriptors(window),
+  );
+}
+
+function markPolyfillGlobalProperty<
+  FunctionType extends (...args: any[]) => any,
+>(value: FunctionType) {
+  Object.defineProperty(value, POLYFILL_GLOBAL_PROPERTY, {value: true});
+  return value;
+}
+
+function installMissingGlobalProperties(
+  target: object,
+  properties: PropertyDescriptors,
+) {
+  for (const property of Reflect.ownKeys(properties)) {
+    const currentDescriptor = findPropertyDescriptor(target, property);
+    if (
+      currentDescriptor == null ||
+      isPolyfillGlobalProperty(currentDescriptor)
+    ) {
+      Object.defineProperty(target, property, properties[property]!);
+    }
+  }
+}
+
+function findPropertyDescriptor(target: object, property: PropertyKey) {
+  let currentTarget: object | null = target;
+
+  while (currentTarget) {
+    const descriptor = Object.getOwnPropertyDescriptor(currentTarget, property);
+    if (descriptor) return descriptor;
+    currentTarget = Object.getPrototypeOf(currentTarget);
+  }
+
+  return undefined;
+}
+
+function isPolyfillGlobalProperty(descriptor: PropertyDescriptor) {
+  return [descriptor.value, descriptor.get, descriptor.set].some(
+    (value) =>
+      typeof value === 'function' && value[POLYFILL_GLOBAL_PROPERTY] === true,
+  );
+}
+
 export class Window extends EventTarget {
   [HOOKS]: Partial<Hooks> = {};
+  [EXTENSIONS]: Partial<Hooks>[] = [];
+  [HOOKS_DISPATCH]: Hooks = createHooksDispatcher(this);
   name = '';
   window = this;
   parent = this;
@@ -71,6 +168,20 @@ export class Window extends EventTarget {
   #currentOnUnhandledRejectionHandler: WindowEventHandlers['onunhandledrejection'] =
     null;
 
+  static with(...extensions: readonly WindowExtension[]): typeof Window {
+    const BaseWindow = this;
+
+    return class ExtendedWindow extends BaseWindow {
+      constructor() {
+        super();
+
+        for (const extension of extensions) {
+          installExtension(this, extension);
+        }
+      }
+    };
+  }
+
   get onerror() {
     return this.#currentOriginalOnErrorHandler;
   }
@@ -125,24 +236,35 @@ export class Window extends EventTarget {
   }
 
   static setGlobal(window: Window) {
-    const properties = Object.getOwnPropertyDescriptors(window);
+    const currentSelf = globalThis.self;
+    const currentWindow = globalThis.window;
+    const properties = windowPropertyDescriptors(window);
+    const missingProperties = Object.assign(
+      eventTargetPropertyDescriptors(window),
+      eventHandlerPropertyDescriptors(window),
+    );
 
-    delete (properties as any).self;
+    delete properties.self;
 
     Object.defineProperties(globalThis, properties);
+    installMissingGlobalProperties(globalThis, missingProperties);
 
-    if (typeof globalThis.self === 'undefined') {
+    if (
+      typeof currentSelf === 'undefined' ||
+      (currentSelf === currentWindow && currentSelf !== globalThis)
+    ) {
       Object.defineProperty(globalThis, 'self', {
         value: window,
         configurable: true,
         writable: true,
         enumerable: true,
       });
-    } else {
+    } else if (currentSelf !== globalThis) {
       // There can already be a `self`, like when polyfilling the DOM
       // in a Web Worker. In those cases, just mirror all the `Window`
       // properties onto `self`, rather than wholly redefining it.
-      Object.defineProperties(self, properties);
+      Object.defineProperties(currentSelf, properties);
+      installMissingGlobalProperties(currentSelf, missingProperties);
     }
   }
 
@@ -153,18 +275,35 @@ export class Window extends EventTarget {
       }
     }
 
-    const properties = Object.getOwnPropertyDescriptors(window);
-    const eventTargetPrototypeProperties = Object.getOwnPropertyDescriptors(
-      EventTarget.prototype,
-    );
+    Object.defineProperties(globalThis, globalPropertyDescriptors(window));
+  }
+}
 
-    for (const descriptor of Object.values(eventTargetPrototypeProperties)) {
-      if (typeof descriptor.value === 'function') {
-        descriptor.value = descriptor.value.bind(window);
-      }
-    }
+function installExtension(window: Window, extension: WindowExtension) {
+  window[EXTENSIONS].push(extension(window) ?? {});
+}
 
-    Object.defineProperties(globalThis, properties);
-    Object.defineProperties(globalThis, eventTargetPrototypeProperties);
+function createHooksDispatcher(window: Window): Hooks {
+  return {
+    createElement: dispatchHook.bind(null, window, 'createElement'),
+    setAttribute: dispatchHook.bind(null, window, 'setAttribute'),
+    removeAttribute: dispatchHook.bind(null, window, 'removeAttribute'),
+    createText: dispatchHook.bind(null, window, 'createText'),
+    setText: dispatchHook.bind(null, window, 'setText'),
+    insertChild: dispatchHook.bind(null, window, 'insertChild'),
+    removeChild: dispatchHook.bind(null, window, 'removeChild'),
+    addEventListener: dispatchHook.bind(null, window, 'addEventListener'),
+    removeEventListener: dispatchHook.bind(null, window, 'removeEventListener'),
+  };
+}
+
+function dispatchHook(window: Window, name: keyof Hooks, ...args: unknown[]) {
+  for (const hooks of window[EXTENSIONS]) {
+    const hook = hooks[name] as ((...args: unknown[]) => void) | undefined;
+    hook?.apply(hooks, args);
   }
+
+  const hooks = window[HOOKS];
+  const legacyHook = hooks[name] as ((...args: unknown[]) => void) | undefined;
+  legacyHook?.apply(hooks, args);
 }

package/source/attribute-reactions.ts

@@ -0,0 +1,32 @@
+import type {NamespaceURI} from './constants.ts';
+import type {Element} from './Element.ts';
+import {enqueueCustomElementReaction} from './custom-element-reactions.ts';
+
+export function enqueueAttributeReaction(
+  element: Element,
+  localName: string,
+  oldValue: string | null,
+  newValue: string | null,
+  namespace: NamespaceURI,
+) {
+  const {observedAttributes} = element.constructor as typeof Element;
+  const {attributeChangedCallback} = element;
+
+  if (
+    attributeChangedCallback == null ||
+    observedAttributes == null ||
+    !observedAttributes.includes(localName)
+  ) {
+    return;
+  }
+
+  enqueueCustomElementReaction(element, () =>
+    attributeChangedCallback.call(
+      element,
+      localName,
+      oldValue,
+      newValue,
+      namespace,
+    ),
+  );
+}

package/source/constants.ts

@@ -1,4 +1,5 @@
 export const NAME = Symbol('name');
+export const PREFIX = Symbol('prefix');
 export const VALUE = Symbol('value');
 export const NS = Symbol('ns');
 export const OWNER_ELEMENT = Symbol('owner');
@@ -8,33 +9,55 @@ export const PREV = Symbol('prev');
 export const NEXT = Symbol('next');
 export const CHILD = Symbol('child');
 export const PARENT = Symbol('parent');
+export const HOST = Symbol('host');
 export const DATA = Symbol('data');
 export const USER_PROPERTIES = Symbol('user_properties');
 export const LISTENERS = Symbol('listeners');
 export const IS_TRUSTED = Symbol('isTrusted');
 export const PATH = Symbol('path');
 export const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
+export const DISPATCHING = Symbol('dispatching');
 export const CONTENT = Symbol('content');
 export const HOOKS = Symbol('hooks');
+export const EXTENSIONS = Symbol('extensions');
+export const HOOKS_DISPATCH = Symbol('hooks_dispatch');
 export const IS_CONNECTED = Symbol('is_connected');
+export const CREATE_ELEMENT = Symbol('create_element');
 
-// @TODO remove explicit values
-export const enum NodeType {
-  NODE = 0,
-  ELEMENT_NODE = 1,
-  ATTRIBUTE_NODE = 2,
-  TEXT_NODE = 3,
-  CDATA_SECTION_NODE = 4,
-  ENTITY_REFERENCE_NODE = 5,
-  ENTITY_NODE = 6,
-  PROCESSING_INSTRUCTION_NODE = 7,
-  COMMENT_NODE = 8,
-  DOCUMENT_NODE = 9,
-  DOCUMENT_TYPE_NODE = 10,
-  DOCUMENT_FRAGMENT_NODE = 11,
+export const NODE_TYPE_NODE = 0;
+export const NODE_TYPE_ELEMENT = 1;
+export const NODE_TYPE_ATTRIBUTE = 2;
+export const NODE_TYPE_TEXT = 3;
+export const NODE_TYPE_CDATA_SECTION = 4;
+export const NODE_TYPE_ENTITY_REFERENCE = 5;
+export const NODE_TYPE_ENTITY = 6;
+export const NODE_TYPE_PROCESSING_INSTRUCTION = 7;
+export const NODE_TYPE_COMMENT = 8;
+export const NODE_TYPE_DOCUMENT = 9;
+export const NODE_TYPE_DOCUMENT_TYPE = 10;
+export const NODE_TYPE_DOCUMENT_FRAGMENT = 11;
+
+export type NodeType = number;
+
+export const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+export const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+export const XMLNS_NAMESPACE = 'http://www.w3.org/2000/xmlns/';
+
+export type NamespaceURI = string | null;
+
+export function splitOnASCIIWhitespace(value: string) {
+  return value.split(/[\t\n\f\r ]+/).filter(Boolean);
+}
+
+export function asciiLowercase(value: string) {
+  return value.replace(/[A-Z]/g, (character) =>
+    String.fromCharCode(character.charCodeAt(0) + 0x20),
+  );
 }
 
-export const enum NamespaceURI {
-  XHTML = 'http://www.w3.org/1999/xhtml',
-  SVG = 'http://www.w3.org/2000/svg',
+export function asciiUppercase(value: string) {
+  return value.replace(/[a-z]/g, (character) =>
+    String.fromCharCode(character.charCodeAt(0) - 0x20),
+  );
 }

package/source/custom-element-reactions.ts

@@ -0,0 +1,64 @@
+type CustomElementReaction = () => void;
+type ReactionTarget = object;
+
+const scopes: ReactionTarget[][] = [];
+const reactionsByTarget = new WeakMap<
+  ReactionTarget,
+  CustomElementReaction[]
+>();
+
+export function enqueueCustomElementReaction(
+  target: ReactionTarget,
+  reaction: CustomElementReaction,
+) {
+  const reactions = reactionsByTarget.get(target);
+  if (reactions) reactions.push(reaction);
+  else reactionsByTarget.set(target, [reaction]);
+  scopes[scopes.length - 1]!.push(target);
+}
+
+export function performWithCustomElementReactions<T>(mutation: () => T): T {
+  const scope: ReactionTarget[] = [];
+  scopes.push(scope);
+
+  let result: T;
+  try {
+    result = mutation();
+  } catch (error) {
+    scopes.pop();
+    try {
+      flushCustomElementReactions(scope);
+    } catch {}
+    throw error;
+  }
+
+  scopes.pop();
+  flushCustomElementReactions(scope);
+  return result;
+}
+
+function flushCustomElementReactions(scope: ReactionTarget[]) {
+  let firstError: unknown;
+  let didThrow = false;
+
+  for (const target of scope) {
+    const reactions = reactionsByTarget.get(target);
+    if (!reactions) continue;
+
+    while (reactions.length > 0) {
+      const reaction = reactions.shift()!;
+      try {
+        reaction();
+      } catch (error) {
+        if (!didThrow) {
+          firstError = error;
+          didThrow = true;
+        }
+      }
+    }
+
+    reactionsByTarget.delete(target);
+  }
+
+  if (didThrow) throw firstError;
+}

package/source/dom-exception.ts

@@ -0,0 +1,14 @@
+export function createDOMException(
+  message: string,
+  name: string,
+): DOMException {
+  const DOMExceptionConstructor = globalThis.DOMException;
+
+  if (typeof DOMExceptionConstructor === 'function') {
+    return new DOMExceptionConstructor(message, name);
+  }
+
+  const error = new Error(message);
+  error.name = name;
+  return error as DOMException;
+}

package/source/extensions.ts

@@ -0,0 +1,4 @@
+import type {Hooks} from './hooks.ts';
+import type {Window} from './Window.ts';
+
+export type WindowExtension = (window: Window) => Partial<Hooks> | void;

package/source/hook-effects.ts

@@ -0,0 +1,56 @@
+import {HOST, PARENT} from './constants.ts';
+import type {Node} from './Node.ts';
+
+type HookEffect = readonly [run: () => void, publishes?: Node];
+
+const hookEffects: HookEffect[] = [];
+const pendingPublications: Node[] = [];
+let isDispatchingHookEffects = false;
+
+export function performHookEffects(effects: readonly HookEffect[]) {
+  for (const effect of effects) {
+    hookEffects.push(effect);
+    if (effect[1]) pendingPublications.push(effect[1]);
+  }
+  if (isDispatchingHookEffects) return;
+
+  isDispatchingHookEffects = true;
+
+  try {
+    let firstError: unknown;
+    let didThrow = false;
+
+    for (let index = 0; index < hookEffects.length; index++) {
+      const [run, publication] = hookEffects[index]!;
+      if (publication) {
+        pendingPublications.splice(pendingPublications.indexOf(publication), 1);
+      }
+
+      try {
+        run();
+      } catch (error) {
+        if (!didThrow) {
+          firstError = error;
+          didThrow = true;
+        }
+      }
+    }
+
+    if (didThrow) throw firstError;
+  } finally {
+    hookEffects.length = 0;
+    pendingPublications.length = 0;
+    isDispatchingHookEffects = false;
+  }
+}
+
+export function isCoveredByPendingPublication(node: Node) {
+  let current: Node | null = node;
+  while (current) {
+    if (pendingPublications.includes(current)) return true;
+    current = current[PARENT] ?? current[HOST];
+  }
+  return false;
+}
+
+export type {HookEffect};

package/source/hooks.ts

@@ -8,9 +8,17 @@ export interface Hooks {
   ): void;
   removeAttribute(element: Element, name: string, ns?: string | null): void;
   createText(text: Text, data: string): void;
-  setText(text: Text, data: string): void;
-  insertChild(parent: Element, node: Element | Text, index: number): void;
-  removeChild(parent: Element, node: Element | Text, index: number): void;
+  setText(text: Text | Comment, data: string): void;
+  insertChild(
+    parent: Element,
+    node: Element | Text | Comment,
+    index: number,
+  ): void;
+  removeChild(
+    parent: Element,
+    node: Element | Text | Comment,
+    index: number,
+  ): void;
   addEventListener(
     element: EventTarget,
     type: string,

package/source/index.ts

@@ -1,4 +1,5 @@
 export {type Hooks} from './hooks.ts';
+export {type WindowExtension} from './extensions.ts';
 export {HOOKS} from './constants.ts';
 export {Window} from './Window.ts';
 export {HTMLElement} from './HTMLElement.ts';

package/source/names.ts

@@ -0,0 +1,94 @@
+import {
+  XML_NAMESPACE,
+  XMLNS_NAMESPACE,
+  type NamespaceURI,
+} from './constants.ts';
+import {createDOMException} from './dom-exception.ts';
+
+const VALID_ELEMENT_LOCAL_NAME =
+  /^(?:[A-Za-z][^\0\t\n\f\r\u0020/>]*|[:_\u0080-\u{10FFFF}][A-Za-z0-9-.:_\u0080-\u{10FFFF}]*)$/u;
+const INVALID_ATTRIBUTE_LOCAL_NAME = /[\0\t\n\f\r />=]/u;
+const INVALID_NAMESPACE_PREFIX = /[\0\t\n\f\r />]/u;
+
+export function normalizeNamespace(namespace: unknown): NamespaceURI {
+  if (namespace == null) return null;
+
+  const normalized = String(namespace);
+  return normalized === '' ? null : normalized;
+}
+
+export function validateElementLocalName(name: string) {
+  if (!VALID_ELEMENT_LOCAL_NAME.test(name)) {
+    throwInvalidCharacterError(name);
+  }
+}
+
+export function validateAttributeLocalName(name: string) {
+  if (name === '' || INVALID_ATTRIBUTE_LOCAL_NAME.test(name)) {
+    throwInvalidCharacterError(name);
+  }
+}
+
+export function validateAndExtractQualifiedName(
+  namespaceValue: unknown,
+  qualifiedNameValue: unknown,
+  kind: 'element' | 'attribute',
+) {
+  const namespace = normalizeNamespace(namespaceValue);
+  const qualifiedName = String(qualifiedNameValue);
+  const separator = qualifiedName.indexOf(':');
+  const prefix = separator < 0 ? null : qualifiedName.slice(0, separator);
+  const localName =
+    separator < 0 ? qualifiedName : qualifiedName.slice(separator + 1);
+
+  if (
+    (prefix != null &&
+      (prefix === '' || INVALID_NAMESPACE_PREFIX.test(prefix))) ||
+    (kind === 'element'
+      ? !VALID_ELEMENT_LOCAL_NAME.test(localName)
+      : localName === '' || INVALID_ATTRIBUTE_LOCAL_NAME.test(localName))
+  ) {
+    throwInvalidCharacterError(qualifiedName);
+  }
+
+  if (prefix != null && namespace == null) {
+    throw createDOMException(
+      `A namespace is required for the prefix in "${qualifiedName}"`,
+      'NamespaceError',
+    );
+  }
+
+  if (prefix === 'xml' && namespace !== XML_NAMESPACE) {
+    throw createDOMException(
+      `The xml prefix requires the XML namespace`,
+      'NamespaceError',
+    );
+  }
+
+  if (
+    (qualifiedName === 'xmlns' || prefix === 'xmlns') &&
+    namespace !== XMLNS_NAMESPACE
+  ) {
+    throw createDOMException(
+      `The xmlns name requires the XMLNS namespace`,
+      'NamespaceError',
+    );
+  }
+
+  if (
+    namespace === XMLNS_NAMESPACE &&
+    qualifiedName !== 'xmlns' &&
+    prefix !== 'xmlns'
+  ) {
+    throw createDOMException(
+      `The XMLNS namespace requires the xmlns name or prefix`,
+      'NamespaceError',
+    );
+  }
+
+  return {namespace, qualifiedName, prefix, localName};
+}
+
+function throwInvalidCharacterError(name: string): never {
+  throw createDOMException(`Invalid name: "${name}"`, 'InvalidCharacterError');
+}