Add package builds for new server renderer and enable tests (facebook…

…#9710)

* Adjust some expectations of the server markup format of Fiber

Currently this case is using the stack renderer.

* Ensure debug hooks are injected into the Stack server renderer

In our tests this normally happens because ReactDOM.js injects them into
the shared module, but when Fiber is enabled or this is its own flat
bundle, that doesn't happen.

* Add package builds for new server renderer and enable tests

ReactServer -> ReactDOMServerStream

This file is going to be the replacement for ReactDOMServer.

I mock ReactDOMServer and user ReactDOMServerStream when we have
the fiber flag enabled. I'm now also enabling this as the default for
distributions builds (react-dom/server on npm and
react-dom-server.production.min.js as umd bundle).

I'm using traverseStackChildren instead of traverseAllChildren because
traverseAllChildren is now only in the isomorphic package and we don't
want to build all of that that into the server package.

I also have to require lower case react for the builds to work.

scripts/fiber/tests-failing.txt

@@ -46,34 +46,23 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders a div with text with client render on top of good server markup
 * 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 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 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 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 client render on top of good server markup
 * renders a non-standard element with text with client render on top of good server markup
 * 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 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 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 client render on top of good server markup
 * renders a number as single child with client render on top of good server markup
 * 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 client render on top of good server markup
 * renders null single child as blank with client render on top of good server markup
 * renders false single child as blank with client render on top of good server markup
 * 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 client render on top of good server markup
-* renders null children as blank with server string 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 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 client render on top of good server markup
 * renders only null and false children as blank with client render on top of good server markup
 * renders an svg element with client render on top of good server markup
@@ -92,12 +81,9 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders multi-child hierarchies of components with client render on top of good server markup
 * renders a div with a child with client render on top of good server markup
 * 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 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 client render on top of good server markup
 * 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 client render on top of good server markup
 * 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 client render on top of good server markup

scripts/fiber/tests-passing-except-dev.txt

@@ -1,7 +1,4 @@
 src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
-* should warn about incorrect casing on properties (ssr)
-* should warn about incorrect casing on event handlers (ssr)
-* should warn about class (ssr)
 * should suggest property name if available (ssr)
 
 src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -38,10 +35,8 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders no children attribute with client render on top of bad server markup
 * renders no key attribute with client render on top of bad server markup
 * renders no dangerouslySetInnerHTML attribute with client render on top of bad server markup
-* renders no unknown attributes with server string render
 * renders no unknown attributes with client render on top of bad server markup
 * renders unknown data- attributes with client render on top of bad server markup
-* renders no unknown attributes for non-standard elements with server string render
 * renders no unknown attributes for non-standard elements with client render on top of bad server markup
 * renders unknown attributes for custom elements with client render on top of bad server markup
 * renders unknown attributes for custom elements using is with client render on top of bad server markup

scripts/fiber/tests-passing.txt

@@ -929,9 +929,12 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
 * warns on invalid nesting at root
 * warns nicely for table rows
 * gives useful context in warnings
+* should warn about incorrect casing on properties (ssr)
+* should warn about incorrect casing on event handlers (ssr)
 * should warn about incorrect casing on properties
 * should warn about incorrect casing on event handlers
 * should warn about class
+* should warn about class (ssr)
 * should warn about props that are no longer supported
 * should warn about props that are no longer supported (ssr)
 * gives source code refs for unknown prop warning
@@ -1034,9 +1037,11 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders no key attribute with clean client render
 * renders no dangerouslySetInnerHTML attribute with server string render
 * renders no dangerouslySetInnerHTML attribute with clean client render
+* renders no unknown attributes with server string render
 * renders no unknown attributes with clean client render
 * renders unknown data- attributes with server string render
 * renders unknown data- attributes with clean client render
+* renders no unknown attributes for non-standard elements with server string render
 * renders no unknown attributes for non-standard elements with clean client render
 * renders unknown attributes for custom elements with server string render
 * renders unknown attributes for custom elements with clean client render
@@ -1050,30 +1055,41 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders a div with text with flanking whitespace with clean client render
 * renders a div with an empty text child with server string render
 * renders a div with an empty text child with clean client render
+* renders a div with multiple empty text children with server string render
 * renders a div with multiple empty text children with clean client render
+* renders a div with multiple whitespace children with server string render
 * renders a div with multiple whitespace children with clean client render
+* renders a div with text sibling to a node with server string render
 * renders a div with text sibling to a node with clean client render
 * renders a non-standard element with text with server string render
 * renders a non-standard element with text with clean client render
 * renders a custom element with text with server string render
 * renders a custom element with text with clean client render
+* renders a leading blank child with a text sibling with server string render
 * renders a leading blank child with a text sibling with clean client render
+* renders a trailing blank child with a text sibling with server string render
 * renders a trailing blank child with a text sibling with clean client render
+* renders an element with two text children with server string render
 * renders an element with two text children with clean client render
 * renders a number as single child with server string render
 * renders a number as single child with clean client render
 * renders zero as single child with server string render
 * renders zero as single child with clean client render
+* renders an element with number and text children with server string render
 * renders an element with number and text children with clean client render
 * renders null single child as blank with server string render
 * renders null single child as blank with clean client render
 * renders false single child as blank with server string render
 * renders false single child as blank with clean client render
 * renders undefined single child as blank with server string render
 * renders undefined single child as blank with clean client render
+* renders a null component children as empty with server string render
 * renders a null component children as empty with clean client render
+* renders null children as blank with server string render
 * renders null children as blank with clean client render
+* renders false children as blank with server string render
 * renders false children as blank with clean client render
+* renders null and false children together as blank with server string render
 * renders null and false children together as blank with clean client render
 * renders only null and false children as blank with server string render
 * renders only null and false children as blank with clean client render
@@ -1109,10 +1125,13 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders a div with a child with clean client render
 * renders a div with multiple children with server string render
 * renders a div with multiple children with clean client render
+* renders a div with multiple children separated by whitespace with server string render
 * renders a div with multiple children separated by whitespace with clean client render
+* 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 clean client render
 * renders >,<, and & as single child with server string render
 * renders >,<, and & as single child with clean client render
+* renders >,<, and & as multiple children with server string render
 * renders >,<, and & as multiple children with clean client render
 * throws when rendering a string component with server string render
 * throws when rendering an undefined component with server string render

scripts/jest/test-framework-setup.js

@@ -3,6 +3,7 @@
 // We want to globally mock this but jest doesn't let us do that by default
 // for a file that already exists. So we have to explicitly mock it.
 jest.mock('ReactDOM');
+jest.mock('ReactDOMServer');
 jest.mock('ReactNative');
 jest.mock('ReactDOMFeatureFlags', () => {
   const flags = require.requireActual('ReactDOMFeatureFlags');

scripts/rollup/bundles.js

@@ -158,8 +158,7 @@ const bundles = [
   /******* React DOM Server *******/
   {
     babelOpts: babelOptsReact,
-    // TODO: deal with the Node version of react-dom-server package
-    bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_DEV, FB_PROD],
+    bundleTypes: [FB_DEV, FB_PROD],
     config: {
       destDir: 'build/',
       globals: {
@@ -169,27 +168,46 @@ const bundles = [
       sourceMap: false,
     },
     entry: 'src/renderers/dom/ReactDOMServer.js',
-    externals: [
-      'prop-types',
-      'prop-types/checkPropTypes',
-      'create-react-class/factory',
-    ],
+    externals: ['prop-types', 'prop-types/checkPropTypes'],
     fbEntry: 'src/renderers/dom/ReactDOMServer.js',
     hasteName: 'ReactDOMServerStack',
     isRenderer: true,
-    label: 'dom-server',
+    label: 'dom-server-stack',
+    manglePropertiesOnProd: false,
+    name: 'react-dom-stack/server',
+    paths: [
+      'src/renderers/dom/**/*.js',
+      'src/renderers/shared/**/*.js',
+      'src/ReactVersion.js',
+      'src/shared/**/*.js',
+    ],
+  },
+  {
+    babelOpts: babelOptsReact,
+    bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_DEV, FB_PROD],
+    config: {
+      destDir: 'build/',
+      globals: {
+        react: 'React',
+      },
+      moduleName: 'ReactDOMServer',
+      sourceMap: false,
+    },
+    entry: 'src/renderers/dom/ReactDOMServerStream.js',
+    externals: ['prop-types', 'prop-types/checkPropTypes'],
+    fbEntry: 'src/renderers/dom/ReactDOMServerStream.js',
+    hasteName: 'ReactDOMServerStream',
+    isRenderer: true,
+    label: 'dom-server-stream',
     manglePropertiesOnProd: false,
     name: 'react-dom/server',
     paths: [
-      'src/isomorphic/**/*.js',
       'src/renderers/dom/**/*.js',
       'src/renderers/shared/**/*.js',
       'src/ReactVersion.js',
       'src/shared/**/*.js',
-      'src/addons/**/*.js',
     ],
   },
-  // TODO: there is no Fiber version of ReactDOMServer.
 
   /******* React ART *******/
   {

src/renderers/dom/ReactDOMServer.js

@@ -25,4 +25,15 @@ var ReactDOMServer = {
   version: ReactVersion,
 };
 
+if (__DEV__) {
+  var ReactInstrumentation = require('ReactInstrumentation');
+  var ReactDOMUnknownPropertyHook = require('ReactDOMUnknownPropertyHook');
+  var ReactDOMNullInputValuePropHook = require('ReactDOMNullInputValuePropHook');
+  var ReactDOMInvalidARIAHook = require('ReactDOMInvalidARIAHook');
+
+  ReactInstrumentation.debugTool.addHook(ReactDOMUnknownPropertyHook);
+  ReactInstrumentation.debugTool.addHook(ReactDOMNullInputValuePropHook);
+  ReactInstrumentation.debugTool.addHook(ReactDOMInvalidARIAHook);
+}
+
 module.exports = ReactDOMServer;

src/renderers/server/ReactServer.js → src/renderers/dom/ReactDOMServerStream.js

@@ -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 ReactServer
+ * @providesModule ReactDOMServerStream
  */
 
 'use strict';
@@ -19,10 +19,10 @@ var ReactVersion = require('ReactVersion');
 ReactDOMInjection.inject();
 ReactDOMStackInjection.inject();
 
-var ReactServer = {
+var ReactDOMServer = {
   renderToString: ReactServerRenderer.renderToString,
   renderToStaticMarkup: ReactServerRenderer.renderToStaticMarkup,
   version: ReactVersion,
 };
 
-module.exports = ReactServer;
+module.exports = ReactDOMServer;

src/renderers/dom/__mocks__/ReactDOMServer.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2013-2015, 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.
+ */
+
+'use strict';
+
+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+
+var useFiber = ReactDOMFeatureFlags.useFiber;
+
+module.exports = useFiber
+  ? require('ReactDOMServerStream')
+  : require.requireActual('ReactDOMServer');