maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ReactDOMNodeStream, adding streaming rendering. (#10024) 

* Add ReactDOMNodeStream, adding ability to stream generated HTML.

* Forgot to rename a documentation page.

* Tests are passing locally but failing on CI; attempt to fix that with this tweak.

* Adding some debugging info to try to track down CI problem.

* More debugging of CI. Yay for printf debugging.

* More printf debugging of CI to figure out what is going on with includes during tests.

* I made a truly stupid error with my printf debugging statements for CI. Fixing that.

* And another dumb copy and paste typo.

* The node-stream.js stub for tests wasn't being added because of .gitignore.

* Fix for code review coment https://github.com/facebook/react/pull/10024#discussion_r123606138 . Thanks to @razh for helping me out.

* Removing all the console.logs I put in to debug the build problems on the CI server.

* Fix for code review coment https://github.com/facebook/react/pull/10024#discussion_r123628227 . Thanks to @aweary for the suggestion.

* Response to code review comment https://github.com/facebook/react/pull/10024#discussion_r123649131 . Thanks, @gaearon.

* Responding to code comments https://github.com/facebook/react/pull/10024#pullrequestreview-46104491 , https://github.com/facebook/react/pull/10024#pullrequestreview-46104616 , and https://github.com/facebook/react/pull/10024#pullrequestreview-46104822 . Thanks to @sebmarkbage for the help.

* Attempt to tweak spacing to see if it makes the prettier build step happy.

* Found a prettier bug that wasn't being reported by npm run prettier for some reason.

* Fixed a small prettier issue
This commit is contained in:
Sasha Aickin 2017-06-24 22:31:42 -07:00 committed by GitHub
parent 55c5cc264b
commit 411e04bd71
14 changed files with 548 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_data/nav_docs.yml
View File

@ -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

42
docs/docs/reference-react-dom-node-stream.md Normal file
View File

@ -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
packages/react-dom/node-stream.js vendored Normal file
View File

@ -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
scripts/fiber/tests-passing.txt
View File

@ -882,246 +882,327 @@ src/renderers/dom/shared/__tests__/ReactDOMSVG-test.js
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
* renders a blank div with server string render
* renders a blank div with server stream render
* renders a blank div with clean client render
* renders a blank div with client render on top of good server markup
* renders a div with inline styles with server string render
* renders a div with inline styles with server stream render
* renders a div with inline styles with clean client render
* renders a div with inline styles with client render on top of good server markup
* renders a self-closing tag with server string render
* renders a self-closing tag with server stream render
* renders a self-closing tag with clean client render
* renders a self-closing tag with client render on top of good server markup
* renders a self-closing tag as a child with server string render
* renders a self-closing tag as a child with server stream render
* renders a self-closing tag as a child with clean client render
* renders a self-closing tag as a child with client render on top of good server markup
* renders simple numbers with server string render
* renders simple numbers with server stream render
* renders simple numbers with clean client render
* renders simple numbers with client render on top of good server markup
* renders simple strings with server string render
* renders simple strings with server stream render
* renders simple strings with clean client render
* renders simple strings with client render on top of good server markup
* renders string prop with true value with server string render
* renders string prop with true value with server stream render
* renders string prop with true value with clean client render
* renders string prop with true value with client render on top of good server markup
* renders string prop with false value with server string render
* renders string prop with false value with server stream render
* renders string prop with false value with clean client render
* renders string prop with false value with client render on top of good server markup
* renders boolean prop with true value with server string render
* renders boolean prop with true value with server stream render
* renders boolean prop with true value with clean client render
* renders boolean prop with true value with client render on top of good server markup
* renders boolean prop with false value with server string render
* renders boolean prop with false value with server stream render
* renders boolean prop with false value with clean client render
* renders boolean prop with false value with client render on top of good server markup
* renders boolean prop with self value with server string render
* renders boolean prop with self value with server stream render
* renders boolean prop with self value with clean client render
* renders boolean prop with self value with client render on top of good server markup
* renders boolean prop with "" value with server string render
* renders boolean prop with "" value with server stream render
* renders boolean prop with "" value with clean client render
* renders boolean prop with "" value with client render on top of good server markup
* renders boolean prop with string value with server string render
* renders boolean prop with string value with server stream render
* renders boolean prop with string value with clean client render
* renders boolean prop with string value with client render on top of good server markup
* renders boolean prop with array value with server string render
* renders boolean prop with array value with server stream render
* renders boolean prop with array value with clean client render
* renders boolean prop with array value with client render on top of good server markup
* renders boolean prop with object value with server string render
* renders boolean prop with object value with server stream render
* renders boolean prop with object value with clean client render
* renders boolean prop with object value with client render on top of good server markup
* renders boolean prop with non-zero number value with server string render
* renders boolean prop with non-zero number value with server stream render
* renders boolean prop with non-zero number value with clean client render
* renders boolean prop with non-zero number value with client render on top of good server markup
* renders boolean prop with zero value with server string render
* renders boolean prop with zero value with server stream render
* renders boolean prop with zero value with clean client render
* renders boolean prop with zero value with client render on top of good server markup
* renders download prop with true value with server string render
* renders download prop with true value with server stream render
* renders download prop with true value with clean client render
* renders download prop with true value with client render on top of good server markup
* renders download prop with false value with server string render
* renders download prop with false value with server stream render
* renders download prop with false value with clean client render
* renders download prop with false value with client render on top of good server markup
* renders download prop with string value with server string render
* renders download prop with string value with server stream render
* renders download prop with string value with clean client render
* renders download prop with string value with client render on top of good server markup
* renders download prop with string "true" value with server string render
* renders download prop with string "true" value with server stream render
* renders download prop with string "true" value with clean client render
* renders download prop with string "true" value with client render on top of good server markup
* renders className prop with string value with server string render
* renders className prop with string value with server stream render
* renders className prop with string value with clean client render
* renders className prop with string value with client render on top of good server markup
* renders className prop with empty string value with server string render
* renders className prop with empty string value with server stream render
* renders className prop with empty string value with clean client render
* renders className prop with empty string value with client render on top of good server markup
* renders className prop with true value with server string render
* renders className prop with true value with server stream render
* renders className prop with true value with clean client render
* renders className prop with true value with client render on top of good server markup
* renders className prop with false value with server string render
* renders className prop with false value with server stream render
* renders className prop with false value with clean client render
* renders className prop with false value with client render on top of good server markup
* renders htmlFor with string value with server string render
* renders htmlFor with string value with server stream render
* renders htmlFor with string value with clean client render
* renders htmlFor with string value with client render on top of good server markup
* renders htmlFor with an empty string with server string render
* renders htmlFor with an empty string with server stream render
* renders htmlFor with an empty string with clean client render
* renders htmlFor with an empty string with client render on top of good server markup
* renders className prop with true value with server string render
* renders className prop with true value with server stream render
* renders className prop with true value with clean client render
* renders className prop with true value with client render on top of good server markup
* renders className prop with false value with server string render
* renders className prop with false value with server stream render
* renders className prop with false value with clean client render
* renders className prop with false value with client render on top of good server markup
* renders no ref attribute with server string render
* renders no ref attribute with server stream render
* renders no ref attribute with clean client render
* renders no ref attribute with client render on top of good server markup
* renders no children attribute with server string render
* renders no children attribute with server stream render
* renders no children attribute with clean client render
* renders no children attribute with client render on top of good server markup
* renders no key attribute with server string render
* renders no key attribute with server stream render
* renders no key attribute with clean client render
* renders no key attribute with client render on top of good server markup
* renders no dangerouslySetInnerHTML attribute with server string render
* renders no dangerouslySetInnerHTML attribute with server stream render
* renders no dangerouslySetInnerHTML attribute with clean client render
* renders no dangerouslySetInnerHTML attribute with client render on top of good server markup
* renders no unknown attributes with server string render
* renders no unknown attributes with server stream render
* renders no unknown attributes with clean client render
* renders no unknown attributes with client render on top of good server markup
* renders unknown data- attributes with server string render
* renders unknown data- attributes with server stream render
* renders unknown data- attributes with clean client render
* renders unknown data- attributes with client render on top of good server markup
* renders no unknown attributes for non-standard elements with server string render
* renders no unknown attributes for non-standard elements with server stream render
* renders no unknown attributes for non-standard elements with clean client render
* renders no unknown attributes for non-standard elements with client render on top of good server markup
* renders unknown attributes for custom elements with server string render
* renders unknown attributes for custom elements with server stream render
* renders unknown attributes for custom elements with clean client render
* renders unknown attributes for custom elements with client render on top of good server markup
* renders unknown attributes for custom elements using is with server string render
* renders unknown attributes for custom elements using is with server stream render
* renders unknown attributes for custom elements using is with clean client render
* renders unknown attributes for custom elements using is with client render on top of good server markup
* renders no HTML events with server string render
* renders no HTML events with server stream render
* renders no HTML events with clean client render
* renders no HTML events with client render on top of good server markup
* renders a div with text with server string render
* renders a div with text with server stream render
* renders a div with text with clean client render
* renders a div with text with client render on top of good server markup
* renders a div with text with flanking whitespace with server string render
* renders a div with text with flanking whitespace with server stream render
* renders a div with text with flanking whitespace with clean client render
* renders a div with text with flanking whitespace with client render on top of good server markup
* renders a div with an empty text child with server string render
* renders a div with an empty text child with server stream render
* renders a div with an empty text child with clean client render
* renders a div with an empty text child with client render on top of good server markup
* renders a div with multiple empty text children with server string render
* renders a div with multiple empty text children with server stream render
* renders a div with multiple empty text children with clean client render
* renders a div with multiple empty text children with client render on top of good server markup
* renders a div with multiple whitespace children with server string render
* renders a div with multiple whitespace children with server stream render
* renders a div with multiple whitespace children with clean client render
* renders a div with multiple whitespace children with client render on top of good server markup
* renders a div with text sibling to a node with server string render
* renders a div with text sibling to a node with server stream render
* renders a div with text sibling to a node with clean client render
* renders a div with text sibling to a node with client render on top of good server markup
* renders a non-standard element with text with server string render
* renders a non-standard element with text with server stream render
* renders a non-standard element with text with clean client render
* renders a non-standard element with text with client render on top of good server markup
* renders a custom element with text with server string render
* renders a custom element with text with server stream render
* renders a custom element with text with clean client render
* renders a custom element with text with client render on top of good server markup
* renders a leading blank child with a text sibling with server string render
* renders a leading blank child with a text sibling with server stream render
* renders a leading blank child with a text sibling with clean client render
* renders a leading blank child with a text sibling with client render on top of good server markup
* renders a trailing blank child with a text sibling with server string render
* renders a trailing blank child with a text sibling with server stream render
* renders a trailing blank child with a text sibling with clean client render
* renders a trailing blank child with a text sibling with client render on top of good server markup
* renders an element with two text children with server string render
* renders an element with two text children with server stream render
* renders an element with two text children with clean client render
* renders an element with two text children with client render on top of good server markup
* renders a number as single child with server string render
* renders a number as single child with server stream render
* renders a number as single child with clean client render
* renders a number as single child with client render on top of good server markup
* renders zero as single child with server string render
* renders zero as single child with server stream render
* renders zero as single child with clean client render
* renders zero as single child with client render on top of good server markup
* renders an element with number and text children with server string render
* renders an element with number and text children with server stream render
* renders an element with number and text children with clean client render
* renders an element with number and text children with client render on top of good server markup
* renders null single child as blank with server string render
* renders null single child as blank with server stream render
* renders null single child as blank with clean client render
* renders null single child as blank with client render on top of good server markup
* renders false single child as blank with server string render
* renders false single child as blank with server stream render
* renders false single child as blank with clean client render
* renders false single child as blank with client render on top of good server markup
* renders undefined single child as blank with server string render
* renders undefined single child as blank with server stream render
* renders undefined single child as blank with clean client render
* renders undefined single child as blank with client render on top of good server markup
* renders a null component children as empty with server string render
* renders a null component children as empty with server stream render
* renders a null component children as empty with clean client render
* renders a null component children as empty with client render on top of good server markup
* renders null children as blank with server string render
* renders null children as blank with server stream render
* renders null children as blank with clean client render
* renders null children as blank with client render on top of good server markup
* renders false children as blank with server string render
* renders false children as blank with server stream render
* renders false children as blank with clean client render
* renders false children as blank with client render on top of good server markup
* renders null and false children together as blank with server string render
* renders null and false children together as blank with server stream render
* renders null and false children together as blank with clean client render
* renders null and false children together as blank with client render on top of good server markup
* renders only null and false children as blank with server string render
* renders only null and false children as blank with server stream render
* renders only null and false children as blank with clean client render
* renders only null and false children as blank with client render on top of good server markup
* renders an svg element with server string render
* renders an svg element with server stream render
* renders an svg element with clean client render
* renders an svg element with client render on top of good server markup
* renders svg element with an xlink with server string render
* renders svg element with an xlink with server stream render
* renders svg element with an xlink with clean client render
* renders svg element with an xlink with client render on top of good server markup
* renders a math element with server string render
* renders a math element with server stream render
* renders a math element with clean client render
* renders a math element with client render on top of good server markup
* renders an img with server string render
* renders an img with server stream render
* renders an img with clean client render
* renders an img with client render on top of good server markup
* renders a button with server string render
* renders a button with server stream render
* renders a button with clean client render
* renders a button with client render on top of good server markup
* renders a div with dangerouslySetInnerHTML with server string render
* renders a div with dangerouslySetInnerHTML with server stream render
* renders a div with dangerouslySetInnerHTML with clean client render
* renders a div with dangerouslySetInnerHTML with client render on top of good server markup
* renders a newline-eating tag with content not starting with \n with server string render
* renders a newline-eating tag with content not starting with \n with server stream render
* renders a newline-eating tag with content not starting with \n with clean client render
* renders a newline-eating tag with content not starting with \n with client render on top of good server markup
* renders a newline-eating tag with content starting with \n with server string render
* renders a newline-eating tag with content starting with \n with server stream render
* renders a newline-eating tag with content starting with \n with clean client render
* renders a newline-eating tag with content starting with \n with client render on top of good server markup
* renders a normal tag with content starting with \n with server string render
* renders a normal tag with content starting with \n with server stream render
* renders a normal tag with content starting with \n with clean client render
* renders a normal tag with content starting with \n with client render on top of good server markup
* renders stateless components with server string render
* renders stateless components with server stream render
* renders stateless components with clean client render
* renders stateless components with client render on top of good server markup
* renders ES6 class components with server string render
* renders ES6 class components with server stream render
* renders ES6 class components with clean client render
* renders ES6 class components with client render on top of good server markup
* renders factory components with server string render
* renders factory components with server stream render
* renders factory components with clean client render
* renders factory components with client render on top of good server markup
* renders single child hierarchies of components with server string render
* renders single child hierarchies of components with server stream render
* renders single child hierarchies of components with clean client render
* renders single child hierarchies of components with client render on top of good server markup
* renders multi-child hierarchies of components with server string render
* renders multi-child hierarchies of components with server stream render
* renders multi-child hierarchies of components with clean client render
* renders multi-child hierarchies of components with client render on top of good server markup
* renders a div with a child with server string render
* renders a div with a child with server stream render
* renders a div with a child with clean client render
* renders a div with a child with client render on top of good server markup
* renders a div with multiple children with server string render
* renders a div with multiple children with server stream render
* renders a div with multiple children with clean client render
* renders a div with multiple children with client render on top of good server markup
* renders a div with multiple children separated by whitespace with server string render
* renders a div with multiple children separated by whitespace with server stream render
* renders a div with multiple children separated by whitespace with clean client render
* renders a div with multiple children separated by whitespace with client render on top of good server markup
* renders a div with a single child surrounded by whitespace with server string render
* renders a div with a single child surrounded by whitespace with server stream render
* renders a div with a single child surrounded by whitespace with clean client render
* renders a div with a single child surrounded by whitespace with client render on top of good server markup
* renders >,<, and & as single child with server string render
* renders >,<, and & as single child with server stream render
* renders >,<, and & as single child with clean client render
* renders >,<, and & as single child with client render on top of good server markup
* renders >,<, and & as multiple children with server string render
* renders >,<, and & as multiple children with server stream render
* renders >,<, and & as multiple children with clean client render
* renders >,<, and & as multiple children with client render on top of good server markup
* throws when rendering a string component with server string render
@ -1143,81 +1224,107 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
* throws when rendering string with clean client render
* throws when rendering string with client render on top of bad server markup
* renders an input with a value and an onChange with server string render
* renders an input with a value and an onChange with server stream render
* renders an input with a value and an onChange with clean client render
* renders an input with a value and an onChange with client render on top of good server markup
* renders an input with a value and readOnly with server string render
* renders an input with a value and readOnly with server stream render
* renders an input with a value and readOnly with clean client render
* renders an input with a value and readOnly with client render on top of good server markup
* renders an input with a value and no onChange/readOnly with server string render
* renders an input with a value and no onChange/readOnly with server stream render
* renders an input with a value and no onChange/readOnly with clean client render
* renders an input with a value and no onChange/readOnly with client render on top of good server markup
* renders an input with a defaultValue with server string render
* renders an input with a defaultValue with server stream render
* renders an input with a defaultValue with clean client render
* renders an input with a defaultValue with client render on top of good server markup
* renders an input value overriding defaultValue with server string render
* renders an input value overriding defaultValue with server stream render
* renders an input value overriding defaultValue with clean client render
* renders an input value overriding defaultValue with client render on top of good server markup
* renders an input value overriding defaultValue no matter the prop order with server string render
* renders an input value overriding defaultValue no matter the prop order with server stream render
* renders an input value overriding defaultValue no matter the prop order with clean client render
* renders an input value overriding defaultValue no matter the prop order with client render on top of good server markup
* renders a checkbox that is checked with an onChange with server string render
* renders a checkbox that is checked with an onChange with server stream render
* renders a checkbox that is checked with an onChange with clean client render
* renders a checkbox that is checked with an onChange with client render on top of good server markup
* renders a checkbox that is checked with readOnly with server string render
* renders a checkbox that is checked with readOnly with server stream render
* renders a checkbox that is checked with readOnly with clean client render
* renders a checkbox that is checked with readOnly with client render on top of good server markup
* renders a checkbox that is checked and no onChange/readOnly with server string render
* renders a checkbox that is checked and no onChange/readOnly with server stream render
* renders a checkbox that is checked and no onChange/readOnly with clean client render
* renders a checkbox that is checked and no onChange/readOnly with client render on top of good server markup
* renders a checkbox with defaultChecked with server string render
* renders a checkbox with defaultChecked with server stream render
* renders a checkbox with defaultChecked with clean client render
* renders a checkbox with defaultChecked with client render on top of good server markup
* renders a checkbox checked overriding defaultChecked with server string render
* renders a checkbox checked overriding defaultChecked with server stream render
* renders a checkbox checked overriding defaultChecked with clean client render
* renders a checkbox checked overriding defaultChecked with client render on top of good server markup
* renders a checkbox checked overriding defaultChecked no matter the prop order with server string render
* renders a checkbox checked overriding defaultChecked no matter the prop order with server stream render
* renders a checkbox checked overriding defaultChecked no matter the prop order with clean client render
* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of good server markup
* renders a textarea with a value and an onChange with server string render
* renders a textarea with a value and an onChange with server stream render
* renders a textarea with a value and an onChange with clean client render
* renders a textarea with a value and an onChange with client render on top of good server markup
* renders a textarea with a value and readOnly with server string render
* renders a textarea with a value and readOnly with server stream render
* renders a textarea with a value and readOnly with clean client render
* renders a textarea with a value and readOnly with client render on top of good server markup
* renders a textarea with a value and no onChange/readOnly with server string render
* renders a textarea with a value and no onChange/readOnly with server stream render
* renders a textarea with a value and no onChange/readOnly with clean client render
* renders a textarea with a value and no onChange/readOnly with client render on top of good server markup
* renders a textarea with a defaultValue with server string render
* renders a textarea with a defaultValue with server stream render
* renders a textarea with a defaultValue with clean client render
* renders a textarea with a defaultValue with client render on top of good server markup
* renders a textarea value overriding defaultValue with server string render
* renders a textarea value overriding defaultValue with server stream render
* renders a textarea value overriding defaultValue with clean client render
* renders a textarea value overriding defaultValue with client render on top of good server markup
* renders a textarea value overriding defaultValue no matter the prop order with server string render
* renders a textarea value overriding defaultValue no matter the prop order with server stream render
* renders a textarea value overriding defaultValue no matter the prop order with clean client render
* renders a textarea value overriding defaultValue no matter the prop order with client render on top of good server markup
* renders a select with a value and an onChange with server string render
* renders a select with a value and an onChange with server stream render
* renders a select with a value and an onChange with clean client render
* renders a select with a value and an onChange with client render on top of good server markup
* renders a select with a value and readOnly with server string render
* renders a select with a value and readOnly with server stream render
* renders a select with a value and readOnly with clean client render
* renders a select with a value and readOnly with client render on top of good server markup
* renders a select with a multiple values and an onChange with server string render
* renders a select with a multiple values and an onChange with server stream render
* renders a select with a multiple values and an onChange with clean client render
* renders a select with a multiple values and an onChange with client render on top of good server markup
* renders a select with a multiple values and readOnly with server string render
* renders a select with a multiple values and readOnly with server stream render
* renders a select with a multiple values and readOnly with clean client render
* renders a select with a multiple values and readOnly with client render on top of good server markup
* renders a select with a value and no onChange/readOnly with server string render
* renders a select with a value and no onChange/readOnly with server stream render
* renders a select with a value and no onChange/readOnly with clean client render
* renders a select with a value and no onChange/readOnly with client render on top of good server markup
* renders a select with a defaultValue with server string render
* renders a select with a defaultValue with server stream render
* renders a select with a defaultValue with clean client render
* renders a select with a defaultValue with client render on top of good server markup
* renders a select value overriding defaultValue with server string render
* renders a select value overriding defaultValue with server stream render
* renders a select value overriding defaultValue with clean client render
* renders a select value overriding defaultValue with client render on top of good server markup
* renders a select value overriding defaultValue no matter the prop order with server string render
* renders a select value overriding defaultValue no matter the prop order with server stream render
* renders a select value overriding defaultValue no matter the prop order with clean client render
* renders a select value overriding defaultValue no matter the prop order with client render on top of good server markup
* renders a controlled text input with clean client render
@ -1235,33 +1342,43 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
* should not blow away user-selected value on successful reconnect to an uncontrolled select
* should not blow away user-selected value on successful reconnect to an controlled select
* renders class child with context with server string render
* renders class child with context with server stream render
* renders class child with context with clean client render
* renders class child with context with client render on top of good server markup
* renders stateless child with context with server string render
* renders stateless child with context with server stream render
* renders stateless child with context with clean client render
* renders stateless child with context with client render on top of good server markup
* renders class child without context with server string render
* renders class child without context with server stream render
* renders class child without context with clean client render
* renders class child without context with client render on top of good server markup
* renders stateless child without context with server string render
* renders stateless child without context with server stream render
* renders stateless child without context with clean client render
* renders stateless child without context with client render on top of good server markup
* renders class child with wrong context with server string render
* renders class child with wrong context with server stream render
* renders class child with wrong context with clean client render
* renders class child with wrong context with client render on top of good server markup
* renders stateless child with wrong context with server string render
* renders stateless child with wrong context with server stream render
* renders stateless child with wrong context with clean client render
* renders stateless child with wrong context with client render on top of good server markup
* renders with context passed through to a grandchild with server string render
* renders with context passed through to a grandchild with server stream render
* renders with context passed through to a grandchild with clean client render
* renders with context passed through to a grandchild with client render on top of good server markup
* renders a child context overriding a parent context with server string render
* renders a child context overriding a parent context with server stream render
* renders a child context overriding a parent context with clean client render
* renders a child context overriding a parent context with client render on top of good server markup
* renders a child context merged with a parent context with server string render
* renders a child context merged with a parent context with server stream render
* renders a child context merged with a parent context with clean client render
* renders a child context merged with a parent context with client render on top of good server markup
* renders with a call to componentWillMount before getChildContext with server string render
* renders with a call to componentWillMount before getChildContext with server stream render
* renders with a call to componentWillMount before getChildContext with clean client render
* renders with a call to componentWillMount before getChildContext with client render on top of good server markup
* throws when rendering if getChildContext exists without childContextTypes with server string render

35
scripts/rollup/bundles.js
View File

@ -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: [
@ -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,

172
scripts/rollup/results.json
View File

@ -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,
@ -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,
@ -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
src/node_modules/react-dom/node-stream.js generated vendored Normal file
View File

@ -0,0 +1,14 @@
/**
* Copyright 2016-present Facebook. All Rights Reserved.
*
* @flow
*/
'use strict';
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var useFiber = ReactDOMFeatureFlags.useFiber;
module.exports = useFiber
? require('ReactDOMNodeStreamEntry')
: null;

2
src/node_modules/react-dom/server.js generated vendored
View File

@ -10,5 +10,5 @@ var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var useFiber = ReactDOMFeatureFlags.useFiber;
module.exports = useFiber
? require('ReactDOMServerStreamEntry')
? require('ReactDOMServerEntry')
: require('ReactDOMServerStackEntry');

12
src/renderers/dom/ReactDOMServerStreamEntry.js → src/renderers/dom/ReactDOMNodeStreamEntry.js
View File

@ -6,21 +6,19 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMServerStreamEntry
* @providesModule ReactDOMNodeStreamEntry
*/
'use strict';
var ReactDOMInjection = require('ReactDOMInjection');
var ReactServerRenderer = require('ReactServerRenderer');
var ReactDOMNodeStreamRenderer = require('ReactDOMNodeStreamRenderer');
var ReactVersion = require('ReactVersion');
ReactDOMInjection.inject();
var ReactDOMServerStream = {
renderToString: ReactServerRenderer.renderToString,
renderToStaticMarkup: ReactServerRenderer.renderToStaticMarkup,
module.exports = {
renderToStream: ReactDOMNodeStreamRenderer.renderToStream,
renderToStaticStream: ReactDOMNodeStreamRenderer.renderToStaticStream,
version: ReactVersion,
};
module.exports = ReactDOMServerStream;

66
src/renderers/dom/ReactDOMNodeStreamRenderer.js Normal file
View File

@ -0,0 +1,66 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMNodeStreamRenderer
*/
'use strict';
var invariant = require('fbjs/lib/invariant');
var React = require('react');
var ReactPartialRenderer = require('ReactPartialRenderer');
var Readable = require('stream').Readable;
// This is a Readable Node.js stream which wraps the ReactDOMPartialRenderer.
class ReactMarkupReadableStream extends Readable {
constructor(element, makeStaticMarkup) {
// Calls the stream.Readable(options) constructor. Consider exposing built-in
// features like highWaterMark in the future.
super({});
this.partialRenderer = new ReactPartialRenderer(element, makeStaticMarkup);
}
_read(size) {
try {
this.push(this.partialRenderer.read(size));
} catch (err) {
this.emit('error', err);
}
}
}
/**
* Render a ReactElement to its initial HTML. This should only be used on the
* server.
* See https://facebook.github.io/react/docs/react-dom-stream.html#rendertostream
*/
function renderToStream(element) {
invariant(
React.isValidElement(element),
'renderToStream(): You must pass a valid ReactElement.',
);
return new ReactMarkupReadableStream(element, false);
}
/**
* Similar to renderToStream, except this doesn't create extra DOM attributes
* such as data-react-id that React uses internally.
* See https://facebook.github.io/react/docs/react-dom-stream.html#rendertostaticstream
*/
function renderToStaticStream(element) {
invariant(
React.isValidElement(element),
'renderToStaticStream(): You must pass a valid ReactElement.',
);
return new ReactMarkupReadableStream(element, true);
}
module.exports = {
renderToStream: renderToStream,
renderToStaticStream: renderToStaticStream,
};

24
src/renderers/dom/ReactDOMServerEntry.js Normal file
View File

@ -0,0 +1,24 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMServerEntry
*/
'use strict';
var ReactDOMInjection = require('ReactDOMInjection');
var ReactDOMStringRenderer = require('ReactDOMStringRenderer');
var ReactVersion = require('ReactVersion');
ReactDOMInjection.inject();
module.exports = {
renderToString: ReactDOMStringRenderer.renderToString,
renderToStaticMarkup: ReactDOMStringRenderer.renderToStaticMarkup,
version: ReactVersion,
};

53
src/renderers/dom/ReactDOMStringRenderer.js Normal file
View File

@ -0,0 +1,53 @@
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMStringRenderer
*/
'use strict';
var invariant = require('fbjs/lib/invariant');
var React = require('react');
var ReactMarkupChecksum = require('ReactMarkupChecksum');
var ReactPartialRenderer = require('ReactPartialRenderer');
/**
* Render a ReactElement to its initial HTML. This should only be used on the
* server.
* See https://facebook.github.io/react/docs/react-dom-server.html#rendertostring
*/
function renderToString(element) {
invariant(
React.isValidElement(element),
'renderToString(): You must pass a valid ReactElement.',
);
var renderer = new ReactPartialRenderer(element, false);
var markup = renderer.read(Infinity);
markup = ReactMarkupChecksum.addChecksumToMarkup(markup);
return markup;
}
/**
* Similar to renderToString, except this doesn't create extra DOM attributes
* such as data-react-id that React uses internally.
* See https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup
*/
function renderToStaticMarkup(element) {
invariant(
React.isValidElement(element),
'renderToStaticMarkup(): You must pass a valid ReactElement.',
);
var renderer = new ReactPartialRenderer(element, true);
var markup = renderer.read(Infinity);
return markup;
}
module.exports = {
renderToString: renderToString,
renderToStaticMarkup: renderToStaticMarkup,
};

82
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
View File

@ -11,14 +11,18 @@
'use strict';
let ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
let ExecutionEnvironment;
let PropTypes;
let React;
let ReactDOM;
let ReactDOMServer;
let ReactDOMFeatureFlags;
let ReactDOMNodeStream;
let ReactTestUtils;
const stream = require('stream');
// Helper functions for rendering tests
// ====================================
@ -87,6 +91,42 @@ async function serverRender(reactElement, errorCount = 0) {
return domElement.firstChild;
}
// this just drains a readable piped into it to a string, which can be accessed
// via .buffer.
class DrainWritable extends stream.Writable {
constructor(options) {
super(options);
this.buffer = '';
}
_write(chunk, encoding, cb) {
this.buffer += chunk;
cb();
}
}
async function renderIntoStream(reactElement, errorCount = 0) {
return await expectErrors(
() =>
new Promise(resolve => {
let writable = new DrainWritable();
ReactDOMNodeStream.renderToStream(reactElement).pipe(writable);
writable.on('finish', () => resolve(writable.buffer));
}),
errorCount,
);
}
// Renders text using node stream SSR and then stuffs it into a DOM node;
// returns the DOM element that corresponds with the reactElement.
// Does not render on client or perform client-side revival.
async function streamRender(reactElement, errorCount = 0) {
const markup = await renderIntoStream(reactElement, errorCount);
var domElement = document.createElement('div');
domElement.innerHTML = markup;
return domElement.firstChild;
}
const clientCleanRender = (element, errorCount = 0) => {
const div = document.createElement('div');
return renderIntoDom(element, div, errorCount);
@ -149,6 +189,9 @@ const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
// as that will not work in the server string scenario.
function itRenders(desc, testFn) {
it(`renders ${desc} with server string render`, () => testFn(serverRender));
if (ReactDOMFeatureFlags.useFiber) {
it(`renders ${desc} with server stream render`, () => testFn(streamRender));
}
itClientRenders(desc, testFn);
}
@ -246,6 +289,7 @@ function resetModules() {
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactDOMNodeStream = require('react-dom/node-stream');
ReactTestUtils = require('react-dom/test-utils');
// TODO: can we express this test with only public API?
ExecutionEnvironment = require('ExecutionEnvironment');
@ -558,7 +602,7 @@ describe('ReactDOMServerIntegration', () => {
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just three separate text node children,
// each of which is blank.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
// For plain server markup result we expect six comment nodes.
expect(e.childNodes.length).toBe(6);
expect(e.textContent).toBe('');
@ -581,7 +625,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{' '}{' '}{' '}</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just three text nodes.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(9);
expectTextNode(e.childNodes[1], ' ');
expectTextNode(e.childNodes[4], ' ');
@ -605,7 +649,10 @@ describe('ReactDOMServerIntegration', () => {
itRenders('a div with text sibling to a node', async render => {
const e = await render(<div>Text<span>More Text</span></div>);
let spanNode;
if (ReactDOMFeatureFlags.useFiber && render !== serverRender) {
if (
ReactDOMFeatureFlags.useFiber &&
(render !== serverRender && render !== streamRender)
) {
// with Fiber, there are only two children, the "Text" text node and
// the span element.
expect(e.childNodes.length).toBe(2);
@ -616,7 +663,10 @@ describe('ReactDOMServerIntegration', () => {
expect(e.childNodes.length).toBe(4);
spanNode = e.childNodes[3];
}
if (ReactDOMFeatureFlags.useFiber && render === serverRender) {
if (
ReactDOMFeatureFlags.useFiber &&
(render === serverRender || render === streamRender)
) {
expectTextNode(e.childNodes[1], 'Text');
} else {
expectTextNode(e.childNodes[0], 'Text');
@ -644,7 +694,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{''}foo</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just two text nodes.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(5);
expectTextNode(e.childNodes[3], 'foo');
} else {
@ -666,7 +716,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>foo{''}</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just two text nodes.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(5);
expectTextNode(e.childNodes[1], 'foo');
} else {
@ -688,7 +738,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{'foo'}{'bar'}</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just two text nodes.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(6);
expectTextNode(e.childNodes[1], 'foo');
expectTextNode(e.childNodes[4], 'bar');
@ -723,7 +773,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{'foo'}{40}</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just two text nodes.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(6);
expectTextNode(e.childNodes[1], 'foo');
expectTextNode(e.childNodes[4], '40');
@ -763,7 +813,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div><NullComponent /></div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, an empty component results in no markup.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(1);
expectEmptyNode(e.firstChild);
} else {
@ -781,7 +831,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{null}foo</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there is just one text node.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(3);
expectTextNode(e.childNodes[1], 'foo');
} else {
@ -799,7 +849,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{false}foo</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there is just one text node.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(3);
expectTextNode(e.childNodes[1], 'foo');
} else {
@ -817,7 +867,7 @@ describe('ReactDOMServerIntegration', () => {
const e = await render(<div>{false}{null}foo{null}{false}</div>);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there is just one text node.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(3);
expectTextNode(e.childNodes[1], 'foo');
} else {
@ -1022,7 +1072,7 @@ describe('ReactDOMServerIntegration', () => {
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are three children: the child1 element, a
// single space text node, and the child2 element.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(5);
child1 = e.childNodes[0];
textNode = e.childNodes[2];
@ -1058,7 +1108,7 @@ describe('ReactDOMServerIntegration', () => {
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are three children: a one-space text node, the
// child element, and a two-space text node.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(7);
textNode1 = e.childNodes[1];
child = e.childNodes[3];
@ -1100,7 +1150,7 @@ describe('ReactDOMServerIntegration', () => {
);
if (ReactDOMFeatureFlags.useFiber) {
// with Fiber, there are just two text nodes.
if (render === serverRender) {
if (render === serverRender || render === streamRender) {
expect(e.childNodes.length).toBe(6);
expectTextNode(e.childNodes[1], '<span>Text1&quot;</span>');
expectTextNode(e.childNodes[4], '<span>Text2&quot;</span>');

45
src/renderers/shared/server/ReactServerRenderer.js → src/renderers/shared/server/ReactPartialRenderer.js
View File

@ -6,7 +6,7 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactServerRenderer
* @providesModule ReactPartialRenderer
*/
'use strict';
@ -16,7 +16,6 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
var {registrationNameModules} = require('EventPluginRegistry');
var React = require('react');
var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
var ReactMarkupChecksum = require('ReactMarkupChecksum');
var assertValidProps = require('assertValidProps');
var checkPropTypes = require('prop-types/checkPropTypes');
@ -354,6 +353,10 @@ class ReactDOMServerRenderer {
}
read(bytes) {
if (this.exhausted) {
return null;
}
var out = '';
while (out.length < bytes) {
if (this.stack.length === 0) {
@ -687,40 +690,4 @@ class ReactDOMServerRenderer {
}
}
/**
* Render a ReactElement to its initial HTML. This should only be used on the
* server.
* See https://facebook.github.io/react/docs/react-dom-server.html#rendertostring
*/
function renderToString(element) {
invariant(
React.isValidElement(element),
'renderToString(): You must pass a valid ReactElement.',
);
var renderer = new ReactDOMServerRenderer(element, false);
var markup = renderer.read(Infinity);
markup = ReactMarkupChecksum.addChecksumToMarkup(markup);
return markup;
}
/**
* Similar to renderToString, except this doesn't create extra DOM attributes
* such as data-react-id that React uses internally.
* See https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup
*/
function renderToStaticMarkup(element) {
invariant(
React.isValidElement(element),
'renderToStaticMarkup(): You must pass a valid ReactElement.',
);
var renderer = new ReactDOMServerRenderer(element, true);
var markup = renderer.read(Infinity);
return markup;
}
var ReactServerRenderer = {
renderToString: renderToString,
renderToStaticMarkup: renderToStaticMarkup,
};
module.exports = ReactServerRenderer;
module.exports = ReactDOMServerRenderer;