From af5037a7a8ee983337a08eeff7477656bd80f5ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 22 Apr 2021 18:00:35 -0400 Subject: [PATCH] [Fizz] Wire up the Fixture (#21273) * Wire up fizz to fixture * Fixed typo conditional --- fixtures/ssr/server/index.js | 4 +- fixtures/ssr/server/render.js | 34 +- fixtures/ssr/src/components/App.js | 34 +- fixtures/ssr/src/components/Chrome.js | 32 +- fixtures/ssr/src/components/Suspend.js | 19 +- fixtures/ssr/src/index.js | 2 +- fixtures/ssr/yarn.lock | 4469 ++++++++++++----- .../src/client/ReactDOMHostConfig.js | 2 +- 8 files changed, 3184 insertions(+), 1412 deletions(-) diff --git a/fixtures/ssr/server/index.js b/fixtures/ssr/server/index.js index fa57206df5ebf..2b41c6d9fdebb 100644 --- a/fixtures/ssr/server/index.js +++ b/fixtures/ssr/server/index.js @@ -21,12 +21,12 @@ if (process.env.NODE_ENV === 'development') { delete require.cache[key]; } const render = require('./render').default; - res.send(render(req.url)); + render(req.url, res); }); } else { const render = require('./render').default; app.get('/', function(req, res) { - res.send(render(req.url)); + render(req.url, res); }); } diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js index 80c4839ba434a..5a37f5c5555bc 100644 --- a/fixtures/ssr/server/render.js +++ b/fixtures/ssr/server/render.js @@ -1,5 +1,5 @@ import React from 'react'; -import {renderToString} from 'react-dom/server'; +import {pipeToNodeWritable} from 'react-dom/unstable-fizz'; import App from '../src/components/App'; @@ -14,9 +14,31 @@ if (process.env.NODE_ENV === 'development') { assets = require('../build/asset-manifest.json'); } -export default function render() { - var html = renderToString(); - // There's no way to render a doctype in React so prepend manually. - // Also append a bootstrap script tag. - return '' + html; +export default function render(url, res) { + res.socket.on('error', error => { + // Log fatal errors + console.error('Fatal', error); + }); + let didError = false; + const {startWriting, abort} = pipeToNodeWritable( + , + res, + { + onReadyToStream() { + // If something errored before we started streaming, we set the error code appropriately. + res.statusCode = didError ? 500 : 200; + res.setHeader('Content-type', 'text/html'); + // There's no way to render a doctype in React so prepend manually. + res.write(''); + startWriting(); + }, + onError(x) { + didError = true; + console.error(x); + }, + } + ); + // Abandon and switch to client rendering after 5 seconds. + // Try lowering this to see the client recover. + setTimeout(abort, 5000); } diff --git a/fixtures/ssr/src/components/App.js b/fixtures/ssr/src/components/App.js index ebfafc9d15bb6..a938ed2f188cf 100644 --- a/fixtures/ssr/src/components/App.js +++ b/fixtures/ssr/src/components/App.js @@ -10,23 +10,29 @@ function LoadingIndicator() { return
Loading...
; } -export default function App({assets}) { +function Content() { let [CurrentPage, switchPage] = useState(() => Page); + return ( +
+

Hello World

+ switchPage(() => Page)}> + Page 1 + + {' | '} + switchPage(() => Page2)}> + Page 2 + + }> + + +
+ ); +} + +export default function App({assets}) { return ( -
-

Hello World

- switchPage(() => Page)}> - Page 1 - - {' | '} - switchPage(() => Page2)}> - Page 2 - - }> - - -
+ ); } diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js index 9537f037e76eb..c895663710560 100644 --- a/fixtures/ssr/src/components/Chrome.js +++ b/fixtures/ssr/src/components/Chrome.js @@ -1,4 +1,8 @@ -import React, {Component} from 'react'; +import React, { + Component, + Suspense, + unstable_startTransition as startTransition, +} from 'react'; import Theme, {ThemeToggleButton} from './Theme'; @@ -23,18 +27,20 @@ export default class Chrome extends Component { __html: `Enable JavaScript to run this app.`, }} /> - - {this.props.children} -
- { - React.startTransition(() => { - this.setState({theme}); - }); - }} - /> -
- + + + {this.props.children} +
+ { + startTransition(() => { + this.setState({theme}); + }); + }} + /> +
+ +