{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\nindex 93574d8357..e85e853c34 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n@@ -43,16 +43,48 @@ describe('ReactDOMServerSuspense', () => {\n resetModules();\n });\n \n- it('should always render the fallback when a placeholder is encountered', async () => {\n- const Suspended = props => {\n- throw new Promise(() => {});\n- };\n+ function Text(props) {\n+ return

{props.text}<\/div>;\n+ }\n+\n+ function AsyncText(props) {\n+ throw new Promise(() => {});\n+ }\n+\n+ it('should render the children when no promise is thrown', async () => {\n const e = await serverRender(\n- }>\n- \n+ }>\n+ \n <\/React.Suspense>,\n );\n \n expect(e.tagName).toBe('DIV');\n+ expect(e.textContent).toBe('Children');\n+ });\n+\n+ it('should render the fallback when a promise thrown', async () => {\n+ const e = await serverRender(\n+ }>\n+ \n+ <\/React.Suspense>,\n+ );\n+\n+ expect(e.tagName).toBe('DIV');\n+ expect(e.textContent).toBe('Fallback');\n+ });\n+\n+ it('should work with nested suspense components', async () => {\n+ const e = await serverRender(\n+ }>\n+

\n+ \n+ }>\n+ \n+ <\/React.Suspense>\n+ <\/div>\n+ <\/React.Suspense>,\n+ );\n+\n+ expect(e.innerHTML).toBe('

Children<\/div>

Fallback<\/div>');\n });\n });\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 643d53cf0c..c5f124e7c4 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -707,6 +707,7 @@ type Frame = {\n type: mixed,\n domNamespace: string,\n children: FlatReactChildren,\n+ fallbackFrame?: Frame,\n childIndex: number,\n context: Object,\n footer: string,\n@@ -723,6 +724,7 @@ class ReactDOMServerRenderer {\n currentSelectValue: any;\n previousWasTextNode: boolean;\n makeStaticMarkup: boolean;\n+ suspenseDepth: number;\n \n contextIndex: number;\n contextStack: Array>;\n@@ -750,6 +752,7 @@ class ReactDOMServerRenderer {\n this.currentSelectValue = null;\n this.previousWasTextNode = false;\n this.makeStaticMarkup = makeStaticMarkup;\n+ this.suspenseDepth = 0;\n \n \/\/ Context (new API)\n this.contextIndex = -1;\n@@ -825,16 +828,18 @@ class ReactDOMServerRenderer {\n ReactCurrentOwner.currentDispatcher = DispatcherWithoutHooks;\n }\n try {\n- let out = '';\n- while (out.length < bytes) {\n+ \/\/ Markup generated within ends up buffered until we know\n+ \/\/ nothing in that boundary suspended\n+ let out = [''];\n+ let suspended = false;\n+ while (out[0].length < bytes) {\n if (this.stack.length === 0) {\n this.exhausted = true;\n break;\n }\n const frame: Frame = this.stack[this.stack.length - 1];\n- if (frame.childIndex >= frame.children.length) {\n+ if (suspended || frame.childIndex >= frame.children.length) {\n const footer = frame.footer;\n- out += footer;\n if (footer !== '') {\n this.previousWasTextNode = false;\n }\n@@ -848,26 +853,57 @@ class ReactDOMServerRenderer {\n ) {\n const provider: ReactProvider = (frame.type: any);\n this.popProvider(provider);\n+ } else if (frame.type === REACT_SUSPENSE_TYPE) {\n+ this.suspenseDepth--;\n+ const buffered = out.pop();\n+\n+ if (suspended) {\n+ suspended = false;\n+ \/\/ If rendering was suspended at this boundary, render the fallbackFrame\n+ const fallbackFrame = frame.fallbackFrame;\n+ invariant(\n+ fallbackFrame,\n+ 'suspense fallback not found, something is broken',\n+ );\n+ this.stack.push(fallbackFrame);\n+ \/\/ Skip flushing output since we're switching to the fallback\n+ continue;\n+ } else {\n+ out[this.suspenseDepth] += buffered;\n+ }\n }\n+\n+ \/\/ Flush output\n+ out[this.suspenseDepth] += footer;\n continue;\n }\n const child = frame.children[frame.childIndex++];\n+\n+ let outBuffer = '';\n if (__DEV__) {\n pushCurrentDebugStack(this.stack);\n \/\/ We're starting work on this frame, so reset its inner stack.\n ((frame: any): FrameDev).debugElementStack.length = 0;\n- try {\n- \/\/ Be careful! Make sure this matches the PROD path below.\n- out += this.render(child, frame.context, frame.domNamespace);\n- } finally {\n+ }\n+ try {\n+ outBuffer += this.render(child, frame.context, frame.domNamespace);\n+ } catch (err) {\n+ if (enableSuspenseServerRenderer && typeof err.then === 'function') {\n+ suspended = true;\n+ } else {\n+ throw err;\n+ }\n+ } finally {\n+ if (__DEV__) {\n popCurrentDebugStack();\n }\n- } else {\n- \/\/ Be careful! Make sure this matches the DEV path above.\n- out += this.render(child, frame.context, frame.domNamespace);\n }\n+ if (out.length <= this.suspenseDepth) {\n+ out.push('');\n+ }\n+ out[this.suspenseDepth] += outBuffer;\n }\n- return out;\n+ return out[0];\n } finally {\n ReactCurrentOwner.currentDispatcher = prevDispatcher;\n }\n@@ -960,13 +996,25 @@ class ReactDOMServerRenderer {\n }\n case REACT_SUSPENSE_TYPE: {\n if (enableSuspenseServerRenderer) {\n- const nextChildren = toArray(\n- \/\/ Always use the fallback when synchronously rendering to string.\n+ const fallbackChildren = toArray(\n ((nextChild: any): ReactElement).props.fallback,\n );\n- const frame: Frame = {\n+ const nextChildren = toArray(\n+ ((nextChild: any): ReactElement).props.children,\n+ );\n+ const fallbackFrame: Frame = {\n type: null,\n domNamespace: parentNamespace,\n+ children: fallbackChildren,\n+ childIndex: 0,\n+ context: context,\n+ footer: '',\n+ out: '',\n+ };\n+ const frame: Frame = {\n+ fallbackFrame,\n+ type: REACT_SUSPENSE_TYPE,\n+ domNamespace: parentNamespace,\n children: nextChildren,\n childIndex: 0,\n context: context,\n@@ -974,8 +1022,10 @@ class ReactDOMServerRenderer {\n };\n if (__DEV__) {\n ((frame: any): FrameDev).debugElementStack = [];\n+ ((fallbackFrame: any): FrameDev).debugElementStack = [];\n }\n this.stack.push(frame);\n+ this.suspenseDepth++;\n return '';\n } else {\n invariant(false, 'ReactDOMServer does not yet support Suspense.');\n","commit":{"authorEmail":"alexmckenley@gmail.com","authoredAt":"2018-11-08T18:15:06-08:00","subject":"Improved suspense support in ReactDOMServer (#14161)","authorName":"Alex Taylor","revision":"02e4848e3aeb072214690d655c9cfe717c290491","shortRevision":"02e4848e3a"},"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js"},{"path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js","status":"M"}],"parents":["4b163fee1c494c35ac8b4ba49cd41e9c573b7a7b"],"body":""}

dillon1000/react

Files changed