From 6294b67a406d21cc6b65162e47497c1e8afe398f Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 29 Mar 2018 12:51:34 -0700 Subject: [PATCH] unstable_createRoot (#12487) * Removed enableCreateRoot flag. Renamed createRoot to unstable_createRoot * ReactDOMRoot test is no longer internal --- .../ReactDOMFiberAsync-test.internal.js | 5 ++- ...-test.internal.js => ReactDOMRoot-test.js} | 35 +++++++++---------- packages/react-dom/src/client/ReactDOM.js | 17 ++++----- .../ChangeEventPlugin-test.internal.js | 11 +++--- .../SimpleEventPlugin-test.internal.js | 5 ++- packages/shared/ReactFeatureFlags.js | 1 - .../forks/ReactFeatureFlags.native-fabric.js | 1 - .../shared/forks/ReactFeatureFlags.native.js | 1 - .../forks/ReactFeatureFlags.persistent.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 1 - 11 files changed, 33 insertions(+), 46 deletions(-) rename packages/react-dom/src/__tests__/{ReactDOMRoot-test.internal.js => ReactDOMRoot-test.js} (89%) diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js index 465c6e15b0603..e0c256d4a3f3c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js @@ -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(
Hi
); expect(container.textContent).toEqual(''); jest.runAllTimers(); @@ -95,7 +94,7 @@ describe('ReactDOMFiberAsync', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(); expect(container.textContent).toEqual(''); jest.runAllTimers(); diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js similarity index 89% rename from packages/react-dom/src/__tests__/ReactDOMRoot-test.internal.js rename to packages/react-dom/src/__tests__/ReactDOMRoot-test.js index 0ece449718c1a..f7cd755b66a76 100644 --- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js @@ -66,7 +66,6 @@ describe('ReactDOMRoot', () => { }; jest.resetModules(); - require('shared/ReactFeatureFlags').enableCreateRoot = true; React = require('react'); ReactDOM = require('react-dom'); ReactDOMServer = require('react-dom/server'); @@ -74,14 +73,14 @@ describe('ReactDOMRoot', () => { }); it('renders children', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); flush(); expect(container.textContent).toEqual('Hi'); }); it('unmounts children', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); flush(); expect(container.textContent).toEqual('Hi'); @@ -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(Hi); let ops = []; work.then(() => { @@ -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(Hi); flush(); let ops = []; @@ -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(
@@ -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(
@@ -155,7 +154,7 @@ describe('ReactDOMRoot', () => { it('does not clear existing children', async () => { container.innerHTML = '
a
b
'; - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); root.render(
c @@ -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(
Hi
); // Hasn't committed yet @@ -198,7 +197,7 @@ describe('ReactDOMRoot', () => { } } - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); const batch = root.createBatch(); batch.render( @@ -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(Hi); // Flush all async work. @@ -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(Foo); @@ -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 = []; @@ -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(1); expire(2000); @@ -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(); @@ -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); @@ -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); @@ -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()).toWarnDev([ diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index a06dca184d177..8a03d03a8bea4 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -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'; @@ -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, diff --git a/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js index 1b5d690da9ea9..e5f8969ba119a 100644 --- a/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js +++ b/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js @@ -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 = []; @@ -504,7 +503,7 @@ describe('ChangeEventPlugin', () => { }); it('checkbox input', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let input; let ops = []; @@ -566,7 +565,7 @@ describe('ChangeEventPlugin', () => { }); it('textarea', () => { - const root = ReactDOM.createRoot(container); + const root = ReactDOM.unstable_createRoot(container); let textarea; let ops = []; @@ -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 = []; @@ -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 = []; diff --git a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js index 64ae22ddd4c98..ad90110818c70 100644 --- a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js +++ b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js @@ -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 = []; @@ -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; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 8e1a80ffac8e7..fc0a50083d5d5 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -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): diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric.js b/packages/shared/forks/ReactFeatureFlags.native-fabric.js index 06d87c3182fd2..62a64ef5bdf7e 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fabric.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fabric.js @@ -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; diff --git a/packages/shared/forks/ReactFeatureFlags.native.js b/packages/shared/forks/ReactFeatureFlags.native.js index 1c0ef01928985..d94807d0fcd44 100644 --- a/packages/shared/forks/ReactFeatureFlags.native.js +++ b/packages/shared/forks/ReactFeatureFlags.native.js @@ -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; diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js index d9aa80be570d1..6ae31a7ce54d2 100644 --- a/packages/shared/forks/ReactFeatureFlags.persistent.js +++ b/packages/shared/forks/ReactFeatureFlags.persistent.js @@ -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; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index e5d4ef7d6b51c..03642454dd8c3 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -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; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 5cc50cc07fafb..407a0a662cb38 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -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;