Ensure we return a full document

JoviDeCroock · JoviDeCroock · commit d0b53e6bea0f · 2026-02-19T18:36:33.000+01:00
diff --git a/src/lib/chunked.js b/src/lib/chunked.js
@@ -23,19 +23,38 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
 	// 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) {
+		// 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 docSuffix = getDocumentClosingTags(shell);
+		onWrite(docSuffix ? shell.slice(0, -docSuffix.length) : shell);
 		onWrite('<div hidden>');
 		onWrite(createInitScript(len));
 		// We should keep checking all promises
 		await forkPromises(renderer);
 		onWrite('</div>');
+		if (docSuffix) onWrite(docSuffix);
+	} 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 {string | null}
+ */
+function getDocumentClosingTags(html) {
+	const match = html.match(/(<\/body>)?\s*<\/html>\s*/i);
+	return match ? match[0] : null;
+}
+
 async function forkPromises(renderer) {
 	if (renderer.suspended.length > 0) {
 		const suspensions = [...renderer.suspended];
diff --git a/test/compat/render-chunked.test.jsx b/test/compat/render-chunked.test.jsx
@@ -191,6 +191,43 @@ describe('renderToChunks', () => {
 		]);
 	});
 
+	it('should inject deferred content before </body></html> for full document rendering', async () => {
+		const { Suspender, suspended } = createSuspender();
+
+		const result = [];
+		const promise = renderToChunks(
+			<html>
+				<head>
+					<title>Test</title>
+				</head>
+				<body>
+					<Suspense fallback="loading...">
+						<Suspender />
+					</Suspense>
+				</body>
+			</html>,
+			{ onWrite: (s) => result.push(s) }
+		);
+		suspended.resolve();
+		await promise;
+
+		const fullHtml = result.join('');
+
+		// Deferred wrapper must appear before </body></html>, not after
+		const deferredPos = fullHtml.indexOf('<div hidden>');
+		const bodyClosePos = fullHtml.indexOf('</body>');
+		const htmlClosePos = fullHtml.indexOf('</html>');
+
+		expect(deferredPos).toBeGreaterThan(-1);
+		expect(deferredPos).toBeLessThan(bodyClosePos);
+		expect(bodyClosePos).toBeLessThan(htmlClosePos);
+
+		// The document must end with </html>
+		expect(fullHtml.endsWith('</html>')).toBe(true);
+		// No content after </html>
+		expect(result[result.length - 1]).toBe('</body></html>');
+	});
+
 	it('should support a component that suspends multiple times', async () => {
 		const { Suspender, suspended } = createSuspender();
 		const { Suspender: Suspender2, suspended: suspended2 } = createSuspender();
@@ -217,10 +254,10 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:49-->loading part 1...<!--/preact-island:49--></div>',
+			'<div><!--preact-island:57-->loading part 1...<!--/preact-island:57--></div>',
 			'<div hidden>',
 			createInitScript(1),
-			createSubtree('49', '<p>it works</p><p>it works</p>'),
+			createSubtree('57', '<p>it works</p><p>it works</p>'),
 			'</div>'
 		]);
 	});
