diff --git a/.changeset/long-ties-brake.md b/.changeset/long-ties-brake.md new file mode 100644 index 00000000..333694f3 --- /dev/null +++ b/.changeset/long-ties-brake.md @@ -0,0 +1,5 @@ +--- +'preact-render-to-string': patch +--- + +Fix async rendering of multiple suspended components in a single Suspense boundary diff --git a/src/index.js b/src/index.js index f6530f4f..9c696831 100644 --- a/src/index.js +++ b/src/index.js @@ -542,21 +542,8 @@ function _renderToString( : result; } catch (e) { if (!e || typeof e.then != 'function') throw e; - - return e.then(() => { - const result = _renderToString( - rendered, - context, - isSvgMode, - selectValue, - vnode, - asyncMode, - renderer - ); - return vnode._suspended - ? BEGIN_SUSPENSE_DENOMINATOR + result + END_SUSPENSE_DENOMINATOR - : result; - }, renderNestedChildren); + + return e.then(renderNestedChildren); } }; diff --git a/test/compat/async.test.jsx b/test/compat/async.test.jsx index 0ca78352..62a347d5 100644 --- a/test/compat/async.test.jsx +++ b/test/compat/async.test.jsx @@ -254,6 +254,48 @@ describe('Async renderToString', () => { expect(rendered).to.equal(expected); }); + it('should render JSX with multiple suspended direct children within a single suspense boundary that resolve one-after-another', async () => { + const { + Suspender: SuspenderOne, + suspended: suspendedOne + } = createSuspender(); + const { + Suspender: SuspenderTwo, + suspended: suspendedTwo + } = createSuspender(); + const { + Suspender: SuspenderThree, + suspended: suspendedThree + } = createSuspender(); + + const promise = renderToStringAsync( +