Build React DOM Fiber package (#7173)

This builds a `react-dom-fiber.js` bundle which exposes ReactDOMFiber. This allows early experiments with the new Fiber reconciler. I also expose it in the npm package through `react-dom/fiber`. (cherry picked from commit f7e0db9)
facebook · Oct 3, 2016 · 5c2a88a · 5c2a88a
1 parent 5bc9daa
commit 5c2a88a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 5 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -137,6 +137,16 @@ module.exports = function(grunt) {
     'version-check',
     'browserify:domServerMin',
   ]);
+  grunt.registerTask('build:dom-fiber', [
+    'build-modules',
+    'version-check',
+    'browserify:domFiber',
+  ]);
+  grunt.registerTask('build:dom-fiber-min', [
+    'build-modules',
+    'version-check',
+    'browserify:domFiberMin',
+  ]);
   grunt.registerTask('build:npm-react', [
     'version-check',
     'build-modules',
@@ -164,6 +174,8 @@ module.exports = function(grunt) {
     'browserify:domMin',
     'browserify:domServer',
     'browserify:domServerMin',
+    'browserify:domFiber',
+    'browserify:domFiberMin',
     'npm-react:release',
     'npm-react:pack',
     'npm-react-dom:release',

diff --git a/examples/fiber/index.html b/examples/fiber/index.html
@@ -18,7 +18,7 @@ <h1>Fiber Example</h1>
       </p>
     </div>
     <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
+    <script src="../../build/react-dom-fiber.js"></script>
     <script>
       function ExampleApplication(props) {
         var elapsed = Math.round(props.elapsed  / 100);
@@ -34,7 +34,7 @@ <h1>Fiber Example</h1>
 
       var start = new Date().getTime();
       setInterval(function() {
-        ReactDOM.render(
+        ReactDOMFiber.render(
           ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
           document.getElementById('container')
         );

diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js
@@ -35,6 +35,18 @@ for (var key in shimSharedModulesFiles) {
 
 var shimSharedModules = globalShim.configure(shimSharedModulesFiles);
 
+// Fiber needs the symbol from ReactElement right now. So we can't shim
+// ReactElement. Otherwise this would just be the same as above.
+// TODO: Refactor this so that Fiber can access the symbol without bringing in
+// the rest of ReactElement.
+var shimSharedModulesFiberFiles = {};
+for (var key in shimSharedModulesFiles) {
+  if (!/ReactElement/.test(key)) {
+    shimSharedModulesFiberFiles[key] = shimSharedModulesFiles[key];
+  }
+}
+var shimSharedModulesFiber = globalShim.configure(shimSharedModulesFiberFiles);
+
 var shimDOMModules = aliasify.configure({
   'aliases': {
     './ReactAddonsDOMDependencies': {relative: './ReactAddonsDOMDependenciesUMDShim'},
@@ -204,6 +216,38 @@ var domServerMin = {
   after: [minify, bannerify],
 };
 
+var domFiber = {
+  entries: [
+    './build/node_modules/react-dom/lib/ReactDOMFiber.js',
+  ],
+  outfile: './build/react-dom-fiber.js',
+  debug: false,
+  standalone: 'ReactDOMFiber',
+  // Apply as global transform so that we also envify fbjs and any other deps
+  transforms: [shimSharedModulesFiber],
+  globalTransforms: [envifyDev],
+  plugins: [collapser],
+  after: [derequire, simpleBannerify],
+};
+
+var domFiberMin = {
+  entries: [
+    './build/node_modules/react-dom/lib/ReactDOMFiber.js',
+  ],
+  outfile: './build/react-dom-fiber.min.js',
+  debug: false,
+  standalone: 'ReactDOMFiber',
+  // Envify twice. The first ensures that when we uglifyify, we have the right
+  // conditions to exclude requires. The global transform runs on deps.
+  transforms: [shimSharedModulesFiber, envifyProd, uglifyify],
+  globalTransforms: [envifyProd],
+  plugins: [collapser],
+  // No need to derequire because the minifier will mangle
+  // the "require" calls.
+
+  after: [minify, bannerify],
+};
+
 module.exports = {
   basic: basic,
   min: min,
@@ -213,4 +257,6 @@ module.exports = {
   domMin: domMin,
   domServer: domServer,
   domServerMin: domServerMin,
+  domFiber: domFiber,
+  domFiberMin: domFiberMin,
 };
diff --git a/packages/react-dom/fiber.js b/packages/react-dom/fiber.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./lib/ReactDOMFiber');
diff --git a/src/renderers/dom/fiber/ReactDOMFiber.js b/src/renderers/dom/fiber/ReactDOMFiber.js
@@ -16,6 +16,8 @@ import type { HostChildren } from 'ReactFiberReconciler';
 
 var ReactFiberReconciler = require('ReactFiberReconciler');
 
+var warning = require('warning');
+
 type DOMContainerElement = Element & { _reactRootContainer: ?Object };
 
 type Container = Element;
@@ -56,9 +58,9 @@ var DOMRenderer = ReactFiberReconciler({
   },
 
   prepareUpdate(
-    domElement : Instance, 
-    oldProps : Props, 
-    newProps : Props, 
+    domElement : Instance,
+    oldProps : Props,
+    newProps : Props,
     children : HostChildren<Instance>
   ) : boolean {
     return true;
@@ -82,9 +84,21 @@ var DOMRenderer = ReactFiberReconciler({
 
 });
 
+var warned = false;
+
+function warnAboutUnstableUse() {
+  warning(
+    warned,
+    'You are using React DOM Fiber which is an experimental renderer. ' +
+    'It is likely to have bugs, breaking changes and is unsupported.'
+  );
+  warned = true;
+}
+
 var ReactDOM = {
 
   render(element : ReactElement<any>, container : DOMContainerElement) {
+    warnAboutUnstableUse();
     if (!container._reactRootContainer) {
       container._reactRootContainer = DOMRenderer.mountContainer(element, container);
     } else {
@@ -93,6 +107,7 @@ var ReactDOM = {
   },
 
   unmountComponentAtNode(container : DOMContainerElement) {
+    warnAboutUnstableUse();
     const root = container._reactRootContainer;
     if (root) {
       // TODO: Is it safe to reset this now or should I wait since this
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		'use strict';

		module.exports = require('./lib/ReactDOMFiber');