From 5c2a88a9a1cecd0fefe75c0e9fc1368e199530cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 10 Aug 2016 18:45:14 -0700
Subject: [PATCH] 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 f7e0db9a181f042c4c7ec55250786ac2e96e40db)
---
 Gruntfile.js                             | 12 +++++++
 examples/fiber/index.html                |  4 +--
 grunt/config/browserify.js               | 46 ++++++++++++++++++++++++
 packages/react-dom/fiber.js              |  3 ++
 src/renderers/dom/fiber/ReactDOMFiber.js | 21 +++++++++--
 5 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-dom/fiber.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 20df7c9b85239..71f3ffd258f55 100644
--- 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
index c50799379495f..c90e7ce246ed1 100644
--- 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
index 44d378d6e2333..332af66f22a05 100644
--- 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
new file mode 100644
index 0000000000000..44ae595f87178
--- /dev/null
+++ 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
index 175b274549974..b9d184b788fc1 100644
--- 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