@samitouri / QOS-React / commits / 6294b67a40

unstable_createRoot (#12487)

* Removed enableCreateRoot flag. Renamed createRoot to unstable_createRoot * ReactDOMRoot test is no longer internal

Brian Vaughn committed Mar 29, 2018 at 12:51 UTC 6294b67a406d21cc6b65162e47497c1e8afe398f

11 files changed +33 -46

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js

+2 -3

@@ -68,12 +68,11 @@ describe('ReactDOMFiberAsync', () => {

68 ReactFeatureFlags = require('shared/ReactFeatureFlags');

69 container = document.createElement('div');

70 ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;

71 - ReactFeatureFlags.enableCreateRoot = true;

71 ReactDOM = require('react-dom');

72 });

74 it('createRoot makes the entire tree async', () => {

76 - const root = ReactDOM.createRoot(container);

75 + const root = ReactDOM.unstable_createRoot(container);

76 root.render(<div>Hi</div>);

77 expect(container.textContent).toEqual('');

78 jest.runAllTimers();

@@ -95,7 +94,7 @@ describe('ReactDOMFiberAsync', () => {

94 }

95 }

98 - const root = ReactDOM.createRoot(container);

97 + const root = ReactDOM.unstable_createRoot(container);

98 root.render(<Component />);

99 expect(container.textContent).toEqual('');

100 jest.runAllTimers();

packages/react-dom/src/__tests__/ReactDOMRoot-test.js renamed

+17 -18

@@ -66,7 +66,6 @@ describe('ReactDOMRoot', () => {

66 };

68 jest.resetModules();

69 - require('shared/ReactFeatureFlags').enableCreateRoot = true;

69 React = require('react');

70 ReactDOM = require('react-dom');

71 ReactDOMServer = require('react-dom/server');

@@ -74,14 +73,14 @@ describe('ReactDOMRoot', () => {

73 });

75 it('renders children', () => {

77 - const root = ReactDOM.createRoot(container);

76 + const root = ReactDOM.unstable_createRoot(container);

77 root.render(<div>Hi</div>);

78 flush();

79 expect(container.textContent).toEqual('Hi');

80 });

82 it('unmounts children', () => {

84 - const root = ReactDOM.createRoot(container);

83 + const root = ReactDOM.unstable_createRoot(container);

84 root.render(<div>Hi</div>);

85 flush();

86 expect(container.textContent).toEqual('Hi');

@@ -91,7 +90,7 @@ describe('ReactDOMRoot', () => {

90 });

92 it('`root.render` returns a thenable work object', () => {

94 - const root = ReactDOM.createRoot(container);

93 + const root = ReactDOM.unstable_createRoot(container);

94 const work = root.render(<AsyncMode>Hi</AsyncMode>);

95 let ops = [];

96 work.then(() => {

@@ -109,7 +108,7 @@ describe('ReactDOMRoot', () => {

108 });

109

110 it('resolves `work.then` callback synchronously if the work already committed', () => {

112 - const root = ReactDOM.createRoot(container);

111 + const root = ReactDOM.unstable_createRoot(container);

112 const work = root.render(<AsyncMode>Hi</AsyncMode>);

113 flush();

114 let ops = [];

@@ -133,7 +132,7 @@ describe('ReactDOMRoot', () => {

132 // Does not hydrate by default

133 const container1 = document.createElement('div');

134 container1.innerHTML = markup;

136 - const root1 = ReactDOM.createRoot(container1);

135 + const root1 = ReactDOM.unstable_createRoot(container1);

136 root1.render(

137 <div>

138 <span />

@@ -144,7 +143,7 @@ describe('ReactDOMRoot', () => {

143 // Accepts `hydrate` option

144 const container2 = document.createElement('div');

145 container2.innerHTML = markup;

147 - const root2 = ReactDOM.createRoot(container2, {hydrate: true});

146 + const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true});

147 root2.render(

148 <div>

149 <span />

@@ -155,7 +154,7 @@ describe('ReactDOMRoot', () => {

154

155 it('does not clear existing children', async () => {

156 container.innerHTML = '<div>a</div><div>b</div>';

158 - const root = ReactDOM.createRoot(container);

157 + const root = ReactDOM.unstable_createRoot(container);

158 root.render(

159 <div>

160 <span>c</span>

@@ -175,7 +174,7 @@ describe('ReactDOMRoot', () => {

174 });

175

176 it('can defer a commit by batching it', () => {

178 - const root = ReactDOM.createRoot(container);

177 + const root = ReactDOM.unstable_createRoot(container);

178 const batch = root.createBatch();

179 batch.render(<div>Hi</div>);

180 // Hasn't committed yet

@@ -198,7 +197,7 @@ describe('ReactDOMRoot', () => {

197 }

198 }

199

201 - const root = ReactDOM.createRoot(container);

200 + const root = ReactDOM.unstable_createRoot(container);

201 const batch = root.createBatch();

202 batch.render(

203 <AsyncMode>

@@ -231,7 +230,7 @@ describe('ReactDOMRoot', () => {

230 ops.push('Foo');

231 return props.children;

232 }

234 - const root = ReactDOM.createRoot(container);

233 + const root = ReactDOM.unstable_createRoot(container);

234 const batch = root.createBatch();

235 batch.render(<Foo>Hi</Foo>);

236 // Flush all async work.

@@ -249,7 +248,7 @@ describe('ReactDOMRoot', () => {

248 });

249

250 it('can wait for a batch to finish', () => {

252 - const root = ReactDOM.createRoot(container);

251 + const root = ReactDOM.unstable_createRoot(container);

252 const batch = root.createBatch();

253 batch.render(<AsyncMode>Foo</AsyncMode>);

254

@@ -271,7 +270,7 @@ describe('ReactDOMRoot', () => {

270 });

271

272 it('`batch.render` returns a thenable work object', () => {

274 - const root = ReactDOM.createRoot(container);

273 + const root = ReactDOM.unstable_createRoot(container);

274 const batch = root.createBatch();

275 const work = batch.render('Hi');

276 let ops = [];

@@ -290,7 +289,7 @@ describe('ReactDOMRoot', () => {

289 });

290

291 it('can commit an empty batch', () => {

293 - const root = ReactDOM.createRoot(container);

292 + const root = ReactDOM.unstable_createRoot(container);

293 root.render(<AsyncMode>1</AsyncMode>);

294

295 expire(2000);

@@ -307,7 +306,7 @@ describe('ReactDOMRoot', () => {

306

307 it('two batches created simultaneously are committed separately', () => {

308 // (In other words, they have distinct expiration times)

310 - const root = ReactDOM.createRoot(container);

309 + const root = ReactDOM.unstable_createRoot(container);

310 const batch1 = root.createBatch();

311 batch1.render(1);

312 const batch2 = root.createBatch();

@@ -323,7 +322,7 @@ describe('ReactDOMRoot', () => {

322 });

323

324 it('commits an earlier batch without committing a later batch', () => {

326 - const root = ReactDOM.createRoot(container);

325 + const root = ReactDOM.unstable_createRoot(container);

326 const batch1 = root.createBatch();

327 batch1.render(1);

328

@@ -342,7 +341,7 @@ describe('ReactDOMRoot', () => {

341 });

342

343 it('commits a later batch without committing an earlier batch', () => {

345 - const root = ReactDOM.createRoot(container);

344 + const root = ReactDOM.unstable_createRoot(container);

345 const batch1 = root.createBatch();

346 batch1.render(1);

347

@@ -362,7 +361,7 @@ describe('ReactDOMRoot', () => {

361 });

362

363 it('handles fatal errors triggered by batch.commit()', () => {

365 - const root = ReactDOM.createRoot(container);

364 + const root = ReactDOM.unstable_createRoot(container);

365 const batch = root.createBatch();

366 const InvalidType = undefined;

367 expect(() => batch.render(<InvalidType />)).toWarnDev([

packages/react-dom/src/client/ReactDOM.js

+7 -10

@@ -28,7 +28,6 @@ import * as EventPluginHub from 'events/EventPluginHub';

28 import * as EventPluginRegistry from 'events/EventPluginRegistry';

29 import * as EventPropagators from 'events/EventPropagators';

30 import * as ReactInstanceMap from 'shared/ReactInstanceMap';

31 -import {enableCreateRoot} from 'shared/ReactFeatureFlags';

31 import ReactVersion from 'shared/ReactVersion';

32 import * as ReactDOMFrameScheduling from 'shared/ReactDOMFrameScheduling';

33 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';

@@ -1304,15 +1303,13 @@ type RootOptions = {

1303 hydrate?: boolean,

1304 };

1305

1307 -if (enableCreateRoot) {

1308 - ReactDOM.createRoot = function createRoot(

1309 - container: DOMContainer,

1310 - options?: RootOptions,

1311 - ): ReactRoot {

1312 - const hydrate = options != null && options.hydrate === true;

1313 - return new ReactRoot(container, true, hydrate);

1314 - };

1315 -}

1306 +ReactDOM.unstable_createRoot = function createRoot(

1307 + container: DOMContainer,

1308 + options?: RootOptions,

1309 +): ReactRoot {

1310 + const hydrate = options != null && options.hydrate === true;

1311 + return new ReactRoot(container, true, hydrate);

1312 +};

1313

1314 const foundDevTools = DOMRenderer.injectIntoDevTools({

1315 findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,

packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js

+5 -6

@@ -452,12 +452,11 @@ describe('ChangeEventPlugin', () => {

452 ReactFeatureFlags = require('shared/ReactFeatureFlags');

453 ReactFeatureFlags.enableAsyncSubtreeAPI = true;

454 ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;

455 - ReactFeatureFlags.enableCreateRoot = true;

455 ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;

456 ReactDOM = require('react-dom');

457 });

458 it('text input', () => {

460 - const root = ReactDOM.createRoot(container);

459 + const root = ReactDOM.unstable_createRoot(container);

460 let input;

461

462 let ops = [];

@@ -504,7 +503,7 @@ describe('ChangeEventPlugin', () => {

503 });

504

505 it('checkbox input', () => {

507 - const root = ReactDOM.createRoot(container);

506 + const root = ReactDOM.unstable_createRoot(container);

507 let input;

508

509 let ops = [];

@@ -566,7 +565,7 @@ describe('ChangeEventPlugin', () => {

565 });

566

567 it('textarea', () => {

569 - const root = ReactDOM.createRoot(container);

568 + const root = ReactDOM.unstable_createRoot(container);

569 let textarea;

570

571 let ops = [];

@@ -613,7 +612,7 @@ describe('ChangeEventPlugin', () => {

612 });

613

614 it('parent of input', () => {

616 - const root = ReactDOM.createRoot(container);

615 + const root = ReactDOM.unstable_createRoot(container);

616 let input;

617

618 let ops = [];

@@ -664,7 +663,7 @@ describe('ChangeEventPlugin', () => {

663 });

664

665 it('is async for non-input events', () => {

667 - const root = ReactDOM.createRoot(container);

666 + const root = ReactDOM.unstable_createRoot(container);

667 let input;

668

669 let ops = [];

packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js

+2 -3

@@ -223,13 +223,12 @@ describe('SimpleEventPlugin', function() {

223 ReactFeatureFlags = require('shared/ReactFeatureFlags');

224 ReactFeatureFlags.enableAsyncSubtreeAPI = true;

225 ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;

226 - ReactFeatureFlags.enableCreateRoot = true;

226 ReactDOM = require('react-dom');

227 });

228

229 it('flushes pending interactive work before extracting event handler', () => {

230 const container = document.createElement('div');

232 - const root = ReactDOM.createRoot(container);

231 + const root = ReactDOM.unstable_createRoot(container);

232 document.body.appendChild(container);

233

234 let ops = [];

@@ -309,7 +308,7 @@ describe('SimpleEventPlugin', function() {

308

309 it('end result of many interactive updates is deterministic', () => {

310 const container = document.createElement('div');

312 - const root = ReactDOM.createRoot(container);

311 + const root = ReactDOM.unstable_createRoot(container);

312 document.body.appendChild(container);

313

314 let button;

packages/shared/ReactFeatureFlags.js

-1

@@ -10,7 +10,6 @@

10 import invariant from 'fbjs/lib/invariant';

12 // Exports ReactDOM.createRoot

13 -export const enableCreateRoot = false;

13 export const enableUserTimingAPI = __DEV__;

15 // Mutating mode (React DOM, React ART, React Native):

packages/shared/forks/ReactFeatureFlags.native-fabric.js

-1

@@ -14,7 +14,6 @@ import typeof * as FabricFeatureFlagsType from './ReactFeatureFlags.native-fabri

15 export const debugRenderPhaseSideEffects = false;

16 export const debugRenderPhaseSideEffectsForStrictMode = false;

17 -export const enableCreateRoot = false;

17 export const enableUserTimingAPI = __DEV__;

18 export const enableGetDerivedStateFromCatch = false;

19 export const warnAboutDeprecatedLifecycles = false;

packages/shared/forks/ReactFeatureFlags.native.js

-1

@@ -22,7 +22,6 @@ export const {

22 } = require('ReactFeatureFlags');

24 // The rest of the flags are static for better dead code elimination.

25 -export const enableCreateRoot = false;

25 export const enableUserTimingAPI = __DEV__;

26 export const enableMutatingReconciler = true;

27 export const enableNoopReconciler = false;

packages/shared/forks/ReactFeatureFlags.persistent.js

-1

@@ -14,7 +14,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste