Skip to content

Commit

Permalink
[Fiber] Add ReactDOMFiber.unstable_createPortal() (facebook#8386)
Browse files Browse the repository at this point in the history
* [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.

* Remove hacks related to output field
  • Loading branch information
gaearon authored and acusti committed Mar 15, 2017
1 parent 8845b7f commit 7ea95a3
Show file tree
Hide file tree
Showing 11 changed files with 429 additions and 2 deletions.
4 changes: 4 additions & 0 deletions scripts/fiber/tests-passing.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
7 changes: 7 additions & 0 deletions src/renderers/dom/fiber/ReactDOMFiber.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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);
},
Expand Down
221 changes: 221 additions & 0 deletions src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
});
}
});
Loading

0 comments on commit 7ea95a3

Please sign in to comment.