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

Use single entry point for SSR via browser field (#10362) 

* Use single entry point for SSR via browser field

* Add server.browser entry point and smoke tests

* Tweak bundle naming

* Fix import

* Re-record

* Fix the robot nits

* Add resetModules for some extra isolation
This commit is contained in:
Dan Abramov 2017-08-03 00:41:09 +01:00 committed by GitHub
parent 630afb3186
commit fc86ef0f3d
12 changed files with 222 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/react-dom/node-stream.js vendored
View File

@ -1,7 +0,0 @@
'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');
}

5
packages/react-dom/package.json
View File

@ -27,12 +27,15 @@
"README.md",
"index.js",
"server.js",
"node-stream.js",
"server.browser.js",
"test-utils.js",
"unstable-native-dependencies.js",
"cjs/",
"umd/"
],
"browser": {
"./server.js": "./server.browser.js"
},
"browserify": {
"transform": [
"loose-envify"

7
packages/react-dom/server.browser.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-dom-server.browser.production.min.js');
} else {
module.exports = require('./cjs/react-dom-server.browser.development.js');
}

4
packages/react-dom/server.js vendored
View File

@ -1,7 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-dom-server.production.min.js');
module.exports = require('./cjs/react-dom-server.node.production.min.js');
} else {
module.exports = require('./cjs/react-dom-server.development.js');
module.exports = require('./cjs/react-dom-server.node.development.js');
}

14
scripts/rollup/bundles.js
View File

@ -172,14 +172,14 @@ const bundles = [
moduleName: 'ReactDOMServer',
sourceMap: false,
},
entry: 'src/renderers/dom/ReactDOMServerEntry',
entry: 'src/renderers/dom/ReactDOMServerBrowserEntry',
externals: ['prop-types', 'prop-types/checkPropTypes'],
fbEntry: 'src/renderers/dom/ReactDOMServerEntry',
fbEntry: 'src/renderers/dom/ReactDOMServerBrowserEntry',
hasteName: 'ReactDOMServer',
isRenderer: true,
label: 'dom-server-string',
label: 'dom-server-browser',
manglePropertiesOnProd: false,
name: 'react-dom/server',
name: 'react-dom/server.browser',
paths: [
'src/renderers/dom/**/*.js',
'src/renderers/shared/**/*.js',
@ -199,12 +199,12 @@ const bundles = [
moduleName: 'ReactDOMNodeStream',
sourceMap: false,
},
entry: 'src/renderers/dom/ReactDOMNodeStreamEntry',
entry: 'src/renderers/dom/ReactDOMServerNodeEntry',
externals: ['prop-types', 'prop-types/checkPropTypes', 'stream'],
isRenderer: true,
label: 'dom-server-node-stream',
label: 'dom-server-server-node',
manglePropertiesOnProd: false,
name: 'react-dom/node-stream',
name: 'react-dom/server.node',
paths: [
'src/renderers/dom/**/*.js',
'src/renderers/shared/**/*.js',

272
scripts/rollup/results.json
View File

@ -25,184 +25,36 @@
"gzip": 6703
},
"react-dom.development.js (UMD_DEV)": {
"size": 639824,
"gzip": 145999
"size": 640604,
"gzip": 146616
},
"react-dom.production.min.js (UMD_PROD)": {
"size": 121920,
"gzip": 38871
"size": 121735,
"gzip": 38859
},
"react-dom.development.js (NODE_DEV)": {
"size": 599220,
"gzip": 136402
"size": 599999,
"gzip": 136960
},
"react-dom.production.min.js (NODE_PROD)": {
"size": 118838,
"gzip": 37788
"size": 118657,
"gzip": 37769
},
"ReactDOMFiber-dev.js (FB_DEV)": {
"size": 595749,
"gzip": 135868
"size": 596499,
"gzip": 136409
},
"ReactDOMFiber-prod.js (FB_PROD)": {
"size": 431003,
"gzip": 96867
"size": 430689,
"gzip": 96928
},
"react-dom-test-utils.development.js (NODE_DEV)": {
"size": 56074,
"gzip": 14162
"size": 55917,
"gzip": 14141
},
"ReactTestUtils-dev.js (FB_DEV)": {
"size": 55864,
"gzip": 14128
},
"ReactDOMServerStack-dev.js (FB_DEV)": {
"size": 460810,
"gzip": 111966
},
"ReactDOMServerStack-prod.js (FB_PROD)": {
"size": 338222,
"gzip": 81957
},
"react-dom-server.development.js (UMD_DEV)": {
"size": 122993,
"gzip": 31032
},
"react-dom-server.production.min.js (UMD_PROD)": {
"size": 22819,
"gzip": 8627
},
"react-dom-server.development.js (NODE_DEV)": {
"size": 92141,
"gzip": 23593
},
"react-dom-server.production.min.js (NODE_PROD)": {
"size": 21214,
"gzip": 8026
},
"ReactDOMServerStream-dev.js (FB_DEV)": {
"size": 264750,
"gzip": 67600
},
"ReactDOMServerStream-prod.js (FB_PROD)": {
"size": 198041,
"gzip": 51047
},
"react-art.development.js (UMD_DEV)": {
"size": 373050,
"gzip": 82463
},
"react-art.production.min.js (UMD_PROD)": {
"size": 94183,
"gzip": 29145
},
"react-art.development.js (NODE_DEV)": {
"size": 294419,
"gzip": 62436
},
"react-art.production.min.js (NODE_PROD)": {
"size": 55748,
"gzip": 17250
},
"ReactARTFiber-dev.js (FB_DEV)": {
"size": 293279,
"gzip": 62507
},
"ReactARTFiber-prod.js (FB_PROD)": {
"size": 220571,
"gzip": 45660
},
"ReactNativeStack-dev.js (RN_DEV)": {
"size": 188445,
"gzip": 36695
},
"ReactNativeStack-prod.js (RN_PROD)": {
"size": 137361,
"gzip": 26398
},
"ReactNativeFiber-dev.js (RN_DEV)": {
"size": 290148,
"gzip": 52574
},
"ReactNativeFiber-prod.js (RN_PROD)": {
"size": 224144,
"gzip": 38909
},
"react-test-renderer.development.js (NODE_DEV)": {
"size": 291782,
"gzip": 61299
},
"ReactTestRendererFiber-dev.js (FB_DEV)": {
"size": 290600,
"gzip": 61383
},
"react-test-renderer-shallow.development.js (NODE_DEV)": {
"size": 10302,
"gzip": 2587
},
"ReactShallowRenderer-dev.js (FB_DEV)": {
"size": 10208,
"gzip": 2541
},
"react-noop-renderer.development.js (NODE_DEV)": {
"size": 285709,
"gzip": 59710
},
"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": 91224,
"gzip": 23517
},
"ReactDOMServer-prod.js (FB_PROD)": {
"size": 55353,
"gzip": 15240
},
"react-dom-node-stream.development.js (NODE_DEV)": {
"size": 93872,
"gzip": 24085
},
"react-dom-node-stream.production.min.js (NODE_PROD)": {
"size": 22057,
"gzip": 8338
},
"ReactDOMNodeStream-dev.js (FB_DEV)": {
"size": 264918,
"gzip": 67597
},
"ReactDOMNodeStream-prod.js (FB_PROD)": {
"size": 197610,
"gzip": 50956
"size": 55707,
"gzip": 14105
},
"react-dom-unstable-native-dependencies.development.js (UMD_DEV)": {
"size": 89486,
@ -227,6 +79,98 @@
"ReactDOMUnstableNativeDependencies-prod.js (FB_PROD)": {
"size": 67256,
"gzip": 16011
},
"react-dom-server.browser.development.js (UMD_DEV)": {
"size": 123259,
"gzip": 31130
},
"react-dom-server.browser.production.min.js (UMD_PROD)": {
"size": 22069,
"gzip": 8359
},
"react-dom-server.browser.development.js (NODE_DEV)": {
"size": 92395,
"gzip": 23727
},
"react-dom-server.browser.production.min.js (NODE_PROD)": {
"size": 20470,
"gzip": 7751
},
"ReactDOMServer-dev.js (FB_DEV)": {
"size": 91478,
"gzip": 23641
},
"ReactDOMServer-prod.js (FB_PROD)": {
"size": 49904,
"gzip": 13944
},
"react-dom-server.node.development.js (NODE_DEV)": {
"size": 95082,
"gzip": 24294
},
"react-dom-server.node.production.min.js (NODE_PROD)": {
"size": 21375,
"gzip": 8033
},
"react-art.development.js (UMD_DEV)": {
"size": 373020,
"gzip": 82667
},
"react-art.production.min.js (UMD_PROD)": {
"size": 94024,
"gzip": 29099
},
"react-art.development.js (NODE_DEV)": {
"size": 294390,
"gzip": 62633
},
"react-art.production.min.js (NODE_PROD)": {
"size": 55594,
"gzip": 17147
},
"ReactARTFiber-dev.js (FB_DEV)": {
"size": 293221,
"gzip": 62686
},
"ReactARTFiber-prod.js (FB_PROD)": {
"size": 220287,
"gzip": 45716
},
"ReactNativeStack-dev.js (RN_DEV)": {
"size": 188445,
"gzip": 36695
},
"ReactNativeStack-prod.js (RN_PROD)": {
"size": 137361,
"gzip": 26398
},
"ReactNativeFiber-dev.js (RN_DEV)": {
"size": 290448,
"gzip": 52727
},
"ReactNativeFiber-prod.js (RN_PROD)": {
"size": 224421,
"gzip": 39029
},
"react-test-renderer.development.js (NODE_DEV)": {
"size": 292225,
"gzip": 61530
},
"ReactTestRendererFiber-dev.js (FB_DEV)": {
"size": 291017,
"gzip": 61598
},
"react-test-renderer-shallow.development.js (NODE_DEV)": {
"size": 10145,
"gzip": 2581
},
"ReactShallowRenderer-dev.js (FB_DEV)": {
"size": 10051,
"gzip": 2533
},
"react-noop-renderer.development.js (NODE_DEV)": {
"size": 286152,
"gzip": 59943
}
}
}

4
src/node_modules/react-dom/node-stream.js → src/node_modules/react-dom/server.browser.js generated vendored
View File

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

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('ReactDOMServerEntry')
? require('ReactDOMServerNodeEntry')
: require('ReactDOMServerStackEntry');

17
src/renderers/dom/ReactDOMServerEntry.js → src/renderers/dom/ReactDOMServerBrowserEntry.js
View File

@ -6,18 +6,33 @@
* 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
* @providesModule ReactDOMServerBrowserEntry
*/
'use strict';
var ReactDOMStringRenderer = require('ReactDOMStringRenderer');
var ReactVersion = require('ReactVersion');
var invariant = require('fbjs/lib/invariant');
require('ReactDOMInjection');
module.exports = {
renderToString: ReactDOMStringRenderer.renderToString,
renderToStaticMarkup: ReactDOMStringRenderer.renderToStaticMarkup,
renderToStream() {
invariant(
false,
'ReactDOMServer.renderToStream(): The streaming API is not available ' +
'in the browser. Use ReactDOMServer.renderToString() instead.',
);
},
renderToStaticStream() {
invariant(
false,
'ReactDOMServer.renderToStaticStream(): The streaming API is not available ' +
'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
);
},
version: ReactVersion,
};

5
src/renderers/dom/ReactDOMNodeStreamEntry.js → src/renderers/dom/ReactDOMServerNodeEntry.js
View File

@ -6,17 +6,20 @@
* 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 ReactDOMNodeStreamEntry
* @providesModule ReactDOMServerNodeEntry
*/
'use strict';
var ReactDOMStringRenderer = require('ReactDOMStringRenderer');
var ReactDOMNodeStreamRenderer = require('ReactDOMNodeStreamRenderer');
var ReactVersion = require('ReactVersion');
require('ReactDOMInjection');
module.exports = {
renderToString: ReactDOMStringRenderer.renderToString,
renderToStaticMarkup: ReactDOMStringRenderer.renderToStaticMarkup,
renderToStream: ReactDOMNodeStreamRenderer.renderToStream,
renderToStaticStream: ReactDOMNodeStreamRenderer.renderToStaticStream,
version: ReactVersion,

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

@ -18,7 +18,6 @@ let PropTypes;
let React;
let ReactDOM;
let ReactDOMServer;
let ReactDOMNodeStream;
let ReactTestUtils;
const stream = require('stream');
@ -120,7 +119,7 @@ async function renderIntoStream(reactElement, errorCount = 0) {
() =>
new Promise(resolve => {
let writable = new DrainWritable();
ReactDOMNodeStream.renderToStream(reactElement).pipe(writable);
ReactDOMServer.renderToStream(reactElement).pipe(writable);
writable.on('finish', () => resolve(writable.buffer));
}),
errorCount,
@ -347,14 +346,6 @@ function resetModules() {
}
require('ReactFeatureFlags').disableNewFiberFeatures = false;
ReactDOMServer = require('react-dom/server');
// Finally, reset modules one more time before importing the stream renderer.
jest.resetModuleRegistry();
if (typeof onAfterResetModules === 'function') {
onAfterResetModules();
}
require('ReactFeatureFlags').disableNewFiberFeatures = false;
ReactDOMNodeStream = require('react-dom/node-stream');
}
describe('ReactDOMServerIntegration', () => {

70
src/renderers/dom/shared/__tests__/ReactServerRenderingBrowser-test.js Normal file
View File

@ -0,0 +1,70 @@
/**
* 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.
*
* @emails react-core
*/
'use strict';
var React;
var ReactDOMServer;
var ReactDOMServerBrowser;
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
describe('ReactServerRenderingBrowser', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOMServer = require('react-dom/server');
// For extra isolation between what would be two bundles on npm
jest.resetModuleRegistry();
ReactDOMServerBrowser = require('react-dom/server.browser');
});
it('provides the same top-level API as react-dom/server', () => {
expect(Object.keys(ReactDOMServerBrowser)).toEqual(
Object.keys(ReactDOMServer),
);
});
it('returns the same results as react-dom/server', () => {
class Nice extends React.Component {
render() {
return <h2>I am feeling very good today, thanks, how are you?</h2>;
}
}
function Greeting() {
return (
<div>
<h1>How are you?</h1>
<Nice />
</div>
);
}
expect(ReactDOMServerBrowser.renderToString(<Greeting />)).toEqual(
ReactDOMServer.renderToString(<Greeting />),
);
expect(ReactDOMServerBrowser.renderToStaticMarkup(<Greeting />)).toEqual(
ReactDOMServer.renderToStaticMarkup(<Greeting />),
);
});
if (ReactDOMFeatureFlags.useFiber) {
it('throws meaningfully for server-only APIs', () => {
expect(() => ReactDOMServerBrowser.renderToStream(<div />)).toThrow(
'ReactDOMServer.renderToStream(): The streaming API is not available ' +
'in the browser. Use ReactDOMServer.renderToString() instead.',
);
expect(() => ReactDOMServerBrowser.renderToStaticStream(<div />)).toThrow(
'ReactDOMServer.renderToStaticStream(): The streaming API is not available ' +
'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
);
});
}
});