@happy-dom/server-renderer 20.0.11 → 20.1.1

package/src/ServerRendererBrowser.ts

@@ -1,12 +1,8 @@
 import Browser from 'happy-dom/lib/browser/Browser.js';
-import HTMLSerializer from 'happy-dom/lib/html-serializer/HTMLSerializer.js';
 import IServerRendererConfiguration from './types/IServerRendererConfiguration.js';
-import FS from 'fs';
-import Path from 'path';
 import IServerRendererItem from './types/IServerRendererItem.js';
 import IServerRendererResult from './types/IServerRendererResult.js';
-import { ErrorEvent } from 'happy-dom';
-import BrowserWindowPolyfill from './utilities/BrowserWindowPolyfill.js';
+import ServerRendererPage from './ServerRendererPage.js';
 
 /**
  * Server renderer browser.
@@ -15,7 +11,7 @@ export default class ServerRendererBrowser {
 	#configuration: IServerRendererConfiguration;
 	#browser: Browser;
 	#isCacheLoaded: boolean = false;
-	#createdDirectories: Set<string> = new Set();
+	#pageRenderer: ServerRendererPage;
 
 	/**
 	 * Constructor.
@@ -35,6 +31,7 @@ export default class ServerRendererBrowser {
 					}
 				: configuration.browser;
 		this.#browser = new Browser({ settings });
+		this.#pageRenderer = new ServerRendererPage(configuration);
 	}
 
 	/**
@@ -56,7 +53,7 @@ export default class ServerRendererBrowser {
 				const promises = [];
 				for (const url of chunk) {
 					promises.push(
-						this.#renderURL(browser, url).then((result) => {
+						this.#renderPage(browser, url).then((result) => {
 							results.push(result);
 						})
 					);
@@ -66,7 +63,7 @@ export default class ServerRendererBrowser {
 		} else {
 			const promises = [];
 			for (const url of items) {
-				promises.push(this.#renderURL(browser, url));
+				promises.push(this.#renderPage(browser, url));
 			}
 			results = await Promise.all(promises);
 		}
@@ -91,7 +88,7 @@ export default class ServerRendererBrowser {
 	 * @param browser Browser.
 	 * @param item Item.
 	 */
-	async #renderURL(browser: Browser, item: IServerRendererItem): Promise<IServerRendererResult> {
+	async #renderPage(browser: Browser, item: IServerRendererItem): Promise<IServerRendererResult> {
 		const responseCache = browser.defaultContext.responseCache;
 		const preflightResponseCache = browser.defaultContext.preflightResponseCache;
 		const configuration = this.#configuration;
@@ -108,148 +105,7 @@ export default class ServerRendererBrowser {
 			context.preflightResponseCache = preflightResponseCache;
 		}
 
-		const pageErrors: string[] = [];
-		const response = (await page.goto(item.url, {
-			timeout: configuration.render.timeout,
-			headers: item.headers,
-			beforeContentCallback(window) {
-				window.addEventListener('error', (event) => {
-					if ((<ErrorEvent>event).error) {
-						pageErrors.push((<ErrorEvent>event).error!.stack!);
-					}
-				});
-				if (!configuration.render.disablePolyfills) {
-					BrowserWindowPolyfill.applyPolyfills(window);
-				}
-			}
-		}))!;
-
-		const headers: { [key: string]: string } = {};
-
-		for (const [key, value] of response.headers) {
-			if (key !== 'content-encoding') {
-				headers[key] = value;
-			}
-		}
-
-		if (!response.ok) {
-			const pageConsole = page.virtualConsolePrinter.readAsString();
-			await page.close();
-			return {
-				url: item.url,
-				content: null,
-				status: response.status,
-				statusText: response.statusText,
-				headers,
-				outputFile: item.outputFile ?? null,
-				error: `Failed to render page ${item.url} (${response.status} ${response.statusText})`,
-				pageConsole,
-				pageErrors
-			};
-		}
-
-		let timeoutError: string | null = null;
-		const timeout =
-			this.#browser.settings.debug.traceWaitUntilComplete === -1
-				? setTimeout(() => {
-						timeoutError = `The page was not rendered within the defined time of ${configuration.render.timeout}ms and the operation was aborted. You can increase this value with the "render.timeout" setting.\n\nThe page may contain scripts with timer loops that prevent it from completing. You can debug open handles by setting "debug" to true, or prevent timer loops by setting "browser.timer.preventTimerLoops" to true. Read more about this in the documentation.`;
-						page.abort();
-					}, configuration.render.timeout)
-				: null;
-
-		try {
-			await page.waitUntilComplete();
-		} catch (error) {
-			const pageConsole = page.virtualConsolePrinter.readAsString();
-			await page.close();
-			return {
-				url: item.url,
-				content: null,
-				status: response.status,
-				statusText: response.statusText,
-				headers,
-				outputFile: item.outputFile ?? null,
-				error: (<Error>error).stack!,
-				pageConsole,
-				pageErrors
-			};
-		}
-
-		// Wait for errors to be printed
-		await new Promise((resolve) => setTimeout(resolve, 10));
-
-		if (timeout) {
-			clearTimeout(timeout);
-		}
-
-		const pageConsole = page.virtualConsolePrinter.readAsString();
-
-		if (timeoutError) {
-			page.close();
-
-			return {
-				url: item.url,
-				content: null,
-				status: response.status,
-				statusText: response.statusText,
-				headers,
-				outputFile: null,
-				error: timeoutError,
-				pageConsole,
-				pageErrors
-			};
-		}
-
-		const serializer = new HTMLSerializer({
-			allShadowRoots: configuration.render.allShadowRoots,
-			serializableShadowRoots: configuration.render.serializableShadowRoots,
-			excludeShadowRootTags: configuration.render.excludeShadowRootTags
-		});
-
-		const result = serializer.serializeToString(page.mainFrame.document);
-
-		await page.close();
-
-		if (!item.outputFile) {
-			return {
-				url: item.url,
-				content: result,
-				status: response.status,
-				statusText: response.statusText,
-				headers,
-				outputFile: null,
-				error: null,
-				pageConsole,
-				pageErrors
-			};
-		}
-
-		const directory = Path.dirname(item.outputFile);
-
-		if (!this.#createdDirectories.has(directory)) {
-			this.#createdDirectories.add(directory);
-			try {
-				await FS.promises.mkdir(directory, {
-					recursive: true
-				});
-			} catch {
-				// Ignore
-			}
-		}
-
-		await FS.promises.writeFile(item.outputFile, result);
-
-		return {
-			url: item.url,
-			content: null,
-			status: response.status,
-			statusText: response.statusText,
-			headers,
-			outputFile: item.outputFile,
-			error: null,
-			pageConsole,
-			pageErrors
-		};
+		return this.#pageRenderer.render(page, item);
 	}
 
 	/**

package/src/{ServerRendererWorker.ts → ServerRendererBrowserWorker.ts}

@@ -5,7 +5,7 @@ import Inspector from 'node:inspector';
 /**
  * Server renderer worker.
  */
-export default class ServerRendererWorker {
+export default class ServerRendererBrowserWorker {
 	/**
 	 * Connects to the worker.
 	 */
@@ -26,4 +26,4 @@ export default class ServerRendererWorker {
 	}
 }
 
-ServerRendererWorker.connect();
+ServerRendererBrowserWorker.connect();

package/src/ServerRendererPage.ts

@@ -0,0 +1,279 @@
+import HTMLSerializer from 'happy-dom/lib/html-serializer/HTMLSerializer.js';
+import FS from 'fs';
+import Path from 'path';
+import IServerRendererItem from './types/IServerRendererItem.js';
+import IServerRendererResult from './types/IServerRendererResult.js';
+import { ErrorEvent, IBrowserPage, Response } from 'happy-dom';
+import BrowserWindowPolyfill from './utilities/BrowserWindowPolyfill.js';
+import IServerRendererConfiguration from './types/IServerRendererConfiguration.js';
+import ServerRendererModeEnum from './enums/ServerRendererModeEnum.js';
+
+const SET_TIMEOUT = setTimeout;
+const CLEAR_TIMEOUT = clearTimeout;
+
+/**
+ * Server renderer page.
+ */
+export default class ServerRendererPage {
+	#configuration: IServerRendererConfiguration;
+	#createdDirectories: Set<string> = new Set();
+	#initialized: boolean = false;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param configuration Configuration.
+	 */
+	constructor(configuration: IServerRendererConfiguration) {
+		this.#configuration = configuration;
+	}
+
+	/**
+	 * Renders a page.
+	 *
+	 * @param page Browser page.
+	 * @param item Item.
+	 */
+	public async render(
+		page: IBrowserPage,
+		item: IServerRendererItem
+	): Promise<IServerRendererResult> {
+		const configuration = this.#configuration;
+		const pageErrors: string[] = [];
+		const errorListener = (event: any): void => {
+			if ((<ErrorEvent>event).error) {
+				pageErrors.push((<ErrorEvent>event).error!.stack!);
+			}
+		};
+		let response: Response | null = null;
+		let headers: { [key: string]: string } | null = null;
+
+		if (item.html) {
+			if (item.url) {
+				page.mainFrame.url = item.url;
+			}
+
+			page.mainFrame.window.addEventListener('error', errorListener);
+
+			if (!this.#initialized) {
+				this.#initialized = true;
+
+				if (!configuration.render.disablePolyfills) {
+					BrowserWindowPolyfill.applyPolyfills(page.mainFrame.window);
+				}
+
+				if (configuration.render.setupScript) {
+					page.mainFrame.evaluateModule({ code: configuration.render.setupScript });
+				}
+			}
+
+			page.mainFrame.document.open();
+			page.mainFrame.document.write(item.html);
+		} else if (item.url) {
+			headers = {};
+
+			if (configuration.render.mode === ServerRendererModeEnum.page) {
+				response = await page.mainFrame.window.fetch(item.url, {
+					headers: item.headers || {}
+				});
+			} else {
+				response = (await page.goto(item.url, {
+					timeout: configuration.render.timeout,
+					headers: item.headers,
+					beforeContentCallback(window) {
+						window.addEventListener('error', errorListener);
+
+						if (!configuration.render.disablePolyfills) {
+							BrowserWindowPolyfill.applyPolyfills(window);
+						}
+
+						if (configuration.render.setupScript) {
+							page.evaluateModule({ code: configuration.render.setupScript });
+						}
+					}
+				}))!;
+			}
+
+			for (const [key, value] of response.headers) {
+				if (key !== 'content-encoding') {
+					headers[key] = value;
+				}
+			}
+
+			if (!response.ok) {
+				const pageConsole = page.virtualConsolePrinter.readAsString();
+
+				if (configuration.render.mode !== ServerRendererModeEnum.page) {
+					await page.close();
+				}
+
+				return {
+					url: item.url,
+					content: null,
+					status: response.status,
+					statusText: response.statusText,
+					headers,
+					outputFile: item.outputFile ?? null,
+					error: `Failed to render page ${item.url} (${response.status} ${response.statusText})`,
+					pageConsole,
+					pageErrors
+				};
+			}
+
+			if (configuration.render.mode === ServerRendererModeEnum.page) {
+				const text = await response.text();
+
+				page.mainFrame.window.addEventListener('error', errorListener);
+
+				if (!this.#initialized) {
+					this.#initialized = true;
+					if (!configuration.render.disablePolyfills) {
+						BrowserWindowPolyfill.applyPolyfills(page.mainFrame.window);
+					}
+
+					if (configuration.render.setupScript) {
+						page.mainFrame.evaluateModule({ code: configuration.render.setupScript });
+					}
+				}
+
+				page.mainFrame.document.open();
+				page.mainFrame.document.write(text);
+			}
+		} else {
+			const pageConsole = page.virtualConsolePrinter.readAsString();
+
+			if (configuration.render.mode !== ServerRendererModeEnum.page) {
+				await page.close();
+			}
+
+			return {
+				url: null,
+				content: null,
+				status: null,
+				statusText: null,
+				headers: null,
+				outputFile: item.outputFile ?? null,
+				error: `No "url" or "html" provided to render.`,
+				pageConsole,
+				pageErrors
+			};
+		}
+
+		let timeoutError: string | null = null;
+		const timeout =
+			configuration.browser.debug.traceWaitUntilComplete === -1
+				? SET_TIMEOUT(() => {
+						timeoutError = `The page was not rendered within the defined time of ${configuration.render.timeout}ms and the operation was aborted. You can increase this value with the "render.timeout" setting.\n\nThe page may contain scripts with timer loops that prevent it from completing. You can debug open handles by setting "debug" to true, or prevent timer loops by setting "browser.timer.preventTimerLoops" to true. Read more about this in the documentation.`;
+						page.abort();
+					}, configuration.render.timeout)
+				: null;
+
+		try {
+			await page.waitUntilComplete();
+		} catch (error) {
+			const pageConsole = page.virtualConsolePrinter.readAsString();
+			const url = item.url || page.url;
+
+			if (configuration.render.mode !== ServerRendererModeEnum.page) {
+				await page.close();
+			}
+
+			return {
+				url,
+				content: null,
+				status: response?.status || null,
+				statusText: response?.statusText || null,
+				headers,
+				outputFile: item.outputFile ?? null,
+				error: (<Error>error).stack!,
+				pageConsole,
+				pageErrors
+			};
+		}
+
+		// Wait for errors to be printed
+		await new Promise((resolve) => SET_TIMEOUT(resolve, 10));
+
+		page.mainFrame.window.removeEventListener('error', errorListener);
+
+		if (timeout) {
+			CLEAR_TIMEOUT(timeout);
+		}
+
+		const pageConsole = page.virtualConsolePrinter.readAsString();
+
+		if (timeoutError) {
+			const url = item.url || page.url;
+
+			if (configuration.render.mode !== ServerRendererModeEnum.page) {
+				await page.close();
+			}
+
+			return {
+				url,
+				content: null,
+				status: response?.status || null,
+				statusText: response?.statusText || null,
+				headers,
+				outputFile: null,
+				error: timeoutError,
+				pageConsole,
+				pageErrors
+			};
+		}
+
+		const serializer = new HTMLSerializer({
+			allShadowRoots: configuration.render.allShadowRoots,
+			serializableShadowRoots: configuration.render.serializableShadowRoots,
+			excludeShadowRootTags: configuration.render.excludeShadowRootTags
+		});
+
+		const result = serializer.serializeToString(page.mainFrame.document);
+		const url = item.url || page.url;
+
+		if (configuration.render.mode !== ServerRendererModeEnum.page) {
+			await page.close();
+		}
+
+		if (!item.outputFile) {
+			return {
+				url,
+				content: result,
+				status: response?.status || null,
+				statusText: response?.statusText || null,
+				headers,
+				outputFile: null,
+				error: null,
+				pageConsole,
+				pageErrors
+			};
+		}
+
+		const directory = Path.dirname(item.outputFile);
+
+		if (!this.#createdDirectories.has(directory)) {
+			this.#createdDirectories.add(directory);
+			try {
+				await FS.promises.mkdir(directory, {
+					recursive: true
+				});
+			} catch {
+				// Ignore
+			}
+		}
+
+		await FS.promises.writeFile(item.outputFile, result);
+
+		return {
+			url,
+			content: null,
+			status: response?.status || null,
+			statusText: response?.statusText || null,
+			headers,
+			outputFile: item.outputFile,
+			error: null,
+			pageConsole,
+			pageErrors
+		};
+	}
+}

package/src/ServerRendererPageWorker.ts

@@ -0,0 +1,55 @@
+import { parentPort, workerData } from 'worker_threads';
+import Inspector from 'node:inspector';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { Document, Window } from 'happy-dom';
+import WindowBrowserContext from 'happy-dom/lib/window/WindowBrowserContext.js';
+import ServerRendererPage from './ServerRendererPage.js';
+
+declare global {
+	const document: Document;
+	const window: Window;
+}
+
+/**
+ * Server renderer worker.
+ */
+export default class ServerRendererPageWorker {
+	/**
+	 * Connects to the worker.
+	 */
+	public static async connect(): Promise<void> {
+		const { configuration } = workerData;
+
+		if (configuration.inspect) {
+			Inspector.open();
+			Inspector.waitForDebugger();
+		}
+
+		GlobalRegistrator.register({
+			url: 'https://localhost:8080/',
+			settings: configuration.browser
+		});
+
+		const renderer = new ServerRendererPage(configuration);
+
+		parentPort?.on('message', async ({ items }) => {
+			if (items.length !== 1) {
+				throw new Error(
+					'Failed to render page worker. Page workers can only render one item at a time.'
+				);
+			}
+
+			const page = new WindowBrowserContext(window).getBrowserPage();
+
+			if (!page) {
+				throw new Error('Failed to render page. No browser page available.');
+			}
+
+			const result = await renderer.render(page, items[0]);
+
+			parentPort?.postMessage({ status: 'done', results: [result] });
+		});
+	}
+}
+
+ServerRendererPageWorker.connect();

package/src/ServerRendererServer.ts

@@ -197,11 +197,6 @@ export default class ServerRendererServer {
 				result = (
 					await this.#serverRenderer.render([{ url: url.href, headers }], { keepAlive: true })
 				)[0];
-
-				if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.info) {
-					// eslint-disable-next-line no-console
-					console.log(Chalk.bold(`• Rendered ${url.href}`));
-				}
 			}
 
 			if (isCacheQueueEnabled) {
@@ -215,18 +210,18 @@ export default class ServerRendererServer {
 				}
 			}
 
-			for (const key of Object.keys(result.headers)) {
+			for (const key of Object.keys(result.headers!)) {
 				const lowerKey = key.toLowerCase();
 				if (
 					lowerKey !== 'transfer-encoding' &&
 					lowerKey !== 'content-length' &&
 					lowerKey !== 'content-encoding'
 				) {
-					response.setHeader(key, result.headers[key]);
+					response.setHeader(key, result.headers![key]);
 				}
 			}
 
-			response.statusCode = result.error ? 500 : result.status;
+			response.statusCode = result.error ? 500 : result.status!;
 
 			if (result.error) {
 				if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.error) {

package/src/config/DefaultServerRendererConfiguration.ts

@@ -3,14 +3,12 @@ import ServerRendererLogLevelEnum from '../enums/ServerRendererLogLevelEnum.js';
 import type IServerRendererConfiguration from '../types/IServerRendererConfiguration.js';
 import OS from 'os';
 import { BrowserErrorCaptureEnum } from 'happy-dom';
+import ServerRendererModeEnum from '../enums/ServerRendererModeEnum.js';
 
 export default <IServerRendererConfiguration>{
 	browser: {
 		...DefaultBrowserSettings,
-		errorCapture: BrowserErrorCaptureEnum.processLevel,
-		// This is enabled by default as the entire point of this package is to server-render client side JavaScript.
-		// "--disallow-code-generation-from-strings" is enabled on workers to prevent escape of the VM context.
-		enableJavaScriptEvaluation: true
+		errorCapture: BrowserErrorCaptureEnum.processLevel
 	},
 	outputDirectory: './happy-dom/render',
 	logLevel: ServerRendererLogLevelEnum.info,
@@ -33,9 +31,11 @@ export default <IServerRendererConfiguration>{
 		serializableShadowRoots: false,
 		allShadowRoots: false,
 		excludeShadowRootTags: null,
-		disablePolyfills: false
+		disablePolyfills: false,
+		setupScript: null,
+		mode: ServerRendererModeEnum.browser
 	},
-	urls: null,
+	renderItems: null,
 	server: {
 		start: false,
 		serverURL: 'https://localhost:3000',

package/src/enums/ServerRendererModeEnum.ts

@@ -0,0 +1,8 @@
+enum ServerRendererModeEnum {
+	// Use a Browser instance in each worker to render pages.
+	browser = 'browser',
+	// Render a single page in each worker without using VM isolation which may not be supported in some execution environments.
+	page = 'page'
+}
+
+export default ServerRendererModeEnum;

package/src/index.ts

@@ -5,6 +5,7 @@ import IServerRendererResult from './types/IServerRendererResult.js';
 import IServerRendererConfiguration from './types/IServerRendererConfiguration.js';
 import IOptionalServerRendererConfiguration from './types/IOptionalServerRendererConfiguration.js';
 import ServerRendererLogLevelEnum from './enums/ServerRendererLogLevelEnum.js';
+import ServerRendererModeEnum from './enums/ServerRendererModeEnum.js';
 
 export {
 	ServerRenderer,
@@ -13,5 +14,6 @@ export {
 	IServerRendererResult,
 	IServerRendererConfiguration,
 	IOptionalServerRendererConfiguration,
-	ServerRendererLogLevelEnum
+	ServerRendererLogLevelEnum,
+	ServerRendererModeEnum
 };