preact-render-to-string/src/lib/chunked.js at b8d737772ef0a69f5ce6063bd515046544622aa1 · preactjs/preact-render-to-string · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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);

	// Wait for any suspended sub-trees if there are any
	const len = renderer.suspended.length;
	if (len > 0) {
		// When rendering a full HTML document, the shell ends with </body></html>.
		// Inserting the deferred <div hidden> wrapper after </html> is invalid HTML
		// and causes browsers to reject the content. Instead, we inject the deferred
		// content before the closing tags, then emit them last.
		const docSuffixIndex = getDocumentClosingTagsIndex(shell);
		const hasHtmlTag = shell.trimStart().startsWith('<html');
		const initialWrite =
			docSuffixIndex !== -1 ? shell.slice(0, docSuffixIndex) : shell;
		const prefix = hasHtmlTag ? '<!DOCTYPE html>' : '';
		onWrite(prefix + initialWrite);
		onWrite('<div hidden>');
		onWrite(createInitScript(len));
		// We should keep checking all promises
		await forkPromises(renderer);
		onWrite('</div>');
		if (docSuffixIndex !== -1) onWrite(shell.slice(docSuffixIndex));
	} else {
		onWrite(shell);
	}
}

/**
 * If the shell ends with </body></html> (full document rendering), return that
 * suffix so it can be emitted *after* the deferred content, keeping the HTML valid.
 * @param {string} html
 * @returns {number}
 */
function getDocumentClosingTagsIndex(html) {
	return html.lastIndexOf('</body>');
}

async function forkPromises(renderer) {
	while (renderer.suspended.length > 0) {
		const length = renderer.suspended.length;
		await Promise.all(renderer.suspended.map((s) => s.promise));
		renderer.suspended.splice(0, length);
	}
}

/** @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 abortSignal = this.abortSignal;
	let promise = error.then(
		() => {
			if (abortSignal && abortSignal.aborted) return;
			const child = renderChild(vnode.props.children, vnode);
			if (child) this.onWrite(createSubtree(id, child));
		},
		// TODO: Abort and send hydration code snippet to client
		// to attempt to recover during hydration
		this.onError
	);
	if (abortSignal) {
		const race = new Deferred();
		// @ts-ignore 2554 - implicit undefined arg
		if (abortSignal.aborted) race.resolve();
		else abortSignal.addEventListener('abort', race.resolve);
		promise = Promise.race([promise, race.promise]);
	}

	this.suspended.push({
		id,
		vnode,
		promise
	});

	const fallback = renderChild(vnode.props.fallback);

	return found ? '' : `<!--$s:${id}-->${fallback}<!--/$s:${id}-->`;
}