Remove Blocking Mode (again) (#20974)

* Remove Blocking Mode (again) * Rename batchingmode file and comment
facebook · Mar 10, 2021 · 860f673 · 860f673
1 parent acde654
commit 860f673
Show file tree

Hide file tree

Showing 36 changed files with 121 additions and 332 deletions.
diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
@@ -30,8 +30,6 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,

diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
@@ -20,7 +20,6 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot as unstable_createRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   // DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.

diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
@@ -21,8 +21,6 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,

diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
@@ -15,8 +15,6 @@ export {
   version,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -574,31 +574,29 @@ describe('ReactDOMFiberAsync', () => {
     expect(containerC.textContent).toEqual('Finished');
   });
 
-  describe('createBlockingRoot', () => {
-    // @gate experimental
-    it('updates flush without yielding in the next event', () => {
-      const root = ReactDOM.unstable_createBlockingRoot(container);
+  // @gate experimental
+  it('updates flush without yielding in the next event', () => {
+    const root = ReactDOM.unstable_createRoot(container);
 
-      function Text(props) {
-        Scheduler.unstable_yieldValue(props.text);
-        return props.text;
-      }
+    function Text(props) {
+      Scheduler.unstable_yieldValue(props.text);
+      return props.text;
+    }
 
-      root.render(
-        <>
-          <Text text="A" />
-          <Text text="B" />
-          <Text text="C" />
-        </>,
-      );
+    root.render(
+      <>
+        <Text text="A" />
+        <Text text="B" />
+        <Text text="C" />
+      </>,
+    );
 
-      // Nothing should have rendered yet
-      expect(container.textContent).toEqual('');
+    // Nothing should have rendered yet
+    expect(container.textContent).toEqual('');
 
-      // Everything should render immediately in the next event
-      expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
-      expect(container.textContent).toEqual('ABC');
-    });
+    // Everything should render immediately in the next event
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+    expect(container.textContent).toEqual('ABC');
   });
 
   // @gate experimental

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -357,7 +357,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+        'ReactDOM.createRoot(container, { hydrate: true })' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
+      const root = ReactDOM.createRoot(parent, {hydrate: true});
       root.render(example);
     });
 

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -72,33 +72,6 @@ describe('ReactTestUtils.act()', () => {
 
   runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);
 
-  // and then in blocking mode
-  if (__EXPERIMENTAL__) {
-    let blockingRoot = null;
-    const renderBatched = (el, dom) => {
-      blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);
-      blockingRoot.render(el);
-    };
-
-    const unmountBatched = dom => {
-      if (blockingRoot !== null) {
-        blockingRoot.unmount();
-        blockingRoot = null;
-      }
-    };
-
-    const rerenderBatched = el => {
-      blockingRoot.render(el);
-    };
-
-    runActTests(
-      'blocking mode',
-      renderBatched,
-      unmountBatched,
-      rerenderBatched,
-    );
-  }
-
   describe('unacted effects', () => {
     function App() {
       React.useEffect(() => {}, []);
@@ -124,19 +97,6 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
-    // @gate experimental
-    it('warns in blocking mode', () => {
-      expect(() => {
-        const root = ReactDOM.unstable_createBlockingRoot(
-          document.createElement('div'),
-        );
-        root.render(<App />);
-        Scheduler.unstable_flushAll();
-      }).toErrorDev([
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
-    });
-
     // @gate experimental
     it('warns in concurrent mode', () => {
       expect(() => {
@@ -731,14 +691,10 @@ function runActTests(label, render, unmount, rerender) {
 
         it('triggers fallbacks if available', async () => {
           if (label !== 'legacy mode') {
-            // FIXME: Support for Blocking* and Concurrent Mode were
-            // intentionally removed from the public version of `act`. It will
-            // be added back in a future major version, before Blocking and and
-            // Concurrent Mode are officially released. Consider disabling all
-            // non-Legacy tests in this suite until then.
-            //
-            // *Blocking Mode actually does happen to work, though
-            // not "officially" since it's an unreleased feature.
+            // FIXME: Support for Concurrent Root intentionally removed
+            // from the public version of `act`. It will be added back in
+            // a future major version, before the Concurrent Root is released.
+            // Consider skipping all non-Legacy tests in this suite until then.
             return;
           }
 
@@ -794,10 +750,8 @@ function runActTests(label, render, unmount, rerender) {
             // In Concurrent Mode, refresh transitions delay indefinitely.
             expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
           } else {
-            // In Legacy Mode and Blocking Mode, all fallbacks are forced to
-            // display, even during a refresh transition.
-            // TODO: Consider delaying indefinitely in Blocking Mode, to match
-            // Concurrent Mode semantics.
+            // In Legacy Mode, all fallbacks are forced to display,
+            // even during a refresh transition.
             expect(
               document.querySelector('[data-test-id=spinner]'),
             ).not.toBeNull();

diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -43,22 +43,3 @@ it('should warn when rendering in concurrent mode', () => {
     ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
   }).toErrorDev([]);
 });
-
-// @gate experimental
-it('should warn when rendering in blocking mode', () => {
-  expect(() => {
-    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
-      <App />,
-    );
-  }).toErrorDev(
-    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
-      'to guarantee consistent behaviour across tests and browsers.',
-    {withoutStack: true},
-  );
-  // does not warn twice
-  expect(() => {
-    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
-      <App />,
-    );
-  }).toErrorDev([]);
-});
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
@@ -18,7 +18,7 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
+import {createRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -201,7 +201,6 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot,
-  createBlockingRoot,
   flushControlled as unstable_flushControlled,
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -51,25 +51,17 @@ import {
   registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
-import {
-  BlockingRoot,
-  ConcurrentRoot,
-  LegacyRoot,
-} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 
 function ReactDOMRoot(container: Container, options: void | RootOptions) {
   this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
 }
 
-function ReactDOMBlockingRoot(
-  container: Container,
-  tag: RootTag,
-  options: void | RootOptions,
-) {
-  this._internalRoot = createRootImpl(container, tag, options);
+function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {
+  this._internalRoot = createRootImpl(container, LegacyRoot, options);
 }
 
-ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(
+ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
   children: ReactNodeList,
 ): void {
   const root = this._internalRoot;
@@ -99,7 +91,7 @@ ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(): void {
+ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -169,23 +161,11 @@ export function createRoot(
   return new ReactDOMRoot(container, options);
 }
 
-export function createBlockingRoot(
-  container: Container,
-  options?: RootOptions,
-): RootType {
-  invariant(
-    isValidContainer(container),
-    'createRoot(...): Target container is not a DOM element.',
-  );
-  warnIfReactDOMContainerInDEV(container);
-  return new ReactDOMBlockingRoot(container, BlockingRoot, options);
-}
-
 export function createLegacyRoot(
   container: Container,
   options?: RootOptions,
 ): RootType {
-  return new ReactDOMBlockingRoot(container, LegacyRoot, options);
+  return new ReactDOMLegacyRoot(container, options);
 }
 
 export function isValidContainer(node: mixed): boolean {

diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
@@ -23,7 +23,6 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
-  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,

diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -23,7 +23,6 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
-  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,11 +21,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-import {
-  ConcurrentRoot,
-  BlockingRoot,
-  LegacyRoot,
-} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
@@ -752,33 +748,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
     },
 
-    createBlockingRoot() {
-      const container = {
-        rootID: '' + idCounter++,
-        pendingChildren: [],
-        children: [],
-      };
-      const fiberRoot = NoopRenderer.createContainer(
-        container,
-        BlockingRoot,
-        false,
-        null,
-        null,
-      );
-      return {
-        _Scheduler: Scheduler,
-        render(children: ReactNodeList) {
-          NoopRenderer.updateContainer(children, fiberRoot, null, null);
-        },
-        getChildren() {
-          return getChildren(container);
-        },
-        getChildrenAsJSX() {
-          return getChildrenAsJSX(container);
-        },
-      };
-    },
-
     createLegacyRoot() {
       const container = {
         rootID: '' + idCounter++,