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.
facebook · Jul 2, 2016 · 09bb6e8 · 09bb6e8
1 parent 119739e
commit 09bb6e8
Show file tree

Hide file tree

Showing 14 changed files with 185 additions and 38 deletions.
diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js
@@ -17,18 +17,21 @@ var SECRET_INTERNALS_NAME = 'React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_
 var SECRET_DOM_INTERNALS_NAME = 'ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
 
 var shimSharedModules = globalShim.configure({
-  './ReactCurrentOwner': SECRET_INTERNALS_NAME + '.ReactCurrentOwner',
-  './ReactComponentTreeDevtool': SECRET_INTERNALS_NAME + '.ReactComponentTreeDevtool',
+  // Shared state
+  'react/lib/ReactCurrentOwner': SECRET_INTERNALS_NAME + '.ReactCurrentOwner',
+  'react/lib/ReactComponentTreeDevtool': SECRET_INTERNALS_NAME + '.ReactComponentTreeDevtool',
   // All these methods are shared are exposed.
-  './ReactElement': 'React',
-  './ReactPropTypes': 'React.PropTypes',
-  './ReactChildren': 'React.Children',
+  // TODO: Update the source to just use the React module.
+  'react/lib/React': 'React',
+  'react/lib/ReactElement': 'React',
+  'react/lib/ReactPropTypes': 'React.PropTypes',
+  'react/lib/ReactChildren': 'React.Children',
 });
 
 // Shim references to ReactDOM internals from addons.
 var shimDOM = globalShim.configure({
-  './ReactDOM': 'ReactDOM',
-  './ReactInstanceMap': SECRET_DOM_INTERNALS_NAME + '.ReactInstanceMap',
+  'react-dom/lib/ReactDOM': 'ReactDOM',
+  'react-dom/lib/ReactInstanceMap': SECRET_DOM_INTERNALS_NAME + '.ReactInstanceMap',
 
   // TestUtils pulls in a bunch of internals.
   './EventConstants': SECRET_DOM_INTERNALS_NAME + '.EventConstants',
@@ -84,7 +87,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,
@@ -97,7 +100,7 @@ var basic = {
 
 var min = {
   entries: [
-    './build/modules/ReactUMDEntry.js',
+    './build/node_modules/react/lib/ReactUMDEntry.js',
   ],
   outfile: './build/react.min.js',
   debug: false,
@@ -115,7 +118,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,
@@ -129,7 +132,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,
@@ -147,7 +150,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,
@@ -161,7 +164,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,
@@ -179,7 +182,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,
@@ -193,7 +196,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: {
+    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
@@ -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.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 = [