Remove Blocks (#20138)

* Remove Blocks

* Remove Flight Server Runtime

There's no need for this now that the JSResource is part of the bundler
protocol. Might need something for Webpack plugin specifically later.

* Devtools

Author: sebmarkbage

packages/react-client/src/ReactFlightClient.js

@@ -8,7 +8,6 @@
  */
 
 import type {Wakeable} from 'shared/ReactTypes';
-import type {BlockComponent, BlockRenderFunction} from 'react/src/ReactBlock';
 import type {LazyComponent} from 'react/src/ReactLazy';
 
 import type {
@@ -25,11 +24,7 @@ import {
   parseModel,
 } from './ReactFlightClientHostConfig';
 
-import {
-  REACT_LAZY_TYPE,
-  REACT_BLOCK_TYPE,
-  REACT_ELEMENT_TYPE,
-} from 'shared/ReactSymbols';
+import {REACT_LAZY_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 export type JSONValue =
   | number
@@ -229,15 +224,6 @@ export function reportGlobalError(response: Response, error: Error): void {
   });
 }
 
-function readMaybeChunk<T>(maybeChunk: SomeChunk<T> | T): T {
-  if (maybeChunk == null || !(maybeChunk instanceof Chunk)) {
-    // $FlowFixMe
-    return maybeChunk;
-  }
-  const chunk: SomeChunk<T> = (maybeChunk: any);
-  return readChunk(chunk);
-}
-
 function createElement(type, key, props): React$Element<any> {
   const element: any = {
     // This tag allows us to uniquely identify this as a React Element
@@ -279,45 +265,6 @@ function createElement(type, key, props): React$Element<any> {
   return element;
 }
 
-type UninitializedBlockPayload<Data> = [
-  mixed,
-  BlockRenderFunction<any, Data> | SomeChunk<BlockRenderFunction<any, Data>>,
-  Data | SomeChunk<Data>,
-  Response,
-];
-
-function initializeBlock<Props, Data>(
-  tuple: UninitializedBlockPayload<Data>,
-): BlockComponent<Props, Data> {
-  // Require module first and then data. The ordering matters.
-  const moduleExport = readMaybeChunk(tuple[1]);
-
-  // The ordering here is important because this call might suspend.
-  // We don't want that to prevent the module graph for being initialized.
-  const data: Data = readMaybeChunk(tuple[2]);
-
-  return {
-    $$typeof: REACT_BLOCK_TYPE,
-    _status: -1,
-    _data: data,
-    _render: moduleExport,
-  };
-}
-
-function createLazyBlock<Props, Data>(
-  tuple: UninitializedBlockPayload<Data>,
-): LazyComponent<BlockComponent<Props, Data>, UninitializedBlockPayload<Data>> {
-  const lazyType: LazyComponent<
-    BlockComponent<Props, Data>,
-    UninitializedBlockPayload<Data>,
-  > = {
-    $$typeof: REACT_LAZY_TYPE,
-    _payload: tuple,
-    _init: initializeBlock,
-  };
-  return lazyType;
-}
-
 function createLazyChunkWrapper<T>(
   chunk: SomeChunk<T>,
 ): LazyComponent<T, SomeChunk<T>> {
@@ -354,25 +301,15 @@ export function parseModelString(
       } else {
         const id = parseInt(value.substring(1), 16);
         const chunk = getChunk(response, id);
-        if (parentObject[0] === REACT_BLOCK_TYPE) {
-          // Block types know how to deal with lazy values.
-          return chunk;
-        }
-        // For anything else we must Suspend this block if
-        // we don't yet have the value.
         return readChunk(chunk);
       }
     }
     case '@': {
-      if (value === '@') {
-        return REACT_BLOCK_TYPE;
-      } else {
-        const id = parseInt(value.substring(1), 16);
-        const chunk = getChunk(response, id);
-        // We create a React.lazy wrapper around any lazy values.
-        // When passed into React, we'll know how to suspend on this.
-        return createLazyChunkWrapper(chunk);
-      }
+      const id = parseInt(value.substring(1), 16);
+      const chunk = getChunk(response, id);
+      // We create a React.lazy wrapper around any lazy values.
+      // When passed into React, we'll know how to suspend on this.
+      return createLazyChunkWrapper(chunk);
     }
   }
   return value;
@@ -387,9 +324,6 @@ export function parseModelTuple(
     // TODO: Consider having React just directly accept these arrays as elements.
     // Or even change the ReactElement type to be an array.
     return createElement(tuple[1], tuple[2], tuple[3]);
-  } else if (tuple[0] === REACT_BLOCK_TYPE) {
-    // TODO: Consider having React just directly accept these arrays as blocks.
-    return createLazyBlock((tuple: any));
   }
   return value;
 }

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -10,13 +10,10 @@
 
 'use strict';
 
-const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
 let act;
 let React;
 let ReactNoop;
 let ReactNoopFlightServer;
-let ReactNoopFlightServerRuntime;
 let ReactNoopFlightClient;
 let ErrorBoundary;
 
@@ -27,7 +24,6 @@ describe('ReactFlight', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
-    ReactNoopFlightServerRuntime = require('react-noop-renderer/flight-server-runtime');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = ReactNoop.act;
 
@@ -60,25 +56,6 @@ describe('ReactFlight', () => {
     };
   }
 
-  function block(render, load) {
-    if (load === undefined) {
-      return () => {
-        return ReactNoopFlightServerRuntime.serverBlockNoData(
-          moduleReference(render),
-        );
-      };
-    }
-    return function(...args) {
-      const curriedLoad = () => {
-        return load(...args);
-      };
-      return ReactNoopFlightServerRuntime.serverBlock(
-        moduleReference(render),
-        curriedLoad,
-      );
-    };
-  }
-
   it('can render a server component', () => {
     function Bar({text}) {
       return text.toUpperCase();
@@ -138,59 +115,6 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
   });
 
-  if (ReactFeatureFlags.enableBlocksAPI) {
-    it('can transfer a Block to the client and render there, without data', () => {
-      function User(props, data) {
-        return (
-          <span>
-            {props.greeting} {typeof data}
-          </span>
-        );
-      }
-      const loadUser = block(User);
-      const model = {
-        User: loadUser('Seb', 'Smith'),
-      };
-
-      const transport = ReactNoopFlightServer.render(model);
-
-      act(() => {
-        const rootModel = ReactNoopFlightClient.read(transport);
-        const UserClient = rootModel.User;
-        ReactNoop.render(<UserClient greeting="Hello" />);
-      });
-
-      expect(ReactNoop).toMatchRenderedOutput(<span>Hello undefined</span>);
-    });
-
-    it('can transfer a Block to the client and render there, with data', () => {
-      function load(firstName, lastName) {
-        return {name: firstName + ' ' + lastName};
-      }
-      function User(props, data) {
-        return (
-          <span>
-            {props.greeting}, {data.name}
-          </span>
-        );
-      }
-      const loadUser = block(User, load);
-      const model = {
-        User: loadUser('Seb', 'Smith'),
-      };
-
-      const transport = ReactNoopFlightServer.render(model);
-
-      act(() => {
-        const rootModel = ReactNoopFlightClient.read(transport);
-        const UserClient = rootModel.User;
-        ReactNoop.render(<UserClient greeting="Hello" />);
-      });
-
-      expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
-    });
-  }
-
   it('should error if a non-serializable value is passed to a host component', () => {
     function EventHandlerProp() {
       return (

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -30,7 +30,6 @@ import {
   SimpleMemoComponent,
   ContextProvider,
   ForwardRef,
-  Block,
 } from 'react-reconciler/src/ReactWorkTags';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
@@ -667,8 +666,7 @@ export function inspectHooksOfFiber(
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
-    fiber.tag !== ForwardRef &&
-    fiber.tag !== Block
+    fiber.tag !== ForwardRef
   ) {
     throw new Error(
       'Unknown Fiber. Needs to be a function component to inspect hooks.',

packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js

@@ -17,8 +17,6 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 import type {CurrentDispatcherRef} from './types';
 
 import {
-  BLOCK_NUMBER,
-  BLOCK_SYMBOL_STRING,
   FORWARD_REF_NUMBER,
   FORWARD_REF_SYMBOL_STRING,
   LAZY_NUMBER,
@@ -276,14 +274,6 @@ export function describeUnknownElementTypeFrameInDEV(
           ownerFn,
           currentDispatcherRef,
         );
-      case BLOCK_NUMBER:
-      case BLOCK_SYMBOL_STRING:
-        return describeFunctionComponentFrame(
-          type._render,
-          source,
-          ownerFn,
-          currentDispatcherRef,
-        );
       case LAZY_NUMBER:
       case LAZY_SYMBOL_STRING: {
         const lazyComponent: LazyComponent<any, any> = (type: any);

packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js

@@ -35,7 +35,6 @@ function describeFiber(
     IndeterminateComponent,
     SimpleMemoComponent,
     ForwardRef,
-    Block,
     ClassComponent,
   } = workTagMap;
 
@@ -70,13 +69,6 @@ function describeFiber(
         owner,
         currentDispatcherRef,
       );
-    case Block:
-      return describeFunctionComponentFrame(
-        workInProgress.type._render,
-        source,
-        owner,
-        currentDispatcherRef,
-      );
     case ClassComponent:
       return describeClassComponentFrame(
         workInProgress.type,

packages/react-devtools-shared/src/backend/ReactSymbols.js

@@ -13,9 +13,6 @@
 // 2. DevTools must support both Symbol and numeric forms of each symbol;
 //    Since e.g. standalone DevTools runs in a separate process, it can't rely on its own ES capabilities.
 
-export const BLOCK_NUMBER = 0xead9;
-export const BLOCK_SYMBOL_STRING = 'Symbol(react.block)';
-
 export const CONCURRENT_MODE_NUMBER = 0xeacf;
 export const CONCURRENT_MODE_SYMBOL_STRING = 'Symbol(react.concurrent_mode)';
 
@@ -61,9 +58,6 @@ export const PROVIDER_SYMBOL_STRING = 'Symbol(react.provider)';
 export const SCOPE_NUMBER = 0xead7;
 export const SCOPE_SYMBOL_STRING = 'Symbol(react.scope)';
 
-export const SERVER_BLOCK_NUMBER = 0xeada;
-export const SERVER_BLOCK_SYMBOL_STRING = 'Symbol(react.server.block)';
-
 export const STRICT_MODE_NUMBER = 0xeacc;
 export const STRICT_MODE_SYMBOL_STRING = 'Symbol(react.strict_mode)';
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -169,7 +169,6 @@ export function getInternalReactConstants(
   if (gte(version, '17.0.0-alpha')) {
     // TODO (Offscreen) Update the version number above to reflect the first Offscreen alpha/beta release.
     ReactTypeOfWork = {
-      Block: 22,
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -188,7 +187,7 @@ export function getInternalReactConstants(
       LazyComponent: 16,
       MemoComponent: 14,
       Mode: 8,
-      OffscreenComponent: 23, // Experimental
+      OffscreenComponent: 22, // Experimental
       Profiler: 12,
       SimpleMemoComponent: 15,
       SuspenseComponent: 13,
@@ -197,7 +196,6 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
-      Block: 22,
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -225,7 +223,6 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
-      Block: -1, // Doesn't exist yet
       ClassComponent: 2,
       ContextConsumer: 11,
       ContextProvider: 12,
@@ -253,7 +250,6 @@ export function getInternalReactConstants(
     };
   } else {
     ReactTypeOfWork = {
-      Block: -1, // Doesn't exist yet
       ClassComponent: 2,
       ContextConsumer: 12,
       ContextProvider: 13,

packages/react-devtools-shared/src/backend/types.js

@@ -26,7 +26,6 @@ export type WorkFlags = number;
 export type ExpirationTime = number;
 
 export type WorkTagMap = {|
-  Block: WorkTag,
   ClassComponent: WorkTag,
   ContextConsumer: WorkTag,
   ContextProvider: WorkTag,

packages/react-noop-renderer/flight-server-runtime.js

@@ -29,7 +29,6 @@
     "flight-client.js",
     "flight-modules.js",
     "flight-server.js",
-    "flight-server-runtime.js",
     "cjs/"
   ]
 }