Add doctype html and changeset

JoviDeCroock · JoviDeCroock · commit b7b288c68ed8 · 2026-02-20T07:15:57.000+01:00
diff --git a/.changeset/lovely-ways-smoke.md b/.changeset/lovely-ways-smoke.md
@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix issues regarding streaming full HTML documents
diff --git a/src/lib/chunked.js b/src/lib/chunked.js
@@ -32,7 +32,11 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
 		// 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);
-		onWrite(docSuffixIndex !== -1 ? shell.slice(0, docSuffixIndex) : 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
@@ -51,7 +55,7 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
  * @returns {number}
  */
 function getDocumentClosingTagsIndex(html) {
-	return html.indexOf('</body>');
+	return html.lastIndexOf('</body>');
 }
 
 async function forkPromises(renderer) {
diff --git a/test/compat/render-chunked.test.jsx b/test/compat/render-chunked.test.jsx
@@ -228,6 +228,57 @@ describe('renderToChunks', () => {
 		expect(result[result.length - 1]).toBe('</body></html>');
 	});
 
+	it('should prepend <!DOCTYPE html> when rendering a full document with suspended content', 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;
+
+		// The first chunk must be prefixed with <!DOCTYPE html>
+		expect(result[0].startsWith('<!DOCTYPE html>')).toBe(true);
+
+		// The full output must start with the doctype
+		const fullHtml = result.join('');
+		expect(fullHtml.startsWith('<!DOCTYPE html>')).toBe(true);
+
+		// The doctype should appear exactly once
+		const doctypeCount = (fullHtml.match(/<!DOCTYPE html>/gi) || []).length;
+		expect(doctypeCount).toBe(1);
+	});
+
+	it('should not prepend <!DOCTYPE html> when rendering a non-document fragment with suspended content', async () => {
+		const { Suspender, suspended } = createSuspender();
+
+		const result = [];
+		const promise = renderToChunks(
+			<div>
+				<Suspense fallback="loading...">
+					<Suspender />
+				</Suspense>
+			</div>,
+			{ onWrite: (s) => result.push(s) }
+		);
+		suspended.resolve();
+		await promise;
+
+		const fullHtml = result.join('');
+		expect(fullHtml.includes('<!DOCTYPE html>')).toBe(false);
+	});
+
 	it('should support a component that suspends multiple times', async () => {
 		const { Suspender, suspended } = createSuspender();
 		const { Suspender: Suspender2, suspended: suspended2 } = createSuspender();
@@ -254,10 +305,10 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:57-->loading part 1...<!--/preact-island:57--></div>',
+			'<div><!--preact-island:70-->loading part 1...<!--/preact-island:70--></div>',
 			'<div hidden>',
 			createInitScript(1),
-			createSubtree('57', '<p>it works</p><p>it works</p>'),
+			createSubtree('70', '<p>it works</p><p>it works</p>'),
 			'</div>'
 		]);
 	});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'preact-render-to-string': patch
 +---
++
 +Fix issues regarding streaming full HTML documents