@happy-dom/server-renderer 19.0.0

package/src/ServerRendererBrowser.ts

@@ -0,0 +1,286 @@
+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';
+
+/**
+ * Server renderer browser.
+ */
+export default class ServerRendererBrowser {
+	#configuration: IServerRendererConfiguration;
+	#browser: Browser;
+	#isCacheLoaded: boolean = false;
+	#createdDirectories: Set<string> = new Set();
+
+	/**
+	 * Constructor.
+	 *
+	 * @param configuration Configuration.
+	 */
+	constructor(configuration: IServerRendererConfiguration) {
+		this.#configuration = configuration;
+		const settings =
+			configuration.debug && configuration.browser.debug?.traceWaitUntilComplete === -1
+				? {
+						...configuration.browser,
+						debug: {
+							...configuration.browser.debug,
+							traceWaitUntilComplete: configuration.render.timeout
+						}
+					}
+				: configuration.browser;
+		this.#browser = new Browser({ settings });
+	}
+
+	/**
+	 * Renders URLs.
+	 *
+	 * @param items Items.
+	 */
+	public async render(items: IServerRendererItem[]): Promise<IServerRendererResult[]> {
+		const browser = this.#browser;
+
+		await this.#loadCache(browser);
+
+		let results: IServerRendererResult[];
+
+		if (items.length > this.#configuration.render.maxConcurrency) {
+			results = [];
+			while (items.length) {
+				const chunk = items.splice(0, this.#configuration.render.maxConcurrency);
+				const promises = [];
+				for (const url of chunk) {
+					promises.push(
+						this.#renderURL(browser, url).then((result) => {
+							results.push(result);
+						})
+					);
+				}
+				await Promise.all(promises);
+			}
+		} else {
+			const promises = [];
+			for (const url of items) {
+				promises.push(this.#renderURL(browser, url));
+			}
+			results = await Promise.all(promises);
+		}
+
+		await this.#saveCache(browser);
+
+		return results;
+	}
+
+	/**
+	 * Closes the browser.
+	 */
+	public async close(): Promise<void> {
+		await this.#browser.close();
+		this.#browser = null!;
+		this.#isCacheLoaded = false;
+	}
+
+	/**
+	 * Renders a page.
+	 *
+	 * @param browser Browser.
+	 * @param item Item.
+	 */
+	async #renderURL(browser: Browser, item: IServerRendererItem): Promise<IServerRendererResult> {
+		const responseCache = browser.defaultContext.responseCache;
+		const preflightResponseCache = browser.defaultContext.preflightResponseCache;
+		const configuration = this.#configuration;
+		const context =
+			configuration.render.incognitoContext || configuration.cache.disable
+				? browser.newIncognitoContext()
+				: browser.defaultContext;
+		const page = context.newPage();
+
+		if (configuration.render.incognitoContext && !configuration.cache.disable) {
+			// @ts-ignore
+			context.responseCache = responseCache;
+			// @ts-ignore
+			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
+		};
+	}
+
+	/**
+	 * Loads cache from disk.
+	 *
+	 * @param browser Browser.
+	 */
+	async #loadCache(browser: Browser): Promise<void> {
+		if (
+			this.#configuration.cache.disable ||
+			!this.#configuration.cache.directory ||
+			this.#isCacheLoaded
+		) {
+			return;
+		}
+
+		this.#isCacheLoaded = true;
+
+		await browser.defaultContext.responseCache.fileSystem.load(this.#configuration.cache.directory);
+	}
+
+	/**
+	 * Saves cache to disk.
+	 *
+	 * @param browser Browser.
+	 */
+	async #saveCache(browser: Browser): Promise<void> {
+		if (this.#configuration.cache.disable || !this.#configuration.cache.directory) {
+			return;
+		}
+
+		await browser.defaultContext.responseCache.fileSystem.save(this.#configuration.cache.directory);
+	}
+}

package/src/ServerRendererServer.ts

@@ -0,0 +1,337 @@
+import Http2 from 'http2';
+import IOptionalServerRendererConfiguration from './types/IOptionalServerRendererConfiguration.js';
+import IServerRendererConfiguration from './types/IServerRendererConfiguration.js';
+import ServerRendererConfigurationFactory from './utilities/ServerRendererConfigurationFactory.js';
+import ServerRenderer from './ServerRenderer.js';
+import FetchHTTPSCertificate from 'happy-dom/lib/fetch/certificate/FetchHTTPSCertificate.js';
+import ZLib from 'node:zlib';
+import Stream from 'node:stream/promises';
+import OS from 'node:os';
+import IServerRendererResult from './types/IServerRendererResult.js';
+// eslint-disable-next-line import/no-named-as-default
+import Chalk from 'chalk';
+import ServerRendererLogLevelEnum from './enums/ServerRendererLogLevelEnum.js';
+import PackageVersion from './utilities/PackageVersion.js';
+
+/**
+ * Server renderer proxy HTTP2 server.
+ */
+export default class ServerRendererServer {
+	#configuration: IServerRendererConfiguration;
+	#serverRenderer: ServerRenderer;
+	#server: Http2.Http2Server | null = null;
+	#cache: Map<
+		string,
+		{
+			timestamp: number;
+			result: IServerRendererResult;
+		}
+	> = new Map();
+	#cacheQueue: Map<
+		string,
+		Array<{ resolve: (result: IServerRendererResult) => void; reject: (error: Error) => void }>
+	> = new Map();
+
+	/**
+	 * Constructor.
+	 *
+	 * @param configuration Configuration.
+	 */
+	constructor(configuration?: IOptionalServerRendererConfiguration) {
+		this.#configuration = ServerRendererConfigurationFactory.createConfiguration(configuration);
+		this.#serverRenderer = new ServerRenderer(this.#configuration);
+	}
+
+	/**
+	 * Starts the server.
+	 */
+	public async start(): Promise<void> {
+		let url: URL;
+		try {
+			url = new URL(this.#configuration.server.serverURL);
+		} catch (error) {
+			throw new Error('Failed to start server. The setting "server.serverURL" is not a valid URL.');
+		}
+
+		if (!this.#configuration.server.targetOrigin) {
+			throw new Error('Failed to start server. The setting "server.targetOrigin" is not set.');
+		}
+
+		let targetOrigin: URL;
+		try {
+			targetOrigin = new URL(this.#configuration.server.targetOrigin);
+		} catch (error) {
+			throw new Error(
+				'Failed to start server. The setting "server.targetOrigin" is not a valid URL.'
+			);
+		}
+
+		switch (url.protocol) {
+			case 'http:':
+				this.#server = Http2.createServer(
+					(request: Http2.Http2ServerRequest, response: Http2.Http2ServerResponse) =>
+						this.#onIncomingRequest(request, response)
+				);
+				break;
+			case 'https:':
+				this.#server = Http2.createSecureServer(
+					{
+						key: FetchHTTPSCertificate.key,
+						cert: FetchHTTPSCertificate.cert
+					},
+					(request: Http2.Http2ServerRequest, response: Http2.Http2ServerResponse) =>
+						this.#onIncomingRequest(request, response)
+				);
+				break;
+			default:
+				throw new Error(
+					`Unsupported protocol "${url.protocol}". Only "http:" and "https:" are supported.`
+				);
+		}
+
+		this.#server.listen(url.port ? Number(url.port) : url.protocol === 'https:' ? 443 : 80);
+
+		// eslint-disable-next-line no-console
+		console.log(Chalk.green(`\nHappy DOM Proxy Server ${await PackageVersion.getVersion()}\n`));
+
+		// eslint-disable-next-line no-console
+		console.log(
+			`  ${Chalk.green('➜')}  ${Chalk.bold('Local:')}   ${Chalk.cyan(
+				`${url.protocol}//localhost:${url.port}/`
+			)}\n  ${Chalk.green('➜')}  ${Chalk.bold('Network:')} ${Chalk.cyan(
+				`${url.protocol}//${this.#getNetworkIP()}:${url.port}/`
+			)}\n  ${Chalk.green('➜')}  ${Chalk.bold('Target:')}  ${Chalk.cyan(
+				`${targetOrigin.protocol}//${targetOrigin.host}/`
+			)}\n\n  ${Chalk.green('➜')}  ${Chalk.bold('URL:')}     ${Chalk.cyan(
+				`${url.protocol}//localhost:${url.port}${url.pathname}${url.search}${url.hash}`
+			)}\n`
+		);
+	}
+
+	/**
+	 * Stops the server.
+	 */
+	public async stop(): Promise<void> {
+		if (this.#server) {
+			this.#server.close();
+		}
+		if (this.#serverRenderer) {
+			await this.#serverRenderer.close();
+		}
+	}
+
+	/**
+	 * Triggered on incoming request.
+	 *
+	 * @param request Request.
+	 * @param response Response.
+	 * @returns Promise.
+	 */
+	async #onIncomingRequest(
+		request: Http2.Http2ServerRequest,
+		response: Http2.Http2ServerResponse
+	): Promise<void> {
+		const url = new URL(request.url, this.#configuration.server.targetOrigin!);
+		const headers: { [name: string]: string } = {};
+
+		for (const name of Object.keys(request.headers)) {
+			if (name[0] !== ':' && name.toLowerCase() !== 'transfer-encoding') {
+				headers[name] = Array.isArray(request.headers[name])
+					? request.headers[name].join(', ')
+					: request.headers[name]!;
+			}
+		}
+
+		const fetchResponse = await fetch(url.href, { headers });
+		const isCacheEnabled =
+			!this.#configuration.server.disableCache && this.#configuration.server.cacheTime > 0;
+		const isCacheQueueEnabled = isCacheEnabled && !this.#configuration.server.disableCacheQueue;
+		const cacheKey = this.#getCacheKey(url, headers, fetchResponse.status);
+		let result: IServerRendererResult | null = null;
+
+		response.statusCode = fetchResponse.status;
+
+		// HTML files should be served from the server renderer.
+		if (
+			fetchResponse.headers.get('content-type')?.startsWith('text/html') &&
+			fetchResponse.status === 200
+		) {
+			if (isCacheEnabled) {
+				const cached = this.#cache.get(cacheKey);
+				if (cached) {
+					if (Date.now() - cached.timestamp < this.#configuration.server.cacheTime) {
+						if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.info) {
+							// eslint-disable-next-line no-console
+							console.log(Chalk.bold(`• Using cached response for ${url.href}`));
+						}
+
+						result = cached.result;
+					} else {
+						this.#cache.delete(cacheKey);
+					}
+				}
+			}
+
+			if (!result && isCacheQueueEnabled) {
+				const cacheQueue = this.#cacheQueue.get(cacheKey);
+				if (cacheQueue) {
+					if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.info) {
+						// eslint-disable-next-line no-console
+						console.log(Chalk.bold(`• Waiting for ongoing rendering of ${url.href}`));
+					}
+
+					result = await new Promise((resolve, reject) => {
+						cacheQueue.push({ resolve, reject });
+					});
+
+					if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.info) {
+						// eslint-disable-next-line no-console
+						console.log(Chalk.bold(`• Using cached response for ${url.href}`));
+					}
+				} else {
+					this.#cacheQueue.set(cacheKey, []);
+				}
+			}
+
+			if (!result) {
+				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) {
+				const cacheQueue = this.#cacheQueue.get(cacheKey);
+
+				if (cacheQueue) {
+					this.#cacheQueue.delete(cacheKey);
+					for (const { resolve } of cacheQueue) {
+						resolve(result);
+					}
+				}
+			}
+
+			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.statusCode = result.error ? 500 : result.status;
+
+			if (result.error) {
+				if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.error) {
+					// eslint-disable-next-line no-console
+					console.log(Chalk.red(`\n✖ Failed to render ${url.href}:\n${result.error}\n`));
+				}
+				response.setHeader('Content-Type', 'text/html; charset=utf-8');
+				response.end(
+					`<h1>Internal Server Error</h1><br><p>${result.error.replace(/\n/gm, '<br>')}</p>`
+				);
+				return;
+			}
+
+			if (isCacheEnabled) {
+				this.#cache.set(cacheKey, {
+					timestamp: Date.now(),
+					result
+				});
+			}
+
+			response.setHeader('Content-Encoding', 'gzip');
+			response.setHeader('Content-Type', 'text/html; charset=utf-8');
+
+			try {
+				await Stream.pipeline(result.content!, ZLib.createGzip(), response);
+			} catch (error) {
+				if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.error) {
+					// eslint-disable-next-line no-console
+					console.log(Chalk.red(`\n✖ Failed to send response: ${error}\n`));
+				}
+				response.statusCode = 500;
+				response.setHeader('Content-Type', 'text/plain; charset=utf-8');
+				response.write('Internal Server Error');
+			}
+
+			response.end();
+
+			return;
+		}
+
+		for (const [key, value] of fetchResponse.headers.entries()) {
+			if (key.toLowerCase() !== 'transfer-encoding') {
+				response.setHeader(key, value);
+			}
+		}
+
+		response.statusCode = fetchResponse.status;
+
+		if (fetchResponse.headers.get('Content-Encoding')) {
+			response.setHeader('Content-Encoding', 'gzip');
+			response.removeHeader('Content-Length');
+			try {
+				await Stream.pipeline(fetchResponse.body!, ZLib.createGzip(), response);
+			} catch (error) {
+				if (this.#configuration.logLevel >= ServerRendererLogLevelEnum.error) {
+					// eslint-disable-next-line no-console
+					console.log(Chalk.red(`\n✖ Failed to send response: ${error}\n`));
+				}
+				response.statusCode = 500;
+				response.setHeader('Content-Type', 'text/plain; charset=utf-8');
+				response.write('Internal Server Error');
+			}
+		} else if (fetchResponse.body) {
+			const reader = fetchResponse.body.getReader();
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) {
+					break;
+				}
+				response.write(value);
+			}
+		}
+
+		response.end();
+	}
+
+	/**
+	 * Returns the network IP address of the server.
+	 *
+	 * @returns The network IP address.
+	 */
+	#getNetworkIP(): string {
+		const interfaces = OS.networkInterfaces();
+		for (const interfaceName in interfaces) {
+			const networkInterface = interfaces[interfaceName];
+			if (networkInterface) {
+				for (const address of networkInterface) {
+					if (address.family === 'IPv4' && !address.internal) {
+						return address.address;
+					}
+				}
+			}
+		}
+		return '';
+	}
+
+	/**
+	 * Returns the cache key for the given request.
+	 *
+	 * @param url Request URL.
+	 * @param headers Request headers.
+	 * @param statusCode Response status code.
+	 * @returns The cache key.§
+	 */
+	#getCacheKey(url: URL, headers: { [key: string]: string }, statusCode: number): string {
+		return `${url.href}|${JSON.stringify(headers)}|${statusCode}`;
+	}
+}

package/src/ServerRendererWorker.ts

@@ -0,0 +1,29 @@
+import ServerRendererBrowser from './ServerRendererBrowser.js';
+import { parentPort, workerData } from 'worker_threads';
+import Inspector from 'node:inspector';
+
+/**
+ * Server renderer worker.
+ */
+export default class ServerRendererWorker {
+	/**
+	 * Connects to the worker.
+	 */
+	public static async connect(): Promise<void> {
+		const { configuration } = workerData;
+
+		if (configuration.inspect) {
+			Inspector.open();
+			Inspector.waitForDebugger();
+		}
+
+		const browser = new ServerRendererBrowser(configuration);
+
+		parentPort?.on('message', async ({ items }) => {
+			const results = await browser.render(items);
+			parentPort?.postMessage({ status: 'done', results });
+		});
+	}
+}
+
+ServerRendererWorker.connect();

package/src/config/DefaultServerRendererConfiguration.ts

@@ -0,0 +1,41 @@
+import DefaultBrowserSettings from 'happy-dom/lib/browser/DefaultBrowserSettings.js';
+import ServerRendererLogLevelEnum from '../enums/ServerRendererLogLevelEnum.js';
+import type IServerRendererConfiguration from '../types/IServerRendererConfiguration.js';
+import OS from 'os';
+import { BrowserErrorCaptureEnum } from 'happy-dom';
+
+export default <IServerRendererConfiguration>{
+	browser: { ...DefaultBrowserSettings, errorCapture: BrowserErrorCaptureEnum.processLevel },
+	outputDirectory: './happy-dom/render',
+	logLevel: ServerRendererLogLevelEnum.info,
+	debug: false,
+	inspect: false,
+	help: false,
+	cache: {
+		disable: false,
+		directory: './happy-dom/cache',
+		warmup: false
+	},
+	worker: {
+		disable: false,
+		maxConcurrency: Math.max(1, Math.floor(OS.cpus().length / 2))
+	},
+	render: {
+		maxConcurrency: 10,
+		timeout: 30000, // 30 seconds
+		incognitoContext: false,
+		serializableShadowRoots: false,
+		allShadowRoots: false,
+		excludeShadowRootTags: null,
+		disablePolyfills: false
+	},
+	urls: null,
+	server: {
+		start: false,
+		serverURL: 'https://localhost:3000',
+		targetOrigin: null,
+		disableCache: false,
+		disableCacheQueue: false,
+		cacheTime: 60000 // 60 seconds
+	}
+};

package/src/enums/ServerRendererLogLevelEnum.ts

@@ -0,0 +1,9 @@
+enum ServerRendererLogLevelEnum {
+	none = 0,
+	error = 1,
+	warn = 2,
+	info = 3,
+	debug = 4
+}
+
+export default ServerRendererLogLevelEnum;