-
Notifications
You must be signed in to change notification settings - Fork 46.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Fizz] Implement Legacy renderToString and renderToNodeStream on top …
…of Fizz (#21276) * Wire up DOM legacy build * Hack to filter extra comments for testing purposes * Use string concat in renderToString I think this might be faster. We could probably use a combination of this technique in the stream too to lower the overhead. * Error if we can't complete the root synchronously Maybe this should always error but in the async forms we can just delay the stream until it resolves so it does have some useful semantics. In the synchronous form it's never useful though. I'm mostly adding the error because we're testing this behavior for renderToString specifically. * Gate memory leak tests of internals These tests don't translate as is to the new implementation and have been ported to the Fizz tests separately. * Enable Fizz legacy mode in stable * Add wrapper around the ServerFormatConfig for legacy mode This ensures that we can inject custom overrides without negatively affecting the new implementation. This adds another field for static mark up for example. * Wrap pushTextInstance to avoid emitting comments for text in static markup * Don't emit static mark up for completed suspense boundaries Completed and client rendered boundaries are only marked for the client to take over. Pending boundaries are still supported in case you stream non-hydratable mark up. * Wire up generateStaticMarkup to static API entry points * Mark as renderer for stable This shouldn't affect the FB one ideally but it's done with the same build so let's hope this works.
- Loading branch information
1 parent
101ea9f
commit dbe3363
Showing
25 changed files
with
680 additions
and
40 deletions.
There are no files selected for viewing
12 changes: 12 additions & 0 deletions
12
packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
export * from 'react-client/src/ReactFlightClientHostConfigBrowser'; | ||
export * from 'react-client/src/ReactFlightClientHostConfigStream'; | ||
export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
export { | ||
renderToString, | ||
renderToStaticMarkup, | ||
renderToNodeStream, | ||
renderToStaticNodeStream, | ||
version, | ||
} from './src/server/ReactDOMServerBrowser'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
export { | ||
renderToString, | ||
renderToStaticMarkup, | ||
renderToNodeStream, | ||
renderToStaticNodeStream, | ||
version, | ||
} from './src/server/ReactDOMServerBrowser'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
// For some reason Flow doesn't like export * in this file. I don't know why. | ||
export { | ||
renderToString, | ||
renderToStaticMarkup, | ||
renderToNodeStream, | ||
renderToStaticNodeStream, | ||
version, | ||
} from './src/server/ReactDOMServerNode'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
import ReactVersion from 'shared/ReactVersion'; | ||
import invariant from 'shared/invariant'; | ||
|
||
import type {ReactNodeList} from 'shared/ReactTypes'; | ||
|
||
import { | ||
createRequest, | ||
startWork, | ||
startFlowing, | ||
abort, | ||
} from 'react-server/src/ReactFizzServer'; | ||
|
||
import { | ||
createResponseState, | ||
createRootFormatContext, | ||
} from './ReactDOMServerLegacyFormatConfig'; | ||
|
||
type ServerOptions = { | ||
identifierPrefix?: string, | ||
}; | ||
|
||
function onError() { | ||
// Non-fatal errors are ignored. | ||
} | ||
|
||
function renderToStringImpl( | ||
children: ReactNodeList, | ||
options: void | ServerOptions, | ||
generateStaticMarkup: boolean, | ||
): string { | ||
let didFatal = false; | ||
let fatalError = null; | ||
let result = ''; | ||
const destination = { | ||
push(chunk) { | ||
if (chunk !== null) { | ||
result += chunk; | ||
} | ||
return true; | ||
}, | ||
destroy(error) { | ||
didFatal = true; | ||
fatalError = error; | ||
}, | ||
}; | ||
|
||
let readyToStream = false; | ||
function onReadyToStream() { | ||
readyToStream = true; | ||
} | ||
const request = createRequest( | ||
children, | ||
destination, | ||
createResponseState( | ||
generateStaticMarkup, | ||
options ? options.identifierPrefix : undefined, | ||
), | ||
createRootFormatContext(undefined), | ||
Infinity, | ||
onError, | ||
undefined, | ||
onReadyToStream, | ||
); | ||
startWork(request); | ||
// If anything suspended and is still pending, we'll abort it before writing. | ||
// That way we write only client-rendered boundaries from the start. | ||
abort(request); | ||
startFlowing(request); | ||
if (didFatal) { | ||
throw fatalError; | ||
} | ||
invariant( | ||
readyToStream, | ||
'A React component suspended while rendering, but no fallback UI was specified.\n' + | ||
'\n' + | ||
'Add a <Suspense fallback=...> component higher in the tree to ' + | ||
'provide a loading indicator or placeholder to display.', | ||
); | ||
return result; | ||
} | ||
|
||
function renderToString( | ||
children: ReactNodeList, | ||
options?: ServerOptions, | ||
): string { | ||
return renderToStringImpl(children, options, false); | ||
} | ||
|
||
function renderToStaticMarkup( | ||
children: ReactNodeList, | ||
options?: ServerOptions, | ||
): string { | ||
return renderToStringImpl(children, options, true); | ||
} | ||
|
||
function renderToNodeStream() { | ||
invariant( | ||
false, | ||
'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' + | ||
'in the browser. Use ReactDOMServer.renderToString() instead.', | ||
); | ||
} | ||
|
||
function renderToStaticNodeStream() { | ||
invariant( | ||
false, | ||
'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' + | ||
'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.', | ||
); | ||
} | ||
|
||
export { | ||
renderToString, | ||
renderToStaticMarkup, | ||
renderToNodeStream, | ||
renderToStaticNodeStream, | ||
ReactVersion as version, | ||
}; |
113 changes: 113 additions & 0 deletions
113
packages/react-dom/src/server/ReactDOMLegacyServerNode.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
import type {ReactNodeList} from 'shared/ReactTypes'; | ||
|
||
import type {Request} from 'react-server/src/ReactFizzServer'; | ||
|
||
import { | ||
createRequest, | ||
startWork, | ||
startFlowing, | ||
abort, | ||
} from 'react-server/src/ReactFizzServer'; | ||
|
||
import { | ||
createResponseState, | ||
createRootFormatContext, | ||
} from './ReactDOMServerLegacyFormatConfig'; | ||
|
||
import { | ||
version, | ||
renderToString, | ||
renderToStaticMarkup, | ||
} from './ReactDOMLegacyServerBrowser'; | ||
|
||
import {Readable} from 'stream'; | ||
|
||
type ServerOptions = { | ||
identifierPrefix?: string, | ||
}; | ||
|
||
class ReactMarkupReadableStream extends Readable { | ||
request: Request; | ||
startedFlowing: boolean; | ||
constructor() { | ||
// Calls the stream.Readable(options) constructor. Consider exposing built-in | ||
// features like highWaterMark in the future. | ||
super({}); | ||
this.request = (null: any); | ||
this.startedFlowing = false; | ||
} | ||
|
||
_destroy(err, callback) { | ||
abort(this.request); | ||
// $FlowFixMe: The type definition for the callback should allow undefined and null. | ||
callback(err); | ||
} | ||
|
||
_read(size) { | ||
if (this.startedFlowing) { | ||
startFlowing(this.request); | ||
} | ||
} | ||
} | ||
|
||
function onError() { | ||
// Non-fatal errors are ignored. | ||
} | ||
|
||
function renderToNodeStreamImpl( | ||
children: ReactNodeList, | ||
options: void | ServerOptions, | ||
generateStaticMarkup: boolean, | ||
): Readable { | ||
function onCompleteAll() { | ||
// We wait until everything has loaded before starting to write. | ||
// That way we only end up with fully resolved HTML even if we suspend. | ||
destination.startedFlowing = true; | ||
startFlowing(request); | ||
} | ||
const destination = new ReactMarkupReadableStream(); | ||
const request = createRequest( | ||
children, | ||
destination, | ||
createResponseState(false, options ? options.identifierPrefix : undefined), | ||
createRootFormatContext(undefined), | ||
Infinity, | ||
onError, | ||
onCompleteAll, | ||
undefined, | ||
); | ||
destination.request = request; | ||
startWork(request); | ||
return destination; | ||
} | ||
|
||
function renderToNodeStream( | ||
children: ReactNodeList, | ||
options?: ServerOptions, | ||
): Readable { | ||
return renderToNodeStreamImpl(children, options, false); | ||
} | ||
|
||
function renderToStaticNodeStream( | ||
children: ReactNodeList, | ||
options?: ServerOptions, | ||
): Readable { | ||
return renderToNodeStreamImpl(children, options, true); | ||
} | ||
|
||
export { | ||
renderToString, | ||
renderToStaticMarkup, | ||
renderToNodeStream, | ||
renderToStaticNodeStream, | ||
version, | ||
}; |
62 changes: 62 additions & 0 deletions
62
packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @flow | ||
*/ | ||
|
||
export type Destination = { | ||
push(chunk: string | null): boolean, | ||
destroy(error: Error): mixed, | ||
... | ||
}; | ||
|
||
export type PrecomputedChunk = string; | ||
export type Chunk = string; | ||
|
||
export function scheduleWork(callback: () => void) { | ||
callback(); | ||
} | ||
|
||
export function flushBuffered(destination: Destination) {} | ||
|
||
export function beginWriting(destination: Destination) {} | ||
|
||
let prevWasCommentSegmenter = false; | ||
export function writeChunk( | ||
destination: Destination, | ||
chunk: Chunk | PrecomputedChunk, | ||
): boolean { | ||
if (prevWasCommentSegmenter) { | ||
prevWasCommentSegmenter = false; | ||
if (chunk[0] !== '<') { | ||
destination.push('<!-- -->'); | ||
} | ||
} | ||
if (chunk === '<!-- -->') { | ||
prevWasCommentSegmenter = true; | ||
return true; | ||
} | ||
return destination.push(chunk); | ||
} | ||
|
||
export function completeWriting(destination: Destination) {} | ||
|
||
export function close(destination: Destination) { | ||
destination.push(null); | ||
} | ||
|
||
export function stringToChunk(content: string): Chunk { | ||
return content; | ||
} | ||
|
||
export function stringToPrecomputedChunk(content: string): PrecomputedChunk { | ||
return content; | ||
} | ||
|
||
export function closeWithError(destination: Destination, error: mixed): void { | ||
// $FlowFixMe: This is an Error object or the destination accepts other types. | ||
destination.destroy(error); | ||
} |
Oops, something went wrong.