happy-dom 15.11.7 → 16.0.1

package/src/custom-element/CustomElementReactionStack.ts

@@ -0,0 +1,86 @@
+import HTMLElement from '../nodes/html-element/HTMLElement.js';
+import BrowserWindow from '../window/BrowserWindow.js';
+import * as PropertySymbol from '../PropertySymbol.js';
+import WindowBrowserContext from '../window/WindowBrowserContext.js';
+
+/**
+ * Custom element reaction stack.
+ *
+ * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions-stack
+ */
+export default class CustomElementReactionStack {
+	private window: BrowserWindow;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param window Window.
+	 */
+	constructor(window: BrowserWindow) {
+		this.window = window;
+	}
+
+	/**
+	 * Enqueues a custom element reaction.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#enqueue-a-custom-element-callback-reaction
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#enqueue-an-element-on-the-appropriate-element-queue
+	 * @param element Element.
+	 * @param callbackName Callback name.
+	 * @param [args] Arguments.
+	 */
+	public enqueueReaction(element: HTMLElement, callbackName: string, args?: any[]): void {
+		// If a polyfill is used, [PropertySymbol.registry] may be undefined
+		const definition = this.window.customElements[PropertySymbol.registry]?.get(element.localName);
+
+		if (!definition) {
+			return;
+		}
+
+		// If the element is not connected to the main document, we should not invoke the callback.
+		if (element[PropertySymbol.ownerDocument] !== this.window.document) {
+			return;
+		}
+
+		// According to the spec, we should use a queue for each element and then invoke the reactions in the order they were enqueued asynchronously.
+		// However, the browser seem to always invoke the reactions synchronously.
+		// TODO: Can we find an example where the reactions are invoked asynchronously? In that case we should use a queue for those cases.
+
+		switch (callbackName) {
+			case 'connectedCallback':
+				if (definition.livecycleCallbacks.connectedCallback) {
+					const returnValue = definition.livecycleCallbacks.connectedCallback.call(element);
+
+					/**
+					 * It is common to import dependencies in the connectedCallback() method of web components.
+					 * As Happy DOM doesn't have support for dynamic imports yet, this is a temporary solution to wait for imports in connectedCallback().
+					 *
+					 * @see https://github.com/capricorn86/happy-dom/issues/1442
+					 */
+					if (returnValue instanceof Promise) {
+						const asyncTaskManager = new WindowBrowserContext(this.window).getAsyncTaskManager();
+						if (asyncTaskManager) {
+							const taskID = asyncTaskManager.startTask();
+							returnValue
+								.then(() => asyncTaskManager.endTask(taskID))
+								.catch(() => asyncTaskManager.endTask(taskID));
+						}
+					}
+				}
+				break;
+			case 'disconnectedCallback':
+				if (definition.livecycleCallbacks.disconnectedCallback) {
+					definition.livecycleCallbacks.disconnectedCallback.call(element);
+				}
+				break;
+			case 'attributeChangedCallback':
+				if (
+					definition.livecycleCallbacks.attributeChangedCallback &&
+					definition.observedAttributes.has(args[0])
+				) {
+					definition.livecycleCallbacks.attributeChangedCallback.apply(element, args);
+				}
+				break;
+		}
+	}
+}

package/src/custom-element/CustomElementRegistry.ts

@@ -3,14 +3,15 @@ import HTMLElement from '../nodes/html-element/HTMLElement.js';
 import Node from '../nodes/node/Node.js';
 import BrowserWindow from '../window/BrowserWindow.js';
 import NamespaceURI from '../config/NamespaceURI.js';
+import StringUtility from '../utilities/StringUtility.js';
+import CustomElementUtility from './CustomElementUtility.js';
+import ICustomElementDefinition from './ICustomElementDefinition.js';
 
 /**
  * Custom elements registry.
  */
 export default class CustomElementRegistry {
-	public [PropertySymbol.registry]: {
-		[k: string]: { elementClass: typeof HTMLElement; extends: string };
-	} = {};
+	public [PropertySymbol.registry]: Map<string, ICustomElementDefinition> = new Map();
 	public [PropertySymbol.classRegistry]: Map<typeof HTMLElement, string> = new Map();
 	public [PropertySymbol.callbacks]: Map<string, Array<() => void>> = new Map();
 	public [PropertySymbol.destroyed]: boolean = false;
@@ -45,13 +46,13 @@ export default class CustomElementRegistry {
 			return;
 		}
 
-		if (!this.#isValidCustomElementName(name)) {
+		if (!CustomElementUtility.isValidCustomElementName(name)) {
 			throw new this.#window.DOMException(
 				`Failed to execute 'define' on 'CustomElementRegistry': "${name}" is not a valid custom element name`
 			);
 		}
 
-		if (this[PropertySymbol.registry][name]) {
+		if (this[PropertySymbol.registry].has(name)) {
 			throw new this.#window.DOMException(
 				`Failed to execute 'define' on 'CustomElementRegistry': the name "${name}" has already been used with this registry`
 			);
@@ -63,7 +64,7 @@ export default class CustomElementRegistry {
 			);
 		}
 
-		const tagName = name.toUpperCase();
+		const tagName = StringUtility.asciiUpperCase(name);
 
 		elementClass.prototype[PropertySymbol.window] = this.#window;
 		elementClass.prototype[PropertySymbol.ownerDocument] = this.#window.document;
@@ -71,17 +72,28 @@ export default class CustomElementRegistry {
 		elementClass.prototype[PropertySymbol.localName] = name;
 		elementClass.prototype[PropertySymbol.namespaceURI] = NamespaceURI.html;
 
-		this[PropertySymbol.registry][name] = {
+		// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
+		const observedAttributes: Set<string> = new Set();
+		const elementObservervedAttributes = elementClass.observedAttributes;
+
+		if (Array.isArray(elementObservervedAttributes)) {
+			for (const attribute of elementObservervedAttributes) {
+				observedAttributes.add(String(attribute).toLowerCase());
+			}
+		}
+
+		this[PropertySymbol.registry].set(name, {
 			elementClass,
-			extends: options && options.extends ? options.extends.toLowerCase() : null
-		};
+			extends: options && options.extends ? options.extends.toLowerCase() : null,
+			observedAttributes,
+			livecycleCallbacks: {
+				connectedCallback: elementClass.prototype.connectedCallback,
+				disconnectedCallback: elementClass.prototype.disconnectedCallback,
+				attributeChangedCallback: elementClass.prototype.attributeChangedCallback
+			}
+		});
 		this[PropertySymbol.classRegistry].set(elementClass, name);
 
-		// ObservedAttributes should only be called once by CustomElementRegistry (see #117)
-		elementClass[PropertySymbol.observedAttributes] = (elementClass.observedAttributes || []).map(
-			(name) => String(name).toLowerCase()
-		);
-
 		const callbacks = this[PropertySymbol.callbacks].get(name);
 		if (callbacks) {
 			this[PropertySymbol.callbacks].delete(name);
@@ -98,7 +110,7 @@ export default class CustomElementRegistry {
 	 * @returns HTMLElement Class defined or undefined.
 	 */
 	public get(name: string): typeof HTMLElement | undefined {
-		return this[PropertySymbol.registry][name]?.elementClass;
+		return this[PropertySymbol.registry].get(name)?.elementClass;
 	}
 
 	/**
@@ -125,7 +137,7 @@ export default class CustomElementRegistry {
 				)
 			);
 		}
-		if (!this.#isValidCustomElementName(name)) {
+		if (!CustomElementUtility.isValidCustomElementName(name)) {
 			return Promise.reject(
 				new this.#window.DOMException(
 					`Failed to execute 'whenDefined' on 'CustomElementRegistry': Invalid custom element name: "${name}"`
@@ -160,46 +172,15 @@ export default class CustomElementRegistry {
 	 */
 	public [PropertySymbol.destroy](): void {
 		this[PropertySymbol.destroyed] = true;
-		for (const entity of Object.values(this[PropertySymbol.registry])) {
-			entity.elementClass.prototype[PropertySymbol.window] = null;
-			entity.elementClass.prototype[PropertySymbol.ownerDocument] = null;
-			entity.elementClass.prototype[PropertySymbol.tagName] = null;
-			entity.elementClass.prototype[PropertySymbol.localName] = null;
-			entity.elementClass.prototype[PropertySymbol.namespaceURI] = null;
+		for (const definition of this[PropertySymbol.registry].values()) {
+			definition.elementClass.prototype[PropertySymbol.window] = null;
+			definition.elementClass.prototype[PropertySymbol.ownerDocument] = null;
+			definition.elementClass.prototype[PropertySymbol.tagName] = null;
+			definition.elementClass.prototype[PropertySymbol.localName] = null;
+			definition.elementClass.prototype[PropertySymbol.namespaceURI] = null;
 		}
-		this[PropertySymbol.registry] = {};
+		this[PropertySymbol.registry] = new Map();
 		this[PropertySymbol.classRegistry] = new Map();
 		this[PropertySymbol.callbacks] = new Map();
 	}
-
-	/**
-	 * Validates the correctness of custom element tag names.
-	 *
-	 * @param name Custom element tag name.
-	 * @returns True, if tag name is standard compliant.
-	 */
-	#isValidCustomElementName(name: string): boolean {
-		// Validation criteria based on:
-		// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
-		const PCENChar =
-			'[-_.]|[0-9]|[a-z]|\u{B7}|[\u{C0}-\u{D6}]|[\u{D8}-\u{F6}]' +
-			'|[\u{F8}-\u{37D}]|[\u{37F}-\u{1FFF}]' +
-			'|[\u{200C}-\u{200D}]|[\u{203F}-\u{2040}]|[\u{2070}-\u{218F}]' +
-			'|[\u{2C00}-\u{2FEF}]|[\u{3001}-\u{D7FF}]' +
-			'|[\u{F900}-\u{FDCF}]|[\u{FDF0}-\u{FFFD}]|[\u{10000}-\u{EFFFF}]';
-
-		const PCEN = new RegExp(`^[a-z](${PCENChar})*-(${PCENChar})*$`, 'u');
-
-		const reservedNames = [
-			'annotation-xml',
-			'color-profile',
-			'font-face',
-			'font-face-src',
-			'font-face-uri',
-			'font-face-format',
-			'font-face-name',
-			'missing-glyph'
-		];
-		return PCEN.test(name) && !reservedNames.includes(name);
-	}
 }

package/src/custom-element/CustomElementUtility.ts

@@ -0,0 +1,34 @@
+const PCEN_CHAR =
+	'[-_.]|[0-9]|[a-z]|\u{B7}|[\u{C0}-\u{D6}]|[\u{D8}-\u{F6}]' +
+	'|[\u{F8}-\u{37D}]|[\u{37F}-\u{1FFF}]' +
+	'|[\u{200C}-\u{200D}]|[\u{203F}-\u{2040}]|[\u{2070}-\u{218F}]' +
+	'|[\u{2C00}-\u{2FEF}]|[\u{3001}-\u{D7FF}]' +
+	'|[\u{F900}-\u{FDCF}]|[\u{FDF0}-\u{FFFD}]|[\u{10000}-\u{EFFFF}]';
+
+const PCEN_REGEXP = new RegExp(`^[a-z](${PCEN_CHAR})*-(${PCEN_CHAR})*$`, 'u');
+const RESERVED_NAMES = [
+	'annotation-xml',
+	'color-profile',
+	'font-face',
+	'font-face-src',
+	'font-face-uri',
+	'font-face-format',
+	'font-face-name',
+	'missing-glyph'
+];
+
+/**
+ * Custom element utility.
+ */
+export default class CustomElementUtility {
+	/**
+	 * Returns true if the tag name is a valid custom element name.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+	 * @param name Tag name.
+	 * @returns True if valid.
+	 */
+	public static isValidCustomElementName(name: string): boolean {
+		return PCEN_REGEXP.test(name) && !RESERVED_NAMES.includes(name);
+	}
+}

package/src/custom-element/ICustomElementDefinition.ts

@@ -0,0 +1,16 @@
+import HTMLElement from '../nodes/html-element/HTMLElement.js';
+
+export default interface ICustomElementDefinition {
+	elementClass: typeof HTMLElement;
+	extends: string;
+	observedAttributes: Set<string>;
+	livecycleCallbacks: {
+		connectedCallback: () => void;
+		disconnectedCallback: () => void;
+		attributeChangedCallback: (
+			name: string,
+			oldValue: string | null,
+			newValue: string | null
+		) => void;
+	};
+}

package/src/dom/DOMStringMap.ts

@@ -26,11 +26,11 @@ export default class DOMStringMap {
 		// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 		return new Proxy(this, {
 			get(_target, property: string): string {
-				const attribute = element[PropertySymbol.attributes][PropertySymbol.namedItems].get(
+				const attribute = element.getAttribute(
 					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
 				);
 				if (attribute) {
-					return attribute[PropertySymbol.value];
+					return attribute;
 				}
 			},
 			set(_target, property: string, value: string): boolean {
@@ -46,19 +46,21 @@ export default class DOMStringMap {
 				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
 				// "The result List must contain the keys of all non-configurable own properties of the target object."
 				const keys = [];
-				for (const item of element[PropertySymbol.attributes][PropertySymbol.namedItems].values()) {
-					if (item[PropertySymbol.name].startsWith('data-')) {
+				for (const items of element[PropertySymbol.attributes][
+					PropertySymbol.namedItems
+				].values()) {
+					if (items[0][PropertySymbol.name].startsWith('data-')) {
 						keys.push(
-							DOMStringMapUtility.kebabToCamelCase(item[PropertySymbol.name].replace('data-', ''))
+							DOMStringMapUtility.kebabToCamelCase(
+								items[0][PropertySymbol.name].replace('data-', '')
+							)
 						);
 					}
 				}
 				return keys;
 			},
 			has(_target, property: string): boolean {
-				return element[PropertySymbol.attributes][PropertySymbol.namedItems].has(
-					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
-				);
+				return element.hasAttribute('data-' + DOMStringMapUtility.camelCaseToKebab(property));
 			},
 			defineProperty(_target, property: string, descriptor): boolean {
 				if (descriptor.value === undefined) {
@@ -73,14 +75,14 @@ export default class DOMStringMap {
 				return true;
 			},
 			getOwnPropertyDescriptor(_target, property: string): PropertyDescriptor {
-				const attribute = element[PropertySymbol.attributes][PropertySymbol.namedItems].get(
+				const attribute = element.getAttribute(
 					'data-' + DOMStringMapUtility.camelCaseToKebab(property)
 				);
 				if (!attribute) {
 					return;
 				}
 				return {
-					value: attribute[PropertySymbol.value],
+					value: attribute,
 					writable: true,
 					enumerable: true,
 					configurable: true

package/src/dom/DOMTokenList.ts

@@ -1,4 +1,4 @@
-import ClassMethodBinder from '../ClassMethodBinder.js';
+import ClassMethodBinder from '../utilities/ClassMethodBinder.js';
 import Element from '../nodes/element/Element.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 

package/src/dom-parser/DOMParser.ts

@@ -1,9 +1,8 @@
 import Document from '../nodes/document/Document.js';
 import * as PropertySymbol from '../PropertySymbol.js';
 import XMLParser from '../xml-parser/XMLParser.js';
-import DocumentFragment from '../nodes/document-fragment/DocumentFragment.js';
 import BrowserWindow from '../window/BrowserWindow.js';
-import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
+import HTMLParser from '../html-parser/HTMLParser.js';
 
 /**
  * DOM parser.
@@ -29,87 +28,18 @@ export default class DOMParser {
 			);
 		}
 
-		const newDocument = <Document>this.#createDocument(mimeType);
-		const documentChildNodes = newDocument[PropertySymbol.nodeArray];
-
-		while (documentChildNodes.length) {
-			newDocument.removeChild(documentChildNodes[0]);
-		}
-
-		const root = <DocumentFragment>XMLParser.parse(newDocument, string, { evaluateScripts: true });
-		let documentElement = null;
-		let documentTypeNode = null;
-
-		for (const node of root[PropertySymbol.nodeArray]) {
-			if (node['tagName'] === 'HTML') {
-				documentElement = node;
-			} else if (node[PropertySymbol.nodeType] === NodeTypeEnum.documentTypeNode) {
-				documentTypeNode = node;
-			}
-
-			if (documentElement && documentTypeNode) {
-				break;
-			}
-		}
-
-		if (documentElement) {
-			if (documentTypeNode) {
-				newDocument.appendChild(documentTypeNode);
-			}
-			newDocument.appendChild(documentElement);
-			const body = newDocument.body;
-			if (body) {
-				while (root[PropertySymbol.nodeArray].length) {
-					body.appendChild(root[PropertySymbol.nodeArray][0]);
-				}
-			}
-		} else {
-			switch (mimeType) {
-				case 'image/svg+xml':
-					{
-						while (root[PropertySymbol.nodeArray].length) {
-							newDocument.appendChild(root[PropertySymbol.nodeArray][0]);
-						}
-					}
-					break;
-				case 'text/html':
-				default:
-					{
-						const documentElement = newDocument.createElement('html');
-						const bodyElement = newDocument.createElement('body');
-						const headElement = newDocument.createElement('head');
-
-						documentElement.appendChild(headElement);
-						documentElement.appendChild(bodyElement);
-						newDocument.appendChild(documentElement);
-
-						while (root[PropertySymbol.nodeArray].length) {
-							bodyElement.appendChild(root[PropertySymbol.nodeArray][0]);
-						}
-					}
-					break;
-			}
-		}
-
-		return newDocument;
-	}
-
-	/**
-	 *
-	 * @param mimeType Mime type.
-	 * @returns Document.
-	 */
-	#createDocument(mimeType: string): Document {
 		const window = this[PropertySymbol.window];
 
 		switch (mimeType) {
 			case 'text/html':
-				return new window.HTMLDocument();
+				const newDocument = new window.HTMLDocument();
+				newDocument[PropertySymbol.defaultView] = window;
+				return <Document>new HTMLParser(this[PropertySymbol.window]).parse(string, newDocument);
 			case 'image/svg+xml':
 			case 'text/xml':
 			case 'application/xml':
 			case 'application/xhtml+xml':
-				return new window.XMLDocument();
+				return <Document>new XMLParser(this[PropertySymbol.window]).parse(string);
 			default:
 				throw new window.DOMException(`Unknown mime type "${mimeType}".`);
 		}

package/src/exception/DOMExceptionNameEnum.ts

@@ -16,6 +16,7 @@ enum DOMExceptionNameEnum {
 	abortError = 'AbortError',
 	timeoutError = 'TimeoutError',
 	encodingError = 'EncodingError',
-	uriMismatchError = 'URIMismatchError'
+	uriMismatchError = 'URIMismatchError',
+	inUseAttributeError = 'InUseAttributeError'
 }
 export default DOMExceptionNameEnum;

package/src/history/History.ts

@@ -47,7 +47,7 @@ export default class History {
 	 * @returns History length.
 	 */
 	public get length(): number {
-		return this.#browserFrame[PropertySymbol.history].length;
+		return this.#browserFrame?.[PropertySymbol.history].length || 0;
 	}
 
 	/**
@@ -87,7 +87,7 @@ export default class History {
 	 */
 	public back(): void {
 		if (!this.#window.closed) {
-			this.#browserFrame.goBack();
+			this.#browserFrame?.goBack();
 		}
 	}
 
@@ -96,7 +96,7 @@ export default class History {
 	 */
 	public forward(): void {
 		if (!this.#window.closed) {
-			this.#browserFrame.goForward();
+			this.#browserFrame?.goForward();
 		}
 	}
 
@@ -108,7 +108,7 @@ export default class History {
 	 */
 	public go(delta: number): void {
 		if (!this.#window.closed) {
-			this.#browserFrame.goSteps(delta);
+			this.#browserFrame?.goSteps(delta);
 		}
 	}
 
@@ -124,7 +124,7 @@ export default class History {
 			return;
 		}
 
-		const history = this.#browserFrame[PropertySymbol.history];
+		const history = this.#browserFrame?.[PropertySymbol.history];
 
 		if (!history) {
 			return;
@@ -182,7 +182,7 @@ export default class History {
 			return;
 		}
 
-		const history = this.#browserFrame[PropertySymbol.history];
+		const history = this.#browserFrame?.[PropertySymbol.history];
 
 		if (!history) {
 			return;