Rename Chunks API to Blocks (#18086)

Sounds like this is the name we're going with. This also helps us
distinguish it from other "chunking" implementation details.

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

@@ -25,7 +25,7 @@ import {
   SimpleMemoComponent,
   ContextProvider,
   ForwardRef,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
@@ -628,7 +628,7 @@ export function inspectHooksOfFiber(
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
     fiber.tag !== ForwardRef &&
-    fiber.tag !== Chunk
+    fiber.tag !== Block
   ) {
     throw new Error(
       'Unknown Fiber. Needs to be a function component to inspect hooks.',

packages/react-reconciler/src/ReactChildFiber.js

@@ -19,7 +19,7 @@ import {
   REACT_ELEMENT_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_PORTAL_TYPE,
-  REACT_CHUNK_TYPE,
+  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 import {
   FunctionComponent,
@@ -27,10 +27,10 @@ import {
   HostText,
   HostPortal,
   Fragment,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 import invariant from 'shared/invariant';
-import {warnAboutStringRefs, enableChunksAPI} from 'shared/ReactFeatureFlags';
+import {warnAboutStringRefs, enableBlocksAPI} from 'shared/ReactFeatureFlags';
 
 import {
   createWorkInProgress,
@@ -416,9 +416,9 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         return existing;
       } else if (
-        enableChunksAPI &&
-        current.tag === Chunk &&
-        element.type.$$typeof === REACT_CHUNK_TYPE &&
+        enableBlocksAPI &&
+        current.tag === Block &&
+        element.type.$$typeof === REACT_BLOCK_TYPE &&
         element.type.render === current.type.render
       ) {
         // Same as above but also update the .type field.
@@ -1175,10 +1175,10 @@ function ChildReconciler(shouldTrackSideEffects) {
             }
             break;
           }
-          case Chunk:
-            if (enableChunksAPI) {
+          case Block:
+            if (enableBlocksAPI) {
               if (
-                element.type.$$typeof === REACT_CHUNK_TYPE &&
+                element.type.$$typeof === REACT_BLOCK_TYPE &&
                 element.type.render === child.type.render
               ) {
                 deleteRemainingChildren(returnFiber, child.sibling);
@@ -1192,7 +1192,7 @@ function ChildReconciler(shouldTrackSideEffects) {
                 return existing;
               }
             }
-          // We intentionally fallthrough here if enableChunksAPI is not on.
+          // We intentionally fallthrough here if enableBlocksAPI is not on.
           // eslint-disable-next-lined no-fallthrough
           default: {
             if (

packages/react-reconciler/src/ReactFiber.js

@@ -33,7 +33,7 @@ import {
   enableFundamentalAPI,
   enableUserTimingAPI,
   enableScopeAPI,
-  enableChunksAPI,
+  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoEffect, Placement} from 'shared/ReactSideEffectTags';
 import {ConcurrentRoot, BlockingRoot} from 'shared/ReactRootTags';
@@ -59,7 +59,7 @@ import {
   LazyComponent,
   FundamentalComponent,
   ScopeComponent,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -91,7 +91,7 @@ import {
   REACT_LAZY_TYPE,
   REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
-  REACT_CHUNK_TYPE,
+  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -391,9 +391,9 @@ export function resolveLazyComponentTag(Component: Function): WorkTag {
     if ($$typeof === REACT_MEMO_TYPE) {
       return MemoComponent;
     }
-    if (enableChunksAPI) {
-      if ($$typeof === REACT_CHUNK_TYPE) {
-        return Chunk;
+    if (enableBlocksAPI) {
+      if ($$typeof === REACT_BLOCK_TYPE) {
+        return Block;
       }
     }
   }
@@ -676,8 +676,8 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
-            case REACT_CHUNK_TYPE:
-              fiberTag = Chunk;
+            case REACT_BLOCK_TYPE:
+              fiberTag = Block;
               break getTag;
             case REACT_FUNDAMENTAL_TYPE:
               if (enableFundamentalAPI) {

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -42,7 +42,7 @@ import {
   IncompleteClassComponent,
   FundamentalComponent,
   ScopeComponent,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 import {
   NoEffect,
@@ -65,7 +65,7 @@ import {
   enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
-  enableChunksAPI,
+  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -701,10 +701,10 @@ function updateFunctionComponent(
   return workInProgress.child;
 }
 
-function updateChunk(
+function updateBlock(
   current: Fiber | null,
   workInProgress: Fiber,
-  chunk: any,
+  block: any,
   nextProps: any,
   renderExpirationTime: ExpirationTime,
 ) {
@@ -712,8 +712,8 @@ function updateChunk(
   // hasn't yet mounted. This happens after the first render suspends.
   // We'll need to figure out if this is fine or can cause issues.
 
-  const render = chunk.render;
-  const data = chunk.query();
+  const render = block.render;
+  const data = block.query();
 
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
@@ -1215,10 +1215,10 @@ function mountLazyComponent(
       );
       return child;
     }
-    case Chunk: {
-      if (enableChunksAPI) {
+    case Block: {
+      if (enableBlocksAPI) {
         // TODO: Resolve for Hot Reloading.
-        child = updateChunk(
+        child = updateBlock(
           null,
           workInProgress,
           Component,
@@ -3289,14 +3289,14 @@ function beginWork(
       }
       break;
     }
-    case Chunk: {
-      if (enableChunksAPI) {
-        const chunk = workInProgress.type;
+    case Block: {
+      if (enableBlocksAPI) {
+        const block = workInProgress.type;
         const props = workInProgress.pendingProps;
-        return updateChunk(
+        return updateBlock(
           current,
           workInProgress,
-          chunk,
+          block,
           props,
           renderExpirationTime,
         );

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -53,7 +53,7 @@ import {
   SuspenseListComponent,
   FundamentalComponent,
   ScopeComponent,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -249,7 +249,7 @@ function commitBeforeMutationLifeCycles(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent:
-    case Chunk: {
+    case Block: {
       return;
     }
     case ClassComponent: {
@@ -426,7 +426,7 @@ export function commitPassiveHookEffects(finishedWork: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent:
-      case Chunk: {
+      case Block: {
         // TODO (#17945) We should call all passive destroy functions (for all fibers)
         // before calling any create functions. The current approach only serializes
         // these for a single fiber.
@@ -450,7 +450,7 @@ function commitLifeCycles(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent:
-    case Chunk: {
+    case Block: {
       // At this point layout effects have already been destroyed (during mutation phase).
       // This is done to prevent sibling component effects from interfering with each other,
       // e.g. a destroy function in one component should never override a ref set
@@ -779,7 +779,7 @@ function commitUnmount(
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent:
-    case Chunk: {
+    case Block: {
       const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
       if (updateQueue !== null) {
         const lastEffect = updateQueue.lastEffect;
@@ -1360,7 +1360,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case ForwardRef:
       case MemoComponent:
       case SimpleMemoComponent:
-      case Chunk: {
+      case Block: {
         // Layout effects are destroyed during the mutation phase so that all
         // destroy functions for all fibers are called before any create functions.
         // This prevents sibling component effects from interfering with each other,
@@ -1403,7 +1403,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent:
-    case Chunk: {
+    case Block: {
       // Layout effects are destroyed during the mutation phase so that all
       // destroy functions for all fibers are called before any create functions.
       // This prevents sibling component effects from interfering with each other,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -51,7 +51,7 @@ import {
   IncompleteClassComponent,
   FundamentalComponent,
   ScopeComponent,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 import {NoMode, BlockingMode} from './ReactTypeOfMode';
 import {
@@ -119,7 +119,7 @@ import {
   enableDeprecatedFlareAPI,
   enableFundamentalAPI,
   enableScopeAPI,
-  enableChunksAPI,
+  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import {
   markSpawnedWork,
@@ -1295,8 +1295,8 @@ function completeWork(
       }
       break;
     }
-    case Chunk:
-      if (enableChunksAPI) {
+    case Block:
+      if (enableBlocksAPI) {
         return null;
       }
       break;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -88,7 +88,7 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  Chunk,
+  Block,
 } from 'shared/ReactWorkTags';
 import {
   NoEffect,
@@ -2682,7 +2682,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       tag !== ForwardRef &&
       tag !== MemoComponent &&
       tag !== SimpleMemoComponent &&
-      tag !== Chunk
+      tag !== Block
     ) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;

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

@@ -12,17 +12,17 @@ let React;
 let ReactNoop;
 let useState;
 let Suspense;
-let chunk;
+let block;
 let readString;
 
-describe('ReactChunks', () => {
+describe('ReactBlocks', () => {
   beforeEach(() => {
     jest.resetModules();
 
     React = require('react');
     ReactNoop = require('react-noop-renderer');
 
-    chunk = React.chunk;
+    block = React.block;
     useState = React.useState;
     Suspense = React.Suspense;
     let cache = new Map();
@@ -63,7 +63,7 @@ describe('ReactChunks', () => {
       );
     }
 
-    let loadUser = chunk(Query, Render);
+    let loadUser = block(Query, Render);
 
     function App({User}) {
       return (
@@ -102,7 +102,7 @@ describe('ReactChunks', () => {
       );
     }
 
-    let loadUser = chunk(Query, Render);
+    let loadUser = block(Query, Render);
 
     function App({User}) {
       return (
@@ -164,7 +164,7 @@ describe('ReactChunks', () => {
         );
       }
 
-      let loadUser = chunk(Query, Render);
+      let loadUser = block(Query, Render);
 
       function App({User}) {
         return (

packages/react-test-renderer/src/ReactTestRenderer.js

@@ -37,7 +37,7 @@ import {
   Profiler,
   MemoComponent,
   SimpleMemoComponent,
-  Chunk,
+  Block,
   IncompleteClassComponent,
   ScopeComponent,
 } from 'shared/ReactWorkTags';
@@ -188,9 +188,9 @@ function toTree(node: ?Fiber) {
         instance: null,
         rendered: childrenToTree(node.child),
       };
-    case Chunk:
+    case Block:
       return {
-        nodeType: 'chunk',
+        nodeType: 'block',
         type: node.type,
         props: {...node.memoizedProps},
         instance: null,
@@ -233,7 +233,7 @@ const validWrapperTypes = new Set([
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  Chunk,
+  Block,
   // Normally skipped, but used when there's more than one root child.
   HostRoot,
 ]);

packages/react/src/React.js

@@ -28,7 +28,7 @@ import {createContext} from './ReactContext';
 import {lazy} from './ReactLazy';
 import forwardRef from './forwardRef';
 import memo from './memo';
-import chunk from './chunk';
+import block from './block';
 import {
   useCallback,
   useContext,
@@ -63,7 +63,7 @@ import {
   enableFundamentalAPI,
   enableScopeAPI,
   exposeConcurrentModeAPIs,
-  enableChunksAPI,
+  enableBlocksAPI,
   disableCreateFactory,
 } from 'shared/ReactFeatureFlags';
 const React = {
@@ -120,8 +120,8 @@ if (exposeConcurrentModeAPIs) {
   React.unstable_withSuspenseConfig = withSuspenseConfig;
 }
 
-if (enableChunksAPI) {
-  React.chunk = chunk;
+if (enableBlocksAPI) {
+  React.block = block;
 }
 
 if (enableDeprecatedFlareAPI) {

packages/react/src/block.js

@@ -6,47 +6,47 @@
  */
 
 import {
-  REACT_CHUNK_TYPE,
+  REACT_BLOCK_TYPE,
   REACT_MEMO_TYPE,
   REACT_FORWARD_REF_TYPE,
 } from 'shared/ReactSymbols';
 
-opaque type Chunk<Props>: React$AbstractComponent<
+opaque type Block<Props>: React$AbstractComponent<
   Props,
   null,
 > = React$AbstractComponent<Props, null>;
 
-export default function chunk<Args, Props, Data>(
+export default function block<Args, Props, Data>(
   query: (...args: Args) => Data,
   render: (props: Props, data: Data) => React$Node,
-): (...args: Args) => Chunk<Props> {
+): (...args: Args) => Block<Props> {
   if (__DEV__) {
     if (typeof query !== 'function') {
       console.error(
-        'Chunks require a query function but was given %s.',
+        'Blocks require a query function but was given %s.',
         query === null ? 'null' : typeof query,
       );
     }
     if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
       console.error(
-        'Chunks require a render function but received a `memo` ' +
+        'Blocks require a render function but received a `memo` ' +
           'component. Use `memo` on an inner component instead.',
       );
     } else if (render != null && render.$$typeof === REACT_FORWARD_REF_TYPE) {
       console.error(
-        'Chunks require a render function but received a `forwardRef` ' +
+        'Blocks require a render function but received a `forwardRef` ' +
           'component. Use `forwardRef` on an inner component instead.',
       );
     } else if (typeof render !== 'function') {
       console.error(
-        'Chunks require a render function but was given %s.',
+        'Blocks require a render function but was given %s.',
         render === null ? 'null' : typeof render,
       );
     } else if (render.length !== 0 && render.length !== 2) {
       // Warn if it's not accepting two args.
       // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object
       console.error(
-        'Chunk render functions accept exactly two parameters: props and data. %s',
+        'Block render functions accept exactly two parameters: props and data. %s',
         render.length === 1
           ? 'Did you forget to use the data parameter?'
           : 'Any additional parameter will be undefined.',
@@ -58,15 +58,15 @@ export default function chunk<Args, Props, Data>(
       (render.defaultProps != null || render.propTypes != null)
     ) {
       console.error(
-        'Chunk render functions do not support propTypes or defaultProps. ' +
+        'Block render functions do not support propTypes or defaultProps. ' +
           'Did you accidentally pass a React component?',
       );
     }
   }
-  return function(): Chunk<Props> {
+  return function(): Block<Props> {
     let args = arguments;
     return {
-      $$typeof: REACT_CHUNK_TYPE,
+      $$typeof: REACT_BLOCK_TYPE,
       query: function() {
         return query.apply(null, args);
       },

packages/shared/ReactFeatureFlags.js

@@ -31,7 +31,7 @@ export const enableSuspenseServerRenderer = __EXPERIMENTAL__;
 export const enableSelectiveHydration = __EXPERIMENTAL__;
 
 // Flight experiments
-export const enableChunksAPI = __EXPERIMENTAL__;
+export const enableBlocksAPI = __EXPERIMENTAL__;
 
 // Only used in www builds.
 export const enableSchedulerDebugging = false;

packages/shared/ReactSymbols.js

@@ -51,7 +51,7 @@ export const REACT_SUSPENSE_LIST_TYPE = hasSymbol
   : 0xead8;
 export const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
 export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-export const REACT_CHUNK_TYPE = hasSymbol ? Symbol.for('react.chunk') : 0xead9;
+export const REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
 export const REACT_FUNDAMENTAL_TYPE = hasSymbol
   ? Symbol.for('react.fundamental')
   : 0xead5;

packages/shared/ReactWorkTags.js

@@ -54,4 +54,4 @@ export const DehydratedFragment = 18;
 export const SuspenseListComponent = 19;
 export const FundamentalComponent = 20;
 export const ScopeComponent = 21;
-export const Chunk = 22;
+export const Block = 22;

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

@@ -23,7 +23,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableChunksAPI = false;
+export const enableBlocksAPI = false;
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const warnAboutShorthandPropertyCollision = true;
 export const enableSchedulerDebugging = false;

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

@@ -20,7 +20,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableChunksAPI = false;
+export const enableBlocksAPI = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;

packages/shared/forks/ReactFeatureFlags.persistent.js

@@ -20,7 +20,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableChunksAPI = false;
+export const enableBlocksAPI = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -20,7 +20,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableChunksAPI = false;
+export const enableBlocksAPI = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -20,7 +20,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableChunksAPI = false;
+export const enableBlocksAPI = false;
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 export const warnAboutShorthandPropertyCollision = true;
 export const enableSchedulerDebugging = false;

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -20,7 +20,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableChunksAPI = false;
+export const enableBlocksAPI = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;

packages/shared/forks/ReactFeatureFlags.testing.www.js

@@ -20,7 +20,7 @@ export const enableProfilerTimer = false;
 export const enableSchedulerTracing = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
-export const enableChunksAPI = true;
+export const enableBlocksAPI = true;
 export const disableJavaScriptURLs = true;
 export const disableInputAttributeSyncing = false;
 export const exposeConcurrentModeAPIs = true;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -50,7 +50,7 @@ export const exposeConcurrentModeAPIs = true;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 
-export const enableChunksAPI = true;
+export const enableBlocksAPI = true;
 
 export const disableJavaScriptURLs = true;
 

packages/shared/getComponentName.js

@@ -21,7 +21,7 @@ import {
   REACT_SUSPENSE_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
   REACT_LAZY_TYPE,
-  REACT_CHUNK_TYPE,
+  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
 
@@ -80,7 +80,7 @@ function getComponentName(type: mixed): string | null {
         return getWrappedName(type, type.render, 'ForwardRef');
       case REACT_MEMO_TYPE:
         return getComponentName(type.type);
-      case REACT_CHUNK_TYPE:
+      case REACT_BLOCK_TYPE:
         return getComponentName(type.render);
       case REACT_LAZY_TYPE: {
         const thenable: LazyComponent<mixed> = (type: any);

packages/shared/isValidElementType.js

@@ -22,7 +22,7 @@ import {
   REACT_FUNDAMENTAL_TYPE,
   REACT_RESPONDER_TYPE,
   REACT_SCOPE_TYPE,
-  REACT_CHUNK_TYPE,
+  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 
 export default function isValidElementType(type: mixed) {
@@ -46,6 +46,6 @@ export default function isValidElementType(type: mixed) {
         type.$$typeof === REACT_FUNDAMENTAL_TYPE ||
         type.$$typeof === REACT_RESPONDER_TYPE ||
         type.$$typeof === REACT_SCOPE_TYPE ||
-        type.$$typeof === REACT_CHUNK_TYPE))
+        type.$$typeof === REACT_BLOCK_TYPE))
   );
 }