Revert "Remove blocking mode and blocking root (#20888)" (#20916)

This reverts commit 553440b.

Author: acdlite

packages/react-dom/index.classic.fb.js

@@ -30,6 +30,8 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
+  createBlockingRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,

packages/react-dom/index.experimental.js

@@ -20,6 +20,7 @@ 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.

packages/react-dom/index.js

@@ -21,6 +21,8 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
+  createBlockingRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,

packages/react-dom/index.modern.fb.js

@@ -15,6 +15,8 @@ export {
   version,
   createRoot,
   createRoot as unstable_createRoot,
+  createBlockingRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,

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

@@ -593,6 +593,33 @@ 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);
+
+      function Text(props) {
+        Scheduler.unstable_yieldValue(props.text);
+        return props.text;
+      }
+
+      root.render(
+        <>
+          <Text text="A" />
+          <Text text="B" />
+          <Text text="C" />
+        </>,
+      );
+
+      // 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');
+    });
+  });
+
   // @gate experimental
   it('unmounted roots should never clear newer root content from a container', () => {
     const ref = React.createRef();

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

@@ -352,7 +352,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createRoot(container, { hydrate: true })' +
+        'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +

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

@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createRoot(parent, {hydrate: true});
+      const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
       root.render(example);
     });
 

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

@@ -72,6 +72,33 @@ 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(() => {}, []);
@@ -97,6 +124,19 @@ 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(() => {
@@ -691,10 +731,14 @@ function runActTests(label, render, unmount, rerender) {
 
         it('triggers fallbacks if available', async () => {
           if (label !== 'legacy mode') {
-            // FIXME: Support for Concurrent Root intentionally removed
-            // from the public version of `act`. It will be added back in
-            // a future major version, Concurrent Root officially released.
-            // Consider skipping all non-Legacy tests in this suite until then.
+            // 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.
             return;
           }
 
@@ -750,8 +794,10 @@ 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, all fallbacks are forced to display,
-            // even during a refresh transition.
+            // 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.
             expect(
               document.querySelector('[data-test-id=spinner]'),
             ).not.toBeNull();

packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js

@@ -43,3 +43,22 @@ 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([]);
+});

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

@@ -18,7 +18,7 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, isValidContainer} from './ReactDOMRoot';
+import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -201,6 +201,7 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot,
+  createBlockingRoot,
   flushControlled as unstable_flushControlled,
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer