Remove __self and __source location from elements (#28265)

Along with all the places using it like the `_debugSource` on Fiber.
This still lets them be passed into `createElement` (and JSX dev
runtime) since those can still be used in existing already compiled code
and we don't want that to start spreading to DOM attributes.

We used to have a DEV mode that compiles the source location of JSX into
the compiled output. This was nice because we could get the actual call
site of the JSX (instead of just somewhere in the component). It had a
bunch of issues though:

- It only works with JSX.
- The way this source location is compiled is different in all the
pipelines along the way. It relies on this transform being first and the
source location we want to extract but it doesn't get preserved along
source maps and don't have a way to be connected to the source hosted by
the source maps. Ideally it should just use the mechanism other source
maps use.
- Since it's expensive it only works in DEV so if it's used for
component stacks it would vary between dev and prod.
- It only captures the callsite of the JSX and not the stack between the
component and that callsite. In the happy case it's in the component but
not always.

Instead, we have another zero-cost trick to extract the call site of
each component lazily only if it's needed. This ensures that component
stacks are the same in DEV and PROD. At the cost of worse line number
information.

The better way to get the JSX call site would be to get it from `new
Error()` or `console.createTask()` inside the JSX runtime which can
capture the whole stack in a consistent way with other source mappings.
We might explore that in the future.

This removes source location info from React DevTools and React Native
Inspector. The "jump to source code" feature or inspection can be made
lazy instead by invoking the lazy component stack frame generation. That
way it can be made to work in prod too. The filtering based on file path
is a bit trickier.

When redesigned this UI should ideally also account for more than one
stack frame.

With this change the DEV only Babel transforms are effectively
deprecated since they're not necessary for anything.
This commit is contained in:
Sebastian Markbåge
2024-02-07 16:38:00 -05:00
committed by GitHub
parent 30f68689d9
commit c77dae88f4
26 changed files with 66 additions and 211 deletions
+12 -43
View File
@@ -7,7 +7,6 @@
* @flow
*/
import type {Source} from 'shared/ReactElementType';
import type {LazyComponent} from 'react/src/ReactLazy';
import {enableComponentStackLocations} from 'shared/ReactFeatureFlags';
@@ -29,7 +28,6 @@ const {ReactCurrentDispatcher} = ReactSharedInternals;
let prefix;
export function describeBuiltInComponentFrame(
name: string,
source: void | null | Source,
ownerFn: void | null | Function,
): string {
if (enableComponentStackLocations) {
@@ -49,7 +47,7 @@ export function describeBuiltInComponentFrame(
if (__DEV__ && ownerFn) {
ownerName = ownerFn.displayName || ownerFn.name || null;
}
return describeComponentFrame(name, source, ownerName);
return describeComponentFrame(name, ownerName);
}
}
@@ -293,31 +291,9 @@ export function describeNativeComponentFrame(
return syntheticFrame;
}
const BEFORE_SLASH_RE = /^(.*)[\\\/]/;
function describeComponentFrame(
name: null | string,
source: void | null | Source,
ownerName: null | string,
) {
function describeComponentFrame(name: null | string, ownerName: null | string) {
let sourceInfo = '';
if (__DEV__ && source) {
const path = source.fileName;
let fileName = path.replace(BEFORE_SLASH_RE, '');
// In DEV, include code for a common special case:
// prefer "folder/index.js" instead of just "index.js".
if (/^index\./.test(fileName)) {
const match = path.match(BEFORE_SLASH_RE);
if (match) {
const pathBeforeSlash = match[1];
if (pathBeforeSlash) {
const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
fileName = folderName + '/' + fileName;
}
}
}
sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
} else if (ownerName) {
if (ownerName) {
sourceInfo = ' (created by ' + ownerName + ')';
}
return '\n in ' + (name || 'Unknown') + sourceInfo;
@@ -325,19 +301,17 @@ function describeComponentFrame(
export function describeClassComponentFrame(
ctor: Function,
source: void | null | Source,
ownerFn: void | null | Function,
): string {
if (enableComponentStackLocations) {
return describeNativeComponentFrame(ctor, true);
} else {
return describeFunctionComponentFrame(ctor, source, ownerFn);
return describeFunctionComponentFrame(ctor, ownerFn);
}
}
export function describeFunctionComponentFrame(
fn: Function,
source: void | null | Source,
ownerFn: void | null | Function,
): string {
if (enableComponentStackLocations) {
@@ -351,7 +325,7 @@ export function describeFunctionComponentFrame(
if (__DEV__ && ownerFn) {
ownerName = ownerFn.displayName || ownerFn.name || null;
}
return describeComponentFrame(name, source, ownerName);
return describeComponentFrame(name, ownerName);
}
}
@@ -362,7 +336,6 @@ function shouldConstruct(Component: Function) {
export function describeUnknownElementTypeFrameInDEV(
type: any,
source: void | null | Source,
ownerFn: void | null | Function,
): string {
if (!__DEV__) {
@@ -375,36 +348,32 @@ export function describeUnknownElementTypeFrameInDEV(
if (enableComponentStackLocations) {
return describeNativeComponentFrame(type, shouldConstruct(type));
} else {
return describeFunctionComponentFrame(type, source, ownerFn);
return describeFunctionComponentFrame(type, ownerFn);
}
}
if (typeof type === 'string') {
return describeBuiltInComponentFrame(type, source, ownerFn);
return describeBuiltInComponentFrame(type, ownerFn);
}
switch (type) {
case REACT_SUSPENSE_TYPE:
return describeBuiltInComponentFrame('Suspense', source, ownerFn);
return describeBuiltInComponentFrame('Suspense', ownerFn);
case REACT_SUSPENSE_LIST_TYPE:
return describeBuiltInComponentFrame('SuspenseList', source, ownerFn);
return describeBuiltInComponentFrame('SuspenseList', ownerFn);
}
if (typeof type === 'object') {
switch (type.$$typeof) {
case REACT_FORWARD_REF_TYPE:
return describeFunctionComponentFrame(type.render, source, ownerFn);
return describeFunctionComponentFrame(type.render, ownerFn);
case REACT_MEMO_TYPE:
// Memo may contain any component type so we recursively resolve it.
return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
return describeUnknownElementTypeFrameInDEV(type.type, ownerFn);
case REACT_LAZY_TYPE: {
const lazyComponent: LazyComponent<any, any> = (type: any);
const payload = lazyComponent._payload;
const init = lazyComponent._init;
try {
// Lazy may contain any component type so we recursively resolve it.
return describeUnknownElementTypeFrameInDEV(
init(payload),
source,
ownerFn,
);
return describeUnknownElementTypeFrameInDEV(init(payload), ownerFn);
} catch (x) {}
}
}