Build renderers into their individual npm packages (#7168)

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.
facebook · Aug 11, 2016 · 0f004ef · 0f004ef
1 parent c06a68a
commit 0f004ef
Show file tree

Hide file tree

Showing 17 changed files with 237 additions and 42 deletions.
diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js
@@ -16,7 +16,7 @@ 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 = {
   './ReactCurrentOwner': SECRET_INTERNALS_NAME + '.ReactCurrentOwner',
   './ReactComponentTreeHook': SECRET_INTERNALS_NAME + '.ReactComponentTreeHook',
   // The methods we used here are exposed on the main React export.
@@ -26,7 +26,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 +79,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 +92,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 +110,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 +124,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 +142,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 +156,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 +174,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 +188,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
@@ -6,46 +6,55 @@ var path = require('path');
 
 var addons = {
   CSSTransitionGroup: {
+    peerDependency: 'react',
     module: 'ReactCSSTransitionGroup',
     name: 'css-transition-group',
     docs: 'animation',
   },
   LinkedStateMixin: {
+    peerDependency: 'react',
     module: 'LinkedStateMixin',
     name: 'linked-state-mixin',
     docs: 'two-way-binding-helpers',
   },
   Perf: {
+    peerDependency: 'react-dom',
     module: 'ReactPerf',
     name: 'perf',
     docs: 'perf',
   },
   PureRenderMixin: {
+    peerDependency: 'react',
     module: 'ReactComponentWithPureRenderMixin',
     name: 'pure-render-mixin',
     docs: 'pure-render-mixin',
   },
   TestUtils: {
+    peerDependency: 'react-dom',
     module: 'ReactTestUtils',
     name: 'test-utils',
     docs: 'test-utils',
   },
   TransitionGroup: {
+    peerDependency: 'react',
     module: 'ReactTransitionGroup',
     name: 'transition-group',
     docs: 'animation',
   },
   createFragment: {
+    peerDependency: 'react',
     module: 'ReactFragment',
     method: 'create',
     name: 'create-fragment',
     docs: 'create-fragment',
   },
   shallowCompare: {
+    peerDependency: 'react',
     module: 'shallowCompare',
     name: 'shallow-compare',
   },
   updates: {
+    peerDependency: '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.peerDependency,
+    '/lib/',
     info.module,
-    "')",
+    '\')',
   ];
   if (info.method) {
     pieces.push('.', info.method);
@@ -78,6 +89,12 @@ function buildReleases() {
     var pkgData = Object.assign({}, pkgTemplate);
     pkgData.name = pkgName;
 
+    var version = pkgTemplate.peerDependencies.react;
+    if (info.peerDependency !== 'react') {
+      pkgData.peerDependencies = {};
+      pkgData.peerDependencies[info.peerDependency] = version;
+    }
+
     grunt.file.mkdir(destDir);
     var link = info.docs ? info.docs : 'addons';
     link = `https://facebook.github.io/react/docs/${link}.html`;

diff --git 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
@@ -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-test.js b/grunt/tasks/npm-react-test.js
@@ -5,6 +5,8 @@ var grunt = require('grunt');
 
 var src = 'packages/react-test-renderer/';
 var dest = 'build/packages/react-test-renderer/';
+var modSrc = 'build/node_modules/react-test-renderer/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
@@ -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 = [