[Fiber] Add ReactDOMFiber.unstable_createPortal()

While facebook#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.

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,8 @@ var ReactDOMFiberComponent = require('ReactDOMFiberComponent');
 var ReactDOMInjection = require('ReactDOMInjection');
 var ReactFiberReconciler = require('ReactFiberReconciler');
 var ReactInstanceMap = require('ReactInstanceMap');
+var ReactPortal = require('ReactPortal');
+var ReactTypeOfWork = require('ReactTypeOfWork');
 
 var findDOMNode = require('findDOMNode');
 var invariant = require('invariant');
@@ -32,6 +35,9 @@ ReactControlledComponent.injection.injectFiberControlledHostComponent(
   ReactDOMFiberComponent
 );
 
+var {
+  Portal,
+} = ReactTypeOfWork;
 var {
   createElement,
   setInitialProperties,
@@ -66,7 +72,11 @@ function recursivelyAppendChildren(parent : Element, child : HostChildren<Instan
     /* As a result of the refinement issue this type isn't known. */
     let node : any = child;
     do {
-      recursivelyAppendChildren(parent, node.output);
+      // TODO: this is an implementation detail leaking into the renderer.
+      // Once we move output traversal to complete phase, we won't need this.
+      if (node.tag !== Portal) {
+        recursivelyAppendChildren(parent, node.output);
+      }
     } while (node = node.sibling);
   }
 }
@@ -192,6 +202,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('');
+    });
+  }
 });