Simple suspense renderer 2024

package.json

@@ -35,7 +35,7 @@
 		"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:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/index.test.js'",
+		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/*.test.js'",
 		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/debug/index.test.js'",
 		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",
 		"prepublishOnly": "npm run build",

src/index.d.ts

@@ -1,7 +1,19 @@
 import { VNode } from 'preact';
 
-export default function renderToString<P = {}>(vnode: VNode<P>, context?: any): string;
+export default function renderToString<P = {}>(
+	vnode: VNode<P>,
+	context?: any
+): string | Promise<string>;
 
-export function render<P = {}>(vnode: VNode<P>, context?: any): string;
-export function renderToString<P = {}>(vnode: VNode<P>, context?: any): string;
-export function renderToStaticMarkup<P = {}>(vnode: VNode<P>, context?: any): string;
+export function render<P = {}>(
+	vnode: VNode<P>,
+	context?: any
+): string | Promise<string>;
+export function renderToString<P = {}>(
+	vnode: VNode<P>,
+	context?: any
+): string | Promise<string>;
+export function renderToStaticMarkup<P = {}>(
+	vnode: VNode<P>,
+	context?: any
+): string | Promise<string>;

src/index.js

@@ -55,13 +55,19 @@ export function renderToString(vnode, context) {
 	parent[CHILDREN] = [vnode];
 
 	try {
-		return _renderToString(
+		const rendered = _renderToString(
 			vnode,
 			context || EMPTY_OBJ,
 			false,
 			undefined,
 			parent
 		);
+
+		if (Array.isArray(rendered)) {
+			return Promise.all(rendered).then((rendered) => rendered.join(''));
+		}
+
+		return rendered;
 	} finally {
 		// options._commit, we don't schedule any effects in this library right now,
 		// so we can pass an empty queue to this hook.
@@ -137,7 +143,7 @@ function renderClassComponent(vnode, context) {
  * @param {boolean} isSvgMode
  * @param {any} selectValue
  * @param {VNode} parent
- * @returns {string}
+ * @returns {string | Promise<string> | (string | Promise<string>)[]}
  */
 function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 	// Ignore non-rendered VNodes/values
@@ -153,16 +159,43 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 
 	// Recurse into children / Arrays
 	if (isArray(vnode)) {
-		let rendered = '';
+		let rendered = '',
+			renderArray;
 		parent[CHILDREN] = vnode;
 		for (let i = 0; i < vnode.length; i++) {
 			let child = vnode[i];
 			if (child == null || typeof child === 'boolean') continue;
 
-			rendered =
-				rendered +
-				_renderToString(child, context, isSvgMode, selectValue, parent);
+			const childRender = _renderToString(
+				child,
+				context,
+				isSvgMode,
+				selectValue,
+				parent
+			);
+
+			if (typeof childRender === 'string') {
+				rendered += childRender;
+			} else {
+				renderArray = renderArray || [];
+
+				if (rendered) renderArray.push(rendered);
+
+				rendered = '';
+
+				if (Array.isArray(childRender)) {
+					renderArray.push(...childRender);
+				} else {
+					renderArray.push(childRender);
+				}
+			}
+		}
+
+		if (renderArray) {
+			if (rendered) renderArray.push(rendered);
+			return renderArray;
 		}
+
 		return rendered;
 	}
 
@@ -333,20 +366,28 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			rendered != null && rendered.type === Fragment && rendered.key == null;
 		rendered = isTopLevelFragment ? rendered.props.children : rendered;
 
-		// Recurse into children before invoking the after-diff hook
-		const str = _renderToString(
-			rendered,
-			context,
-			isSvgMode,
-			selectValue,
-			vnode
-		);
-		if (afterDiff) afterDiff(vnode);
-		vnode[PARENT] = undefined;
-
-		if (ummountHook) ummountHook(vnode);
-
-		return str;
+		try {
+			// Recurse into children before invoking the after-diff hook
+			const str = _renderToString(
+				rendered,
+				context,
+				isSvgMode,
+				selectValue,
+				vnode
+			);
+			if (afterDiff) afterDiff(vnode);
+			vnode[PARENT] = undefined;
+
+			if (ummountHook) ummountHook(vnode);
+
+			return str;
+		} catch (error) {
+			if (!error || typeof error.then !== 'function') throw error;
+
+			return error.then(() =>
+				_renderToString(rendered, context, isSvgMode, selectValue, vnode)
+			);
+		}
 	}
 
 	// Serialize Element VNodes to HTML
@@ -488,7 +529,13 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 		return s + '/>';
 	}
 
-	return s + '>' + html + '</' + type + '>';
+	const endTag = '</' + type + '>';
+	const startTag = s + '>';
+
+	if (Array.isArray(html)) return [startTag, ...html, endTag];
+	else if (typeof html !== 'string') return [startTag, html, endTag];
+
+	return startTag + html + endTag;
 }
 
 const SELF_CLOSING = new Set([

src/util.js

@@ -150,3 +150,17 @@ export function createComponent(vnode, context) {
 		__h: []
 	};
 }
+
+/**
+ * @template T
+ */
+export class Deferred {
+	constructor() {
+		// eslint-disable-next-line lines-around-comment
+		/** @type {Promise<T>} */
+		this.promise = new Promise((resolve, reject) => {
+			this.resolve = resolve;
+			this.reject = reject;
+		});
+	}
+}

test/compat/async.test.js

@@ -0,0 +1,68 @@
+import render from '../../src/index.js';
+import {
+	h,
+	Component,
+	createContext,
+	Fragment,
+	options,
+	createRef
+} from 'preact';
+import { Suspense } from 'preact/compat';
+import { expect } from 'chai';
+import { createSuspender } from '../utils.js';
+
+describe('Async renderToString', () => {
+	it('should render JSX after a suspense boundary', async () => {
+		const { Suspender, suspended } = createSuspender();
+
+		const promise = render(
+			<Suspense fallback={<div>loading...</div>}>
+				<Suspender>
+					<div class="foo">bar</div>
+				</Suspender>
+			</Suspense>
+		);
+
+		const expected = `<div class="foo">bar</div>`;
+
+		suspended.resolve();
+
+		const rendered = await promise;
+
+		expect(rendered).to.equal(expected);
+	});
+
+	it('should render JSX with nested suspense boundary', async () => {
+		const {
+			Suspender: SuspenderOne,
+			suspended: suspendedOne
+		} = createSuspender();
+		const {
+			Suspender: SuspenderTwo,
+			suspended: suspendedTwo
+		} = createSuspender();
+
+		const promise = render(
+			<ul>
+				<Suspense fallback={null}>
+					<SuspenderOne>
+						<li>one</li>
+						<SuspenderTwo>
+							<li>two</li>
+						</SuspenderTwo>
+						<li>three</li>
+					</SuspenderOne>
+				</Suspense>
+			</ul>
+		);
+
+		const expected = `<ul><li>one</li><li>two</li><li>three</li></ul>`;
+
+		suspendedOne.resolve();
+		suspendedTwo.resolve();
+
+		const rendered = await promise;
+
+		expect(rendered).to.equal(expected);
+	});
+});

test/utils.js

@@ -1,3 +1,5 @@
+import { Deferred } from '../src/util';
+
 /**
  * tag to remove leading whitespace from tagged template
  * literal.
@@ -11,6 +13,25 @@ export function dedent([str]) {
 		.replace(/(^\n+|\n+\s*$)/g, '');
 }
 
+export function createSuspender() {
+	const deferred = new Deferred();
+	let resolved;
+
+	deferred.promise.then(() => (resolved = true));
+	function Suspender({ children = null }) {
+		if (!resolved) {
+			throw deferred.promise;
+		}
+
+		return children;
+	}
+
+	return {
+		suspended: deferred,
+		Suspender
+	};
+}
+
 export const svgAttributes = {
 	accentHeight: 'accent-height',
 	accumulate: 'accumulate',