Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ReactDOMNodeStream, adding streaming rendering. #10024

Merged
merged 17 commits into from
Jun 25, 2017
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6f58bd8
Add ReactDOMNodeStream, adding ability to stream generated HTML.
aickin Jun 22, 2017
946f99b
Forgot to rename a documentation page.
aickin Jun 22, 2017
12192cc
Tests are passing locally but failing on CI; attempt to fix that with…
aickin Jun 22, 2017
85144e5
Adding some debugging info to try to track down CI problem.
aickin Jun 22, 2017
b0bef41
More debugging of CI. Yay for printf debugging.
aickin Jun 22, 2017
adb3e59
More printf debugging of CI to figure out what is going on with inclu…
aickin Jun 22, 2017
ee6e233
I made a truly stupid error with my printf debugging statements for C…
aickin Jun 22, 2017
f9b3f79
And another dumb copy and paste typo.
aickin Jun 22, 2017
8386fd3
The node-stream.js stub for tests wasn't being added because of .giti…
aickin Jun 22, 2017
132567d
Fix for code review coment https://github.com/facebook/react/pull/100…
aickin Jun 22, 2017
af4e89c
Removing all the console.logs I put in to debug the build problems on…
aickin Jun 22, 2017
b8f2529
Fix for code review coment https://github.com/facebook/react/pull/100…
aickin Jun 22, 2017
b6f9e06
Response to code review comment https://github.com/facebook/react/pul…
aickin Jun 23, 2017
3d1421a
Responding to code comments https://github.com/facebook/react/pull/10…
aickin Jun 24, 2017
8c3c5c7
Attempt to tweak spacing to see if it makes the prettier build step h…
aickin Jun 24, 2017
66b4e0f
Found a prettier bug that wasn't being reported by npm run prettier f…
aickin Jun 24, 2017
28c6bcc
Fixed a small prettier issue
aickin Jun 25, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/_data/nav_docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@
title: ReactDOM
- id: react-dom-server
title: ReactDOMServer
- id: react-dom-node-stream
title: ReactDOMNodeStream
- id: dom-elements
title: DOM Elements
- id: events
Expand Down
42 changes: 42 additions & 0 deletions docs/docs/reference-react-dom-node-stream.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
id: react-dom-node-stream
title: ReactDOMNodeStream
layout: docs
category: Reference
permalink: docs/react-dom-node-stream.html
---

If you use ES6 with npm, you can write `import ReactDOMNodeStream from 'react-dom/node-stream'`. If you use ES5 with npm, you can write `var ReactDOMNodeStream = require('react-dom/node-stream')`.

Unlike other packages in React, `ReactDOMNodeStream` depends on a package (`stream`) that is available in Node.js but not in the browser. For this reason, there is no `<script>` tag version of `ReactDOMNodeStream`; it is only provided as a Node.js module.

## Overview

The `ReactDOMNodeStream` object allows you to render your components in Node.js and stream the resulting markup.

- [`renderToStream()`](#rendertostream)
- [`renderToStaticStream()`](#rendertostaticstream)

* * *

## Reference

### `renderToStream()`

```javascript
ReactDOMNodeStream.renderToStream(element)
```

Render a React element to its initial HTML. This should only be used in Node.js; it will not work in the browser, since the browser does not support Node.js streams. React will return a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream will be exactly equal to what [`ReactDOMServer.renderToString`](https://facebook.github.io/react/docs/react-dom-server.html#rendertostring) would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

If you call [`ReactDOM.render()`](/react/docs/react-dom.html#render) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

* * *

### `renderToStaticStream()`

```javascript
ReactDOMNodeStream.renderToStaticStream(element)
```

Similar to [`renderToStream`](#rendertostream), except this doesn't create extra DOM attributes such as `data-reactid`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
7 changes: 7 additions & 0 deletions packages/react-dom/node-stream.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-dom-node-stream.production.min.js');
} else {
module.exports = require('./cjs/react-dom-node-stream.development.js');
}
117 changes: 117 additions & 0 deletions scripts/fiber/tests-passing.txt

Large diffs are not rendered by default.

35 changes: 31 additions & 4 deletions scripts/rollup/bundles.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,12 @@ const bundles = [
moduleName: 'ReactDOMServer',
sourceMap: false,
},
entry: 'src/renderers/dom/ReactDOMServerStreamEntry',
entry: 'src/renderers/dom/ReactDOMServerEntry',
externals: ['prop-types', 'prop-types/checkPropTypes'],
fbEntry: 'src/renderers/dom/ReactDOMServerStreamEntry',
hasteName: 'ReactDOMServerStream',
fbEntry: 'src/renderers/dom/ReactDOMServerEntry',
hasteName: 'ReactDOMServer',
isRenderer: true,
label: 'dom-server-stream',
label: 'dom-server-string',
manglePropertiesOnProd: false,
name: 'react-dom/server',
paths: [
Expand All @@ -154,6 +154,33 @@ const bundles = [
],
},

{
babelOpts: babelOptsReact,
bundleTypes: [NODE_DEV, NODE_PROD, FB_DEV, FB_PROD],
config: {
destDir: 'build/',
globals: {
react: 'React',
},
moduleName: 'ReactDOMNodeStream',
sourceMap: false,
},
entry: 'src/renderers/dom/ReactDOMNodeStreamEntry',
externals: ['prop-types', 'prop-types/checkPropTypes', 'stream'],
fbEntry: 'src/renderers/dom/ReactDOMNodeStreamEntry',
hasteName: 'ReactDOMNodeStream',
isRenderer: true,
label: 'dom-server-node-stream',
manglePropertiesOnProd: false,
name: 'react-dom/node-stream',
paths: [
'src/renderers/dom/**/*.js',
'src/renderers/shared/**/*.js',
'src/ReactVersion.js',
'src/shared/**/*.js',
],
},

/******* React ART *******/
{
babelOpts: babelOptsReactART,
Expand Down
172 changes: 114 additions & 58 deletions scripts/rollup/results.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,44 +17,44 @@
"gzip": 2581
},
"React-dev.js (FB_DEV)": {
"size": 61056,
"gzip": 15809
"size": 59124,
"gzip": 15340
},
"React-prod.js (FB_PROD)": {
"size": 29031,
"gzip": 7690
"size": 26781,
"gzip": 7214
},
"react-dom.development.js (UMD_DEV)": {
"size": 608162,
"gzip": 139430
"size": 613141,
"gzip": 140395
},
"react-dom.production.min.js (UMD_PROD)": {
"size": 125771,
"gzip": 39564
"size": 126584,
"gzip": 39853
},
"react-dom.development.js (NODE_DEV)": {
"size": 566845,
"gzip": 129774
"size": 570841,
"gzip": 130520
},
"react-dom.production.min.js (NODE_PROD)": {
"size": 122136,
"gzip": 38292
"size": 122880,
"gzip": 38546
},
"ReactDOMFiber-dev.js (FB_DEV)": {
"size": 566594,
"gzip": 129950
"size": 570125,
"gzip": 130563
},
"ReactDOMFiber-prod.js (FB_PROD)": {
"size": 426211,
"gzip": 96543
"size": 428502,
"gzip": 96996
},
"react-dom-test-utils.development.js (NODE_DEV)": {
"size": 52921,
"gzip": 13634
"size": 53025,
"gzip": 13685
},
"ReactTestUtils-dev.js (FB_DEV)": {
"size": 52865,
"gzip": 13637
"size": 52904,
"gzip": 13646
},
"ReactDOMServerStack-dev.js (FB_DEV)": {
"size": 460810,
Expand All @@ -65,20 +65,20 @@
"gzip": 81957
},
"react-dom-server.development.js (UMD_DEV)": {
"size": 306445,
"gzip": 77153
"size": 308329,
"gzip": 77617
},
"react-dom-server.production.min.js (UMD_PROD)": {
"size": 65952,
"gzip": 22521
"size": 66111,
"gzip": 22613
},
"react-dom-server.development.js (NODE_DEV)": {
"size": 265293,
"gzip": 67673
"size": 266194,
"gzip": 67866
},
"react-dom-server.production.min.js (NODE_PROD)": {
"size": 62302,
"gzip": 21232
"size": 62380,
"gzip": 21260
},
"ReactDOMServerStream-dev.js (FB_DEV)": {
"size": 264750,
Expand All @@ -89,64 +89,120 @@
"gzip": 51047
},
"react-art.development.js (UMD_DEV)": {
"size": 359725,
"gzip": 79928
"size": 362062,
"gzip": 80236
},
"react-art.production.min.js (UMD_PROD)": {
"size": 98725,
"gzip": 29981
"size": 99126,
"gzip": 30132
},
"react-art.development.js (NODE_DEV)": {
"size": 281066,
"gzip": 59839
"size": 283458,
"gzip": 60201
},
"react-art.production.min.js (NODE_PROD)": {
"size": 60110,
"gzip": 18041
"size": 60504,
"gzip": 18189
},
"ReactARTFiber-dev.js (FB_DEV)": {
"size": 280564,
"gzip": 59807
"size": 282891,
"gzip": 60125
},
"ReactARTFiber-prod.js (FB_PROD)": {
"size": 218560,
"gzip": 45484
"size": 220185,
"gzip": 45704
},
"ReactNativeStack-dev.js (RN_DEV)": {
"size": 185110,
"gzip": 35690
"size": 197039,
"gzip": 36193
},
"ReactNativeStack-prod.js (RN_PROD)": {
"size": 136665,
"gzip": 26016
"size": 136606,
"gzip": 25990
},
"ReactNativeFiber-dev.js (RN_DEV)": {
"size": 282752,
"gzip": 50685
"size": 301278,
"gzip": 51431
},
"ReactNativeFiber-prod.js (RN_PROD)": {
"size": 220854,
"gzip": 37832
"size": 221863,
"gzip": 38015
},
"react-test-renderer.development.js (NODE_DEV)": {
"size": 278560,
"gzip": 58710
"size": 280651,
"gzip": 59110
},
"ReactTestRendererFiber-dev.js (FB_DEV)": {
"size": 278049,
"gzip": 58674
"size": 280075,
"gzip": 59030
},
"react-test-renderer-shallow.development.js (NODE_DEV)": {
"size": 8108,
"gzip": 2247
"size": 8179,
"gzip": 2288
},
"ReactShallowRenderer-dev.js (FB_DEV)": {
"size": 8074,
"gzip": 2234
"size": 8080,
"gzip": 2237
},
"react-noop-renderer.development.js (NODE_DEV)": {
"size": 272256,
"gzip": 56994
"size": 274713,
"gzip": 57491
},
"ReactHTMLString-dev.js (FB_DEV)": {
"size": 265654,
"gzip": 67793
},
"ReactHTMLString-prod.js (FB_PROD)": {
"size": 197868,
"gzip": 51197
},
"react-dom-stream.development.js (UMD_DEV)": {
"size": 307410,
"gzip": 77346
},
"react-dom-stream.production.min.js (UMD_PROD)": {
"size": 66444,
"gzip": 22648
},
"react-dom-stream.development.js (NODE_DEV)": {
"size": 265257,
"gzip": 67607
},
"react-dom-stream.production.min.js (NODE_PROD)": {
"size": 62695,
"gzip": 21279
},
"ReactHTMLStream-dev.js (FB_DEV)": {
"size": 264745,
"gzip": 67531
},
"ReactHTMLStream-prod.js (FB_PROD)": {
"size": 197512,
"gzip": 50920
},
"ReactDOMServer-dev.js (FB_DEV)": {
"size": 265645,
"gzip": 67788
},
"ReactDOMServer-prod.js (FB_PROD)": {
"size": 197859,
"gzip": 51191
},
"react-dom-node-stream.development.js (NODE_DEV)": {
"size": 265427,
"gzip": 67670
},
"react-dom-node-stream.production.min.js (NODE_PROD)": {
"size": 62695,
"gzip": 21279
},
"ReactDOMNodeStream-dev.js (FB_DEV)": {
"size": 264918,
"gzip": 67597
},
"ReactDOMNodeStream-prod.js (FB_PROD)": {
"size": 197610,
"gzip": 50956
}
}
}
14 changes: 14 additions & 0 deletions src/node_modules/react-dom/node-stream.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/node_modules/react-dom/server.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading