preact-render-to-string 6.4.2 → 6.5.1

package/package.json

@@ -1,159 +1,174 @@
 {
-  "name": "preact-render-to-string",
-  "amdName": "preactRenderToString",
-  "version": "6.4.2",
-  "description": "Render JSX to an HTML string, with support for Preact components.",
-  "main": "dist/index.js",
-  "umd:main": "dist/index.umd.js",
-  "module": "dist/index.module.js",
-  "jsnext:main": "dist/index.module.js",
-  "types": "src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "browser": "./dist/index.module.js",
-      "umd": "./dist/index.umd.js",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./jsx": {
-      "types": "./jsx.d.ts",
-      "browser": "./dist/jsx.module.js",
-      "umd": "./dist/jsx.umd.js",
-      "import": "./dist/jsx.mjs",
-      "require": "./dist/jsx.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "bench": "BABEL_ENV=test node -r @babel/register benchmarks index.js",
-    "bench:v8": "BABEL_ENV=test microbundle benchmarks/index.js -f modern --alias benchmarkjs-pretty=benchmarks/lib/benchmark-lite.js --external none --target node --no-compress --no-sourcemap --raw -o benchmarks/.v8.mjs && v8 --module benchmarks/.v8.mjs",
-    "build": "npm run -s transpile && npm run -s transpile:jsx && npm run -s copy-typescript-definition",
-    "postbuild": "node ./config/node-13-exports.js && node ./config/node-commonjs.js && node ./config/node-verify-exports.js",
-    "transpile": "microbundle src/index.js -f es,cjs,umd --target web --external preact",
-    "transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external preact && microbundle dist/jsx.js -o dist/jsx.js -f cjs --external preact",
-    "copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
-    "test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run test:mocha:debug && npm run bench",
-    "test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/*.test.js test/*.test.jsx",
-    "test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/*.test.js' 'test/compat/*.test.jsx'",
-    "test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/debug/index.test.js' 'test/debug/index.test.jsx'",
-    "format": "prettier src/**/*.{d.ts,js,jsx} test/**/*.js test/**/*.jsx --write",
-    "prepublishOnly": "npm run build",
-    "release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
-  },
-  "keywords": [
-    "preact",
-    "render",
-    "universal",
-    "isomorphic"
-  ],
-  "files": [
-    "src",
-    "dist",
-    "jsx.js",
-    "jsx.d.ts",
-    "typings.json"
-  ],
-  "eslintConfig": {
-    "extends": "developit",
-    "rules": {
-      "react/prefer-stateless-function": 0,
-      "react/jsx-no-bind": 0,
-      "react/no-danger": 0,
-      "jest/valid-expect": 0,
-      "new-cap": 0,
-      "curly": "off",
-      "brace-style": "off",
-      "indent": "off"
-    },
-    "settings": {
-      "react": {
-        "version": "16.8"
-      }
-    }
-  },
-  "babel": {
-    "env": {
-      "test": {
-        "presets": [
-          [
-            "@babel/preset-env",
-            {
-              "targets": {
-                "node": true
-              }
-            }
-          ]
-        ],
-        "plugins": [
-          [
-            "@babel/plugin-transform-react-jsx",
-            {
-              "pragma": "h"
-            }
-          ]
-        ]
-      }
-    }
-  },
-  "minify": {
-    "compress": {
-      "reduce_funcs": false
-    }
-  },
-  "author": "Jason Miller <jason@developit.ca>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/preactjs/preact-render-to-string"
-  },
-  "bugs": "https://github.com/developit/preact-render-to-string/issues",
-  "homepage": "https://github.com/developit/preact-render-to-string",
-  "peerDependencies": {
-    "preact": ">=10"
-  },
-  "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/register": "^7.22.15",
-    "@changesets/changelog-github": "^0.4.1",
-    "@changesets/cli": "^2.18.0",
-    "benchmarkjs-pretty": "^2.0.1",
-    "chai": "^4.3.10",
-    "copyfiles": "^2.4.1",
-    "eslint": "^7.16.0",
-    "eslint-config-developit": "^1.2.0",
-    "husky": "^4.3.6",
-    "lint-staged": "^10.5.3",
-    "microbundle": "^0.15.1",
-    "mocha": "^10.2.0",
-    "baseline-rts": "npm:preact-render-to-string@latest",
-    "preact": "^10.13.0",
-    "prettier": "^2.2.1",
-    "sinon": "^17.0.1",
-    "sinon-chai": "^3.7.0",
-    "typescript": "^5.0.0"
-  },
-  "dependencies": {
-    "pretty-format": "^3.8.0"
-  },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "none",
-    "useTabs": true,
-    "tabWidth": 2
-  },
-  "lint-staged": {
-    "**/*.{js,jsx,ts,tsx,yml}": [
-      "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "publishConfig": {
-    "provenance": true
-  }
+	"name": "preact-render-to-string",
+	"amdName": "preactRenderToString",
+	"version": "6.5.1",
+	"description": "Render JSX to an HTML string, with support for Preact components.",
+	"main": "dist/index.js",
+	"umd:main": "dist/index.umd.js",
+	"module": "dist/index.module.js",
+	"jsnext:main": "dist/index.module.js",
+	"types": "src/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./src/index.d.ts",
+			"browser": "./dist/index.module.js",
+			"umd": "./dist/index.umd.js",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.js"
+		},
+		"./jsx": {
+			"types": "./jsx.d.ts",
+			"browser": "./dist/jsx.module.js",
+			"umd": "./dist/jsx.umd.js",
+			"import": "./dist/jsx.mjs",
+			"require": "./dist/jsx.js"
+		},
+		"./stream": {
+			"types": "./stream.d.ts",
+			"import": "./dist/stream.mjs",
+			"browser": "./dist/stream.module.js",
+			"require": "./dist/stream.js"
+		},
+		"./stream-node": {
+			"types": "./stream-node.d.ts",
+			"import": "./dist/stream-node.mjs",
+			"browser": "./dist/stream-node.module.js",
+			"require": "./dist/stream-node.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"bench": "BABEL_ENV=test node -r @babel/register benchmarks index.js",
+		"bench:v8": "BABEL_ENV=test microbundle benchmarks/index.js -f modern --alias benchmarkjs-pretty=benchmarks/lib/benchmark-lite.js --external none --target node --no-compress --no-sourcemap --raw -o benchmarks/.v8.mjs && v8 --module benchmarks/.v8.modern.js",
+		"build": "npm run -s transpile && npm run -s transpile:jsx && npm run -s transpile:stream && npm run -s copy-typescript-definition",
+		"postbuild": "node ./config/node-13-exports.js && node ./config/node-commonjs.js && node ./config/node-verify-exports.js",
+		"transpile": "microbundle src/index.js -f es,cjs,umd --target web --external preact",
+		"transpile:stream": "microbundle src/stream.js -o dist/stream.js -f es,cjs,umd --external preact && microbundle src/stream-node.js -o dist/stream-node.js -f es,cjs,umd --target node --external preact",
+		"transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external preact && microbundle dist/jsx.js -o dist/jsx.js -f cjs --external preact",
+		"copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
+		"test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run test:mocha:debug && npm run bench",
+		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/*.test.jsx",
+		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/*.test.js' 'test/compat/*.test.jsx'",
+		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/debug/*.test.jsx'",
+		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",
+		"prepublishOnly": "npm run build",
+		"release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
+	},
+	"keywords": [
+		"preact",
+		"render",
+		"universal",
+		"isomorphic"
+	],
+	"files": [
+		"src",
+		"dist",
+		"jsx.js",
+		"jsx.d.ts",
+		"typings.json"
+	],
+	"eslintConfig": {
+		"extends": "developit",
+		"rules": {
+			"react/prefer-stateless-function": 0,
+			"react/jsx-no-bind": 0,
+			"react/no-danger": 0,
+			"jest/valid-expect": 0,
+			"new-cap": 0,
+			"curly": "off",
+			"brace-style": "off",
+			"indent": "off",
+			"lines-around-comment": "off"
+		},
+		"settings": {
+			"react": {
+				"version": "16.8"
+			}
+		}
+	},
+	"babel": {
+		"env": {
+			"test": {
+				"presets": [
+					[
+						"@babel/preset-env",
+						{
+							"targets": {
+								"node": true
+							}
+						}
+					]
+				],
+				"plugins": [
+					[
+						"@babel/plugin-transform-react-jsx",
+						{
+							"pragma": "h"
+						}
+					]
+				]
+			}
+		}
+	},
+	"minify": {
+		"compress": {
+			"reduce_funcs": false
+		}
+	},
+	"author": "The Preact Authors (https://github.com/preactjs/preact/contributors)",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/preactjs/preact-render-to-string"
+	},
+	"bugs": "https://github.com/preactjs/preact-render-to-string/issues",
+	"homepage": "https://github.com/preactjs/preact-render-to-string",
+	"peerDependencies": {
+		"preact": ">=10"
+	},
+	"devDependencies": {
+		"@babel/plugin-transform-react-jsx": "^7.12.12",
+		"@babel/preset-env": "^7.12.11",
+		"@babel/register": "^7.12.10",
+		"@changesets/changelog-github": "^0.4.1",
+		"@changesets/cli": "^2.18.0",
+		"benchmarkjs-pretty": "^2.0.1",
+		"chai": "^4.2.0",
+		"copyfiles": "^2.4.1",
+		"eslint": "^7.16.0",
+		"eslint-config-developit": "^1.2.0",
+		"husky": "^4.3.6",
+		"lint-staged": "^10.5.3",
+		"microbundle": "^0.15.1",
+		"mocha": "^8.2.1",
+		"baseline-rts": "npm:preact-render-to-string@latest",
+		"preact": "^10.13.0",
+		"prettier": "^2.2.1",
+		"sinon": "^9.2.2",
+		"sinon-chai": "^3.5.0",
+		"typescript": "^5.0.0",
+		"web-streams-polyfill": "^3.2.1"
+	},
+	"dependencies": {
+		"pretty-format": "^3.8.0"
+	},
+	"prettier": {
+		"singleQuote": true,
+		"trailingComma": "none",
+		"useTabs": true,
+		"tabWidth": 2
+	},
+	"lint-staged": {
+		"**/*.{js,jsx,ts,tsx,yml}": [
+			"prettier --write"
+		]
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged"
+		}
+	},
+	"publishConfig": {
+		"provenance": true
+	}
 }

package/src/index.js

@@ -5,7 +5,7 @@ import {
 	NAMESPACE_REPLACE_REGEX,
 	HTML_LOWER_CASE,
 	SVG_CAMEL_CASE
-} from './util.js';
+} from './lib/util.js';
 import { options, h, Fragment } from 'preact';
 import {
 	CHILDREN,
@@ -18,10 +18,9 @@ import {
 	PARENT,
 	RENDER,
 	SKIP_EFFECTS,
-	VNODE
-} from './constants.js';
-
-/** @typedef {import('preact').VNode} VNode */
+	VNODE,
+	CATCH_ERROR
+} from './lib/constants.js';
 
 const EMPTY_ARR = [];
 const isArray = Array.isArray;
@@ -34,9 +33,10 @@ let beforeDiff, afterDiff, renderHook, ummountHook;
  * Render Preact JSX + Components to an HTML string.
  * @param {VNode} vnode	JSX Element / VNode to render
  * @param {Object} [context={}] Initial root context object
+ * @param {RendererState} [_rendererState] for internal use
  * @returns {string} serialized HTML
  */
-export function renderToString(vnode, context) {
+export function renderToString(vnode, context, _rendererState) {
 	// Performance optimization: `renderToString` is synchronous and we
 	// therefore don't execute any effects. To do that we pass an empty
 	// array to `options._commit` (`__c`). But we can go one step further
@@ -61,7 +61,8 @@ export function renderToString(vnode, context) {
 			false,
 			undefined,
 			parent,
-			false
+			false,
+			_rendererState
 		);
 	} catch (e) {
 		if (e.then) {
@@ -109,7 +110,8 @@ export async function renderToStringAsync(vnode, context) {
 			false,
 			undefined,
 			parent,
-			true
+			true,
+			undefined
 		);
 
 		if (Array.isArray(rendered)) {
@@ -204,6 +206,7 @@ function renderClassComponent(vnode, context) {
  * @param {any} selectValue
  * @param {VNode} parent
  * @param {boolean} asyncMode
+ * @param {RendererState | undefined} [renderer]
  * @returns {string | Promise<string> | (string | Promise<string>)[]}
  */
 function _renderToString(
@@ -212,7 +215,8 @@ function _renderToString(
 	isSvgMode,
 	selectValue,
 	parent,
-	asyncMode
+	asyncMode,
+	renderer
 ) {
 	// Ignore non-rendered VNodes/values
 	if (vnode == null || vnode === true || vnode === false || vnode === '') {
@@ -240,7 +244,8 @@ function _renderToString(
 				isSvgMode,
 				selectValue,
 				parent,
-				asyncMode
+				asyncMode,
+				renderer
 			);
 
 			if (typeof childRender === 'string') {
@@ -305,7 +310,8 @@ function _renderToString(
 								isSvgMode,
 								selectValue,
 								vnode,
-								asyncMode
+								asyncMode,
+								renderer
 							);
 						} else {
 							// Values are pre-escaped by the JSX transform
@@ -386,7 +392,8 @@ function _renderToString(
 						isSvgMode,
 						selectValue,
 						vnode,
-						asyncMode
+						asyncMode,
+						renderer
 					);
 					return str;
 				} catch (err) {
@@ -418,7 +425,8 @@ function _renderToString(
 							isSvgMode,
 							selectValue,
 							vnode,
-							asyncMode
+							asyncMode,
+							renderer
 						);
 					}
 
@@ -449,16 +457,38 @@ function _renderToString(
 				isSvgMode,
 				selectValue,
 				vnode,
-				asyncMode
+				asyncMode,
+				renderer
 			);
 
 			if (afterDiff) afterDiff(vnode);
+			// when we are dealing with suspense we can't do this...
 			vnode[PARENT] = null;
 
-			if (ummountHook) ummountHook(vnode);
+			if (options.unmount) options.unmount(vnode);
 
 			return str;
 		} catch (error) {
+			if (!asyncMode && renderer && renderer.onError) {
+				let res = renderer.onError(error, vnode, (child) =>
+					_renderToString(
+						child,
+						context,
+						isSvgMode,
+						selectValue,
+						vnode,
+						asyncMode,
+						renderer
+					)
+				);
+
+				if (res !== undefined) return res;
+
+				let errorHook = options[CATCH_ERROR];
+				if (errorHook) errorHook(error, vnode);
+				return '';
+			}
+
 			if (!asyncMode) throw error;
 
 			if (!error || typeof error.then !== 'function') throw error;
@@ -471,7 +501,8 @@ function _renderToString(
 						isSvgMode,
 						selectValue,
 						vnode,
-						asyncMode
+						asyncMode,
+						renderer
 					);
 				} catch (e) {
 					if (!e || typeof e.then !== 'function') throw e;
@@ -484,7 +515,8 @@ function _renderToString(
 								isSvgMode,
 								selectValue,
 								vnode,
-								asyncMode
+								asyncMode,
+								renderer
 							),
 						() => renderNestedChildren()
 					);
@@ -628,12 +660,16 @@ function _renderToString(
 			childSvgMode,
 			selectValue,
 			vnode,
-			asyncMode
+			asyncMode,
+			renderer
 		);
 	}
 
 	if (afterDiff) afterDiff(vnode);
+
+	// TODO: this was commented before
 	vnode[PARENT] = null;
+
 	if (ummountHook) ummountHook(vnode);
 
 	// Emit self-closing tag for empty void elements:

package/src/internal.d.ts

@@ -0,0 +1,35 @@
+import { ComponentChildren, VNode } from 'preact';
+
+interface Suspended {
+	id: string;
+	promise: Promise<any>;
+	context: any;
+	isSvgMode: boolean;
+	selectValue: any;
+	vnode: VNode;
+	parent: VNode | null;
+}
+
+interface RendererErrorHandler {
+	(
+		this: RendererState,
+		error: any,
+		vnode: VNode<{ fallback: any }>,
+		renderChild: (child: ComponentChildren) => string
+	): string | undefined;
+}
+
+interface RendererState {
+	start: number;
+	suspended: Suspended[];
+	abortSignal?: AbortSignal | undefined;
+	onWrite: (str: string) => void;
+	onError?: RendererErrorHandler;
+}
+
+interface RenderToChunksOptions {
+	context?: any;
+	onError?: (error: any) => void;
+	onWrite: (str: string) => void;
+	abortSignal?: AbortSignal;
+}

package/src/jsx.js

@@ -1,10 +1,8 @@
-import './polyfills.js';
+import './lib/polyfills.js';
 import renderToString from './pretty.js';
-import { indent, encodeEntities } from './util.js';
+import { indent, encodeEntities } from './lib/util.js';
 import prettyFormat from 'pretty-format';
 
-/** @typedef {import('preact').VNode} VNode */
-
 // we have to patch in Array support, Possible issue in npm.im/pretty-format
 let preactPlugin = {
 	test(object) {

package/src/lib/chunked.js

@@ -0,0 +1,97 @@
+import { renderToString } from '../index.js';
+import { CHILD_DID_SUSPEND, COMPONENT, PARENT } from './constants.js';
+import { Deferred } from './util.js';
+import { createInitScript, createSubtree } from './client.js';
+
+/**
+ * @param {VNode} vnode
+ * @param {RenderToChunksOptions} options
+ * @returns {Promise<void>}
+ */
+export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
+	context = context || {};
+
+	/** @type {RendererState} */
+	const renderer = {
+		start: Date.now(),
+		abortSignal,
+		onWrite,
+		onError: handleError,
+		suspended: []
+	};
+
+	// Synchronously render the shell
+	// @ts-ignore - using third internal RendererState argument
+	const shell = renderToString(vnode, context, renderer);
+	onWrite(shell);
+
+	// Wait for any suspended sub-trees if there are any
+	const len = renderer.suspended.length;
+	if (len > 0) {
+		onWrite('<div hidden>');
+		onWrite(createInitScript(len));
+		// We should keep checking all promises
+		await forkPromises(renderer);
+		onWrite('</div>');
+	}
+}
+
+async function forkPromises(renderer) {
+	if (renderer.suspended.length > 0) {
+		const suspensions = [...renderer.suspended];
+		await Promise.all(renderer.suspended.map((s) => s.promise));
+		renderer.suspended = renderer.suspended.filter(
+			(s) => !suspensions.includes(s)
+		);
+		await forkPromises(renderer);
+	}
+}
+
+/** @type {RendererErrorHandler} */
+function handleError(error, vnode, renderChild) {
+	if (!error || !error.then) return;
+
+	// walk up to the Suspense boundary
+	while ((vnode = vnode[PARENT])) {
+		let component = vnode[COMPONENT];
+		if (component && component[CHILD_DID_SUSPEND]) {
+			break;
+		}
+	}
+
+	if (!vnode) return;
+
+	const id = vnode.__v;
+	const found = this.suspended.find((x) => x.id === id);
+	const race = new Deferred();
+
+	const abortSignal = this.abortSignal;
+	if (abortSignal) {
+		// @ts-ignore 2554 - implicit undefined arg
+		if (abortSignal.aborted) race.resolve();
+		else abortSignal.addEventListener('abort', race.resolve);
+	}
+
+	const promise = error.then(
+		() => {
+			if (abortSignal && abortSignal.aborted) return;
+			const child = renderChild(vnode.props.children);
+			if (child) this.onWrite(createSubtree(id, child));
+		},
+		// TODO: Abort and send hydration code snippet to client
+		// to attempt to recover during hydration
+		this.onError
+	);
+
+	this.suspended.push({
+		id,
+		vnode,
+		promise: Promise.race([promise, race.promise])
+	});
+
+	const fallback = renderChild(vnode.props.fallback);
+
+	return found
+		? ''
+		: `<!--preact-island:${id}-->${fallback}<!--/preact-island:${id}-->`;
+}