happy-dom 14.12.3 → 15.0.0

package/src/nodes/parent-node/ParentNodeUtility.ts

@@ -3,9 +3,11 @@ import * as PropertySymbol from '../../PropertySymbol.js';
 import DocumentFragment from '../document-fragment/DocumentFragment.js';
 import Document from '../document/Document.js';
 import Element from '../element/Element.js';
-import HTMLCollection from '../element/HTMLCollection.js';
 import Node from '../node/Node.js';
 import NamespaceURI from '../../config/NamespaceURI.js';
+import HTMLCollection from '../element/HTMLCollection.js';
+import QuerySelector from '../../query-selector/QuerySelector.js';
+import ICachedResult from '../node/ICachedResult.js';
 
 /**
  * Parent node utility.
@@ -45,11 +47,13 @@ export default class ParentNodeUtility {
 		const firstChild = parentNode.firstChild;
 		for (const node of nodes) {
 			if (typeof node === 'string') {
-				const newChildNodes = (<DocumentFragment>(
-					XMLParser.parse(<Document>parentNode[PropertySymbol.ownerDocument], node)
-				))[PropertySymbol.childNodes].slice();
-				for (const newChildNode of newChildNodes) {
-					parentNode.insertBefore(newChildNode, firstChild);
+				const childNodes = XMLParser.parse(
+					<Document>parentNode[PropertySymbol.ownerDocument],
+					node
+				)[PropertySymbol.nodeArray];
+
+				while (childNodes.length) {
+					parentNode.insertBefore(childNodes[0], firstChild);
 				}
 			} else {
 				parentNode.insertBefore(node, firstChild);
@@ -67,8 +71,10 @@ export default class ParentNodeUtility {
 		parentNode: Element | Document | DocumentFragment,
 		...nodes: (string | Node)[]
 	): void {
-		for (const node of (<DocumentFragment>parentNode)[PropertySymbol.childNodes].slice()) {
-			parentNode.removeChild(node);
+		const childNodes = (<DocumentFragment>parentNode)[PropertySymbol.nodeArray];
+
+		while (childNodes.length) {
+			parentNode.removeChild(childNodes[0]);
 		}
 
 		this.append(parentNode, ...nodes);
@@ -85,18 +91,10 @@ export default class ParentNodeUtility {
 		parentNode: Element | DocumentFragment | Document,
 		className: string
 	): HTMLCollection<Element> {
-		let matches = new HTMLCollection<Element>();
-
-		for (const child of (<DocumentFragment>parentNode)[PropertySymbol.children]) {
-			if (child.className.split(' ').includes(className)) {
-				matches.push(child);
-			}
-			matches = <HTMLCollection<Element>>(
-				matches.concat(this.getElementsByClassName(<Element>child, className))
-			);
-		}
-
-		return matches;
+		return new HTMLCollection(
+			PropertySymbol.illegalConstructor,
+			() => QuerySelector.querySelectorAll(parentNode, `.${className}`)[PropertySymbol.items]
+		);
 	}
 
 	/**
@@ -106,24 +104,55 @@ export default class ParentNodeUtility {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
-	public static getElementsByTagName(
+	public static getElementsByTagName<T extends Element = Element>(
 		parentNode: Element | DocumentFragment | Document,
 		tagName: string
-	): HTMLCollection<Element> {
+	): HTMLCollection<T> {
 		const upperTagName = tagName.toUpperCase();
 		const includeAll = tagName === '*';
-		let matches = new HTMLCollection<Element>();
 
-		for (const child of (<DocumentFragment>parentNode)[PropertySymbol.children]) {
-			if (includeAll || child[PropertySymbol.tagName].toUpperCase() === upperTagName) {
-				matches.push(child);
+		const find = (
+			parent: Element | DocumentFragment | Document,
+			cachedResult: ICachedResult
+		): T[] => {
+			const elements: T[] = [];
+
+			for (const element of (<DocumentFragment>parent)[PropertySymbol.elementArray]) {
+				if (includeAll || element[PropertySymbol.tagName] === upperTagName) {
+					elements.push(<T>element);
+				}
+
+				element[PropertySymbol.affectsCache].push(cachedResult);
+
+				for (const foundElement of find(<Element>element, cachedResult)) {
+					elements.push(foundElement);
+				}
 			}
-			matches = <HTMLCollection<Element>>(
-				matches.concat(this.getElementsByTagName(<Element>child, tagName))
-			);
-		}
 
-		return matches;
+			return elements;
+		};
+
+		const query = (): T[] => {
+			const cache = parentNode[PropertySymbol.cache].elementsByTagName;
+			const cachedItems = cache.get(tagName);
+
+			if (cachedItems?.result) {
+				const items = cachedItems.result.deref();
+				if (items) {
+					return <T[]>items;
+				}
+			}
+
+			const cachedResult = { result: null };
+			const items = find(parentNode, cachedResult);
+
+			cachedResult.result = new WeakRef(items);
+			cache.set(tagName, cachedResult);
+
+			return items;
+		};
+
+		return new HTMLCollection<T>(PropertySymbol.illegalConstructor, query);
 	}
 
 	/**
@@ -142,26 +171,57 @@ export default class ParentNodeUtility {
 		// When the namespace is HTML, the tag name is case-insensitive.
 		const formattedTagName = namespaceURI === NamespaceURI.html ? tagName.toUpperCase() : tagName;
 		const includeAll = tagName === '*';
-		let matches = new HTMLCollection<Element>();
-
-		for (const child of (<DocumentFragment>parentNode)[PropertySymbol.children]) {
-			if (
-				(includeAll || child[PropertySymbol.tagName] === formattedTagName) &&
-				child[PropertySymbol.namespaceURI] === namespaceURI
-			) {
-				matches.push(child);
+
+		const find = (
+			parent: Element | DocumentFragment | Document,
+			cachedResult: ICachedResult
+		): Element[] => {
+			const elements: Element[] = [];
+
+			for (const element of (<DocumentFragment>parent)[PropertySymbol.elementArray]) {
+				if (
+					(includeAll || element[PropertySymbol.tagName] === formattedTagName) &&
+					element[PropertySymbol.namespaceURI] === namespaceURI
+				) {
+					elements.push(<Element>element);
+				}
+
+				element[PropertySymbol.affectsCache].push(cachedResult);
+
+				for (const foundElement of find(<Element>element, cachedResult)) {
+					elements.push(foundElement);
+				}
 			}
-			matches = <HTMLCollection<Element>>(
-				matches.concat(this.getElementsByTagNameNS(<Element>child, namespaceURI, tagName))
-			);
-		}
 
-		return matches;
+			return elements;
+		};
+
+		const query = (): Element[] => {
+			const cache = parentNode[PropertySymbol.cache].elementsByTagNameNS;
+			const cachedItems = cache.get(tagName);
+
+			if (cachedItems?.result) {
+				const items = cachedItems.result.deref();
+				if (items) {
+					return items;
+				}
+			}
+
+			const cachedResult = { result: null };
+			const items = find(parentNode, cachedResult);
+
+			cachedResult.result = new WeakRef(items);
+			cache.set(tagName, cachedResult);
+
+			return items;
+		};
+
+		return new HTMLCollection(PropertySymbol.illegalConstructor, query);
 	}
 
 	/**
 	 * Returns the first element matching a tag name.
-	 * This is not part of the browser standard and is only used internally in the document.
+	 * This is not part of the browser standard and is only used internally (used in Document).
 	 *
 	 * @param parentNode Parent node.
 	 * @param tagName Tag name.
@@ -173,17 +233,43 @@ export default class ParentNodeUtility {
 	): Element {
 		const upperTagName = tagName.toUpperCase();
 
-		for (const child of (<DocumentFragment>parentNode)[PropertySymbol.children]) {
-			if (child[PropertySymbol.tagName] === upperTagName) {
-				return <Element>child;
+		const find = (
+			parent: Element | DocumentFragment | Document,
+			cachedResult: ICachedResult
+		): Element | null => {
+			for (const element of (<DocumentFragment>parent)[PropertySymbol.elementArray]) {
+				element[PropertySymbol.affectsCache].push(cachedResult);
+
+				if (element[PropertySymbol.tagName] === upperTagName) {
+					return <Element>element;
+				}
+
+				const foundElement = find(<Element>element, cachedResult);
+				if (foundElement) {
+					return foundElement;
+				}
 			}
-			const match = this.getElementByTagName(<Element>child, tagName);
-			if (match) {
-				return match;
+
+			return null;
+		};
+
+		const cache = parentNode[PropertySymbol.cache].elementByTagName;
+		const cachedItem = cache.get(tagName);
+
+		if (cachedItem?.result) {
+			const item = cachedItem.result.deref();
+			if (item) {
+				return item;
 			}
 		}
 
-		return null;
+		const cachedResult = { result: null };
+		const item = find(parentNode, cachedResult);
+
+		cachedResult.result = item ? new WeakRef(item) : { deref: () => null };
+		cache.set(tagName, cachedResult);
+
+		return item;
 	}
 
 	/**
@@ -196,20 +282,58 @@ export default class ParentNodeUtility {
 	public static getElementById(
 		parentNode: Element | DocumentFragment | Document,
 		id: string
-	): Element {
+	): Element | null {
 		id = String(id);
-		for (const child of (<DocumentFragment>parentNode)[PropertySymbol.children]) {
-			if (child.id === id) {
-				return <Element>child;
+
+		if (parentNode instanceof Document) {
+			const entry = parentNode[PropertySymbol.elementIdMap].get(id);
+			if (entry?.elements.length > 0) {
+				return entry.elements[0];
 			}
+			return null;
+		}
+
+		const find = (
+			parent: Element | DocumentFragment | Document,
+			cachedResult: ICachedResult
+		): Element | null => {
+			for (const element of (<DocumentFragment>parent)[PropertySymbol.elementArray]) {
+				element[PropertySymbol.affectsCache].push(cachedResult);
+
+				if (
+					element[PropertySymbol.attributes][PropertySymbol.namedItems].get('id')?.[
+						PropertySymbol.value
+					] === id
+				) {
+					return <Element>element;
+				}
 
-			const match = this.getElementById(<Element>child, id);
+				const foundElement = find(<Element>element, cachedResult);
 
-			if (match) {
-				return match;
+				if (foundElement) {
+					return foundElement;
+				}
+			}
+
+			return null;
+		};
+
+		const cache = parentNode[PropertySymbol.cache].elementById;
+		const cachedItem = cache.get(id);
+
+		if (cachedItem?.result) {
+			const item = cachedItem.result.deref();
+			if (item) {
+				return item;
 			}
 		}
 
-		return null;
+		const cachedResult = { result: null };
+		const item = find(parentNode, cachedResult);
+
+		cachedResult.result = item ? new WeakRef(item) : { deref: () => null };
+		cache.set(id, cachedResult);
+
+		return item;
 	}
 }

package/src/nodes/shadow-root/ShadowRoot.ts

@@ -13,7 +13,7 @@ import SVGElement from '../svg-element/SVGElement.js';
  */
 export default class ShadowRoot extends DocumentFragment {
 	// Public properties
-	public cloneNode: (deep?: boolean) => ShadowRoot;
+	public declare cloneNode: (deep?: boolean) => ShadowRoot;
 
 	// Events
 	public onslotchange: (event: Event) => void | null = null;
@@ -22,6 +22,10 @@ export default class ShadowRoot extends DocumentFragment {
 	public [PropertySymbol.adoptedStyleSheets]: CSSStyleSheet[] = [];
 	public [PropertySymbol.mode] = 'open';
 	public [PropertySymbol.host]: Element | null = null;
+	public [PropertySymbol.clonable]: boolean = false;
+	public [PropertySymbol.delegatesFocus]: boolean = false;
+	public [PropertySymbol.serializable]: boolean = false;
+	public [PropertySymbol.slotAssignment]: 'named' | 'manual' = 'named';
 
 	/**
 	 * Returns mode.
@@ -41,17 +45,82 @@ export default class ShadowRoot extends DocumentFragment {
 		return this[PropertySymbol.host];
 	}
 
+	/**
+	 * Returns clonable.
+	 *
+	 * @returns Clonable.
+	 */
+	public get clonable(): boolean {
+		return this[PropertySymbol.clonable];
+	}
+
+	/**
+	 * Returns delegates focus.
+	 *
+	 * @returns Delegates focus.
+	 */
+	public get delegatesFocus(): boolean {
+		// TODO: Implement delegates focus
+		return this[PropertySymbol.delegatesFocus];
+	}
+
+	/**
+	 * Returns serializable.
+	 *
+	 * @returns Serializable.
+	 */
+	public get serializable(): boolean {
+		return this[PropertySymbol.serializable];
+	}
+
+	/**
+	 * Returns slot assignment.
+	 *
+	 * @returns Slot assignment.
+	 */
+	public get slotAssignment(): 'named' | 'manual' {
+		return this[PropertySymbol.slotAssignment];
+	}
+
+	/**
+	 * The element that's currently in full screen mode for this shadow tree.
+	 *
+	 * @returns Fullscreen element.
+	 */
+	public get fullscreenElement(): Element | null {
+		// TODO: Implement fullscreen element
+		return null;
+	}
+
+	/**
+	 * Returns the Element within the shadow tree that is currently being presented in picture-in-picture mode.
+	 *
+	 * @returns Picture-in-picture element.
+	 */
+	public get pictureInPictureElement(): Element | null {
+		// TODO: Implement picture-in-picture element
+		return null;
+	}
+
+	/**
+	 * Returns the Element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another tree.
+	 *
+	 * @returns Pointer lock element.
+	 */
+	public get pointerLockElement(): Element | null {
+		// TODO: Implement pointer lock element
+		return null;
+	}
+
 	/**
 	 * Returns inner HTML.
 	 *
 	 * @returns HTML.
 	 */
 	public get innerHTML(): string {
-		const xmlSerializer = new XMLSerializer({
-			escapeEntities: false
-		});
+		const xmlSerializer = new XMLSerializer();
 		let xml = '';
-		for (const node of this[PropertySymbol.childNodes]) {
+		for (const node of this[PropertySymbol.nodeArray]) {
 			xml += xmlSerializer.serializeToString(node);
 		}
 		return xml;
@@ -63,8 +132,10 @@ export default class ShadowRoot extends DocumentFragment {
 	 * @param html HTML.
 	 */
 	public set innerHTML(html: string) {
-		for (const child of this[PropertySymbol.childNodes].slice()) {
-			this.removeChild(child);
+		const childNodes = this[PropertySymbol.nodeArray];
+
+		while (childNodes.length) {
+			this.removeChild(childNodes[0]);
 		}
 
 		XMLParser.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
@@ -106,6 +177,33 @@ export default class ShadowRoot extends DocumentFragment {
 		return null;
 	}
 
+	/**
+	 * Returns an array of all Animation objects currently in effect, whose target elements are descendants of the shadow tree.
+	 *
+	 * @returns Array of animations.
+	 */
+	public getAnimations(): object[] {
+		// TODO: Implement getAnimations()
+		return [];
+	}
+
+	/**
+	 * Parses a string of HTML into a document fragment, without sanitization, which then replaces the shadowroot's original subtree. The HTML string may include declarative shadow roots, which would be parsed as template elements the HTML was set using ShadowRoot.innerHTML.
+	 *
+	 * @param html HTML.
+	 */
+	public setHTMLUnsafe(html: string): void {
+		// TODO: Implement support for declarative shadow roots
+
+		const childNodes = this[PropertySymbol.nodeArray];
+
+		while (childNodes.length) {
+			this.removeChild(childNodes[0]);
+		}
+
+		XMLParser.parse(this[PropertySymbol.ownerDocument], html, { rootNode: this });
+	}
+
 	/**
 	 * Converts to string.
 	 *
@@ -120,7 +218,11 @@ export default class ShadowRoot extends DocumentFragment {
 	 */
 	public override [PropertySymbol.cloneNode](deep = false): ShadowRoot {
 		const clone = <ShadowRoot>super[PropertySymbol.cloneNode](deep);
-		clone[PropertySymbol.mode] = this.mode;
+		clone[PropertySymbol.mode] = this[PropertySymbol.mode];
+		clone[PropertySymbol.clonable] = this[PropertySymbol.clonable];
+		clone[PropertySymbol.delegatesFocus] = this[PropertySymbol.delegatesFocus];
+		clone[PropertySymbol.serializable] = this[PropertySymbol.serializable];
+		clone[PropertySymbol.slotAssignment] = this[PropertySymbol.slotAssignment];
 		return clone;
 	}
 }

package/src/nodes/svg-element/SVGElement.ts

@@ -4,10 +4,7 @@ import Element from '../element/Element.js';
 import SVGSVGElement from './SVGSVGElement.js';
 import Event from '../../event/Event.js';
 import HTMLElementUtility from '../html-element/HTMLElementUtility.js';
-import NamedNodeMap from '../../named-node-map/NamedNodeMap.js';
-import SVGElementNamedNodeMap from './SVGElementNamedNodeMap.js';
-import DatasetFactory from '../element/DatasetFactory.js';
-import IDataset from '../element/IDataset.js';
+import DOMStringMap from '../element/DOMStringMap.js';
 
 /**
  * SVG Element.
@@ -25,11 +22,10 @@ export default class SVGElement extends Element {
 	public onunload: (event: Event) => void | null = null;
 
 	// Internal properties
-	public override [PropertySymbol.attributes]: NamedNodeMap = new SVGElementNamedNodeMap(this);
 	public [PropertySymbol.style]: CSSStyleDeclaration | null = null;
 
 	// Private properties
-	#dataset: IDataset = null;
+	#dataset: DOMStringMap | null = null;
 
 	/**
 	 * Returns viewport.
@@ -62,8 +58,8 @@ export default class SVGElement extends Element {
 	 *
 	 * @returns Data set.
 	 */
-	public get dataset(): IDataset {
-		return (this.#dataset ??= DatasetFactory.createDataset(this));
+	public get dataset(): DOMStringMap {
+		return (this.#dataset ??= new DOMStringMap(this));
 	}
 
 	/**

package/src/nodes/svg-element/SVGSVGElement.ts

@@ -15,7 +15,7 @@ import * as PropertySymbol from '../../PropertySymbol.js';
  */
 export default class SVGSVGElement extends SVGGraphicsElement {
 	// Public properties
-	public cloneNode: (deep?: boolean) => SVGSVGElement;
+	public declare cloneNode: (deep?: boolean) => SVGSVGElement;
 
 	// Events
 	public onafterprint: (event: Event) => void | null = null;

package/src/nodes/text/Text.ts

@@ -3,15 +3,17 @@ import CharacterData from '../character-data/CharacterData.js';
 import DOMException from '../../exception/DOMException.js';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum.js';
 import HTMLTextAreaElement from '../html-text-area-element/HTMLTextAreaElement.js';
-import Node from '../node/Node.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
+import HTMLStyleElement from '../html-style-element/HTMLStyleElement.js';
 
 /**
  * Text node.
  */
 export default class Text extends CharacterData {
-	public cloneNode: (deep?: boolean) => Text;
+	public declare cloneNode: (deep?: boolean) => Text;
 	public override [PropertySymbol.nodeType] = NodeTypeEnum.textNode;
+	public override [PropertySymbol.textAreaNode]: HTMLTextAreaElement | null = null;
+	public override [PropertySymbol.styleNode]: HTMLStyleElement | null = null;
 
 	/**
 	 * Node name.
@@ -93,18 +95,30 @@ export default class Text extends CharacterData {
 	/**
 	 * @override
 	 */
-	public override [PropertySymbol.connectToNode](parentNode: Node = null): void {
-		const oldTextAreaNode = <HTMLTextAreaElement>this[PropertySymbol.textAreaNode];
-
-		super[PropertySymbol.connectToNode](parentNode);
-
-		if (oldTextAreaNode !== this[PropertySymbol.textAreaNode]) {
-			if (oldTextAreaNode) {
-				oldTextAreaNode[PropertySymbol.resetSelection]();
-			}
-			if (this[PropertySymbol.textAreaNode]) {
-				(<HTMLTextAreaElement>this[PropertySymbol.textAreaNode])[PropertySymbol.resetSelection]();
-			}
+	public override [PropertySymbol.connectedToNode](): void {
+		super[PropertySymbol.connectedToNode]();
+
+		if (this[PropertySymbol.textAreaNode]) {
+			(<HTMLTextAreaElement>this[PropertySymbol.textAreaNode])[PropertySymbol.resetSelection]();
+		}
+
+		if (this[PropertySymbol.styleNode] && this[PropertySymbol.data]) {
+			this[PropertySymbol.styleNode][PropertySymbol.updateSheet]();
+		}
+	}
+
+	/**
+	 * @override
+	 */
+	public override [PropertySymbol.disconnectedFromNode](): void {
+		if (this[PropertySymbol.textAreaNode]) {
+			(<HTMLTextAreaElement>this[PropertySymbol.textAreaNode])[PropertySymbol.resetSelection]();
 		}
+
+		if (this[PropertySymbol.styleNode] && this[PropertySymbol.data]) {
+			this[PropertySymbol.styleNode][PropertySymbol.updateSheet]();
+		}
+
+		super[PropertySymbol.disconnectedFromNode]();
 	}
 }