From 7df65725ba7826508e0f3c0f1c6f088efdbecfca Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 5 Mar 2021 16:02:02 -0500 Subject: [PATCH] Split getComponentName into getComponentNameFromFiber and getComponentNameFromType (#20940) Split getComponentName into getComponentNameFromFiber and getComponentNameFromType --- .../react-dom/src/client/ReactDOMLegacy.js | 4 +- .../src/server/ReactPartialRenderer.js | 29 ++-- .../src/server/ReactPartialRendererContext.js | 8 +- .../react-native-renderer/src/ReactFabric.js | 6 +- .../src/ReactNativeFiberInspector.js | 4 +- .../src/ReactNativeRenderer.js | 6 +- .../src/ReactChildFiber.new.js | 11 +- .../src/ReactChildFiber.old.js | 11 +- .../react-reconciler/src/ReactCurrentFiber.js | 4 +- .../react-reconciler/src/ReactFiber.new.js | 38 +----- .../react-reconciler/src/ReactFiber.old.js | 38 +----- .../src/ReactFiberBeginWork.new.js | 35 ++--- .../src/ReactFiberBeginWork.old.js | 35 ++--- .../src/ReactFiberClassComponent.new.js | 31 ++--- .../src/ReactFiberClassComponent.old.js | 31 ++--- .../src/ReactFiberCommitWork.new.js | 22 ++-- .../src/ReactFiberCommitWork.old.js | 22 ++-- .../src/ReactFiberContext.new.js | 10 +- .../src/ReactFiberContext.old.js | 10 +- .../src/ReactFiberErrorLogger.js | 18 +-- .../src/ReactFiberHooks.new.js | 16 ++- .../src/ReactFiberHooks.old.js | 16 ++- .../src/ReactFiberReconciler.new.js | 6 +- .../src/ReactFiberReconciler.old.js | 6 +- .../src/ReactFiberThrow.new.js | 8 +- .../src/ReactFiberThrow.old.js | 8 +- .../src/ReactFiberTreeReflection.js | 4 +- .../src/ReactFiberWorkLoop.new.js | 14 +- .../src/ReactFiberWorkLoop.old.js | 14 +- .../src/ReactStrictModeWarnings.new.js | 16 +-- .../src/ReactStrictModeWarnings.old.js | 16 +-- .../src/ReactTestSelectors.js | 4 +- .../src/SchedulingProfiler.js | 8 +- .../src/getComponentNameFromFiber.js | 124 ++++++++++++++++++ .../src/ReactTestRenderer.js | 4 +- packages/react/src/ReactElement.js | 6 +- packages/react/src/ReactElementValidator.js | 16 +-- packages/react/src/jsx/ReactJSXElement.js | 8 +- .../react/src/jsx/ReactJSXElementValidator.js | 14 +- ...entName.js => getComponentNameFromType.js} | 13 +- 40 files changed, 386 insertions(+), 308 deletions(-) create mode 100644 packages/react-reconciler/src/getComponentNameFromFiber.js rename packages/shared/{getComponentName.js => getComponentNameFromType.js} (86%) diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js index 6ca009233b0e9..7a3608a493a2f 100644 --- a/packages/react-dom/src/client/ReactDOMLegacy.js +++ b/packages/react-dom/src/client/ReactDOMLegacy.js @@ -32,7 +32,7 @@ import { findHostInstance, findHostInstanceWithWarning, } from 'react-reconciler/src/ReactFiberReconciler'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import invariant from 'shared/invariant'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import {has as hasInstance} from 'shared/ReactInstanceMap'; @@ -235,7 +235,7 @@ export function findDOMNode( 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', - getComponentName(owner.type) || 'A component', + getComponentNameFromType(owner.type) || 'A component', ); } owner.stateNode._warnedAboutRefsInRender = true; diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index a8528ed946dc5..d01c431e7318b 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -14,7 +14,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes'; import * as React from 'react'; import invariant from 'shared/invariant'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import { @@ -259,7 +259,7 @@ function warnNoop( if (__DEV__) { const constructor = publicInstance.constructor; const componentName = - (constructor && getComponentName(constructor)) || 'ReactClass'; + (constructor && getComponentNameFromType(constructor)) || 'ReactClass'; const warningKey = componentName + '.' + callerName; if (didWarnAboutNoopUpdateForComponent[warningKey]) { return; @@ -404,7 +404,7 @@ function validateRenderResult(child, type) { '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', - getComponentName(type) || 'Component', + getComponentNameFromType(type) || 'Component', ); } } @@ -467,7 +467,8 @@ function resolve( if (typeof Component.getDerivedStateFromProps === 'function') { if (__DEV__) { if (inst.state === null || inst.state === undefined) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = + getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutUninitializedState[componentName]) { console.error( '`%s` uses `getDerivedStateFromProps` but its initial state is ' + @@ -491,7 +492,8 @@ function resolve( if (__DEV__) { if (partialState === undefined) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = + getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutUndefinedDerivedState[componentName]) { console.error( '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' + @@ -513,7 +515,8 @@ function resolve( Component.prototype && typeof Component.prototype.render === 'function' ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = + getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutBadClass[componentName]) { console.error( @@ -535,7 +538,8 @@ function resolve( // Support for module components is deprecated and is removed behind a flag. // Whether or not it would crash later, we want to show a good message in DEV first. if (inst != null && inst.render != null) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = + getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutModulePatternComponent[componentName]) { console.error( 'The <%s /> component appears to be a function component that returns a class instance. ' + @@ -583,7 +587,8 @@ function resolve( warnAboutDeprecatedLifecycles && inst.componentWillMount.__suppressDeprecationWarning !== true ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = + getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutDeprecatedWillMount[componentName]) { console.warn( @@ -665,7 +670,7 @@ function resolve( console.error( '%s uses the legacy childContextTypes API which is no longer supported. ' + 'Use React.createContext() instead.', - getComponentName(Component) || 'Unknown', + getComponentNameFromType(Component) || 'Unknown', ); } } @@ -678,7 +683,7 @@ function resolve( invariant( contextKey in childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', - getComponentName(Component) || 'Unknown', + getComponentNameFromType(Component) || 'Unknown', contextKey, ); } @@ -687,7 +692,7 @@ function resolve( console.error( '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', - getComponentName(Component) || 'Unknown', + getComponentNameFromType(Component) || 'Unknown', ); } } @@ -1298,7 +1303,7 @@ class ReactDOMServerRenderer { "it's defined in, or you might have mixed up default and " + 'named imports.'; } - const ownerName = owner ? getComponentName(owner) : null; + const ownerName = owner ? getComponentNameFromType(owner) : null; if (ownerName) { info += '\n\nCheck the render method of `' + ownerName + '`.'; } diff --git a/packages/react-dom/src/server/ReactPartialRendererContext.js b/packages/react-dom/src/server/ReactPartialRendererContext.js index 87b9be06b07fa..65af591e3651d 100644 --- a/packages/react-dom/src/server/ReactPartialRendererContext.js +++ b/packages/react-dom/src/server/ReactPartialRendererContext.js @@ -12,7 +12,7 @@ import type {ReactContext} from 'shared/ReactTypes'; import {disableLegacyContext} from 'shared/ReactFeatureFlags'; import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import checkPropTypes from 'shared/checkPropTypes'; let didWarnAboutInvalidateContextType; @@ -105,7 +105,7 @@ export function processContext( console.error( '%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext().%s', - getComponentName(type) || 'Component', + getComponentNameFromType(type) || 'Component', addendum, ); } @@ -121,7 +121,7 @@ export function processContext( console.error( '%s uses the legacy contextTypes API which is no longer supported. ' + 'Use React.createContext() with static contextType instead.', - getComponentName(type) || 'Unknown', + getComponentNameFromType(type) || 'Unknown', ); } } @@ -142,7 +142,7 @@ export function processContext( console.error( '%s uses the legacy contextTypes API which is no longer supported. ' + 'Use React.createContext() with React.useContext() instead.', - getComponentName(type) || 'Unknown', + getComponentNameFromType(type) || 'Unknown', ); } } diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 9761124e7da65..82a6cb7e6ba6c 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/packages/react-native-renderer/src/ReactFabric.js @@ -43,7 +43,7 @@ import { } from './ReactNativeFiberInspector'; import {LegacyRoot} from 'react-reconciler/src/ReactRootTags'; import ReactSharedInternals from 'shared/ReactSharedInternals'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; @@ -60,7 +60,7 @@ function findHostInstance_DEPRECATED( 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', - getComponentName(owner.type) || 'A component', + getComponentNameFromType(owner.type) || 'A component', ); } @@ -111,7 +111,7 @@ function findNodeHandle(componentOrHandle: any): ?number { 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', - getComponentName(owner.type) || 'A component', + getComponentNameFromType(owner.type) || 'A component', ); } diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js index d008e86204e5f..04ddc968d7e8c 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js +++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js @@ -14,7 +14,7 @@ import { findCurrentHostFiber, findCurrentFiberUsingSlowPath, } from 'react-reconciler/src/ReactFiberTreeReflection'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import {HostComponent} from 'react-reconciler/src/ReactWorkTags'; import invariant from 'shared/invariant'; // Module provided by RN: @@ -81,7 +81,7 @@ if (__DEV__) { const createHierarchy = function(fiberHierarchy) { return fiberHierarchy.map(fiber => ({ - name: getComponentName(fiber.type), + name: getComponentNameFromType(fiber.type), getInspectorData: findNodeHandle => { return { props: getHostProps(fiber), diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index 547fdd2de5c52..36b9e2b1e2843 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/packages/react-native-renderer/src/ReactNativeRenderer.js @@ -46,7 +46,7 @@ import { } from './ReactNativeFiberInspector'; import {LegacyRoot} from 'react-reconciler/src/ReactRootTags'; import ReactSharedInternals from 'shared/ReactSharedInternals'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; @@ -63,7 +63,7 @@ function findHostInstance_DEPRECATED( 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', - getComponentName(owner.type) || 'A component', + getComponentNameFromType(owner.type) || 'A component', ); } @@ -110,7 +110,7 @@ function findNodeHandle(componentOrHandle: any): ?number { 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', - getComponentName(owner.type) || 'A component', + getComponentNameFromType(owner.type) || 'A component', ); } diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js index 222a8730c4fa2..f9041ce6590b9 100644 --- a/packages/react-reconciler/src/ReactChildFiber.new.js +++ b/packages/react-reconciler/src/ReactChildFiber.new.js @@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes'; import type {Fiber} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane.new'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {Placement, ChildDeletion} from './ReactFiberFlags'; import { getIteratorFn, @@ -82,7 +82,7 @@ if (__DEV__) { ); child._store.validated = true; - const componentName = getComponentName(returnFiber.type) || 'Component'; + const componentName = getComponentNameFromFiber(returnFiber) || 'Component'; if (ownerHasKeyUseWarning[componentName]) { return; @@ -124,7 +124,8 @@ function coerceRef( element._owner.stateNode !== element._self ) ) { - const componentName = getComponentName(returnFiber.type) || 'Component'; + const componentName = + getComponentNameFromFiber(returnFiber) || 'Component'; if (!didWarnAboutStringRefs[componentName]) { if (warnAboutStringRefs) { console.error( @@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) { function warnOnFunctionType(returnFiber: Fiber) { if (__DEV__) { - const componentName = getComponentName(returnFiber.type) || 'Component'; + const componentName = getComponentNameFromFiber(returnFiber) || 'Component'; if (ownerHasFunctionTypeWarning[componentName]) { return; @@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) { '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', - getComponentName(returnFiber.type) || 'Component', + getComponentNameFromFiber(returnFiber) || 'Component', ); } } diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js index 036fa65503c04..10c4ccb4dc5be 100644 --- a/packages/react-reconciler/src/ReactChildFiber.old.js +++ b/packages/react-reconciler/src/ReactChildFiber.old.js @@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes'; import type {Fiber} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane.old'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {Placement, ChildDeletion} from './ReactFiberFlags'; import { getIteratorFn, @@ -82,7 +82,7 @@ if (__DEV__) { ); child._store.validated = true; - const componentName = getComponentName(returnFiber.type) || 'Component'; + const componentName = getComponentNameFromFiber(returnFiber) || 'Component'; if (ownerHasKeyUseWarning[componentName]) { return; @@ -124,7 +124,8 @@ function coerceRef( element._owner.stateNode !== element._self ) ) { - const componentName = getComponentName(returnFiber.type) || 'Component'; + const componentName = + getComponentNameFromFiber(returnFiber) || 'Component'; if (!didWarnAboutStringRefs[componentName]) { if (warnAboutStringRefs) { console.error( @@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) { function warnOnFunctionType(returnFiber: Fiber) { if (__DEV__) { - const componentName = getComponentName(returnFiber.type) || 'Component'; + const componentName = getComponentNameFromFiber(returnFiber) || 'Component'; if (ownerHasFunctionTypeWarning[componentName]) { return; @@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) { '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', - getComponentName(returnFiber.type) || 'Component', + getComponentNameFromFiber(returnFiber) || 'Component', ); } } diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js index 5a6a648eb7ffd..b2186131a98a5 100644 --- a/packages/react-reconciler/src/ReactCurrentFiber.js +++ b/packages/react-reconciler/src/ReactCurrentFiber.js @@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; @@ -25,7 +25,7 @@ export function getCurrentFiberOwnerNameInDevOrNull(): string | null { } const owner = current._debugOwner; if (owner !== null && typeof owner !== 'undefined') { - return getComponentName(owner.type); + return getComponentNameFromFiber(owner); } } return null; diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js index f1a0f56b23409..5a56fb0592c4b 100644 --- a/packages/react-reconciler/src/ReactFiber.new.js +++ b/packages/react-reconciler/src/ReactFiber.new.js @@ -52,7 +52,7 @@ import { LegacyHiddenComponent, CacheComponent, } from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {isDevToolsPresent} from './ReactFiberDevToolsHook.new'; import { @@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps( "it's defined in, or you might have mixed up default and " + 'named imports.'; } - const ownerName = owner ? getComponentName(owner.type) : null; + const ownerName = owner ? getComponentNameFromFiber(owner) : null; if (ownerName) { info += '\n\nCheck the render method of `' + ownerName + '`.'; } @@ -678,9 +678,7 @@ function createFiberFromProfiler( } const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode); - // TODO: The Profiler fiber shouldn't have a type. It has a tag. fiber.elementType = REACT_PROFILER_TYPE; - fiber.type = REACT_PROFILER_TYPE; fiber.lanes = lanes; if (enableProfilerTimer) { @@ -700,13 +698,7 @@ export function createFiberFromSuspense( key: null | string, ) { const fiber = createFiber(SuspenseComponent, pendingProps, key, mode); - - // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - fiber.type = REACT_SUSPENSE_TYPE; fiber.elementType = REACT_SUSPENSE_TYPE; - fiber.lanes = lanes; return fiber; } @@ -718,12 +710,6 @@ export function createFiberFromSuspenseList( key: null | string, ) { const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode); - if (__DEV__) { - // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - fiber.type = REACT_SUSPENSE_LIST_TYPE; - } fiber.elementType = REACT_SUSPENSE_LIST_TYPE; fiber.lanes = lanes; return fiber; @@ -736,12 +722,6 @@ export function createFiberFromOffscreen( key: null | string, ) { const fiber = createFiber(OffscreenComponent, pendingProps, key, mode); - // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - if (__DEV__) { - fiber.type = REACT_OFFSCREEN_TYPE; - } fiber.elementType = REACT_OFFSCREEN_TYPE; fiber.lanes = lanes; return fiber; @@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden( key: null | string, ) { const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode); - // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - if (__DEV__) { - fiber.type = REACT_LEGACY_HIDDEN_TYPE; - } fiber.elementType = REACT_LEGACY_HIDDEN_TYPE; fiber.lanes = lanes; return fiber; @@ -772,12 +746,6 @@ export function createFiberFromCache( key: null | string, ) { const fiber = createFiber(CacheComponent, pendingProps, key, mode); - // TODO: The Cache fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - if (__DEV__) { - fiber.type = REACT_CACHE_TYPE; - } fiber.elementType = REACT_CACHE_TYPE; fiber.lanes = lanes; return fiber; @@ -795,9 +763,7 @@ export function createFiberFromText( export function createFiberFromHostInstanceForDeletion(): Fiber { const fiber = createFiber(HostComponent, null, null, NoMode); - // TODO: These should not need a type. fiber.elementType = 'DELETED'; - fiber.type = 'DELETED'; return fiber; } diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js index 6419fd6b261b3..8536c024d66ed 100644 --- a/packages/react-reconciler/src/ReactFiber.old.js +++ b/packages/react-reconciler/src/ReactFiber.old.js @@ -52,7 +52,7 @@ import { LegacyHiddenComponent, CacheComponent, } from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {isDevToolsPresent} from './ReactFiberDevToolsHook.old'; import { @@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps( "it's defined in, or you might have mixed up default and " + 'named imports.'; } - const ownerName = owner ? getComponentName(owner.type) : null; + const ownerName = owner ? getComponentNameFromFiber(owner) : null; if (ownerName) { info += '\n\nCheck the render method of `' + ownerName + '`.'; } @@ -678,9 +678,7 @@ function createFiberFromProfiler( } const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode); - // TODO: The Profiler fiber shouldn't have a type. It has a tag. fiber.elementType = REACT_PROFILER_TYPE; - fiber.type = REACT_PROFILER_TYPE; fiber.lanes = lanes; if (enableProfilerTimer) { @@ -700,13 +698,7 @@ export function createFiberFromSuspense( key: null | string, ) { const fiber = createFiber(SuspenseComponent, pendingProps, key, mode); - - // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - fiber.type = REACT_SUSPENSE_TYPE; fiber.elementType = REACT_SUSPENSE_TYPE; - fiber.lanes = lanes; return fiber; } @@ -718,12 +710,6 @@ export function createFiberFromSuspenseList( key: null | string, ) { const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode); - if (__DEV__) { - // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - fiber.type = REACT_SUSPENSE_LIST_TYPE; - } fiber.elementType = REACT_SUSPENSE_LIST_TYPE; fiber.lanes = lanes; return fiber; @@ -736,12 +722,6 @@ export function createFiberFromOffscreen( key: null | string, ) { const fiber = createFiber(OffscreenComponent, pendingProps, key, mode); - // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - if (__DEV__) { - fiber.type = REACT_OFFSCREEN_TYPE; - } fiber.elementType = REACT_OFFSCREEN_TYPE; fiber.lanes = lanes; return fiber; @@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden( key: null | string, ) { const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode); - // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - if (__DEV__) { - fiber.type = REACT_LEGACY_HIDDEN_TYPE; - } fiber.elementType = REACT_LEGACY_HIDDEN_TYPE; fiber.lanes = lanes; return fiber; @@ -772,12 +746,6 @@ export function createFiberFromCache( key: null | string, ) { const fiber = createFiber(CacheComponent, pendingProps, key, mode); - // TODO: The Cache fiber shouldn't have a type. It has a tag. - // This needs to be fixed in getComponentName so that it relies on the tag - // instead. - if (__DEV__) { - fiber.type = REACT_CACHE_TYPE; - } fiber.elementType = REACT_CACHE_TYPE; fiber.lanes = lanes; return fiber; @@ -795,9 +763,7 @@ export function createFiberFromText( export function createFiberFromHostInstanceForDeletion(): Fiber { const fiber = createFiber(HostComponent, null, null, NoMode); - // TODO: These should not need a type. fiber.elementType = 'DELETED'; - fiber.type = 'DELETED'; return fiber; } diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 6dffcc328927a..69149016f5ec0 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -84,7 +84,8 @@ import { } from 'shared/ReactFeatureFlags'; import invariant from 'shared/invariant'; import shallowEqual from 'shared/shallowEqual'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.new'; import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols'; import { @@ -332,7 +333,7 @@ function updateForwardRef( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -442,7 +443,7 @@ function updateMemoComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(type), + getComponentNameFromType(type), ); } } @@ -469,7 +470,7 @@ function updateMemoComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(type), + getComponentNameFromType(type), ); } } @@ -530,7 +531,7 @@ function updateSimpleMemoComponent( outerPropTypes, nextProps, // Resolved (SimpleMemoComponent has no defaultProps) 'prop', - getComponentName(outerMemoType), + getComponentNameFromType(outerMemoType), ); } } @@ -862,7 +863,7 @@ function updateFunctionComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -945,7 +946,7 @@ function updateClassComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -1012,7 +1013,7 @@ function updateClassComponent( console.error( 'It looks like %s is reassigning its own `this.props` while rendering. ' + 'This is not supported and can lead to confusing bugs.', - getComponentName(workInProgress.type) || 'a component', + getComponentNameFromFiber(workInProgress) || 'a component', ); } didWarnAboutReassigningProps = true; @@ -1343,7 +1344,7 @@ function mountLazyComponent( outerPropTypes, resolvedProps, // Resolved for outer only 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -1465,7 +1466,7 @@ function mountIndeterminateComponent( Component.prototype && typeof Component.prototype.render === 'function' ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutBadClass[componentName]) { console.error( @@ -1515,7 +1516,7 @@ function mountIndeterminateComponent( typeof value.render === 'function' && value.$$typeof === undefined ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutModulePatternComponent[componentName]) { console.error( 'The <%s /> component appears to be a function component that returns a class instance. ' + @@ -1542,7 +1543,7 @@ function mountIndeterminateComponent( value.$$typeof === undefined ) { if (__DEV__) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutModulePatternComponent[componentName]) { console.error( 'The <%s /> component appears to be a function component that returns a class instance. ' + @@ -1609,7 +1610,7 @@ function mountIndeterminateComponent( console.error( '%s uses the legacy contextTypes API which is no longer supported. ' + 'Use React.createContext() with React.useContext() instead.', - getComponentName(Component) || 'Unknown', + getComponentNameFromType(Component) || 'Unknown', ); } @@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { warnAboutDefaultPropsOnFunctionComponents && Component.defaultProps !== undefined ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) { console.error( @@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { } if (typeof Component.getDerivedStateFromProps === 'function') { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) { console.error( @@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { typeof Component.contextType === 'object' && Component.contextType !== null ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) { console.error( @@ -3514,7 +3515,7 @@ function beginWork( outerPropTypes, resolvedProps, // Resolved for outer only 'prop', - getComponentName(type), + getComponentNameFromType(type), ); } } diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 7801afe9fa231..b8bacadcfe036 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -84,7 +84,8 @@ import { } from 'shared/ReactFeatureFlags'; import invariant from 'shared/invariant'; import shallowEqual from 'shared/shallowEqual'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.old'; import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols'; import { @@ -332,7 +333,7 @@ function updateForwardRef( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -442,7 +443,7 @@ function updateMemoComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(type), + getComponentNameFromType(type), ); } } @@ -469,7 +470,7 @@ function updateMemoComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(type), + getComponentNameFromType(type), ); } } @@ -530,7 +531,7 @@ function updateSimpleMemoComponent( outerPropTypes, nextProps, // Resolved (SimpleMemoComponent has no defaultProps) 'prop', - getComponentName(outerMemoType), + getComponentNameFromType(outerMemoType), ); } } @@ -862,7 +863,7 @@ function updateFunctionComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -945,7 +946,7 @@ function updateClassComponent( innerPropTypes, nextProps, // Resolved props 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -1012,7 +1013,7 @@ function updateClassComponent( console.error( 'It looks like %s is reassigning its own `this.props` while rendering. ' + 'This is not supported and can lead to confusing bugs.', - getComponentName(workInProgress.type) || 'a component', + getComponentNameFromFiber(workInProgress) || 'a component', ); } didWarnAboutReassigningProps = true; @@ -1343,7 +1344,7 @@ function mountLazyComponent( outerPropTypes, resolvedProps, // Resolved for outer only 'prop', - getComponentName(Component), + getComponentNameFromType(Component), ); } } @@ -1465,7 +1466,7 @@ function mountIndeterminateComponent( Component.prototype && typeof Component.prototype.render === 'function' ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutBadClass[componentName]) { console.error( @@ -1515,7 +1516,7 @@ function mountIndeterminateComponent( typeof value.render === 'function' && value.$$typeof === undefined ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutModulePatternComponent[componentName]) { console.error( 'The <%s /> component appears to be a function component that returns a class instance. ' + @@ -1542,7 +1543,7 @@ function mountIndeterminateComponent( value.$$typeof === undefined ) { if (__DEV__) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutModulePatternComponent[componentName]) { console.error( 'The <%s /> component appears to be a function component that returns a class instance. ' + @@ -1609,7 +1610,7 @@ function mountIndeterminateComponent( console.error( '%s uses the legacy contextTypes API which is no longer supported. ' + 'Use React.createContext() with React.useContext() instead.', - getComponentName(Component) || 'Unknown', + getComponentNameFromType(Component) || 'Unknown', ); } @@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { warnAboutDefaultPropsOnFunctionComponents && Component.defaultProps !== undefined ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) { console.error( @@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { } if (typeof Component.getDerivedStateFromProps === 'function') { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) { console.error( @@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) { typeof Component.contextType === 'object' && Component.contextType !== null ) { - const componentName = getComponentName(Component) || 'Unknown'; + const componentName = getComponentNameFromType(Component) || 'Unknown'; if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) { console.error( @@ -3514,7 +3515,7 @@ function beginWork( outerPropTypes, resolvedProps, // Resolved for outer only 'prop', - getComponentName(type), + getComponentNameFromType(type), ); } } diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js index 8259e59a70bdd..0042bf2f93742 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js @@ -25,7 +25,8 @@ import ReactStrictModeWarnings from './ReactStrictModeWarnings.new'; import {isMounted} from './ReactFiberTreeReflection'; import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap'; import shallowEqual from 'shared/shallowEqual'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import invariant from 'shared/invariant'; import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; @@ -119,7 +120,7 @@ if (__DEV__) { warnOnUndefinedDerivedState = function(type, partialState) { if (partialState === undefined) { - const componentName = getComponentName(type) || 'Component'; + const componentName = getComponentNameFromType(type) || 'Component'; if (!didWarnAboutUndefinedDerivedState.has(componentName)) { didWarnAboutUndefinedDerivedState.add(componentName); console.error( @@ -222,7 +223,7 @@ const classComponentUpdater = { if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logStateUpdateScheduled(name, lane, payload); } } @@ -257,7 +258,7 @@ const classComponentUpdater = { if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logStateUpdateScheduled(name, lane, payload); } } @@ -291,7 +292,7 @@ const classComponentUpdater = { if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logForceUpdateScheduled(name, lane); } } @@ -339,7 +340,7 @@ function checkShouldComponentUpdate( console.error( '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', - getComponentName(ctor) || 'Component', + getComponentNameFromType(ctor) || 'Component', ); } } @@ -359,7 +360,7 @@ function checkShouldComponentUpdate( function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) { const instance = workInProgress.stateNode; if (__DEV__) { - const name = getComponentName(ctor) || 'Component'; + const name = getComponentNameFromType(ctor) || 'Component'; const renderPresent = instance.render; if (!renderPresent) { @@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) { '%s has a method called shouldComponentUpdate(). ' + 'shouldComponentUpdate should not be used when extending React.PureComponent. ' + 'Please extend React.Component if shouldComponentUpdate is used.', - getComponentName(ctor) || 'A pure component', + getComponentNameFromType(ctor) || 'A pure component', ); } if (typeof instance.componentDidUnmount === 'function') { @@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) { console.error( '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' + 'This component defines getSnapshotBeforeUpdate() only.', - getComponentName(ctor), + getComponentNameFromType(ctor), ); } @@ -631,7 +632,7 @@ function constructClassInstance( console.error( '%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext().%s', - getComponentName(ctor) || 'Component', + getComponentNameFromType(ctor) || 'Component', addendum, ); } @@ -674,7 +675,7 @@ function constructClassInstance( if (__DEV__) { if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) { - const componentName = getComponentName(ctor) || 'Component'; + const componentName = getComponentNameFromType(ctor) || 'Component'; if (!didWarnAboutUninitializedState.has(componentName)) { didWarnAboutUninitializedState.add(componentName); console.error( @@ -730,7 +731,7 @@ function constructClassInstance( foundWillReceivePropsName !== null || foundWillUpdateName !== null ) { - const componentName = getComponentName(ctor) || 'Component'; + const componentName = getComponentNameFromType(ctor) || 'Component'; const newApiName = typeof ctor.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' @@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) { '%s.componentWillMount(): Assigning directly to this.state is ' + "deprecated (except inside a component's " + 'constructor). Use setState instead.', - getComponentName(workInProgress.type) || 'Component', + getComponentNameFromFiber(workInProgress) || 'Component', ); } classComponentUpdater.enqueueReplaceState(instance, instance.state, null); @@ -804,7 +805,7 @@ function callComponentWillReceiveProps( if (instance.state !== oldState) { if (__DEV__) { const componentName = - getComponentName(workInProgress.type) || 'Component'; + getComponentNameFromFiber(workInProgress) || 'Component'; if (!didWarnAboutStateAssignmentForComponent.has(componentName)) { didWarnAboutStateAssignmentForComponent.add(componentName); console.error( @@ -849,7 +850,7 @@ function mountClassInstance( if (__DEV__) { if (instance.state === newProps) { - const componentName = getComponentName(ctor) || 'Component'; + const componentName = getComponentNameFromType(ctor) || 'Component'; if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) { didWarnAboutDirectlyAssigningPropsToState.add(componentName); console.error( diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js index fe20322bb15a6..984960438672b 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js @@ -25,7 +25,8 @@ import ReactStrictModeWarnings from './ReactStrictModeWarnings.old'; import {isMounted} from './ReactFiberTreeReflection'; import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap'; import shallowEqual from 'shared/shallowEqual'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import invariant from 'shared/invariant'; import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols'; @@ -119,7 +120,7 @@ if (__DEV__) { warnOnUndefinedDerivedState = function(type, partialState) { if (partialState === undefined) { - const componentName = getComponentName(type) || 'Component'; + const componentName = getComponentNameFromType(type) || 'Component'; if (!didWarnAboutUndefinedDerivedState.has(componentName)) { didWarnAboutUndefinedDerivedState.add(componentName); console.error( @@ -222,7 +223,7 @@ const classComponentUpdater = { if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logStateUpdateScheduled(name, lane, payload); } } @@ -257,7 +258,7 @@ const classComponentUpdater = { if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logStateUpdateScheduled(name, lane, payload); } } @@ -291,7 +292,7 @@ const classComponentUpdater = { if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logForceUpdateScheduled(name, lane); } } @@ -339,7 +340,7 @@ function checkShouldComponentUpdate( console.error( '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', - getComponentName(ctor) || 'Component', + getComponentNameFromType(ctor) || 'Component', ); } } @@ -359,7 +360,7 @@ function checkShouldComponentUpdate( function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) { const instance = workInProgress.stateNode; if (__DEV__) { - const name = getComponentName(ctor) || 'Component'; + const name = getComponentNameFromType(ctor) || 'Component'; const renderPresent = instance.render; if (!renderPresent) { @@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) { '%s has a method called shouldComponentUpdate(). ' + 'shouldComponentUpdate should not be used when extending React.PureComponent. ' + 'Please extend React.Component if shouldComponentUpdate is used.', - getComponentName(ctor) || 'A pure component', + getComponentNameFromType(ctor) || 'A pure component', ); } if (typeof instance.componentDidUnmount === 'function') { @@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) { console.error( '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' + 'This component defines getSnapshotBeforeUpdate() only.', - getComponentName(ctor), + getComponentNameFromType(ctor), ); } @@ -631,7 +632,7 @@ function constructClassInstance( console.error( '%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext().%s', - getComponentName(ctor) || 'Component', + getComponentNameFromType(ctor) || 'Component', addendum, ); } @@ -674,7 +675,7 @@ function constructClassInstance( if (__DEV__) { if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) { - const componentName = getComponentName(ctor) || 'Component'; + const componentName = getComponentNameFromType(ctor) || 'Component'; if (!didWarnAboutUninitializedState.has(componentName)) { didWarnAboutUninitializedState.add(componentName); console.error( @@ -730,7 +731,7 @@ function constructClassInstance( foundWillReceivePropsName !== null || foundWillUpdateName !== null ) { - const componentName = getComponentName(ctor) || 'Component'; + const componentName = getComponentNameFromType(ctor) || 'Component'; const newApiName = typeof ctor.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' @@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) { '%s.componentWillMount(): Assigning directly to this.state is ' + "deprecated (except inside a component's " + 'constructor). Use setState instead.', - getComponentName(workInProgress.type) || 'Component', + getComponentNameFromFiber(workInProgress) || 'Component', ); } classComponentUpdater.enqueueReplaceState(instance, instance.state, null); @@ -804,7 +805,7 @@ function callComponentWillReceiveProps( if (instance.state !== oldState) { if (__DEV__) { const componentName = - getComponentName(workInProgress.type) || 'Component'; + getComponentNameFromFiber(workInProgress) || 'Component'; if (!didWarnAboutStateAssignmentForComponent.has(componentName)) { didWarnAboutStateAssignmentForComponent.add(componentName); console.error( @@ -849,7 +850,7 @@ function mountClassInstance( if (__DEV__) { if (instance.state === newProps) { - const componentName = getComponentName(ctor) || 'Component'; + const componentName = getComponentNameFromType(ctor) || 'Component'; if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) { didWarnAboutDirectlyAssigningPropsToState.add(componentName); console.error( diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 33ed1b5c95ce7..e8acf1f31d711 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -80,7 +80,7 @@ import { PassiveMask, PassiveUnmountPendingDev, } from './ReactFiberFlags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import invariant from 'shared/invariant'; import { resetCurrentFiber as resetCurrentDebugFiberInDEV, @@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { console.error( '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' + 'must be returned. You have returned undefined.', - getComponentName(finishedWork.type), + getComponentNameFromFiber(finishedWork), ); } } @@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) { console.error( 'Unexpected ref object provided for %s. ' + 'Use either a ref-setter function or React.createRef().', - getComponentName(finishedWork.type), + getComponentNameFromFiber(finishedWork), ); } } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 7574eb4fd3d3c..7759080a0978c 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -80,7 +80,7 @@ import { PassiveMask, PassiveUnmountPendingDev, } from './ReactFiberFlags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import invariant from 'shared/invariant'; import { resetCurrentFiber as resetCurrentDebugFiberInDEV, @@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { console.error( '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' + 'must be returned. You have returned undefined.', - getComponentName(finishedWork.type), + getComponentNameFromFiber(finishedWork), ); } } @@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } if (instance.state !== finishedWork.memoizedState) { @@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber( 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.state`. ' + 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + getComponentNameFromFiber(finishedWork) || 'instance', ); } } @@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) { console.error( 'Unexpected ref object provided for %s. ' + 'Use either a ref-setter function or React.createRef().', - getComponentName(finishedWork.type), + getComponentNameFromFiber(finishedWork), ); } } diff --git a/packages/react-reconciler/src/ReactFiberContext.new.js b/packages/react-reconciler/src/ReactFiberContext.new.js index e96295be857a8..a7735f7b56e16 100644 --- a/packages/react-reconciler/src/ReactFiberContext.new.js +++ b/packages/react-reconciler/src/ReactFiberContext.new.js @@ -13,7 +13,7 @@ import type {StackCursor} from './ReactFiberStack.new'; import {isFiberMounted} from './ReactFiberTreeReflection'; import {disableLegacyContext} from 'shared/ReactFeatureFlags'; import {ClassComponent, HostRoot} from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import invariant from 'shared/invariant'; import checkPropTypes from 'shared/checkPropTypes'; @@ -104,7 +104,7 @@ function getMaskedContext( } if (__DEV__) { - const name = getComponentName(type) || 'Unknown'; + const name = getComponentNameFromFiber(workInProgress) || 'Unknown'; checkPropTypes(contextTypes, context, 'context', name); } @@ -187,7 +187,7 @@ function processChildContext( // It has only been added in Fiber to match the (unintentional) behavior in Stack. if (typeof instance.getChildContext !== 'function') { if (__DEV__) { - const componentName = getComponentName(type) || 'Unknown'; + const componentName = getComponentNameFromFiber(fiber) || 'Unknown'; if (!warnedAboutMissingGetChildContext[componentName]) { warnedAboutMissingGetChildContext[componentName] = true; @@ -208,12 +208,12 @@ function processChildContext( invariant( contextKey in childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', - getComponentName(type) || 'Unknown', + getComponentNameFromFiber(fiber) || 'Unknown', contextKey, ); } if (__DEV__) { - const name = getComponentName(type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; checkPropTypes(childContextTypes, childContext, 'child context', name); } diff --git a/packages/react-reconciler/src/ReactFiberContext.old.js b/packages/react-reconciler/src/ReactFiberContext.old.js index 9207fcb55e8d8..c4736bcbd3103 100644 --- a/packages/react-reconciler/src/ReactFiberContext.old.js +++ b/packages/react-reconciler/src/ReactFiberContext.old.js @@ -13,7 +13,7 @@ import type {StackCursor} from './ReactFiberStack.old'; import {isFiberMounted} from './ReactFiberTreeReflection'; import {disableLegacyContext} from 'shared/ReactFeatureFlags'; import {ClassComponent, HostRoot} from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import invariant from 'shared/invariant'; import checkPropTypes from 'shared/checkPropTypes'; @@ -104,7 +104,7 @@ function getMaskedContext( } if (__DEV__) { - const name = getComponentName(type) || 'Unknown'; + const name = getComponentNameFromFiber(workInProgress) || 'Unknown'; checkPropTypes(contextTypes, context, 'context', name); } @@ -187,7 +187,7 @@ function processChildContext( // It has only been added in Fiber to match the (unintentional) behavior in Stack. if (typeof instance.getChildContext !== 'function') { if (__DEV__) { - const componentName = getComponentName(type) || 'Unknown'; + const componentName = getComponentNameFromFiber(fiber) || 'Unknown'; if (!warnedAboutMissingGetChildContext[componentName]) { warnedAboutMissingGetChildContext[componentName] = true; @@ -208,12 +208,12 @@ function processChildContext( invariant( contextKey in childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', - getComponentName(type) || 'Unknown', + getComponentNameFromFiber(fiber) || 'Unknown', contextKey, ); } if (__DEV__) { - const name = getComponentName(type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; checkPropTypes(childContextTypes, childContext, 'child context', name); } diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js index a76c65e4d3b4a..81688a4d23240 100644 --- a/packages/react-reconciler/src/ReactFiberErrorLogger.js +++ b/packages/react-reconciler/src/ReactFiberErrorLogger.js @@ -12,7 +12,8 @@ import type {CapturedValue} from './ReactCapturedValue'; import {showErrorDialog} from './ReactFiberErrorDialog'; import {ClassComponent} from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; +import {HostRoot} from 'react-reconciler/src/ReactWorkTags'; export function logCapturedError( boundary: Fiber, @@ -51,21 +52,22 @@ export function logCapturedError( // https://github.com/facebook/react/pull/13384 } - const componentName = source ? getComponentName(source.type) : null; + const componentName = source ? getComponentNameFromFiber(source) : null; const componentNameMessage = componentName ? `The above error occurred in the <${componentName}> component:` : 'The above error occurred in one of your React components:'; let errorBoundaryMessage; - const errorBoundaryName = getComponentName(boundary.type); - if (errorBoundaryName) { - errorBoundaryMessage = - `React will try to recreate this component tree from scratch ` + - `using the error boundary you provided, ${errorBoundaryName}.`; - } else { + if (boundary.tag === HostRoot) { errorBoundaryMessage = 'Consider adding an error boundary to your tree to customize error handling behavior.\n' + 'Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.'; + } else { + const errorBoundaryName = + getComponentNameFromFiber(boundary) || 'Anonymous'; + errorBoundaryMessage = + `React will try to recreate this component tree from scratch ` + + `using the error boundary you provided, ${errorBoundaryName}.`; } const combinedMessage = `${componentNameMessage}\n${componentStack}\n\n` + diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 9d1fa5f82ed8e..bfea1ddda134b 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -81,7 +81,7 @@ import { } from './ReactFiberWorkLoop.new'; import invariant from 'shared/invariant'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import is from 'shared/objectIs'; import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new'; import { @@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) { function warnOnHookMismatchInDev(currentHookName: HookType) { if (__DEV__) { - const componentName = getComponentName(currentlyRenderingFiber.type); + const componentName = getComponentNameFromFiber(currentlyRenderingFiber); if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) { didWarnAboutMismatchedHooksForComponent.add(componentName); @@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource( // begin phase without double rendering. We should consider suppressing // any error from a double render (with a warning) to more closely match // the production behavior. - const componentName = getComponentName(currentlyRenderingFiber.type); + const componentName = getComponentNameFromFiber( + currentlyRenderingFiber, + ); invariant( false, 'A mutable source was mutated while the %s component was rendering. ' + @@ -1326,7 +1328,7 @@ function mountRef(initialValue: T): {|current: T|} { 'Reading from a ref during render is only safe if:\n' + '1. The ref value has not been updated, or\n' + '2. The ref holds a lazily-initialized value that is only set once.\n', - getComponentName(currentlyRenderingFiber.type) || 'Unknown', + getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown', ); } } @@ -1343,7 +1345,7 @@ function mountRef(initialValue: T): {|current: T|} { '%s: Unsafe write of a mutable value during render.\n\n' + 'Writing to a ref during render is only safe if the ref holds ' + 'a lazily-initialized value that is only set once.\n', - getComponentName(currentlyRenderingFiber.type) || 'Unknown', + getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown', ); } } @@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void { function warnOnOpaqueIdentifierAccessInDEV(fiber) { if (__DEV__) { // TODO: Should warn in effects and callbacks, too - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) { console.error( 'The object passed back from useOpaqueIdentifier is meant to be ' + @@ -2059,7 +2061,7 @@ function dispatchAction( if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logStateUpdateScheduled(name, lane, action); } } diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index 61f1a17452e4b..fea9afd815fc8 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -81,7 +81,7 @@ import { } from './ReactFiberWorkLoop.old'; import invariant from 'shared/invariant'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import is from 'shared/objectIs'; import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old'; import { @@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) { function warnOnHookMismatchInDev(currentHookName: HookType) { if (__DEV__) { - const componentName = getComponentName(currentlyRenderingFiber.type); + const componentName = getComponentNameFromFiber(currentlyRenderingFiber); if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) { didWarnAboutMismatchedHooksForComponent.add(componentName); @@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource( // begin phase without double rendering. We should consider suppressing // any error from a double render (with a warning) to more closely match // the production behavior. - const componentName = getComponentName(currentlyRenderingFiber.type); + const componentName = getComponentNameFromFiber( + currentlyRenderingFiber, + ); invariant( false, 'A mutable source was mutated while the %s component was rendering. ' + @@ -1326,7 +1328,7 @@ function mountRef(initialValue: T): {|current: T|} { 'Reading from a ref during render is only safe if:\n' + '1. The ref value has not been updated, or\n' + '2. The ref holds a lazily-initialized value that is only set once.\n', - getComponentName(currentlyRenderingFiber.type) || 'Unknown', + getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown', ); } } @@ -1343,7 +1345,7 @@ function mountRef(initialValue: T): {|current: T|} { '%s: Unsafe write of a mutable value during render.\n\n' + 'Writing to a ref during render is only safe if the ref holds ' + 'a lazily-initialized value that is only set once.\n', - getComponentName(currentlyRenderingFiber.type) || 'Unknown', + getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown', ); } } @@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void { function warnOnOpaqueIdentifierAccessInDEV(fiber) { if (__DEV__) { // TODO: Should warn in effects and callbacks, too - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) { console.error( 'The object passed back from useOpaqueIdentifier is meant to be ' + @@ -2059,7 +2061,7 @@ function dispatchAction( if (__DEV__) { if (enableDebugTracing) { if (fiber.mode & DebugTracingMode) { - const name = getComponentName(fiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(fiber) || 'Unknown'; logStateUpdateScheduled(name, lane, action); } } diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js index 2c5c183163c50..063b70926b196 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.new.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js @@ -32,7 +32,7 @@ import { HostRoot, SuspenseComponent, } from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import invariant from 'shared/invariant'; import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags'; import ReactSharedInternals from 'shared/ReactSharedInternals'; @@ -205,7 +205,7 @@ function findHostInstanceWithWarning( return null; } if (hostFiber.mode & StrictLegacyMode) { - const componentName = getComponentName(fiber.type) || 'Component'; + const componentName = getComponentNameFromFiber(fiber) || 'Component'; if (!didWarnAboutFindNodeInStrictMode[componentName]) { didWarnAboutFindNodeInStrictMode[componentName] = true; @@ -310,7 +310,7 @@ export function updateContainer( 'triggering nested component updates from render is not allowed. ' + 'If necessary, trigger nested updates in componentDidUpdate.\n\n' + 'Check the render method of %s.', - getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown', + getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown', ); } } diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js index 430db15494e02..8aac687d3e382 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.old.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js @@ -32,7 +32,7 @@ import { HostRoot, SuspenseComponent, } from './ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import invariant from 'shared/invariant'; import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags'; import ReactSharedInternals from 'shared/ReactSharedInternals'; @@ -205,7 +205,7 @@ function findHostInstanceWithWarning( return null; } if (hostFiber.mode & StrictLegacyMode) { - const componentName = getComponentName(fiber.type) || 'Component'; + const componentName = getComponentNameFromFiber(fiber) || 'Component'; if (!didWarnAboutFindNodeInStrictMode[componentName]) { didWarnAboutFindNodeInStrictMode[componentName] = true; @@ -310,7 +310,7 @@ export function updateContainer( 'triggering nested component updates from render is not allowed. ' + 'If necessary, trigger nested updates in componentDidUpdate.\n\n' + 'Check the render method of %s.', - getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown', + getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown', ); } } diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js index af199f0aa8e81..9ff0715f1621b 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.new.js +++ b/packages/react-reconciler/src/ReactFiberThrow.new.js @@ -15,7 +15,7 @@ import type {Update} from './ReactUpdateQueue.new'; import type {Wakeable} from 'shared/ReactTypes'; import type {SuspenseContext} from './ReactFiberSuspenseContext.new'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import { ClassComponent, HostRoot, @@ -140,7 +140,7 @@ function createClassErrorUpdate( console.error( '%s: Error boundaries should implement getDerivedStateFromError(). ' + 'In that method, return a state update to display an error message or fallback UI.', - getComponentName(fiber.type) || 'Unknown', + getComponentNameFromFiber(fiber) || 'Unknown', ); } } @@ -200,7 +200,7 @@ function throwException( if (__DEV__) { if (enableDebugTracing) { if (sourceFiber.mode & DebugTracingMode) { - const name = getComponentName(sourceFiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(sourceFiber) || 'Unknown'; logComponentSuspended(name, wakeable); } } @@ -361,7 +361,7 @@ function throwException( // No boundary was found. Fallthrough to error mode. // TODO: Use invariant so the message is stripped in prod? value = new Error( - (getComponentName(sourceFiber.type) || 'A React component') + + (getComponentNameFromFiber(sourceFiber) || 'A React component') + ' suspended while rendering, but no fallback UI was specified.\n' + '\n' + 'Add a component higher in the tree to ' + diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js index 6ae53d02fc5ce..da0d90f057f6e 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.old.js +++ b/packages/react-reconciler/src/ReactFiberThrow.old.js @@ -15,7 +15,7 @@ import type {Update} from './ReactUpdateQueue.old'; import type {Wakeable} from 'shared/ReactTypes'; import type {SuspenseContext} from './ReactFiberSuspenseContext.old'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import { ClassComponent, HostRoot, @@ -140,7 +140,7 @@ function createClassErrorUpdate( console.error( '%s: Error boundaries should implement getDerivedStateFromError(). ' + 'In that method, return a state update to display an error message or fallback UI.', - getComponentName(fiber.type) || 'Unknown', + getComponentNameFromFiber(fiber) || 'Unknown', ); } } @@ -200,7 +200,7 @@ function throwException( if (__DEV__) { if (enableDebugTracing) { if (sourceFiber.mode & DebugTracingMode) { - const name = getComponentName(sourceFiber.type) || 'Unknown'; + const name = getComponentNameFromFiber(sourceFiber) || 'Unknown'; logComponentSuspended(name, wakeable); } } @@ -361,7 +361,7 @@ function throwException( // No boundary was found. Fallthrough to error mode. // TODO: Use invariant so the message is stripped in prod? value = new Error( - (getComponentName(sourceFiber.type) || 'A React component') + + (getComponentNameFromFiber(sourceFiber) || 'A React component') + ' suspended while rendering, but no fallback UI was specified.\n' + '\n' + 'Add a component higher in the tree to ' + diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js index 06356aa709fd0..510c58eaf2b31 100644 --- a/packages/react-reconciler/src/ReactFiberTreeReflection.js +++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js @@ -15,7 +15,7 @@ import invariant from 'shared/invariant'; import {get as getInstance} from 'shared/ReactInstanceMap'; import ReactSharedInternals from 'shared/ReactSharedInternals'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import { ClassComponent, HostComponent, @@ -101,7 +101,7 @@ export function isMounted(component: React$Component): boolean { 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', - getComponentName(ownerFiber.type) || 'A component', + getComponentNameFromFiber(ownerFiber) || 'A component', ); } instance._warnedAboutRefsInRender = true; diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 7caee07872517..03cb122aca473 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -221,7 +221,7 @@ import { } from './ReactProfilerTimer.new'; // DEV stuff -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.new'; import { isRendering as ReactCurrentDebugFiberIsRenderingInDEV, @@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) { // We show the whole stack but dedupe on the top component's name because // the problematic code almost always lies inside that component. - const componentName = getComponentName(fiber.type) || 'ReactComponent'; + const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent'; if (didWarnStateUpdateForNotYetMountedComponent !== null) { if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) { return; @@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) { } // We show the whole stack but dedupe on the top component's name because // the problematic code almost always lies inside that component. - const componentName = getComponentName(fiber.type) || 'ReactComponent'; + const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent'; if (didWarnStateUpdateForUnmountedComponent !== null) { if (didWarnStateUpdateForUnmountedComponent.has(componentName)) { return; @@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) { case ForwardRef: case SimpleMemoComponent: { const renderingComponentName = - (workInProgress && getComponentName(workInProgress.type)) || + (workInProgress && getComponentNameFromFiber(workInProgress)) || 'Unknown'; // Dedupe by the rendering component because it's the one that needs to be fixed. const dedupeKey = renderingComponentName; if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) { didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey); const setStateComponentName = - getComponentName(fiber.type) || 'Unknown'; + getComponentNameFromFiber(fiber) || 'Unknown'; console.error( 'Cannot update a component (`%s`) while rendering a ' + 'different component (`%s`). To locate the bad setState() call inside `%s`, ' + @@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void { "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', - getComponentName(fiber.type), + getComponentNameFromFiber(fiber), ); } } @@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void { "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', - getComponentName(fiber.type), + getComponentNameFromFiber(fiber), ); } finally { if (previousFiber) { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 1467929ce4597..d3eeb26d11cb9 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -221,7 +221,7 @@ import { } from './ReactProfilerTimer.old'; // DEV stuff -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import ReactStrictModeWarnings from './ReactStrictModeWarnings.old'; import { isRendering as ReactCurrentDebugFiberIsRenderingInDEV, @@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) { // We show the whole stack but dedupe on the top component's name because // the problematic code almost always lies inside that component. - const componentName = getComponentName(fiber.type) || 'ReactComponent'; + const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent'; if (didWarnStateUpdateForNotYetMountedComponent !== null) { if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) { return; @@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) { } // We show the whole stack but dedupe on the top component's name because // the problematic code almost always lies inside that component. - const componentName = getComponentName(fiber.type) || 'ReactComponent'; + const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent'; if (didWarnStateUpdateForUnmountedComponent !== null) { if (didWarnStateUpdateForUnmountedComponent.has(componentName)) { return; @@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) { case ForwardRef: case SimpleMemoComponent: { const renderingComponentName = - (workInProgress && getComponentName(workInProgress.type)) || + (workInProgress && getComponentNameFromFiber(workInProgress)) || 'Unknown'; // Dedupe by the rendering component because it's the one that needs to be fixed. const dedupeKey = renderingComponentName; if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) { didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey); const setStateComponentName = - getComponentName(fiber.type) || 'Unknown'; + getComponentNameFromFiber(fiber) || 'Unknown'; console.error( 'Cannot update a component (`%s`) while rendering a ' + 'different component (`%s`). To locate the bad setState() call inside `%s`, ' + @@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void { "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', - getComponentName(fiber.type), + getComponentNameFromFiber(fiber), ); } } @@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void { "This ensures that you're testing the behavior the user would see " + 'in the browser.' + ' Learn more at https://reactjs.org/link/wrap-tests-with-act', - getComponentName(fiber.type), + getComponentNameFromFiber(fiber), ); } finally { if (previousFiber) { diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js index 972c106c632cf..4de90a15869a8 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js @@ -13,7 +13,7 @@ import { resetCurrentFiber as resetCurrentDebugFiberInDEV, setCurrentFiber as setCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {StrictLegacyMode} from './ReactTypeOfMode'; type FiberArray = Array; @@ -119,7 +119,7 @@ if (__DEV__) { if (pendingComponentWillMountWarnings.length > 0) { pendingComponentWillMountWarnings.forEach(fiber => { componentWillMountUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -130,7 +130,7 @@ if (__DEV__) { if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) { pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => { UNSAFE_componentWillMountUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -141,7 +141,7 @@ if (__DEV__) { if (pendingComponentWillReceivePropsWarnings.length > 0) { pendingComponentWillReceivePropsWarnings.forEach(fiber => { componentWillReceivePropsUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -153,7 +153,7 @@ if (__DEV__) { if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) { pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => { UNSAFE_componentWillReceivePropsUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -165,7 +165,7 @@ if (__DEV__) { if (pendingComponentWillUpdateWarnings.length > 0) { pendingComponentWillUpdateWarnings.forEach(fiber => { componentWillUpdateUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -177,7 +177,7 @@ if (__DEV__) { if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) { pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => { UNSAFE_componentWillUpdateUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -333,7 +333,7 @@ if (__DEV__) { const uniqueNames = new Set(); fiberArray.forEach(fiber => { - uniqueNames.add(getComponentName(fiber.type) || 'Component'); + uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component'); didWarnAboutLegacyContext.add(fiber.type); }); diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js index 972c106c632cf..4de90a15869a8 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js @@ -13,7 +13,7 @@ import { resetCurrentFiber as resetCurrentDebugFiberInDEV, setCurrentFiber as setCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {StrictLegacyMode} from './ReactTypeOfMode'; type FiberArray = Array; @@ -119,7 +119,7 @@ if (__DEV__) { if (pendingComponentWillMountWarnings.length > 0) { pendingComponentWillMountWarnings.forEach(fiber => { componentWillMountUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -130,7 +130,7 @@ if (__DEV__) { if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) { pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => { UNSAFE_componentWillMountUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -141,7 +141,7 @@ if (__DEV__) { if (pendingComponentWillReceivePropsWarnings.length > 0) { pendingComponentWillReceivePropsWarnings.forEach(fiber => { componentWillReceivePropsUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -153,7 +153,7 @@ if (__DEV__) { if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) { pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => { UNSAFE_componentWillReceivePropsUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -165,7 +165,7 @@ if (__DEV__) { if (pendingComponentWillUpdateWarnings.length > 0) { pendingComponentWillUpdateWarnings.forEach(fiber => { componentWillUpdateUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -177,7 +177,7 @@ if (__DEV__) { if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) { pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => { UNSAFE_componentWillUpdateUniqueNames.add( - getComponentName(fiber.type) || 'Component', + getComponentNameFromFiber(fiber) || 'Component', ); didWarnAboutUnsafeLifecycles.add(fiber.type); }); @@ -333,7 +333,7 @@ if (__DEV__) { const uniqueNames = new Set(); fiberArray.forEach(fiber => { - uniqueNames.add(getComponentName(fiber.type) || 'Component'); + uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component'); didWarnAboutLegacyContext.add(fiber.type); }); diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js index ebe50a94ed3fb..58e888c168585 100644 --- a/packages/react-reconciler/src/ReactTestSelectors.js +++ b/packages/react-reconciler/src/ReactTestSelectors.js @@ -12,7 +12,7 @@ import type {Instance} from './ReactFiberHostConfig'; import invariant from 'shared/invariant'; import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import { findFiberRoot, getBoundingRect, @@ -189,7 +189,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean { function selectorToString(selector: Selector): string | null { switch (selector.$$typeof) { case COMPONENT_TYPE: - const displayName = getComponentName(selector.value) || 'Unknown'; + const displayName = getComponentNameFromType(selector.value) || 'Unknown'; return `<${displayName}>`; case HAS_PSEUDO_CLASS_TYPE: return `:has(${selectorToString(selector) || ''})`; diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js index ccc41f9854876..67baa02ea2e48 100644 --- a/packages/react-reconciler/src/SchedulingProfiler.js +++ b/packages/react-reconciler/src/SchedulingProfiler.js @@ -16,7 +16,7 @@ import { enableSchedulingProfiler, } from 'shared/ReactFeatureFlags'; import ReactVersion from 'shared/ReactVersion'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber'; import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old'; import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new'; @@ -113,7 +113,7 @@ export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void { if (enableSchedulingProfiler) { if (supportsUserTimingV3) { const id = getWakeableID(wakeable); - const componentName = getComponentName(fiber.type) || 'Unknown'; + const componentName = getComponentNameFromFiber(fiber) || 'Unknown'; // TODO Add component stack id markAndClear(`--suspense-suspend-${id}-${componentName}`); wakeable.then( @@ -191,7 +191,7 @@ export function markRenderScheduled(lane: Lane): void { export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void { if (enableSchedulingProfiler) { if (supportsUserTimingV3) { - const componentName = getComponentName(fiber.type) || 'Unknown'; + const componentName = getComponentNameFromFiber(fiber) || 'Unknown'; // TODO Add component stack id markAndClear( `--schedule-forced-update-${formatLanes(lane)}-${componentName}`, @@ -203,7 +203,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void { export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void { if (enableSchedulingProfiler) { if (supportsUserTimingV3) { - const componentName = getComponentName(fiber.type) || 'Unknown'; + const componentName = getComponentNameFromFiber(fiber) || 'Unknown'; // TODO Add component stack id markAndClear( `--schedule-state-update-${formatLanes(lane)}-${componentName}`, diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js new file mode 100644 index 0000000000000..4ae33c2ed594a --- /dev/null +++ b/packages/react-reconciler/src/getComponentNameFromFiber.js @@ -0,0 +1,124 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import type {ReactContext, ReactProviderType} from 'shared/ReactTypes'; + +import { + FunctionComponent, + ClassComponent, + IndeterminateComponent, + HostRoot, + HostPortal, + HostComponent, + HostText, + Fragment, + Mode, + ContextConsumer, + ContextProvider, + ForwardRef, + Profiler, + SuspenseComponent, + MemoComponent, + SimpleMemoComponent, + LazyComponent, + IncompleteClassComponent, + DehydratedFragment, + SuspenseListComponent, + ScopeComponent, + OffscreenComponent, + LegacyHiddenComponent, + CacheComponent, +} from 'react-reconciler/src/ReactWorkTags'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; +import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols'; + +// Keep in sync with shared/getComponentNameFromType +function getWrappedName( + outerType: mixed, + innerType: any, + wrapperName: string, +): string { + const functionName = innerType.displayName || innerType.name || ''; + return ( + (outerType: any).displayName || + (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName) + ); +} + +// Keep in sync with shared/getComponentNameFromType +function getContextName(type: ReactContext) { + return type.displayName || 'Context'; +} + +export default function getComponentNameFromFiber(fiber: Fiber): string | null { + const {tag, type} = fiber; + switch (tag) { + case CacheComponent: + return 'Cache'; + case ContextConsumer: + const context: ReactContext = (type: any); + return getContextName(context) + '.Consumer'; + case ContextProvider: + const provider: ReactProviderType = (type: any); + return getContextName(provider._context) + '.Provider'; + case DehydratedFragment: + return 'DehydratedFragment'; + case ForwardRef: + return getWrappedName(type, type.render, 'ForwardRef'); + case Fragment: + return 'Fragment'; + case HostComponent: + // Host component type is the display name (e.g. "div", "View") + return type; + case HostPortal: + return 'Portal'; + case HostRoot: + return 'Root'; + case HostText: + return 'Text'; + case LazyComponent: + // Name comes from the type in this case; we don't have a tag. + return getComponentNameFromType(type); + case LegacyHiddenComponent: + return 'LegacyHidden'; + case Mode: + if (type === REACT_STRICT_MODE_TYPE) { + // Don't be less specific than shared/getComponentNameFromType + return 'StrictMode'; + } + return 'Mode'; + case OffscreenComponent: + return 'Offscreen'; + case Profiler: + return 'Profiler'; + case ScopeComponent: + return 'Scope'; + case SuspenseComponent: + return 'Suspense'; + case SuspenseListComponent: + return 'SuspenseList'; + + // The display name for this tags come from the user-provided type: + case ClassComponent: + case FunctionComponent: + case IncompleteClassComponent: + case IndeterminateComponent: + case MemoComponent: + case SimpleMemoComponent: + if (typeof type === 'function') { + return (type: any).displayName || type.name || null; + } + if (typeof type === 'string') { + return type; + } + break; + } + + return null; +} diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index 65da95aad5bfa..f058af3e87584 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -43,7 +43,7 @@ import { ScopeComponent, } from 'react-reconciler/src/ReactWorkTags'; import invariant from 'shared/invariant'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import ReactVersion from 'shared/ReactVersion'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import enqueueTask from 'shared/enqueueTask'; @@ -344,7 +344,7 @@ class ReactTestInstance { findByType(type: any): ReactTestInstance { return expectOne( this.findAllByType(type, {deep: false}), - `with node type: "${getComponentName(type) || 'Unknown'}"`, + `with node type: "${getComponentNameFromType(type) || 'Unknown'}"`, ); } diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js index d157a428dad80..9747e0da1a12e 100644 --- a/packages/react/src/ReactElement.js +++ b/packages/react/src/ReactElement.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import invariant from 'shared/invariant'; import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols'; @@ -104,7 +104,9 @@ function warnIfStringRefCannotBeAutoConverted(config) { config.__self && ReactCurrentOwner.current.stateNode !== config.__self ) { - const componentName = getComponentName(ReactCurrentOwner.current.type); + const componentName = getComponentNameFromType( + ReactCurrentOwner.current.type, + ); if (!didWarnAboutStringRefs[componentName]) { console.error( diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js index eee8ca26fe251..1ee89ef142177 100644 --- a/packages/react/src/ReactElementValidator.js +++ b/packages/react/src/ReactElementValidator.js @@ -13,7 +13,7 @@ */ import isValidElementType from 'shared/isValidElementType'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import { getIteratorFn, REACT_FORWARD_REF_TYPE, @@ -60,7 +60,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty; function getDeclarationErrorAddendum() { if (ReactCurrentOwner.current) { - const name = getComponentName(ReactCurrentOwner.current.type); + const name = getComponentNameFromType(ReactCurrentOwner.current.type); if (name) { return '\n\nCheck the render method of `' + name + '`.'; } @@ -139,7 +139,7 @@ function validateExplicitKey(element, parentType) { element._owner !== ReactCurrentOwner.current ) { // Give the component that originally created this child. - childOwner = ` It was passed a child from ${getComponentName( + childOwner = ` It was passed a child from ${getComponentNameFromType( element._owner.type, )}.`; } @@ -227,12 +227,12 @@ function validatePropTypes(element) { } if (propTypes) { // Intentionally inside to avoid triggering lazy initializers: - const name = getComponentName(type); + const name = getComponentNameFromType(type); checkPropTypes(propTypes, element.props, 'prop', name, element); } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - const name = getComponentName(type); + const name = getComponentNameFromType(type); console.error( 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', name || 'Unknown', @@ -317,7 +317,7 @@ export function jsxWithValidation( } else if (Array.isArray(type)) { typeString = 'array'; } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = `<${getComponentName(type.type) || 'Unknown'} />`; + typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`; info = ' Did you accidentally export a JSX literal instead of a component?'; } else { @@ -383,7 +383,7 @@ export function jsxWithValidation( 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' + 'Explicitly pass a key after spreading props in your JSX call. ' + 'E.g. <%s {...props} key={key} />', - getComponentName(type) || 'ComponentName', + getComponentNameFromType(type) || 'ComponentName', ); } } @@ -441,7 +441,7 @@ export function createElementWithValidation(type, props, children) { } else if (Array.isArray(type)) { typeString = 'array'; } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = `<${getComponentName(type.type) || 'Unknown'} />`; + typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`; info = ' Did you accidentally export a JSX literal instead of a component?'; } else { diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js index c4c02c7418ab6..ccf2c6e2a4002 100644 --- a/packages/react/src/jsx/ReactJSXElement.js +++ b/packages/react/src/jsx/ReactJSXElement.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols'; @@ -61,7 +61,9 @@ function warnIfStringRefCannotBeAutoConverted(config, self) { self && ReactCurrentOwner.current.stateNode !== self ) { - const componentName = getComponentName(ReactCurrentOwner.current.type); + const componentName = getComponentNameFromType( + ReactCurrentOwner.current.type, + ); if (!didWarnAboutStringRefs[componentName]) { console.error( @@ -71,7 +73,7 @@ function warnIfStringRefCannotBeAutoConverted(config, self) { 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', - getComponentName(ReactCurrentOwner.current.type), + getComponentNameFromType(ReactCurrentOwner.current.type), config.ref, ); didWarnAboutStringRefs[componentName] = true; diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js index b76baa1e353a9..6ee1c7176f498 100644 --- a/packages/react/src/jsx/ReactJSXElementValidator.js +++ b/packages/react/src/jsx/ReactJSXElementValidator.js @@ -12,7 +12,7 @@ * that support it. */ import isValidElementType from 'shared/isValidElementType'; -import getComponentName from 'shared/getComponentName'; +import getComponentNameFromType from 'shared/getComponentNameFromType'; import checkPropTypes from 'shared/checkPropTypes'; import { getIteratorFn, @@ -76,7 +76,7 @@ export function isValidElement(object) { function getDeclarationErrorAddendum() { if (__DEV__) { if (ReactCurrentOwner.current) { - const name = getComponentName(ReactCurrentOwner.current.type); + const name = getComponentNameFromType(ReactCurrentOwner.current.type); if (name) { return '\n\nCheck the render method of `' + name + '`.'; } @@ -154,7 +154,7 @@ function validateExplicitKey(element, parentType) { element._owner !== ReactCurrentOwner.current ) { // Give the component that originally created this child. - childOwner = ` It was passed a child from ${getComponentName( + childOwner = ` It was passed a child from ${getComponentNameFromType( element._owner.type, )}.`; } @@ -243,12 +243,12 @@ function validatePropTypes(element) { } if (propTypes) { // Intentionally inside to avoid triggering lazy initializers: - const name = getComponentName(type); + const name = getComponentNameFromType(type); checkPropTypes(propTypes, element.props, 'prop', name, element); } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers: - const name = getComponentName(type); + const name = getComponentNameFromType(type); console.error( 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', name || 'Unknown', @@ -334,7 +334,7 @@ export function jsxWithValidation( } else if (Array.isArray(type)) { typeString = 'array'; } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) { - typeString = `<${getComponentName(type.type) || 'Unknown'} />`; + typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`; info = ' Did you accidentally export a JSX literal instead of a component?'; } else { @@ -395,7 +395,7 @@ export function jsxWithValidation( 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' + 'Explicitly pass a key after spreading props in your JSX call. ' + 'E.g. <%s {...props} key={key} />', - getComponentName(type) || 'ComponentName', + getComponentNameFromType(type) || 'ComponentName', ); } } diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentNameFromType.js similarity index 86% rename from packages/shared/getComponentName.js rename to packages/shared/getComponentNameFromType.js index a5594f6f64d70..f0f51d852f8d3 100644 --- a/packages/shared/getComponentName.js +++ b/packages/shared/getComponentNameFromType.js @@ -8,6 +8,7 @@ */ import type {LazyComponent} from 'react/src/ReactLazy'; +import type {ReactContext, ReactProviderType} from 'shared/ReactTypes'; import { REACT_CONTEXT_TYPE, @@ -23,8 +24,8 @@ import { REACT_LAZY_TYPE, REACT_CACHE_TYPE, } from 'shared/ReactSymbols'; -import type {ReactContext, ReactProviderType} from 'shared/ReactTypes'; +// Keep in sync with react-reconciler/getComponentNameFromFiber function getWrappedName( outerType: mixed, innerType: any, @@ -37,11 +38,13 @@ function getWrappedName( ); } +// Keep in sync with react-reconciler/getComponentNameFromFiber function getContextName(type: ReactContext) { return type.displayName || 'Context'; } -function getComponentName(type: mixed): string | null { +// Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead. +export default function getComponentNameFromType(type: mixed): string | null { if (type == null) { // Host root, text node or just invalid type. return null; @@ -87,13 +90,13 @@ function getComponentName(type: mixed): string | null { case REACT_FORWARD_REF_TYPE: return getWrappedName(type, type.render, 'ForwardRef'); case REACT_MEMO_TYPE: - return getComponentName(type.type); + return getComponentNameFromType(type.type); case REACT_LAZY_TYPE: { const lazyComponent: LazyComponent = (type: any); const payload = lazyComponent._payload; const init = lazyComponent._init; try { - return getComponentName(init(payload)); + return getComponentNameFromType(init(payload)); } catch (x) { return null; } @@ -102,5 +105,3 @@ function getComponentName(type: mixed): string | null { } return null; } - -export default getComponentName;