feat!: stream Suspense chunks via declarative shadow dom

.changeset/orange-beds-pay.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': major
+---
+
+stream Suspense chunks via declarative shadow dom

src/lib/chunked.js

@@ -1,7 +1,15 @@
 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 {string} id
+ * @param {string} content
+ * @returns {string}
+ */
+export function createSubtree(id, content) {
+	return `<template shadowrootmode="open" slot="preact-island-${id}">${content}</template>`;
+}
 
 /**
  * @param {VNode} vnode
@@ -28,11 +36,8 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
 	// 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>');
 	}
 }
 
@@ -93,5 +98,5 @@ function handleError(error, vnode, renderChild) {
 
 	return found
 		? ''
-		: `<!--preact-island:${id}-->${fallback}<!--/preact-island:${id}-->`;
+		: `<template shadowrootmode="open"><slot name="preact-island-${id}">${fallback}</slot></template>`;
 }

src/lib/util.js

@@ -1,4 +1,4 @@
-import { DIRTY, BITS } from './constants';
+import { DIRTY, BITS } from './constants.js';
 
 export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 // oxlint-disable-next-line no-control-regex

test/compat/render-chunked.test.jsx

@@ -2,8 +2,7 @@ import { h } from 'preact';
 import { expect, describe, it } from 'vitest';
 import { Suspense } from 'preact/compat';
 import { useId } from 'preact/hooks';
-import { renderToChunks } from '../../src/lib/chunked';
-import { createSubtree, createInitScript } from '../../src/lib/client';
+import { createSubtree, renderToChunks } from '../../src/lib/chunked';
 import { createSuspender } from '../utils';
 import { VNODE, PARENT } from '../../src/lib/constants';
 
@@ -34,11 +33,8 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:5-->loading...<!--/preact-island:5--></div>',
-			'<div hidden>',
-			createInitScript(),
-			createSubtree('5', '<p>it works</p>'),
-			'</div>'
+			'<div><template shadowrootmode="open"><slot name="preact-island-5">loading...</slot></template></div>',
+			createSubtree('5', '<p>it works</p>')
 		]);
 	});
 
@@ -62,10 +58,7 @@ describe('renderToChunks', () => {
 		suspended.resolve();
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:10-->loading...<!--/preact-island:10--></div>',
-			'<div hidden>',
-			createInitScript(1),
-			'</div>'
+			'<div><template shadowrootmode="open"><slot name="preact-island-10">loading...</slot></template></div>'
 		]);
 	});
 
@@ -109,11 +102,8 @@ describe('renderToChunks', () => {
 		}
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:16-->loading...<!--/preact-island:16--></div>',
-			'<div hidden>',
-			createInitScript(1),
-			createSubtree('16', '<p>it works</p>'),
-			'</div>'
+			'<div><template shadowrootmode="open"><slot name="preact-island-16">loading...</slot></template></div>',
+			createSubtree('16', '<p>it works</p>')
 		]);
 	});
 
@@ -142,11 +132,8 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><p>id: P0-0</p><!--preact-island:24-->loading...<!--/preact-island:24--></div>',
-			'<div hidden>',
-			createInitScript(1),
-			createSubtree('24', '<p>id: P0-1</p>'),
-			'</div>'
+			'<div><p>id: P0-0</p><template shadowrootmode="open"><slot name="preact-island-24">loading...</slot></template></div>',
+			createSubtree('24', '<p>id: P0-1</p>')
 		]);
 	});
 
@@ -182,12 +169,9 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).toEqual([
-			'<div><p>id: P0-0</p><!--preact-island:33-->loading...<!--/preact-island:33--><!--preact-island:36-->loading...<!--/preact-island:36--></div>',
-			'<div hidden>',
-			createInitScript(1),
+			'<div><p>id: P0-0</p><template shadowrootmode="open"><slot name="preact-island-33">loading...</slot></template><template shadowrootmode="open"><slot name="preact-island-36">loading...</slot></template></div>',
 			createSubtree('33', '<p>id: P0-1</p>'),
-			createSubtree('36', '<p>id: P0-2</p>'),
-			'</div>'
+			createSubtree('36', '<p>id: P0-2</p>')
 		]);
 	});
 
@@ -217,11 +201,8 @@ describe('renderToChunks', () => {
 		await promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:49-->loading part 1...<!--/preact-island:49--></div>',
-			'<div hidden>',
-			createInitScript(1),
-			createSubtree('49', '<p>it works</p><p>it works</p>'),
-			'</div>'
+			'<div><template shadowrootmode="open"><slot name="preact-island-49">loading part 1...</slot></template></div>',
+			createSubtree('49', '<p>it works</p><p>it works</p>')
 		]);
 	});
 });

test/compat/stream-node.test.jsx

@@ -2,7 +2,7 @@ import { PassThrough } from 'node:stream';
 import { h } from 'preact';
 import { expect, describe, it } from 'vitest';
 import { Suspense } from 'preact/compat';
-import { createSubtree, createInitScript } from '../../src/lib/client';
+import { createSubtree } from '../../src/lib/chunked';
 import { renderToPipeableStream } from '../../src/stream-node';
 import { Deferred } from '../../src/lib/util';
 import { createSuspender } from '../utils';
@@ -66,11 +66,8 @@ describe('renderToPipeableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:5-->loading...<!--/preact-island:5--></div>',
-			'<div hidden>',
-			createInitScript(),
-			createSubtree('5', '<p>it works</p>'),
-			'</div>'
+			'<div><template shadowrootmode="open"><slot name="preact-island-5">loading...</slot></template></div>',
+			createSubtree('5', '<p>it works</p>')
 		]);
 	});
 

test/compat/stream.test.jsx

@@ -2,7 +2,7 @@
 import { h } from 'preact';
 import { expect, beforeAll, describe, it } from 'vitest';
 import { Suspense } from 'preact/compat';
-import { createSubtree, createInitScript } from '../../src/lib/client';
+import { createSubtree } from '../../src/lib/chunked';
 import { renderToReadableStream } from '../../src/stream';
 import { Deferred } from '../../src/lib/util';
 import { createSuspender } from '../utils';
@@ -82,11 +82,8 @@ describe('renderToReadableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).toEqual([
-			'<div><!--preact-island:5-->loading...<!--/preact-island:5--></div>',
-			'<div hidden>',
-			createInitScript(),
-			createSubtree('5', '<p>it works</p>'),
-			'</div>'
+			'<div><template shadowrootmode="open"><slot name="preact-island-5">loading...</slot></template></div>',
+			createSubtree('5', '<p>it works</p>')
 		]);
 	});
 });