fixing multiple suspended child components (#335)

Author: David Dios

src/index.js

@@ -438,16 +438,20 @@ function _renderToString(
 			rendered != null && rendered.type === Fragment && rendered.key == null;
 		rendered = isTopLevelFragment ? rendered.props.children : rendered;
 
-		try {
-			// Recurse into children before invoking the after-diff hook
-			const str = _renderToString(
+		const renderChildren = () =>
+			_renderToString(
 				rendered,
 				context,
 				isSvgMode,
 				selectValue,
 				vnode,
 				asyncMode
 			);
+
+		try {
+			// Recurse into children before invoking the after-diff hook
+			const str = renderChildren();
+
 			if (afterDiff) afterDiff(vnode);
 			vnode[PARENT] = undefined;
 
@@ -459,16 +463,18 @@ function _renderToString(
 
 			if (!error || typeof error.then !== 'function') throw error;
 
-			return error.then(() =>
-				_renderToString(
-					rendered,
-					context,
-					isSvgMode,
-					selectValue,
-					vnode,
-					asyncMode
-				)
-			);
+			const renderNestedChildren = () => {
+				try {
+					return renderChildren();
+				} catch (e) {
+					return e.then(
+						() => renderChildren(),
+						() => renderNestedChildren()
+					);
+				}
+			};
+
+			return error.then(() => renderNestedChildren());
 		}
 	}
 

test/compat/async.test.js

@@ -94,4 +94,47 @@ describe('Async renderToString', () => {
 
 		expect(rendered).to.equal(expected);
 	});
+
+	it('should render JSX with multiple suspended direct children within a single suspense boundary', async () => {
+		const {
+			Suspender: SuspenderOne,
+			suspended: suspendedOne
+		} = createSuspender();
+		const {
+			Suspender: SuspenderTwo,
+			suspended: suspendedTwo
+		} = createSuspender();
+		const {
+			Suspender: SuspenderThree,
+			suspended: suspendedThree
+		} = createSuspender();
+
+		const promise = renderToStringAsync(
+			<ul>
+				<Suspense fallback={null}>
+					<SuspenderOne>
+						<li>one</li>
+					</SuspenderOne>
+					<Suspense fallback={null}>
+						<SuspenderTwo>
+							<li>two</li>
+						</SuspenderTwo>
+					</Suspense>
+					<SuspenderThree>
+						<li>three</li>
+					</SuspenderThree>
+				</Suspense>
+			</ul>
+		);
+
+		const expected = `<ul><li>one</li><li>two</li><li>three</li></ul>`;
+
+		suspendedOne.resolve();
+		suspendedTwo.resolve();
+		suspendedThree.resolve();
+
+		const rendered = await promise;
+
+		expect(rendered).to.equal(expected);
+	});
 });