From 531017ab12073cf669db3b77edbb691e0104463d Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Tue, 9 Aug 2016 15:08:32 -0700 Subject: [PATCH] Build renderers into their individual npm packages This copies modules into three separate packages instead of putting it all in React. The overlap in shared and between renderers gets duplicated. This allows the isomorphic package to stay minimal. It can also be used as a direct dependency without much risk. This also allow us to ship versions to each renderer independently and we can ship renderers without updating the main react package dependency. --- grunt/config/browserify.js | 29 ++-- grunt/tasks/npm-react-addons.js | 15 +- grunt/tasks/npm-react-dom.js | 3 + grunt/tasks/npm-react-native.js | 3 + grunt/tasks/npm-react.js | 2 +- gulpfile.js | 145 ++++++++++++++++-- package.json | 1 + packages/react-dom/index.js | 2 +- packages/react-dom/package.json | 14 +- packages/react-dom/server.js | 2 +- packages/react-linked-input/LinkedInput.js | 2 +- packages/react-native-renderer/index.js | 2 +- packages/react-native-renderer/package.json | 7 +- .../stack/event}/SyntheticEvent.js | 0 14 files changed, 192 insertions(+), 35 deletions(-) rename src/renderers/{dom/client/syntheticEvents => shared/stack/event}/SyntheticEvent.js (100%) diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js index e7d2674b61afa..43db0ff424246 100644 --- a/grunt/config/browserify.js +++ b/grunt/config/browserify.js @@ -16,9 +16,11 @@ var envifyProd = envify({NODE_ENV: process.env.NODE_ENV || 'production'}); var SECRET_INTERNALS_NAME = 'React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'; -var shimSharedModules = globalShim.configure({ +var shimSharedModulesFiles = { + // Shared state './ReactCurrentOwner': SECRET_INTERNALS_NAME + '.ReactCurrentOwner', './ReactComponentTreeHook': SECRET_INTERNALS_NAME + '.ReactComponentTreeHook', + // All these methods are shared are exposed. // The methods we used here are exposed on the main React export. // TODO: Change all renderer code to require the isomorphic React directly // instead of these internals. @@ -26,7 +28,14 @@ var shimSharedModules = globalShim.configure({ './ReactElement': 'React', './ReactPropTypes': 'React.PropTypes', './ReactChildren': 'React.Children', -}); +}; + +// We can access these as absolute or relative. We need to shim both. +for (var key in shimSharedModulesFiles) { + shimSharedModulesFiles[key.replace(/^\.\//, 'react/lib/')] = shimSharedModulesFiles[key]; +} + +var shimSharedModules = globalShim.configure(shimSharedModulesFiles); var shimDOMModules = aliasify.configure({ 'aliases': { @@ -72,7 +81,7 @@ function simpleBannerify(src) { // Our basic config which we'll add to to make our other builds var basic = { entries: [ - './build/modules/ReactUMDEntry.js', + './build/node_modules/react/lib/ReactUMDEntry.js', ], outfile: './build/react.js', debug: false, @@ -85,7 +94,7 @@ var basic = { var min = { entries: [ - './build/modules/ReactUMDEntry.js', + './build/node_modules/react/lib/ReactUMDEntry.js', ], outfile: './build/react.min.js', debug: false, @@ -103,7 +112,7 @@ var min = { var addons = { entries: [ - './build/modules/ReactWithAddonsUMDEntry.js', + './build/node_modules/react/lib/ReactWithAddonsUMDEntry.js', ], outfile: './build/react-with-addons.js', debug: false, @@ -117,7 +126,7 @@ var addons = { var addonsMin = { entries: [ - './build/modules/ReactWithAddonsUMDEntry.js', + './build/node_modules/react/lib/ReactWithAddonsUMDEntry.js', ], outfile: './build/react-with-addons.min.js', debug: false, @@ -135,7 +144,7 @@ var addonsMin = { // The DOM Builds var dom = { entries: [ - './build/modules/ReactDOMUMDEntry.js', + './build/node_modules/react-dom/lib/ReactDOMUMDEntry.js', ], outfile: './build/react-dom.js', debug: false, @@ -149,7 +158,7 @@ var dom = { var domMin = { entries: [ - './build/modules/ReactDOMUMDEntry.js', + './build/node_modules/react-dom/lib/ReactDOMUMDEntry.js', ], outfile: './build/react-dom.min.js', debug: false, @@ -167,7 +176,7 @@ var domMin = { var domServer = { entries: [ - './build/modules/ReactDOMServerUMDEntry.js', + './build/node_modules/react-dom/lib/ReactDOMServerUMDEntry.js', ], outfile: './build/react-dom-server.js', debug: false, @@ -181,7 +190,7 @@ var domServer = { var domServerMin = { entries: [ - './build/modules/ReactDOMServerUMDEntry.js', + './build/node_modules/react-dom/lib/ReactDOMServerUMDEntry.js', ], outfile: './build/react-dom-server.min.js', debug: false, diff --git a/grunt/tasks/npm-react-addons.js b/grunt/tasks/npm-react-addons.js index 0f3d088d9ccaa..4aa0132a15791 100644 --- a/grunt/tasks/npm-react-addons.js +++ b/grunt/tasks/npm-react-addons.js @@ -6,46 +6,55 @@ var path = require('path'); var addons = { CSSTransitionGroup: { + package: 'react', module: 'ReactCSSTransitionGroup', name: 'css-transition-group', docs: 'animation', }, LinkedStateMixin: { + package: 'react', module: 'LinkedStateMixin', name: 'linked-state-mixin', docs: 'two-way-binding-helpers', }, Perf: { + package: 'react-dom', module: 'ReactPerf', name: 'perf', docs: 'perf', }, PureRenderMixin: { + package: 'react', module: 'ReactComponentWithPureRenderMixin', name: 'pure-render-mixin', docs: 'pure-render-mixin', }, TestUtils: { + package: 'react-dom', module: 'ReactTestUtils', name: 'test-utils', docs: 'test-utils', }, TransitionGroup: { + package: 'react', module: 'ReactTransitionGroup', name: 'transition-group', docs: 'animation', }, createFragment: { + package: 'react', module: 'ReactFragment', method: 'create', name: 'create-fragment', docs: 'create-fragment', }, shallowCompare: { + package: 'react', module: 'shallowCompare', name: 'shallow-compare', }, updates: { + package: 'react', module: 'update', name: 'update', docs: 'update', @@ -54,9 +63,11 @@ var addons = { function generateSource(info) { var pieces = [ - "module.exports = require('react/lib/", + 'module.exports = require(\'', + info.package, + '/lib/', info.module, - "')", + '\')', ]; if (info.method) { pieces.push('.', info.method); diff --git a/grunt/tasks/npm-react-dom.js b/grunt/tasks/npm-react-dom.js index 9856f1b6da9ee..859e95ac3d34d 100644 --- a/grunt/tasks/npm-react-dom.js +++ b/grunt/tasks/npm-react-dom.js @@ -5,6 +5,8 @@ var grunt = require('grunt'); var src = 'packages/react-dom/'; var dest = 'build/packages/react-dom/'; +var modSrc = 'build/node_modules/react-dom/lib'; +var lib = dest + 'lib/'; var dist = dest + 'dist/'; var distFiles = [ 'react-dom.js', @@ -21,6 +23,7 @@ function buildRelease() { // Copy to build/packages/react-dom var mappings = [].concat( grunt.file.expandMapping('**/*', dest, {cwd: src}), + grunt.file.expandMapping('**/*', lib, {cwd: modSrc}), grunt.file.expandMapping('{LICENSE,PATENTS}', dest) ); mappings.forEach(function(mapping) { diff --git a/grunt/tasks/npm-react-native.js b/grunt/tasks/npm-react-native.js index 7157e08f6bb3b..4aa8b9ec698a7 100644 --- a/grunt/tasks/npm-react-native.js +++ b/grunt/tasks/npm-react-native.js @@ -5,6 +5,8 @@ var grunt = require('grunt'); var src = 'packages/react-native-renderer/'; var dest = 'build/packages/react-native-renderer/'; +var modSrc = 'build/node_modules/react-native/lib'; +var lib = dest + 'lib/'; function buildRelease() { if (grunt.file.exists(dest)) { @@ -14,6 +16,7 @@ function buildRelease() { // Copy to build/packages/react-native-renderer var mappings = [].concat( grunt.file.expandMapping('**/*', dest, {cwd: src}), + grunt.file.expandMapping('**/*', lib, {cwd: modSrc}), grunt.file.expandMapping('{LICENSE,PATENTS}', dest) ); mappings.forEach(function(mapping) { diff --git a/grunt/tasks/npm-react.js b/grunt/tasks/npm-react.js index 2e459ec93b91a..038d2fec513ce 100644 --- a/grunt/tasks/npm-react.js +++ b/grunt/tasks/npm-react.js @@ -5,7 +5,7 @@ var grunt = require('grunt'); var src = 'packages/react/'; var dest = 'build/packages/react/'; -var modSrc = 'build/modules/'; +var modSrc = 'build/node_modules/react/lib'; var lib = dest + 'lib/'; var dist = dest + 'dist/'; var distFiles = [ diff --git a/gulpfile.js b/gulpfile.js index 82556ac429b56..19d6df4a0e0e5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,6 +13,7 @@ var gulp = require('gulp'); var babel = require('gulp-babel'); var flatten = require('gulp-flatten'); var del = require('del'); +var merge = require('merge-stream'); var babelPluginModules = require('fbjs-scripts/babel-6/rewrite-modules'); var extractErrors = require('./scripts/error-codes/gulp-extract-errors'); @@ -28,21 +29,99 @@ function getTask(name) { var paths = { react: { src: [ - 'src/**/*.js', + 'src/umd/ReactUMDEntry.js', + 'src/umd/ReactWithAddonsUMDEntry.js', + 'src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js', + + 'src/isomorphic/**/*.js', + 'src/addons/**/*.js', + + 'src/ReactVersion.js', + 'src/shared/**/*.js', + '!src/shared/vendor/**/*.js', '!src/**/__benchmarks__/**/*.js', '!src/**/__tests__/**/*.js', '!src/**/__mocks__/**/*.js', - '!src/renderers/art/**/*.js', + ], + lib: 'build/node_modules/react/lib', + }, + reactDOM: { + src: [ + 'src/umd/ReactDOMUMDEntry.js', + 'src/umd/ReactDOMServerUMDEntry.js', + + 'src/renderers/dom/**/*.js', + 'src/renderers/shared/**/*.js', + 'src/test/**/*.js', // ReactTestUtils is currently very coupled to DOM. + + 'src/ReactVersion.js', + 'src/shared/**/*.js', '!src/shared/vendor/**/*.js', + '!src/**/__benchmarks__/**/*.js', + '!src/**/__tests__/**/*.js', + '!src/**/__mocks__/**/*.js', ], - lib: 'build/modules', + lib: 'build/node_modules/react-dom/lib', + }, + reactNative: { + src: [ + 'src/renderers/native/**/*.js', + 'src/renderers/shared/**/*.js', + + 'src/ReactVersion.js', + 'src/shared/**/*.js', + '!src/shared/vendor/**/*.js', + '!src/**/__benchmarks__/**/*.js', + '!src/**/__tests__/**/*.js', + '!src/**/__mocks__/**/*.js', + ], + lib: 'build/node_modules/react-native/lib', }, }; -var moduleMap = Object.assign( +var moduleMapBase = Object.assign( {'object-assign': 'object-assign'}, - require('fbjs/module-map'), + require('fbjs/module-map') +); + +var moduleMapReact = Object.assign( { + // Addons needs to reach into DOM internals + ReactDOM: 'react-dom/lib/ReactDOM', + ReactInstanceMap: 'react-dom/lib/ReactInstanceMap', + ReactTestUtils: 'react-dom/lib/ReactTestUtils', + ReactPerf: 'react-dom/lib/ReactPerf', + getVendorPrefixedEventName: 'react-dom/lib/getVendorPrefixedEventName', + }, + moduleMapBase +); + +var rendererSharedState = { + // Shared state + ReactCurrentOwner: 'react/lib/ReactCurrentOwner', + ReactComponentTreeHook: 'react/lib/ReactComponentTreeHook', + + // TODO: Move to shared since these are actually shared and can be copied. + ReactPropTypeLocations: 'react/lib/ReactPropTypeLocations', + ReactPropTypesSecret: 'react/lib/ReactPropTypesSecret', + checkReactTypeSpec: 'react/lib/checkReactTypeSpec', + + // TODO: Update the source to just use the React module. + React: 'react/lib/React', + ReactElement: 'react/lib/ReactElement', + ReactPropTypes: 'react/lib/ReactPropTypes', + ReactChildren: 'react/lib/ReactChildren', +}; + +var moduleMapReactDOM = Object.assign( + {}, + rendererSharedState, + moduleMapBase +); + +var moduleMapReactNative = Object.assign( + { + // React Native Hooks deepDiffer: 'react-native/lib/deepDiffer', deepFreezeAndThrowOnMutationInDev: 'react-native/lib/deepFreezeAndThrowOnMutationInDev', flattenStyle: 'react-native/lib/flattenStyle', @@ -52,17 +131,33 @@ var moduleMap = Object.assign( UIManager: 'react-native/lib/UIManager', UIManagerStatTracker: 'react-native/lib/UIManagerStatTracker', View: 'react-native/lib/View', - } + }, + rendererSharedState, + moduleMapBase ); var errorCodeOpts = { errorMapFilePath: 'scripts/error-codes/codes.json', }; -var babelOpts = { +var babelOptsReact = { + plugins: [ + devExpressionWithCodes, // this pass has to run before `rewrite-modules` + [babelPluginModules, {map: moduleMapReact}], + ], +}; + +var babelOptsReactDOM = { + plugins: [ + devExpressionWithCodes, // this pass has to run before `rewrite-modules` + [babelPluginModules, {map: moduleMapReactDOM}], + ], +}; + +var babelOptsReactNative = { plugins: [ devExpressionWithCodes, // this pass has to run before `rewrite-modules` - [babelPluginModules, {map: moduleMap}], + [babelPluginModules, {map: moduleMapReactNative}], ], }; @@ -75,21 +170,41 @@ gulp.task('flow', getTask('flow')); gulp.task('version-check', getTask('version-check')); gulp.task('react:clean', function() { - return del([paths.react.lib]); + return del([ + paths.react.lib, + paths.reactDOM.lib, + paths.reactNative.lib, + ]); }); gulp.task('react:modules', function() { - return gulp + return merge( + gulp .src(paths.react.src) - .pipe(babel(babelOpts)) + .pipe(babel(babelOptsReact)) .pipe(flatten()) - .pipe(gulp.dest(paths.react.lib)); + .pipe(gulp.dest(paths.react.lib)), + + gulp + .src(paths.reactDOM.src) + .pipe(babel(babelOptsReactDOM)) + .pipe(flatten()) + .pipe(gulp.dest(paths.reactDOM.lib)), + + gulp + .src(paths.reactNative.src) + .pipe(babel(babelOptsReactNative)) + .pipe(flatten()) + .pipe(gulp.dest(paths.reactNative.lib)) + ); }); gulp.task('react:extract-errors', function() { - return gulp - .src(paths.react.src) - .pipe(extractErrors(errorCodeOpts)); + return merge( + gulp.src(paths.react.src).pipe(extractErrors(errorCodeOpts)), + gulp.src(paths.reactDOM.src).pipe(extractErrors(errorCodeOpts)), + gulp.src(paths.reactNative.src).pipe(extractErrors(errorCodeOpts)) + ); }); gulp.task('default', ['react:modules']); diff --git a/package.json b/package.json index fd5c05e0ca427..fb871741cb471 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "gzip-js": "~0.3.2", "jest": "^12.1.1", "loose-envify": "^1.1.0", + "merge-stream": "^1.0.0", "object-assign": "^4.1.0", "platform": "^1.1.0", "run-sequence": "^1.1.4", diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js index 0b5deb28f4921..2bf9417936f7c 100644 --- a/packages/react-dom/index.js +++ b/packages/react-dom/index.js @@ -1,3 +1,3 @@ 'use strict'; -module.exports = require('react/lib/ReactDOM'); +module.exports = require('./lib/ReactDOM'); diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json index bfff49f5e1198..21c5dc0858eb5 100644 --- a/packages/react-dom/package.json +++ b/packages/react-dom/package.json @@ -12,7 +12,11 @@ "url": "https://github.com/facebook/react/issues" }, "homepage": "https://facebook.github.io/react/", - "dependencies": {}, + "dependencies": { + "fbjs": "^0.8.1", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.0" + }, "peerDependencies": { "react": "^16.0.0-alpha" }, @@ -21,7 +25,13 @@ "PATENTS", "README.md", "dist/", + "lib/", "index.js", "server.js" - ] + ], + "browserify": { + "transform": [ + "loose-envify" + ] + } } diff --git a/packages/react-dom/server.js b/packages/react-dom/server.js index e56ecb327795f..559676109da8a 100644 --- a/packages/react-dom/server.js +++ b/packages/react-dom/server.js @@ -1,3 +1,3 @@ 'use strict'; -module.exports = require('react/lib/ReactDOMServer'); +module.exports = require('./lib/ReactDOMServer'); diff --git a/packages/react-linked-input/LinkedInput.js b/packages/react-linked-input/LinkedInput.js index d40df684a80b8..394056e039762 100644 --- a/packages/react-linked-input/LinkedInput.js +++ b/packages/react-linked-input/LinkedInput.js @@ -10,7 +10,7 @@ 'use strict'; var React = require('react'); -var LinkedValueUtils = require('react/lib/LinkedValueUtils'); +var LinkedValueUtils = require('react-dom/lib/LinkedValueUtils'); class LinkedInput extends React.Component { render() { diff --git a/packages/react-native-renderer/index.js b/packages/react-native-renderer/index.js index 6f35853e7c530..e9fbbc91a5f51 100644 --- a/packages/react-native-renderer/index.js +++ b/packages/react-native-renderer/index.js @@ -1,3 +1,3 @@ 'use strict'; -module.exports = require('react/lib/ReactNative'); +module.exports = require('./lib/ReactNative'); diff --git a/packages/react-native-renderer/package.json b/packages/react-native-renderer/package.json index 64392a5202c98..9fce68813ba35 100644 --- a/packages/react-native-renderer/package.json +++ b/packages/react-native-renderer/package.json @@ -14,12 +14,17 @@ }, "homepage": "https://facebook.github.io/react-native/", "dependencies": { + "fbjs": "^0.8.1", + "object-assign": "^4.1.0" + }, + "peerDependencies": { "react": "^16.0.0-alpha" }, "files": [ "LICENSE", "PATENTS", "README.md", - "index.js" + "index.js", + "lib/" ] } diff --git a/src/renderers/dom/client/syntheticEvents/SyntheticEvent.js b/src/renderers/shared/stack/event/SyntheticEvent.js similarity index 100% rename from src/renderers/dom/client/syntheticEvents/SyntheticEvent.js rename to src/renderers/shared/stack/event/SyntheticEvent.js