Skip to content

Commit

Permalink
unstable_createRoot (#12487)
Browse files Browse the repository at this point in the history 
* Removed enableCreateRoot flag. Renamed createRoot to unstable_createRoot

* ReactDOMRoot test is no longer internal
  • Loading branch information
@bvaughn
bvaughn committed Mar 29, 2018
1 parent 8650d2a commit 6294b67
Show file tree
Hide file tree
Showing 11 changed files with 33 additions and 46 deletions.
5 changes: 2 additions & 3 deletions packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,11 @@ describe('ReactDOMFiberAsync', () => {
ReactFeatureFlags = require('shared/ReactFeatureFlags');
container = document.createElement('div');
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.enableCreateRoot = true;
ReactDOM = require('react-dom');
});

it('createRoot makes the entire tree async', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
root.render(<div>Hi</div>);
expect(container.textContent).toEqual('');
jest.runAllTimers();
Expand All @@ -95,7 +94,7 @@ describe('ReactDOMFiberAsync', () => {
}
}

const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
root.render(<Component />);
expect(container.textContent).toEqual('');
jest.runAllTimers();
Expand Down
35 changes: 17 additions & 18 deletions ...c/__tests__/ReactDOMRoot-test.internal.js → ...ct-dom/src/__tests__/ReactDOMRoot-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,22 +66,21 @@ describe('ReactDOMRoot', () => {
};

jest.resetModules();
require('shared/ReactFeatureFlags').enableCreateRoot = true;
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
AsyncMode = React.unstable_AsyncMode;
});

it('renders children', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
root.render(<div>Hi</div>);
flush();
expect(container.textContent).toEqual('Hi');
});

it('unmounts children', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
root.render(<div>Hi</div>);
flush();
expect(container.textContent).toEqual('Hi');
Expand All @@ -91,7 +90,7 @@ describe('ReactDOMRoot', () => {
});

it('`root.render` returns a thenable work object', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const work = root.render(<AsyncMode>Hi</AsyncMode>);
let ops = [];
work.then(() => {
Expand All @@ -109,7 +108,7 @@ describe('ReactDOMRoot', () => {
});

it('resolves `work.then` callback synchronously if the work already committed', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const work = root.render(<AsyncMode>Hi</AsyncMode>);
flush();
let ops = [];
Expand All @@ -133,7 +132,7 @@ describe('ReactDOMRoot', () => {
// Does not hydrate by default
const container1 = document.createElement('div');
container1.innerHTML = markup;
const root1 = ReactDOM.createRoot(container1);
const root1 = ReactDOM.unstable_createRoot(container1);
root1.render(
<div>
<span />
Expand All @@ -144,7 +143,7 @@ describe('ReactDOMRoot', () => {
// Accepts `hydrate` option
const container2 = document.createElement('div');
container2.innerHTML = markup;
const root2 = ReactDOM.createRoot(container2, {hydrate: true});
const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true});
root2.render(
<div>
<span />
Expand All @@ -155,7 +154,7 @@ describe('ReactDOMRoot', () => {

it('does not clear existing children', async () => {
container.innerHTML = '<div>a</div><div>b</div>';
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
root.render(
<div>
<span>c</span>
Expand All @@ -175,7 +174,7 @@ describe('ReactDOMRoot', () => {
});

it('can defer a commit by batching it', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
batch.render(<div>Hi</div>);
// Hasn't committed yet
Expand All @@ -198,7 +197,7 @@ describe('ReactDOMRoot', () => {
}
}

const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
batch.render(
<AsyncMode>
Expand Down Expand Up @@ -231,7 +230,7 @@ describe('ReactDOMRoot', () => {
ops.push('Foo');
return props.children;
}
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
batch.render(<Foo>Hi</Foo>);
// Flush all async work.
Expand All @@ -249,7 +248,7 @@ describe('ReactDOMRoot', () => {
});

it('can wait for a batch to finish', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
batch.render(<AsyncMode>Foo</AsyncMode>);

Expand All @@ -271,7 +270,7 @@ describe('ReactDOMRoot', () => {
});

it('`batch.render` returns a thenable work object', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
const work = batch.render('Hi');
let ops = [];
Expand All @@ -290,7 +289,7 @@ describe('ReactDOMRoot', () => {
});

it('can commit an empty batch', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
root.render(<AsyncMode>1</AsyncMode>);

expire(2000);
Expand All @@ -307,7 +306,7 @@ describe('ReactDOMRoot', () => {

it('two batches created simultaneously are committed separately', () => {
// (In other words, they have distinct expiration times)
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch1 = root.createBatch();
batch1.render(1);
const batch2 = root.createBatch();
Expand All @@ -323,7 +322,7 @@ describe('ReactDOMRoot', () => {
});

it('commits an earlier batch without committing a later batch', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch1 = root.createBatch();
batch1.render(1);

Expand All @@ -342,7 +341,7 @@ describe('ReactDOMRoot', () => {
});

it('commits a later batch without committing an earlier batch', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch1 = root.createBatch();
batch1.render(1);

Expand All @@ -362,7 +361,7 @@ describe('ReactDOMRoot', () => {
});

it('handles fatal errors triggered by batch.commit()', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
const batch = root.createBatch();
const InvalidType = undefined;
expect(() => batch.render(<InvalidType />)).toWarnDev([
Expand Down
17 changes: 7 additions & 10 deletions packages/react-dom/src/client/ReactDOM.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import * as EventPluginHub from 'events/EventPluginHub';
import * as EventPluginRegistry from 'events/EventPluginRegistry';
import * as EventPropagators from 'events/EventPropagators';
import * as ReactInstanceMap from 'shared/ReactInstanceMap';
import {enableCreateRoot} from 'shared/ReactFeatureFlags';
import ReactVersion from 'shared/ReactVersion';
import * as ReactDOMFrameScheduling from 'shared/ReactDOMFrameScheduling';
import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
Expand Down Expand Up @@ -1304,15 +1303,13 @@ type RootOptions = {
hydrate?: boolean,
};

if (enableCreateRoot) {
ReactDOM.createRoot = function createRoot(
container: DOMContainer,
options?: RootOptions,
): ReactRoot {
const hydrate = options != null && options.hydrate === true;
return new ReactRoot(container, true, hydrate);
};
}
ReactDOM.unstable_createRoot = function createRoot(
container: DOMContainer,
options?: RootOptions,
): ReactRoot {
const hydrate = options != null && options.hydrate === true;
return new ReactRoot(container, true, hydrate);
};

const foundDevTools = DOMRenderer.injectIntoDevTools({
findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,
Expand Down
11 changes: 5 additions & 6 deletions packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,12 +452,11 @@ describe('ChangeEventPlugin', () => {
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.enableAsyncSubtreeAPI = true;
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.enableCreateRoot = true;
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactDOM = require('react-dom');
});
it('text input', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
let input;

let ops = [];
Expand Down Expand Up @@ -504,7 +503,7 @@ describe('ChangeEventPlugin', () => {
});

it('checkbox input', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
let input;

let ops = [];
Expand Down Expand Up @@ -566,7 +565,7 @@ describe('ChangeEventPlugin', () => {
});

it('textarea', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
let textarea;

let ops = [];
Expand Down Expand Up @@ -613,7 +612,7 @@ describe('ChangeEventPlugin', () => {
});

it('parent of input', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
let input;

let ops = [];
Expand Down Expand Up @@ -664,7 +663,7 @@ describe('ChangeEventPlugin', () => {
});

it('is async for non-input events', () => {
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
let input;

let ops = [];
Expand Down
5 changes: 2 additions & 3 deletions packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,13 +223,12 @@ describe('SimpleEventPlugin', function() {
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.enableAsyncSubtreeAPI = true;
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.enableCreateRoot = true;
ReactDOM = require('react-dom');
});

it('flushes pending interactive work before extracting event handler', () => {
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
document.body.appendChild(container);

let ops = [];
Expand Down Expand Up @@ -309,7 +308,7 @@ describe('SimpleEventPlugin', function() {

it('end result of many interactive updates is deterministic', () => {
const container = document.createElement('div');
const root = ReactDOM.createRoot(container);
const root = ReactDOM.unstable_createRoot(container);
document.body.appendChild(container);

let button;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/ReactFeatureFlags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
import invariant from 'fbjs/lib/invariant';

// Exports ReactDOM.createRoot
export const enableCreateRoot = false;
export const enableUserTimingAPI = __DEV__;

// Mutating mode (React DOM, React ART, React Native):
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.native-fabric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import typeof * as FabricFeatureFlagsType from './ReactFeatureFlags.native-fabri

export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableCreateRoot = false;
export const enableUserTimingAPI = __DEV__;
export const enableGetDerivedStateFromCatch = false;
export const warnAboutDeprecatedLifecycles = false;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export const {
} = require('ReactFeatureFlags');

// The rest of the flags are static for better dead code elimination.
export const enableCreateRoot = false;
export const enableUserTimingAPI = __DEV__;
export const enableMutatingReconciler = true;
export const enableNoopReconciler = false;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.persistent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste

export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableCreateRoot = false;
export const enableUserTimingAPI = __DEV__;
export const enableGetDerivedStateFromCatch = false;
export const warnAboutDeprecatedLifecycles = false;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.test-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste

export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableCreateRoot = false;
export const enableUserTimingAPI = __DEV__;
export const enableGetDerivedStateFromCatch = false;
export const warnAboutDeprecatedLifecycles = false;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.www.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export const {
} = require('ReactFeatureFlags');

// The rest of the flags are static for better dead code elimination.
export const enableCreateRoot = true;

// The www bundles only use the mutating reconciler.
export const enableMutatingReconciler = true;
Expand Down

0 comments on commit 6294b67

Please sign in to comment.