[Fiber] Add ReactDOMFiber.unstable_createPortal() (#8386)

* [Fiber] Add ReactDOMFiber.unstable_createPortal()

While #8368 added a version of `ReactDOM.unstable_renderSubtreeIntoContainer()` to Fiber, it is a bit hacky and, more importantly, incompatible with Fiber goals. Since it encourages performing portal work in lifecycles, it stretches the commit phase and prevents slicing that work, potentially negating Fiber benefits.

This PR adds a first version of a declarative API meant to replace `ReactDOM.unstable_renderSubtreeIntoContainer()`. The API is a declarative way to render subtrees into DOM node containers.

* Remove hacks related to output field

Author: gaearon

scripts/fiber/tests-passing.txt

@@ -488,6 +488,10 @@ src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
 * finds the first child when a component returns a fragment
 * finds the first child even when fragment is nested
 * finds the first child even when first child renders null
+* should render portal children
+* should pass portal context when rendering subtree elsewhere
+* should update portal context if it changes due to setState
+* should update portal context if it changes due to re-render
 
 src/renderers/dom/shared/__tests__/CSSProperty-test.js
 * should generate browser prefixes for its `isUnitlessNumber`

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -14,6 +14,7 @@
 
 import type { Fiber } from 'ReactFiber';
 import type { HostChildren } from 'ReactFiberReconciler';
+import type { ReactNodeList } from 'ReactTypes';
 
 var ReactControlledComponent = require('ReactControlledComponent');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
@@ -22,6 +23,7 @@ var ReactDOMFiberComponent = require('ReactDOMFiberComponent');
 var ReactDOMInjection = require('ReactDOMInjection');
 var ReactFiberReconciler = require('ReactFiberReconciler');
 var ReactInstanceMap = require('ReactInstanceMap');
+var ReactPortal = require('ReactPortal');
 
 var findDOMNode = require('findDOMNode');
 var invariant = require('invariant');
@@ -192,6 +194,11 @@ var ReactDOM = {
 
   findDOMNode: findDOMNode,
 
+  unstable_createPortal(children: ReactNodeList, container : DOMContainerElement, key : ?string = null) {
+    // TODO: pass ReactDOM portal implementation as third argument
+    return ReactPortal.createPortal(children, container, null, key);
+  },
+
   unstable_batchedUpdates<A>(fn : () => A) : A {
     return DOMRenderer.batchedUpdates(fn);
   },

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -186,4 +186,225 @@ describe('ReactDOMFiber', () => {
       expect(firstNode.tagName).toBe('DIV');
     });
   }
+
+  if (ReactDOMFeatureFlags.useFiber) {
+    it('should render portal children', () => {
+      var portalContainer1 = document.createElement('div');
+      var portalContainer2 = document.createElement('div');
+
+      var ops = [];
+      class Child extends React.Component {
+        componentDidMount() {
+          ops.push(`${this.props.name} componentDidMount`);
+        }
+        componentDidUpdate() {
+          ops.push(`${this.props.name} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          ops.push(`${this.props.name} componentWillUnmount`);
+        }
+        render() {
+          return <div>{this.props.name}</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        componentDidMount() {
+          ops.push(`Parent:${this.props.step} componentDidMount`);
+        }
+        componentDidUpdate() {
+          ops.push(`Parent:${this.props.step} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          ops.push(`Parent:${this.props.step} componentWillUnmount`);
+        }
+        render() {
+          const {step} = this.props;
+          return [
+            <Child name={`normal[0]:${step}`} />,
+            ReactDOM.unstable_createPortal(
+              <Child name={`portal1[0]:${step}`} />,
+              portalContainer1
+            ),
+            <Child name={`normal[1]:${step}`} />,
+            ReactDOM.unstable_createPortal(
+              [
+                <Child name={`portal2[0]:${step}`} />,
+                <Child name={`portal2[1]:${step}`} />,
+              ],
+              portalContainer2
+            ),
+          ];
+        }
+      }
+
+      ReactDOM.render(<Parent step="a" />, container);
+      expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:a</div>');
+      expect(portalContainer2.innerHTML).toBe('<div>portal2[0]:a</div><div>portal2[1]:a</div>');
+      expect(container.innerHTML).toBe('<div>normal[0]:a</div><div>normal[1]:a</div>');
+      expect(ops).toEqual([
+        'normal[0]:a componentDidMount',
+        'portal1[0]:a componentDidMount',
+        'normal[1]:a componentDidMount',
+        'portal2[0]:a componentDidMount',
+        'portal2[1]:a componentDidMount',
+        'Parent:a componentDidMount',
+      ]);
+
+      ops.length = 0;
+      ReactDOM.render(<Parent step="b" />, container);
+      expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:b</div>');
+      expect(portalContainer2.innerHTML).toBe('<div>portal2[0]:b</div><div>portal2[1]:b</div>');
+      expect(container.innerHTML).toBe('<div>normal[0]:b</div><div>normal[1]:b</div>');
+      expect(ops).toEqual([
+        'normal[0]:b componentDidUpdate',
+        'portal1[0]:b componentDidUpdate',
+        'normal[1]:b componentDidUpdate',
+        'portal2[0]:b componentDidUpdate',
+        'portal2[1]:b componentDidUpdate',
+        'Parent:b componentDidUpdate',
+      ]);
+
+      ops.length = 0;
+      ReactDOM.unmountComponentAtNode(container);
+      expect(portalContainer1.innerHTML).toBe('');
+      expect(portalContainer2.innerHTML).toBe('');
+      expect(container.innerHTML).toBe('');
+      expect(ops).toEqual([
+        'Parent:b componentWillUnmount',
+        'normal[0]:b componentWillUnmount',
+        'portal1[0]:b componentWillUnmount',
+        'normal[1]:b componentWillUnmount',
+        'portal2[0]:b componentWillUnmount',
+        'portal2[1]:b componentWillUnmount',
+      ]);
+    });
+
+    it('should pass portal context when rendering subtree elsewhere', () => {
+      var portalContainer = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: React.PropTypes.string.isRequired,
+        };
+
+        render() {
+          return <div>{this.context.foo}</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: React.PropTypes.string.isRequired,
+        };
+
+        getChildContext() {
+          return {
+            foo: 'bar',
+          };
+        }
+
+        render() {
+          return ReactDOM.unstable_createPortal(
+            <Component />,
+            portalContainer
+          );
+        }
+      }
+
+      ReactDOM.render(<Parent />, container);
+      expect(container.innerHTML).toBe('');
+      expect(portalContainer.innerHTML).toBe('<div>bar</div>');
+    });
+
+    it('should update portal context if it changes due to setState', () => {
+      var portalContainer = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: React.PropTypes.string.isRequired,
+          getFoo: React.PropTypes.func.isRequired,
+        };
+
+        render() {
+          return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: React.PropTypes.string.isRequired,
+          getFoo: React.PropTypes.func.isRequired,
+        };
+
+        state = {
+          bar: 'initial',
+        };
+
+        getChildContext() {
+          return {
+            foo: this.state.bar,
+            getFoo: () => this.state.bar,
+          };
+        }
+
+        render() {
+          return ReactDOM.unstable_createPortal(
+            <Component />,
+            portalContainer
+          );
+        }
+      }
+
+      var instance = ReactDOM.render(<Parent />, container);
+      expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
+      expect(container.innerHTML).toBe('');
+      instance.setState({bar: 'changed'});
+      expect(portalContainer.innerHTML).toBe('<div>changed-changed</div>');
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should update portal context if it changes due to re-render', () => {
+      var portalContainer = document.createElement('div');
+
+      class Component extends React.Component {
+        static contextTypes = {
+          foo: React.PropTypes.string.isRequired,
+          getFoo: React.PropTypes.func.isRequired,
+        };
+
+        render() {
+          return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
+        }
+      }
+
+      class Parent extends React.Component {
+        static childContextTypes = {
+          foo: React.PropTypes.string.isRequired,
+          getFoo: React.PropTypes.func.isRequired,
+        };
+
+        getChildContext() {
+          return {
+            foo: this.props.bar,
+            getFoo: () => this.props.bar,
+          };
+        }
+
+        render() {
+          return ReactDOM.unstable_createPortal(
+            <Component />,
+            portalContainer
+          );
+        }
+      }
+
+      ReactDOM.render(<Parent bar="initial" />, container);
+      expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
+      expect(container.innerHTML).toBe('');
+      ReactDOM.render(<Parent bar="changed" />, container);
+      expect(portalContainer.innerHTML).toBe('<div>changed-changed</div>');
+      expect(container.innerHTML).toBe('');
+    });
+  }
 });