Convert current build system to Rollup and adopt flat bundles (#9327)

* WIP

* fbjs support

* WIP

* dev/prod mode WIP

* More WIP

* builds a cjs bundle

* adding forwarding modules

* more progress on forwarding modules and FB config

* improved how certain modules get inlined for fb and cjs

* more forwarding modules

* added comments to the module aliasing code

* made ReactPerf and ReactTestUtils bundle again

* Use -core suffix for all bundles

This makes it easier to override things in www.

* Add a lazy shim for ReactPerf

This prevents a circular dependency between ReactGKJSModule and ReactDOM

* Fix forwarding module for ReactCurrentOwner

* Revert "Add a lazy shim for ReactPerf"

This reverts commit 723b402c07.

* Rename -core suffix to -fb for clarity

* Change forwarding modules to import from -fb

This is another, more direct fix for ReactPerf circular dependency

* should fix fb and cjs bundles for ReactCurrentOwner

* added provides module for ReactCurrentOwner

* should improve console output

* fixed typo with argument passing on functon call

* Revert "should improve console output"

This breaks the FB bundles.

This reverts commit 65f11ee64f.

* Work around internal FB transform require() issue

* moved  ReactInstanceMap out of React and into ReactDOM and ReactDOMFiber

* Expose more internal modules to www

* Add missing modules to Stack ReactDOM to fix UFI

* Fix onlyChild module

* improved the build tool

* Add a rollup npm script

* Rename ReactDOM-fb to ReactDOMStack-fb

* Fix circular dependencies now that ReactDOM-fb is a GK switch

* Revert "Work around internal FB transform require() issue"

This reverts commit 0a50b6a90b.

* Bump rollup-plugin-commonjs to include a fix for rollup/rollup-plugin-commonjs#176

* Add more forwarding modules that are used on www

* Add even more forwarding modules that are used on www

* Add DOMProperty to hidden exports

* Externalize feature flags

This lets www specify them dynamically.

* Remove forwarding modules with implementations

Instead I'm adding them to react-fb in my diff.

* Add all injection necessary for error logging

* Add missing forwarding module (oops)

* Add ReactART builds

* Add ReactDOMServer bundle

* Fix UMD build of ReactDOMFiber

* Work in progress: start adding ReactNative bundle

* tidied up the options for bundles, so they can define what types they output and exclude

* Add a working RN build

* further improved and tidied up build process

* improved how bundles are built by exposing externals and making the process less "magical", also tidied up code and added more comments

* better handling of bundling ReactCurrentOwner and accessing it from renderer modules

* added NODE_DEV and NODE_PROD

* added NPM package creation and copying into build chain

* Improved UMD bundles, added better fixture testing and doc plus prod builds

* updated internal modules (WIP)

* removed all react/lib/* dependencies from appearing in bundles created on build

* added react-test-renderer bundles

* renamed bundles and paths

* fixed fixture path changes

* added extract-errors support

* added extractErrors warning

* moved shims to shims directory in rollup scripts

* changed pathing to use build rather than build/rollup

* updated release doc to reflect some rollup changes

* Updated ReactNative findNodeHandle() to handle number case (#9238)

* Add dynamic injection to ReactErrorUtils (#9246)

* Fix ReactErrorUtils injection (#9247)

* Fix Haste name

* Move files around

* More descriptive filenames

* Add missing ReactErrorUtils shim

* Tweak reactComponentExpect to make it standalone-ish in www

* Unflowify shims

* facebook-www shims now get copied over correctly to build

* removed unnecessary resolve

* building facebook-www/build is now all sync to prevent IO issues plus handles extra facebook-www src assets

* removed react-native-renderer package and made build make a react-native build dir instead

* 😭😭😭

* Add more SSR unit tests for elements and children. (#9221)

* Adding more SSR unit tests for elements and children.

* Some of my SSR tests were testing for react-text and react-empty elements that no longer exist in Fiber. Fixed the tests so that they expect correct markup in Fiber.

* Tweaked some test names after @gaearon review comment https://github.com/facebook/react/pull/9221#discussion_r107045673 . Also realized that one of the tests was essentially a direct copy of another, so deleted it.

* Responding to code review https://github.com/facebook/react/pull/9221#pullrequestreview-28996315 . Thanks @spicyj!

* ReactElementValidator uses temporary ReactNative View propTypes getter (#9256)

* Updating packages for 16.0.0-alpha.6 release

* Revert "😭😭😭"

This reverts commit 7dba33b2cf.

* Work around Jest issue with CurrentOwner shared state in www

* updated error codes

* splits FB into FB_DEV and FB_PROD

* Remove deps on specific builds from shims

* should no longer mangle FB_PROD output

* Added init() dev block to ReactTestUtils

* added shims for DEV only code so it does not get included in prod bundles

* added a __DEV__ wrapping code to FB_DEV

* added __DEV__ flag behind a footer/header

* Use right haste names

* keeps comments in prod

* added external babel helpers plugin

* fixed fixtures and updated cjs/umd paths

* Fixes Jest so it run tests correctly

* fixed an issue with stubbed modules not properly being replaced due to greedy replacement

* added a WIP solution for ReactCurrentOwner on FB DEV

* adds a FB_TEST bundle

* allows both ReactCurrentOwner and react/lib/ReactCurrentOwner

* adds -test to provides module name

* Remove TEST env

* Ensure requires stay at the top

* added basic mangle support (disbaled by default)

* per bundle property mangling added

* moved around plugin order to try and fix deadcode requires as per https://github.com/rollup/rollup/issues/855

* Fix flow issues

* removed gulp and grunt and moved tasks to standalone node script

* configured circleci to use new paths

* Fix lint

* removed gulp-extract-errors

* added test_build.sh back in

* added missing newline to flow.js

* fixed test coverage command

* changed permissions on test_build.sh

* fixed test_html_generations.sh

* temp removed html render test

* removed the warning output from test_build, the build should do this instead

* fixed test_build

* fixed broken npm script

* Remove unused ViewportMetrics shim

* better error output

* updated circleci to node 7 for async/await

* Fixes

* removed coverage test from circleci run

* circleci run tets

* removed build from circlci

* made a dedicated jest script in a new process

* moved order around of circlci tasks

* changing path to jest in more circleci tests

* re-enabled code coverage

* Add file header to prod bundles

* Remove react-dom/server.js (WIP: decide on the plan)

* Only UMD bundles need version header

* Merge with master

* disabled const evaluation by uglify for <script></script> string literal

* deal with ART modules for UMD bundles

* improved how bundle output gets printed

* fixed filesize difference reporting

* added filesize dep

* Update yarn lockfile for some reason

* now compares against the last run branch built on

* added react-dom-server

* removed un-needed comment

* results only get saved on full builds

* moved the rollup sized plugin into a plugins directory

* added a missing commonjs()

* fixed missing ignore

* Hack around to fix RN bundle

* Partially fix RN bundles

* added react-art bundle and a fixture for it

* Point UMD bundle to Fiber and add EventPluginHub to exported internals

* Make it build on Node 4

* fixed eslint error with resolve being defined in outer scope

* Tweak how build results are calculated and stored

* Tweak fixtures build to work on Node 4

* Include LICENSE/PATENTS and fix up package.json files

* Add Node bundle for react-test-renderer

* Revert "Hack around to fix RN bundle"

We'll do this later.

This reverts commit 59445a6259.

* Revert more RN changes

We'll do them separately later

* Revert more unintentional changes

* Revert changes to error codes

* Add accidentally deleted RN externals

* added RN_DEV/RN_PROD bundles

* fixed typo where RN_DEV and RN_PROD were the wrong way around

* Delete/ignore fixture build outputs

* Format scripts/ with Prettier

* tidied up the Rollup build process and split functions into various different files to improve readability

* Copy folder before files

* updated yarn.lock

* updated results and yarn dependencies to the latest versions
This commit is contained in:
Dominic Gannaway
2017-04-05 16:47:29 +01:00
committed by GitHub
parent d99b3fc6d6
commit 4b2eac3de7
240 changed files with 7988 additions and 4697 deletions
+1
View File
@@ -11,3 +11,4 @@
'use strict';
/*:: export type ErrorMap = { [id: string]: string; }; */
@@ -37,11 +37,11 @@ describe('dev-expression', () => {
it('should replace __DEV__ in if', () => {
compare(
`
`
if (__DEV__) {
console.log('foo')
}`,
`
`
if (process.env.NODE_ENV !== 'production') {
console.log('foo');
}`
@@ -57,9 +57,8 @@ if (process.env.NODE_ENV !== 'production') {
it("should add `reactProdInvariant` when it finds `require('invariant')`", () => {
compare(
"var invariant = require('invariant');",
`var _prodInvariant = require('reactProdInvariant');
"var invariant = require('invariant');",
`var _prodInvariant = require('reactProdInvariant');
var invariant = require('invariant');`
);
@@ -69,27 +68,24 @@ var invariant = require('invariant');`
compare(
"invariant(condition, 'Do not override existing functions.');",
"var _prodInvariant = require('reactProdInvariant');\n\n" +
"!condition ? " +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Do not override existing functions.') : " +
`_prodInvariant('16') : void 0;`
'!condition ? ' +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Do not override existing functions.') : " +
`_prodInvariant('16') : void 0;`
);
});
it("should only add `reactProdInvariant` once", () => {
var expectedInvariantTransformResult = (
"!condition ? " +
it('should only add `reactProdInvariant` once', () => {
var expectedInvariantTransformResult = '!condition ? ' +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Do not override existing functions.') : " +
`_prodInvariant('16') : void 0;`
);
`_prodInvariant('16') : void 0;`;
compare(
`var invariant = require('invariant');
`var invariant = require('invariant');
invariant(condition, 'Do not override existing functions.');
invariant(condition, 'Do not override existing functions.');`,
`var _prodInvariant = require('reactProdInvariant');
`var _prodInvariant = require('reactProdInvariant');
var invariant = require('invariant');
${expectedInvariantTransformResult}
@@ -101,10 +97,10 @@ ${expectedInvariantTransformResult}`
compare(
"invariant(condition, 'Expected %s target to be an array; got %s', 'foo', 'bar');",
"var _prodInvariant = require('reactProdInvariant');\n\n" +
"!condition ? " +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Expected %s target to be an array; got %s', 'foo', 'bar') : " +
`_prodInvariant('7', 'foo', 'bar') : void 0;`
'!condition ? ' +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Expected %s target to be an array; got %s', 'foo', 'bar') : " +
`_prodInvariant('7', 'foo', 'bar') : void 0;`
);
});
@@ -112,10 +108,10 @@ ${expectedInvariantTransformResult}`
compare(
"invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', 'Foo', 'Bar');",
"var _prodInvariant = require('reactProdInvariant');\n\n" +
"!condition ? " +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Expected a component class, got %s.%s', 'Foo', 'Bar') : " +
`_prodInvariant('18', 'Foo', 'Bar') : void 0;`
'!condition ? ' +
"process.env.NODE_ENV !== 'production' ? " +
"invariant(false, 'Expected a component class, got %s.%s', 'Foo', 'Bar') : " +
`_prodInvariant('18', 'Foo', 'Bar') : void 0;`
);
});
@@ -126,9 +122,9 @@ ${expectedInvariantTransformResult}`
expect(console.warn.calls.count()).toBe(1);
expect(console.warn.calls.argsFor(0)[0]).toBe(
'Error message "a %s b" ' +
'cannot be found. The current React version ' +
'and the error map are probably out of sync. ' +
'Please run `gulp react:extract-errors` before building React.'
'cannot be found. The current React version ' +
'and the error map are probably out of sync. ' +
'Please run `yarn build -- --extractErrors` to build React with the error map in sync.'
);
});
@@ -11,11 +11,9 @@
var evalToString = require('../evalToString');
var babylon = require('babylon');
var parse = (source) => babylon.parse(
`(${source});`
).program.body[0].expression; // quick way to get an exp node
var parse = source => babylon.parse(`(${source});`).program.body[0].expression; // quick way to get an exp node
var parseAndEval = (source) => evalToString(parse(source));
var parseAndEval = source => evalToString(parse(source));
describe('evalToString', () => {
it('should support StringLiteral', () => {
@@ -28,9 +26,15 @@ describe('evalToString', () => {
});
it('should throw when it finds other types', () => {
expect(() => parseAndEval(`'foo ' + true`)).toThrowError(/Unsupported type/);
expect(() => parseAndEval(`'foo ' + true`)).toThrowError(
/Unsupported type/
);
expect(() => parseAndEval(`'foo ' + 3`)).toThrowError(/Unsupported type/);
expect(() => parseAndEval(`'foo ' + null`)).toThrowError(/Unsupported type/);
expect(() => parseAndEval(`'foo ' + undefined`)).toThrowError(/Unsupported type/);
expect(() => parseAndEval(`'foo ' + null`)).toThrowError(
/Unsupported type/
);
expect(() => parseAndEval(`'foo ' + undefined`)).toThrowError(
/Unsupported type/
);
});
});
@@ -10,7 +10,7 @@
var invertObject = require('../invertObject');
var objectValues = (target) => Object.keys(target).map((key) => target[key]);
var objectValues = target => Object.keys(target).map(key => target[key]);
describe('invertObject', () => {
it('should return an empty object for an empty input', () => {
@@ -18,37 +18,49 @@ describe('invertObject', () => {
});
it('should invert key-values', () => {
expect(invertObject({
a: '3',
b: '4',
})).toEqual({
expect(
invertObject({
a: '3',
b: '4',
})
).toEqual({
3: 'a',
4: 'b',
});
});
it('should take the last value when there\'re duplications in vals', () => {
expect(invertObject({
a: '3',
b: '4',
c: '3',
})).toEqual({
it("should take the last value when there're duplications in vals", () => {
expect(
invertObject({
a: '3',
b: '4',
c: '3',
})
).toEqual({
4: 'b',
3: 'c',
});
});
it('should preserve the original order', () => {
expect(Object.keys(invertObject({
a: '3',
b: '4',
c: '3',
}))).toEqual(['3', '4']);
expect(
Object.keys(
invertObject({
a: '3',
b: '4',
c: '3',
})
)
).toEqual(['3', '4']);
expect(objectValues(invertObject({
a: '3',
b: '4',
c: '3',
}))).toEqual(['c', 'b']);
expect(
objectValues(
invertObject({
a: '3',
b: '4',
c: '3',
})
)
).toEqual(['c', 'b']);
});
});
+1 -1
View File
@@ -144,4 +144,4 @@
"142": "Expected onBeforeMountComponent() parent and onSetChildren() to be consistent (%s has parents %s and %s).",
"143": "React.Children.only expected to receive a single React element child.",
"144": "React.PropTypes type checking code is stripped in production."
}
}
@@ -22,13 +22,14 @@ module.exports = function(babel) {
// Generate a hygienic identifier
function getProdInvariantIdentifier(path, localState) {
if (!localState.prodInvariantIdentifier) {
localState.prodInvariantIdentifier = path.scope.generateUidIdentifier('prodInvariant');
localState.prodInvariantIdentifier = path.scope.generateUidIdentifier(
'prodInvariant'
);
path.scope.getProgramParent().push({
id: localState.prodInvariantIdentifier,
init: t.callExpression(
t.identifier('require'),
[t.stringLiteral('reactProdInvariant')]
),
init: t.callExpression(t.identifier('require'), [
t.stringLiteral('reactProdInvariant'),
]),
});
}
return localState.prodInvariantIdentifier;
@@ -37,11 +38,7 @@ module.exports = function(babel) {
var DEV_EXPRESSION = t.binaryExpression(
'!==',
t.memberExpression(
t.memberExpression(
t.identifier('process'),
t.identifier('env'),
false
),
t.memberExpression(t.identifier('process'), t.identifier('env'), false),
t.identifier('NODE_ENV'),
false
),
@@ -122,42 +119,46 @@ module.exports = function(babel) {
node[SEEN_SYMBOL] = true;
if (process.env.NODE_ENV !== 'test') {
console.warn(
'Error message "' + errorMsgLiteral +
'" cannot be found. The current React version ' +
'and the error map are probably out of sync. ' +
'Please run `gulp react:extract-errors` before building React.'
'Error message "' +
errorMsgLiteral +
'" cannot be found. The current React version ' +
'and the error map are probably out of sync. ' +
'Please run `yarn build -- --extractErrors` to ' +
'build React with the error map in sync.'
);
}
return;
}
var devInvariant = t.callExpression(node.callee, [
t.booleanLiteral(false),
t.stringLiteral(errorMsgLiteral),
].concat(node.arguments.slice(2)));
var devInvariant = t.callExpression(
node.callee,
[
t.booleanLiteral(false),
t.stringLiteral(errorMsgLiteral),
].concat(node.arguments.slice(2))
);
devInvariant[SEEN_SYMBOL] = true;
var localInvariantId = getProdInvariantIdentifier(path, this);
var prodInvariant = t.callExpression(localInvariantId, [
t.stringLiteral(prodErrorId),
].concat(node.arguments.slice(2)));
var prodInvariant = t.callExpression(
localInvariantId,
[t.stringLiteral(prodErrorId)].concat(node.arguments.slice(2))
);
prodInvariant[SEEN_SYMBOL] = true;
path.replaceWith(t.ifStatement(
t.unaryExpression('!', condition),
t.blockStatement([
t.ifStatement(
DEV_EXPRESSION,
t.blockStatement([
t.expressionStatement(devInvariant),
]),
t.blockStatement([
t.expressionStatement(prodInvariant),
])
),
])
));
path.replaceWith(
t.ifStatement(
t.unaryExpression('!', condition),
t.blockStatement([
t.ifStatement(
DEV_EXPRESSION,
t.blockStatement([t.expressionStatement(devInvariant)]),
t.blockStatement([t.expressionStatement(prodInvariant)])
),
])
)
);
} else if (path.get('callee').isIdentifier({name: 'warning'})) {
// Turns this code:
//
@@ -174,14 +175,12 @@ module.exports = function(babel) {
// invariant because we don't care about an extra call in __DEV__
node[SEEN_SYMBOL] = true;
path.replaceWith(t.ifStatement(
DEV_EXPRESSION,
t.blockStatement([
t.expressionStatement(
node
),
])
));
path.replaceWith(
t.ifStatement(
DEV_EXPRESSION,
t.blockStatement([t.expressionStatement(node)])
)
);
}
},
},
+1 -1
View File
@@ -10,7 +10,7 @@
*/
'use strict';
function evalToString(ast/* : Object */)/* : string */ {
function evalToString(ast /* : Object */) /* : string */ {
switch (ast.type) {
case 'StringLiteral':
return ast.value;
@@ -8,19 +8,14 @@
*/
'use strict';
var babylon = require('babylon');
var fs = require('fs');
var gutil = require('gulp-util');
var path = require('path');
var through = require('through2');
var traverse = require('babel-traverse').default;
const babylon = require('babylon');
const fs = require('fs');
const path = require('path');
const traverse = require('babel-traverse').default;
const evalToString = require('./evalToString');
const invertObject = require('./invertObject');
var evalToString = require('./evalToString');
var invertObject = require('./invertObject');
var PLUGIN_NAME = 'extract-errors';
var babylonOptions = {
const babylonOptions = {
sourceType: 'module',
// As a parser, babylon has its own options and we can't directly
// import/require a babel preset. It should be kept **the same** as
@@ -37,8 +32,7 @@ var babylonOptions = {
module.exports = function(opts) {
if (!opts || !('errorMapFilePath' in opts)) {
throw new gutil.PluginError(
PLUGIN_NAME,
throw new Error(
'Missing options. Ensure you pass an object with `errorMapFilePath`.'
);
}
@@ -46,9 +40,10 @@ module.exports = function(opts) {
var errorMapFilePath = opts.errorMapFilePath;
var existingErrorMap;
try {
existingErrorMap = require(
path.join(__dirname, path.basename(errorMapFilePath))
);
existingErrorMap = require(path.join(
__dirname,
path.basename(errorMapFilePath)
));
} catch (e) {
existingErrorMap = {};
}
@@ -56,7 +51,8 @@ module.exports = function(opts) {
var allErrorIDs = Object.keys(existingErrorMap);
var currentID;
if (allErrorIDs.length === 0) { // Map is empty
if (allErrorIDs.length === 0) {
// Map is empty
currentID = 0;
} else {
currentID = Math.max.apply(null, allErrorIDs) + 1;
@@ -65,18 +61,7 @@ module.exports = function(opts) {
// Here we invert the map object in memory for faster error code lookup
existingErrorMap = invertObject(existingErrorMap);
function transform(file, enc, cb) {
if (file.isNull()) {
cb(null, file);
return;
}
if (file.isStream()) {
cb(new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
return;
}
var source = file.contents.toString();
function transform(source) {
var ast = babylon.parse(source, babylonOptions);
traverse(ast, {
@@ -92,26 +77,25 @@ module.exports = function(opts) {
return;
}
existingErrorMap[errorMsgLiteral] = '' + (currentID++);
existingErrorMap[errorMsgLiteral] = '' + currentID++;
}
},
},
});
cb();
}
function flush(cb) {
fs.writeFile(
fs.writeFileSync(
errorMapFilePath,
JSON.stringify(invertObject(existingErrorMap), null, 2) + '\n',
'utf-8',
function() {
// avoid calling cb with fs.write callback data
cb();
}
'utf-8'
);
}
return through.obj(transform, flush);
return function extractErrors(filepath) {
const source = fs.readFileSync(filepath, 'utf-8');
transform(source);
flush();
};
};
+1 -1
View File
@@ -18,7 +18,7 @@
* into
* { 0: 'MUCH ERROR', 1: 'SUCH WRONG' }
*/
function invertObject(targetObj/* : ErrorMap */)/* : ErrorMap */ {
function invertObject(targetObj /* : ErrorMap */) /* : ErrorMap */ {
var result = {};
var mapKeys = Object.keys(targetObj);
+4 -4
View File
@@ -18,7 +18,6 @@ const evalToString = require('./evalToString');
const paths = require('../../gulpfile').paths;
const babylonOptions = {
sourceType: 'module',
// As a parser, babylon has its own options and we can't directly
@@ -70,8 +69,9 @@ const sourcePaths = [].concat(
paths.reactTestRenderer.src
);
gs(sourcePaths)
.pipe(through.obj(transform, cb => {
gs(sourcePaths).pipe(
through.obj(transform, cb => {
process.stdout.write(Array.from(warnings).sort().join('\n') + '\n');
cb();
}));
})
);