happy-dom 14.11.0 → 14.11.2

package/src/nodes/html-style-element/HTMLStyleElement.ts

@@ -11,6 +11,7 @@ import Node from '../node/Node.js';
  */
 export default class HTMLStyleElement extends HTMLElement {
 	private [PropertySymbol.sheet]: CSSStyleSheet | null = null;
+	public [PropertySymbol.styleNode] = this;
 
 	/**
 	 * Returns CSS style sheet.
@@ -84,9 +85,7 @@ export default class HTMLStyleElement extends HTMLElement {
 	 */
 	public override [PropertySymbol.appendChild](node: Node): Node {
 		const returnValue = super[PropertySymbol.appendChild](node);
-		if (this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet].replaceSync(this.textContent);
-		}
+		this[PropertySymbol.updateSheet]();
 		return returnValue;
 	}
 
@@ -95,9 +94,7 @@ export default class HTMLStyleElement extends HTMLElement {
 	 */
 	public override [PropertySymbol.removeChild](node: Node): Node {
 		const returnValue = super[PropertySymbol.removeChild](node);
-		if (this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet].replaceSync(this.textContent);
-		}
+		this[PropertySymbol.updateSheet]();
 		return returnValue;
 	}
 
@@ -106,9 +103,7 @@ export default class HTMLStyleElement extends HTMLElement {
 	 */
 	public override [PropertySymbol.insertBefore](newNode: Node, referenceNode: Node | null): Node {
 		const returnValue = super[PropertySymbol.insertBefore](newNode, referenceNode);
-		if (this[PropertySymbol.sheet]) {
-			this[PropertySymbol.sheet].replaceSync(this.textContent);
-		}
+		this[PropertySymbol.updateSheet]();
 		return returnValue;
 	}
 
@@ -125,4 +120,14 @@ export default class HTMLStyleElement extends HTMLElement {
 			this[PropertySymbol.sheet] = null;
 		}
 	}
+
+	/**
+	 * Updates the CSSStyleSheet with the text content.
+	 */
+	public [PropertySymbol.updateSheet](): void {
+		if (this[PropertySymbol.sheet]) {
+			this[PropertySymbol.ownerDocument][PropertySymbol.cacheID]++;
+			this[PropertySymbol.sheet].replaceSync(this.textContent);
+		}
+	}
 }

package/src/nodes/node/Node.ts

@@ -61,6 +61,7 @@ export default class Node extends EventTarget {
 	public [PropertySymbol.formNode]: Node = null;
 	public [PropertySymbol.selectNode]: Node = null;
 	public [PropertySymbol.textAreaNode]: Node = null;
+	public [PropertySymbol.styleNode]: Node = null;
 	public [PropertySymbol.observers]: MutationListener[] = [];
 	public [PropertySymbol.childNodes]: NodeList<Node> = new NodeList<Node>();
 
@@ -516,6 +517,7 @@ export default class Node extends EventTarget {
 		const formNode = (<Node>this)[PropertySymbol.formNode];
 		const selectNode = (<Node>this)[PropertySymbol.selectNode];
 		const textAreaNode = (<Node>this)[PropertySymbol.textAreaNode];
+		const styleNode = (<Node>this)[PropertySymbol.styleNode];
 
 		if (this[PropertySymbol.nodeType] !== NodeTypeEnum.documentFragmentNode) {
 			this[PropertySymbol.parentNode] = parentNode;
@@ -539,6 +541,12 @@ export default class Node extends EventTarget {
 					? (<Node>parentNode)[PropertySymbol.textAreaNode]
 					: null;
 			}
+
+			if (this['tagName'] !== 'STYLE') {
+				(<Node>this)[PropertySymbol.styleNode] = parentNode
+					? (<Node>parentNode)[PropertySymbol.styleNode]
+					: null;
+			}
 		}
 
 		if (this[PropertySymbol.isConnected] !== isConnected) {
@@ -551,7 +559,23 @@ export default class Node extends EventTarget {
 			}
 
 			if (isConnected && this.connectedCallback) {
-				this.connectedCallback();
+				const result = <void | Promise<void>>this.connectedCallback();
+				/**
+				 * 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 (result instanceof Promise) {
+					const asyncTaskManager =
+						this[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow][
+							PropertySymbol.asyncTaskManager
+						];
+					const taskID = asyncTaskManager.startTask();
+					result
+						.then(() => asyncTaskManager.endTask(taskID))
+						.catch(() => asyncTaskManager.endTask(taskID));
+				}
 			} else if (!isConnected && this.disconnectedCallback) {
 				this.disconnectedCallback();
 			}
@@ -568,7 +592,8 @@ export default class Node extends EventTarget {
 		} else if (
 			formNode !== this[PropertySymbol.formNode] ||
 			selectNode !== this[PropertySymbol.selectNode] ||
-			textAreaNode !== this[PropertySymbol.textAreaNode]
+			textAreaNode !== this[PropertySymbol.textAreaNode] ||
+			styleNode !== this[PropertySymbol.styleNode]
 		) {
 			for (const child of this[PropertySymbol.childNodes]) {
 				(<Node>child)[PropertySymbol.connectToNode](this);

package/src/nodes/text/Text.ts

@@ -38,6 +38,10 @@ export default class Text extends CharacterData {
 		if (this[PropertySymbol.textAreaNode]) {
 			(<HTMLTextAreaElement>this[PropertySymbol.textAreaNode])[PropertySymbol.resetSelection]();
 		}
+
+		if (this[PropertySymbol.styleNode]) {
+			this[PropertySymbol.styleNode][PropertySymbol.updateSheet]();
+		}
 	}
 
 	/**

package/src/window/BrowserWindow.ts

@@ -153,6 +153,7 @@ import RangeImplementation from '../range/Range.js';
 import INodeJSGlobal from './INodeJSGlobal.js';
 import CrossOriginBrowserWindow from './CrossOriginBrowserWindow.js';
 import Response from '../fetch/Response.js';
+import AsyncTaskManager from '../async-task-manager/AsyncTaskManager.js';
 
 const TIMER = {
 	setTimeout: globalThis.setTimeout.bind(globalThis),
@@ -495,6 +496,7 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 	public [PropertySymbol.captureEventListenerCount]: { [eventType: string]: number } = {};
 	public readonly [PropertySymbol.mutationObservers]: MutationObserver[] = [];
 	public readonly [PropertySymbol.readyStateManager] = new DocumentReadyStateManager(this);
+	public [PropertySymbol.asyncTaskManager]: AsyncTaskManager | null = null;
 	public [PropertySymbol.location]: Location;
 	public [PropertySymbol.history]: History;
 	public [PropertySymbol.navigator]: Navigator;
@@ -520,6 +522,8 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 	constructor(browserFrame: IBrowserFrame, options?: { url?: string }) {
 		super();
 
+		const asyncTaskManager = browserFrame[PropertySymbol.asyncTaskManager];
+
 		this.#browserFrame = browserFrame;
 
 		this.customElements = new CustomElementRegistry(this);
@@ -529,13 +533,13 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 		this[PropertySymbol.sessionStorage] = StorageFactory.createStorage();
 		this[PropertySymbol.localStorage] = StorageFactory.createStorage();
 		this[PropertySymbol.location] = new Location(this.#browserFrame, options?.url ?? 'about:blank');
+		this[PropertySymbol.asyncTaskManager] = asyncTaskManager;
 
 		this.console = browserFrame.page.console;
 
 		WindowBrowserSettingsReader.setSettings(this, this.#browserFrame.page.context.browser.settings);
 
 		const window = this;
-		const asyncTaskManager = this.#browserFrame[PropertySymbol.asyncTaskManager];
 
 		this[PropertySymbol.setupVMContext]();
 
@@ -1302,6 +1306,7 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 		}
 
 		(<boolean>this.closed) = true;
+		this[PropertySymbol.asyncTaskManager] = null;
 		this.Audio[PropertySymbol.ownerDocument] = null;
 		this.Image[PropertySymbol.ownerDocument] = null;
 		this.DocumentFragment[PropertySymbol.ownerDocument] = null;