Merge pull request #436 from preactjs/stream-multi-throw

Ensure we can suspend from a given component more than once

Author: JoviDeCroock

.changeset/heavy-sloths-cry.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Ensure that in streaming mode throwing a suspension multiple times from the same component works

src/index.js

@@ -380,11 +380,12 @@ function _renderToString(
 
 					try {
 						rendered = type.call(component, props, cctx);
-					} catch (e) {
-						if (asyncMode) {
+					} catch (error) {
+						if (asyncMode && error && typeof error.then == 'function') {
 							vnode._suspended = true;
 						}
-						throw e;
+
+						throw error;
 					}
 				}
 
@@ -508,17 +509,24 @@ function _renderToString(
 			return str;
 		} catch (error) {
 			if (!asyncMode && renderer && renderer.onError) {
-				let res = renderer.onError(error, vnode, (child, parent) =>
-					_renderToString(
-						child,
-						context,
-						isSvgMode,
-						selectValue,
-						parent,
-						asyncMode,
-						renderer
-					)
-				);
+				const onError = (error) => {
+					return renderer.onError(error, vnode, (child, parent) => {
+						try {
+							return _renderToString(
+								child,
+								context,
+								isSvgMode,
+								selectValue,
+								parent,
+								asyncMode,
+								renderer
+							);
+						} catch (e) {
+							return onError(e);
+						}
+					});
+				};
+				let res = onError(error);
 
 				if (res !== undefined) return res;
 

test/compat/render-chunked.test.jsx

@@ -190,4 +190,38 @@ describe('renderToChunks', () => {
 			'</div>'
 		]);
 	});
+
+	it('should support a component that suspends multiple times', async () => {
+		const { Suspender, suspended } = createSuspender();
+		const { Suspender: Suspender2, suspended: suspended2 } = createSuspender();
+
+		function MultiSuspender() {
+			return (
+				<Suspense fallback="loading part 1...">
+					<Suspender />
+					<Suspender2 />
+				</Suspense>
+			);
+		}
+
+		const result = [];
+		const promise = renderToChunks(
+			<div>
+				<MultiSuspender />
+			</div>,
+			{ onWrite: (s) => result.push(s) }
+		);
+
+		suspended.resolve();
+		suspended2.resolve();
+		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>'
+		]);
+	});
 });