Scaffolding for <Catch>

Exposes the <Catch> component (behind a flag) and teachs Fiber/Fizz to
recognize it. Basically everything except the actual error handling
behavior; it gets rendered as a fragment for now.

Author: acdlite

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

@@ -25,6 +25,8 @@ let ReactDOMClient;
 let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
+let Catch;
+let createCatch;
 let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
 let use;
@@ -79,6 +81,8 @@ describe('ReactDOMFizzServer', () => {
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
     Suspense = React.Suspense;
+    Catch = React.experimental_Catch;
+    createCatch = React.experimental_createCatch;
     use = React.use;
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.SuspenseList;
@@ -1201,6 +1205,35 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(b);
   });
 
+  // TODO: This API is not fully implemented yet. This test just confirms that
+  // the API is exposed and the component type is recognized by React.
+  // @gate enableCreateCatch
+  it('renders <Catch> boundary', async () => {
+    const TypedCatch = createCatch();
+
+    function App() {
+      return (
+        <Catch>
+          <TypedCatch>
+            <Text text="Hi!" />
+          </TypedCatch>
+        </Catch>
+      );
+    }
+
+    await act(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual('Hi!');
+
+    await clientAct(() => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(getVisibleChildren(container)).toEqual('Hi!');
+  });
+
   // @gate enableSuspenseList
   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
     const ref = React.createRef();

packages/react-reconciler/src/ReactFiber.js

@@ -39,6 +39,7 @@ import {
   enableDebugTracing,
   enableFloat,
   enableHostSingletons,
+  enableCreateCatch,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
@@ -69,6 +70,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
   TracingMarkerComponent,
+  CatchComponent,
 } from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -105,6 +107,8 @@ import {
   REACT_LEGACY_HIDDEN_TYPE,
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
+  REACT_CATCH_TYPE,
+  REACT_TYPED_CATCH_TYPE,
 } from 'shared/ReactSymbols';
 import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent';
 import {
@@ -583,6 +587,13 @@ export function createFiberFromTypeAndProps(
               // This is a consumer
               fiberTag = ContextConsumer;
               break getTag;
+            case REACT_CATCH_TYPE:
+            case REACT_TYPED_CATCH_TYPE:
+              if (!enableCreateCatch) {
+                throw new Error('Not implemented.');
+              }
+              fiberTag = CatchComponent;
+              break getTag;
             case REACT_FORWARD_REF_TYPE:
               fiberTag = ForwardRef;
               if (__DEV__) {

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -74,6 +74,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
   TracingMarkerComponent,
+  CatchComponent,
 } from './ReactWorkTags';
 import {
   NoFlags,
@@ -111,6 +112,7 @@ import {
   enableHostSingletons,
   enableFormActions,
   enableAsyncActions,
+  enableCreateCatch,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -1426,6 +1428,20 @@ function finishClassComponent(
   return workInProgress.child;
 }
 
+function updateCatchComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+): Fiber | null {
+  if (!enableCreateCatch || !(workInProgress.mode & ConcurrentMode)) {
+    throw new Error('Not implemented.');
+  }
+  // TODO: Catch is not implemented yet.
+  const nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function pushHostRootContext(workInProgress: Fiber) {
   const root = (workInProgress.stateNode: FiberRoot);
   if (root.pendingContext) {
@@ -4277,6 +4293,12 @@ function beginWork(
       }
       break;
     }
+    case CatchComponent: {
+      if (enableCreateCatch) {
+        return updateCatchComponent(current, workInProgress, renderLanes);
+      }
+      break;
+    }
   }
 
   throw new Error(

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -72,6 +72,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
   TracingMarkerComponent,
+  CatchComponent,
 } from './ReactWorkTags';
 import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
@@ -178,6 +179,7 @@ import {
   popRootMarkerInstance,
 } from './ReactFiberTracingMarkerComponent';
 import {suspendCommit} from './ReactFiberThenable';
+import {enableCreateCatch} from '../../shared/ReactFeatureFlags';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -1868,6 +1870,12 @@ function completeWork(
       }
       return null;
     }
+    case CatchComponent: {
+      if (enableCreateCatch) {
+        bubbleProperties(workInProgress);
+        return null;
+      }
+    }
   }
 
   throw new Error(

packages/react-reconciler/src/ReactWorkTags.js

@@ -35,7 +35,8 @@ export type WorkTag =
   | 24
   | 25
   | 26
-  | 27;
+  | 27
+  | 28;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -64,3 +65,4 @@ export const CacheComponent = 24;
 export const TracingMarkerComponent = 25;
 export const HostHoistable = 26;
 export const HostSingleton = 27;
+export const CatchComponent = 28;

packages/react-reconciler/src/__tests__/ReactCatch-test.js

@@ -0,0 +1,46 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let assertLog;
+let Catch;
+let createCatch;
+
+describe('ReactCatch', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('internal-test-utils').act;
+    assertLog = require('internal-test-utils').assertLog;
+    Catch = React.experimental_Catch;
+    createCatch = React.experimental_createCatch;
+  });
+
+  function Text({text}) {
+    Scheduler.log(text);
+    return text;
+  }
+
+  // TODO: This API is not fully implemented yet. This test just confirms that
+  // the API is exposed and the component type is recognized by React.
+  // @gate enableCreateCatch
+  test('<Catch> API exists', async () => {
+    const TypedCatch = createCatch();
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Catch>
+          <TypedCatch>
+            <Text text="Hi!" />
+          </TypedCatch>
+        </Catch>,
+      );
+    });
+    assertLog(['Hi!']);
+    expect(root).toMatchRenderedOutput('Hi!');
+  });
+});

packages/react-server/src/ReactFizzServer.js

@@ -129,6 +129,8 @@ import {
   REACT_SERVER_CONTEXT_TYPE,
   REACT_SCOPE_TYPE,
   REACT_OFFSCREEN_TYPE,
+  REACT_CATCH_TYPE,
+  REACT_TYPED_CATCH_TYPE,
 } from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -1275,6 +1277,11 @@ function renderElement(
         renderLazyComponent(request, task, prevThenableState, type, props);
         return;
       }
+      case REACT_CATCH_TYPE:
+      case REACT_TYPED_CATCH_TYPE: {
+        renderNodeDestructive(request, task, null, props.children);
+        return;
+      }
     }
   }
 

packages/react/index.classic.fb.js

@@ -20,6 +20,9 @@ export {
   SuspenseList,
   SuspenseList as unstable_SuspenseList, // TODO: Remove once call sights updated to SuspenseList
   cloneElement,
+  experimental_Catch,
+  experimental_createCatch,
+  experimental_raise,
   createContext,
   createElement,
   createFactory,

packages/react/index.experimental.js

@@ -19,6 +19,9 @@ export {
   Suspense,
   SuspenseList,
   cloneElement,
+  experimental_Catch,
+  experimental_createCatch,
+  experimental_raise,
   createContext,
   createElement,
   createFactory,

packages/react/index.js

@@ -42,6 +42,9 @@ export {
   Suspense,
   SuspenseList,
   cloneElement,
+  experimental_Catch,
+  experimental_createCatch,
+  experimental_raise,
   createContext,
   createElement,
   createFactory,