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.
Sebastian Markbåge committed
Feb 7, 2024 at 13:38 UTC
37d901e2b81e12d40df7012c6f8681b8272d2555
26 files changed
+66
-211
packages/react-client/src/ReactFlightClient.js
-12
@@ -475,18 +475,6 @@ function createElement(
475
writable: true,
476
value: true, // This element has already been validated on the server.
477
});
478
- Object.defineProperty(element, '_self', {
479
- configurable: false,
480
- enumerable: false,
481
- writable: false,
482
- value: null,
483
- });
484
- Object.defineProperty(element, '_source', {
485
- configurable: false,
486
- enumerable: false,
487
- writable: false,
488
- value: null,
489
- });
478
}
479
return element;
480
}
packages/react-devtools-inline/__tests__/__e2e__/components.test.js
+3
-2
@@ -92,14 +92,15 @@ test.describe('Components', () => {
92
? valueElement.value
93
: valueElement.innerText;
94
95
- return [name, value, source.innerText];
95
+ return [name, value, source ? source.innerText : null];
96
},
97
{name: isEditableName, value: isEditableValue}
98
);
99
100
expect(propName).toBe('label');
101
expect(propValue).toBe('"one"');
102
- expect(sourceText).toMatch(/ListApp[a-zA-Z]*\.js/);
102
+ expect(sourceText).toBe(null);
103
+ // TODO: expect(sourceText).toMatch(/ListApp[a-zA-Z]*\.js/);
104
});
105
106
test('should allow props to be edited', async () => {
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+7
-1
@@ -242,7 +242,13 @@ describe('Store component filters', () => {
242
]),
243
);
244
245
- expect(store).toMatchInlineSnapshot(`[root]`);
245
+ // TODO: Filtering should work on component location.
246
+ // expect(store).toMatchInlineSnapshot(`[root]`);
247
+ expect(store).toMatchInlineSnapshot(`
248
+ [root]
249
+ ▾ <Component>
250
+ <div>
251
+ `);
252
253
await actAsync(
254
async () =>
packages/react-devtools-shared/src/backend/legacy/renderer.js
-5
@@ -773,12 +773,10 @@ export function attach(
773
let owners = null;
774
let props = null;
775
let state = null;
776
- let source = null;
776
777
const element = internalInstance._currentElement;
778
if (element !== null) {
779
props = element.props;
781
- source = element._source != null ? element._source : null;
780
781
let owner = element._owner;
782
if (owner) {
@@ -851,9 +849,6 @@ export function attach(
849
// List of owners
850
owners,
851
854
- // Location of component in source code.
855
- source,
856
-
852
rootType: null,
853
rendererPackageName: null,
854
rendererVersion: null,
packages/react-devtools-shared/src/backend/renderer.js
+10
-17
@@ -958,7 +958,7 @@ export function attach(
958
959
// NOTICE Keep in sync with get*ForFiber methods
960
function shouldFilterFiber(fiber: Fiber): boolean {
961
- const {_debugSource, tag, type, key} = fiber;
961
+ const {tag, type, key} = fiber;
962
963
switch (tag) {
964
case DehydratedSuspenseComponent:
@@ -1010,15 +1010,15 @@ export function attach(
1010
}
1011
}
1012
1013
- if (_debugSource != null && hideElementsWithPaths.size > 0) {
1014
- const {fileName} = _debugSource;
1015
- // eslint-disable-next-line no-for-of-loops/no-for-of-loops
1016
- for (const pathRegExp of hideElementsWithPaths) {
1017
- if (pathRegExp.test(fileName)) {
1018
- return true;
1019
- }
1020
- }
1021
- }
1013
+ // TODO: Figure out a way to filter by path in the new model which has no debug info.
1014
+ // if (hideElementsWithPaths.size > 0) {
1015
+ // const {fileName} = ...;
1016
+ // for (const pathRegExp of hideElementsWithPaths) {
1017
+ // if (pathRegExp.test(fileName)) {
1018
+ // return true;
1019
+ // }
1020
+ // }
1021
+ // }
1022
1023
return false;
1024
}
@@ -3132,7 +3132,6 @@ export function attach(
3132
3133
const {
3134
_debugOwner,
3135
- _debugSource,
3135
stateNode,
3136
key,
3137
memoizedProps,
@@ -3362,9 +3361,6 @@ export function attach(
3361
// List of owners
3362
owners,
3363
3365
- // Location of component in source code.
3366
- source: _debugSource || null,
3367
-
3364
rootType,
3365
rendererPackageName: renderer.rendererPackageName,
3366
rendererVersion: renderer.version,
@@ -3725,9 +3721,6 @@ export function attach(
3721
if (nativeNodes !== null) {
3722
console.log('Nodes:', nativeNodes);
3723
}
3728
- if (result.source !== null) {
3729
- console.log('Location:', result.source);
3730
- }
3724
if (window.chrome || /firefox/i.test(navigator.userAgent)) {
3725
console.log(
3726
'Right-click any value to save it as a global variable for further inspection.',
packages/react-devtools-shared/src/backend/types.js
-4
@@ -15,7 +15,6 @@
15
*/
16
17
import type {ReactContext, Wakeable} from 'shared/ReactTypes';
18
-import type {Source} from 'shared/ReactElementType';
18
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
19
import type {
20
ComponentFilter,
@@ -280,9 +279,6 @@ export type InspectedElement = {
279
// List of owners
280
owners: Array<SerializedElement> | null,
281
283
- // Location of component in source code.
284
- source: Source | null,
285
-
282
type: ElementType,
283
284
// Meta information about the root this element belongs to.
packages/react-devtools-shared/src/backendAPI.js
+1
-2
@@ -226,7 +226,6 @@ export function convertInspectedElementBackendToFrontend(
226
canViewSource,
227
hasLegacyContext,
228
id,
229
- source,
229
type,
230
owners,
231
context,
@@ -261,7 +260,7 @@ export function convertInspectedElementBackendToFrontend(
260
rendererPackageName,
261
rendererVersion,
262
rootType,
264
- source,
263
+ source: null, // TODO: Load source location lazily.
264
type,
265
owners:
266
owners === null
packages/react-devtools-shared/src/frontend/types.js
+1
-2
@@ -14,7 +14,6 @@
14
* Be mindful of backwards compatibility when making changes.
15
*/
16
17
-import type {Source} from 'shared/ReactElementType';
17
import type {
18
Dehydrated,
19
Unserializable,
@@ -220,7 +219,7 @@ export type InspectedElement = {
219
owners: Array<SerializedElement> | null,
220
221
// Location of component in source code.
223
- source: Source | null,
222
+ source: null, // TODO: Reinstate a way to load this lazily.
223
224
type: ElementType,
225
packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js
+10
-2
@@ -131,6 +131,10 @@ describe('ReactDeprecationWarnings', () => {
131
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
132
'Learn more about using refs safely here: ' +
133
'https://reactjs.org/link/strict-mode-string-ref',
134
+ 'Warning: Component "Component" contains the string ref "refComponent". ' +
135
+ 'Support for string refs will be removed in a future major release. We recommend ' +
136
+ 'using useRef() or createRef() instead. Learn more about using refs safely here: ' +
137
+ 'https://reactjs.org/link/strict-mode-string-ref',
138
]);
139
});
140
@@ -155,14 +159,18 @@ describe('ReactDeprecationWarnings', () => {
159
}
160
161
ReactNoop.render(<Component />);
158
- await expect(async () => await waitForAll([])).toErrorDev(
162
+ await expect(async () => await waitForAll([])).toErrorDev([
163
'Warning: Component "Component" contains the string ref "refComponent". ' +
164
'Support for string refs will be removed in a future major release. ' +
165
'This case cannot be automatically converted to an arrow function. ' +
166
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
167
'Learn more about using refs safely here: ' +
168
'https://reactjs.org/link/strict-mode-string-ref',
165
- );
169
+ 'Warning: Component "Component" contains the string ref "refComponent". ' +
170
+ 'Support for string refs will be removed in a future major release. We recommend ' +
171
+ 'using useRef() or createRef() instead. Learn more about using refs safely here: ' +
172
+ 'https://reactjs.org/link/strict-mode-string-ref',
173
+ ]);
174
});
175
}
176
});
packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
-4
@@ -270,7 +270,6 @@ describe('ReactFunctionComponent', () => {
270
return <FunctionComponent name="A" ref={() => {}} />;
271
}
272
}
273
- Object.defineProperty(AnonymousParentUsingJSX, 'name', {value: undefined});
273
274
let instance1;
275
@@ -293,9 +292,6 @@ describe('ReactFunctionComponent', () => {
292
});
293
}
294
}
296
- Object.defineProperty(AnonymousParentNotUsingJSX, 'name', {
297
- value: undefined,
298
- });
295
296
let instance2;
297
expect(() => {
packages/react-native-renderer/src/ReactNativeFiberInspector.js
+5
-4
@@ -24,6 +24,7 @@ import {
24
import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
25
import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
26
import {getNodeFromInternalInstanceHandle} from './ReactNativePublicCompat';
27
+import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactFiberComponentStack';
28
29
const emptyObject = {};
30
if (__DEV__) {
@@ -37,7 +38,6 @@ function createHierarchy(fiberHierarchy) {
38
getInspectorData: findNodeHandle => {
39
return {
40
props: getHostProps(fiber),
40
- source: fiber._debugSource,
41
measure: callback => {
42
// If this is Fabric, we'll find a shadow node and use that to measure.
43
const hostFiber = findCurrentHostFiber(fiber);
@@ -98,7 +98,7 @@ function getInspectorDataForInstance(
98
hierarchy: [],
99
props: emptyObject,
100
selectedIndex: null,
101
- source: null,
101
+ componentStack: '',
102
};
103
}
104
@@ -107,15 +107,16 @@ function getInspectorDataForInstance(
107
const instance = lastNonHostInstance(fiberHierarchy);
108
const hierarchy = createHierarchy(fiberHierarchy);
109
const props = getHostProps(instance);
110
- const source = instance._debugSource;
110
const selectedIndex = fiberHierarchy.indexOf(instance);
111
+ const componentStack =
112
+ fiber !== null ? getStackByFiberInDevAndProd(fiber) : '';
113
114
return {
115
closestInstance: instance,
116
hierarchy,
117
props,
118
selectedIndex,
118
- source,
119
+ componentStack,
120
};
121
}
122
packages/react-native-renderer/src/ReactNativeTypes.js
+1
-7
@@ -142,11 +142,6 @@ type InspectorDataProps = $ReadOnly<{
142
...
143
}>;
144
145
-type InspectorDataSource = $ReadOnly<{
146
- fileName?: string,
147
- lineNumber?: number,
148
-}>;
149
-
145
type InspectorDataGetter = (
146
<TElementType: ElementType>(
147
componentOrHandle: ElementRef<TElementType> | number,
@@ -154,7 +149,6 @@ type InspectorDataGetter = (
149
) => $ReadOnly<{
150
measure: (callback: MeasureOnSuccessCallback) => void,
151
props: InspectorDataProps,
157
- source: InspectorDataSource,
152
}>;
153
154
export type InspectorData = $ReadOnly<{
@@ -165,7 +159,7 @@ export type InspectorData = $ReadOnly<{
159
}>,
160
selectedIndex: ?number,
161
props: InspectorDataProps,
168
- source: ?InspectorDataSource,
162
+ componentStack: string,
163
}>;
164
165
export type TouchedViewDataAtPoint = $ReadOnly<{
packages/react-reconciler/src/ReactChildFiber.js
-11
@@ -129,14 +129,6 @@ function coerceRef(
129
) {
130
if (__DEV__) {
131
if (
132
- // We warn in ReactElement.js if owner and self are equal for string refs
133
- // because these cannot be automatically converted to an arrow function
134
- // using a codemod. Therefore, we don't have to warn about string refs again.
135
- !(
136
- element._owner &&
137
- element._self &&
138
- element._owner.stateNode !== element._self
139
- ) &&
132
// Will already throw with "Function components cannot have string refs"
133
!(
134
element._owner &&
@@ -446,7 +438,6 @@ function createChildReconciler(
438
existing.ref = coerceRef(returnFiber, current, element);
439
existing.return = returnFiber;
440
if (__DEV__) {
449
- existing._debugSource = element._source;
441
existing._debugOwner = element._owner;
442
}
443
return existing;
@@ -1234,7 +1225,6 @@ function createChildReconciler(
1225
const existing = useFiber(child, element.props.children);
1226
existing.return = returnFiber;
1227
if (__DEV__) {
1237
- existing._debugSource = element._source;
1228
existing._debugOwner = element._owner;
1229
}
1230
return existing;
@@ -1260,7 +1250,6 @@ function createChildReconciler(
1250
existing.ref = coerceRef(returnFiber, child, element);
1251
existing.return = returnFiber;
1252
if (__DEV__) {
1263
- existing._debugSource = element._source;
1253
existing._debugOwner = element._owner;
1254
}
1255
return existing;
packages/react-reconciler/src/ReactFiber.js
+1
-10
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-import type {ReactElement, Source} from 'shared/ReactElementType';
10
+import type {ReactElement} from 'shared/ReactElementType';
11
import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
12
import type {Fiber} from './ReactInternalTypes';
13
import type {RootTag} from './ReactRootTags';
@@ -202,7 +202,6 @@ function FiberNode(
202
if (__DEV__) {
203
// This isn't directly used but is handy for debugging internals:
204
205
- this._debugSource = null;
205
this._debugOwner = null;
206
this._debugNeedsRemount = false;
207
this._debugHookTypes = null;
@@ -285,7 +284,6 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
284
if (__DEV__) {
285
// DEV-only fields
286
288
- workInProgress._debugSource = current._debugSource;
287
workInProgress._debugOwner = current._debugOwner;
288
workInProgress._debugHookTypes = current._debugHookTypes;
289
}
@@ -488,7 +486,6 @@ export function createFiberFromTypeAndProps(
486
type: any, // React$ElementType
487
key: null | string,
488
pendingProps: any,
491
- source: null | Source,
489
owner: null | Fiber,
490
mode: TypeOfMode,
491
lanes: Lanes,
@@ -637,7 +634,6 @@ export function createFiberFromTypeAndProps(
634
fiber.lanes = lanes;
635
636
if (__DEV__) {
640
- fiber._debugSource = source;
637
fiber._debugOwner = owner;
638
}
639
@@ -649,10 +645,8 @@ export function createFiberFromElement(
645
mode: TypeOfMode,
646
lanes: Lanes,
647
): Fiber {
652
- let source = null;
648
let owner = null;
649
if (__DEV__) {
655
- source = element._source;
650
owner = element._owner;
651
}
652
const type = element.type;
@@ -662,13 +656,11 @@ export function createFiberFromElement(
656
type,
657
key,
658
pendingProps,
665
- source,
659
owner,
660
mode,
661
lanes,
662
);
663
if (__DEV__) {
671
- fiber._debugSource = element._source;
664
fiber._debugOwner = element._owner;
665
}
666
return fiber;
@@ -919,7 +911,6 @@ export function assignFiberPropertiesInDEV(
911
target.treeBaseDuration = source.treeBaseDuration;
912
}
913
922
- target._debugSource = source._debugSource;
914
target._debugOwner = source._debugOwner;
915
target._debugNeedsRemount = source._debugNeedsRemount;
916
target._debugHookTypes = source._debugHookTypes;
packages/react-reconciler/src/ReactFiberBeginWork.js
+2
-7
@@ -533,7 +533,6 @@ function updateMemoComponent(
533
Component.type,
534
null,
535
nextProps,
536
- null,
536
workInProgress,
537
workInProgress.mode,
538
renderLanes,
@@ -2097,16 +2096,13 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
2096
}
2097
if (workInProgress.ref !== null) {
2098
let info = '';
2099
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
2100
const ownerName = getCurrentFiberOwnerNameInDevOrNull();
2101
if (ownerName) {
2102
info += '\n\nCheck the render method of `' + ownerName + '`.';
2103
}
2104
2105
- let warningKey = ownerName || '';
2106
- const debugSource = workInProgress._debugSource;
2107
- if (debugSource) {
2108
- warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
2109
- }
2105
+ const warningKey = componentName + '|' + (ownerName || '');
2106
if (!didWarnAboutFunctionRefs[warningKey]) {
2107
didWarnAboutFunctionRefs[warningKey] = true;
2108
console.error(
@@ -4058,7 +4054,6 @@ function beginWork(
4054
workInProgress.type,
4055
workInProgress.key,
4056
workInProgress.pendingProps,
4061
- workInProgress._debugSource || null,
4057
workInProgress._debugOwner || null,
4058
workInProgress.mode,
4059
workInProgress.lanes,
packages/react-reconciler/src/ReactFiberCommitWork.js
-1
@@ -1693,7 +1693,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
1693
fiber.stateNode = null;
1694
1695
if (__DEV__) {
1696
- fiber._debugSource = null;
1696
fiber._debugOwner = null;
1697
}
1698
packages/react-reconciler/src/ReactFiberComponentStack.js
+7
-8
@@ -34,26 +34,25 @@ function describeFiber(fiber: Fiber): string {
34
? fiber._debugOwner.type
35
: null
36
: null;
37
- const source = __DEV__ ? fiber._debugSource : null;
37
switch (fiber.tag) {
38
case HostHoistable:
39
case HostSingleton:
40
case HostComponent:
42
- return describeBuiltInComponentFrame(fiber.type, source, owner);
41
+ return describeBuiltInComponentFrame(fiber.type, owner);
42
case LazyComponent:
44
- return describeBuiltInComponentFrame('Lazy', source, owner);
43
+ return describeBuiltInComponentFrame('Lazy', owner);
44
case SuspenseComponent:
46
- return describeBuiltInComponentFrame('Suspense', source, owner);
45
+ return describeBuiltInComponentFrame('Suspense', owner);
46
case SuspenseListComponent:
48
- return describeBuiltInComponentFrame('SuspenseList', source, owner);
47
+ return describeBuiltInComponentFrame('SuspenseList', owner);
48
case FunctionComponent:
49
case IndeterminateComponent:
50
case SimpleMemoComponent:
52
- return describeFunctionComponentFrame(fiber.type, source, owner);
51
+ return describeFunctionComponentFrame(fiber.type, owner);
52
case ForwardRef:
54
- return describeFunctionComponentFrame(fiber.type.render, source, owner);
53
+ return describeFunctionComponentFrame(fiber.type.render, owner);
54
case ClassComponent:
56
- return describeClassComponentFrame(fiber.type, source, owner);
55
+ return describeClassComponentFrame(fiber.type, owner);
56
default:
57
return '';
58
}
packages/react-reconciler/src/ReactInternalTypes.js
-2
@@ -7,7 +7,6 @@
7
* @flow
8
*/
9
10
-import type {Source} from 'shared/ReactElementType';
10
import type {
11
RefObject,
12
ReactContext,
@@ -200,7 +199,6 @@ export type Fiber = {
199
// to be the same as work in progress.
200
// __DEV__ only
201
203
- _debugSource?: Source | null,
202
_debugOwner?: Fiber | null,
203
_debugIsCurrentlyTiming?: boolean,
204
_debugNeedsRemount?: boolean,
packages/react-server/src/ReactFizzComponentStack.js
+3
-3
@@ -43,13 +43,13 @@ export function getStackByComponentStackNode(
43
do {
44
switch (node.tag) {
45
case 0:
46
- info += describeBuiltInComponentFrame(node.type, null, null);
46
+ info += describeBuiltInComponentFrame(node.type, null);
47
break;
48
case 1:
49
- info += describeFunctionComponentFrame(node.type, null, null);
49
+ info += describeFunctionComponentFrame(node.type, null);
50
break;
51
case 2:
52
- info += describeClassComponentFrame(node.type, null, null);
52
+ info += describeClassComponentFrame(node.type, null);
53
break;
54
}
55
// $FlowFixMe[incompatible-type] we bail out when we get a null
packages/react/src/ReactElementProd.js
+3
-38
@@ -138,7 +138,7 @@ function warnIfStringRefCannotBeAutoConverted(config) {
138
* indicating filename, line number, and/or other information.
139
* @internal
140
*/
141
-function ReactElement(type, key, ref, self, source, owner, props) {
141
+function ReactElement(type, key, ref, owner, props) {
142
const element = {
143
// This tag allows us to uniquely identify this as a React Element
144
$$typeof: REACT_ELEMENT_TYPE,
@@ -170,21 +170,6 @@ function ReactElement(type, key, ref, self, source, owner, props) {
170
writable: true,
171
value: false,
172
});
173
- // self and source are DEV only properties.
174
- Object.defineProperty(element, '_self', {
175
- configurable: false,
176
- enumerable: false,
177
- writable: false,
178
- value: self,
179
- });
180
- // Two elements created in two different places should be considered
181
- // equal for testing purposes and therefore we hide it from enumeration.
182
- Object.defineProperty(element, '_source', {
183
- configurable: false,
184
- enumerable: false,
185
- writable: false,
186
- value: source,
187
- });
173
if (Object.freeze) {
174
Object.freeze(element.props);
175
Object.freeze(element);
@@ -206,8 +191,6 @@ export function createElement(type, config, children) {
191
192
let key = null;
193
let ref = null;
209
- let self = null;
210
- let source = null;
194
195
if (config != null) {
196
if (hasValidRef(config)) {
@@ -224,8 +207,6 @@ export function createElement(type, config, children) {
207
key = '' + config.key;
208
}
209
227
- self = config.__self === undefined ? null : config.__self;
228
- source = config.__source === undefined ? null : config.__source;
210
// Remaining properties are added to a new props object
211
for (propName in config) {
212
if (
@@ -289,15 +270,7 @@ export function createElement(type, config, children) {
270
}
271
}
272
}
292
- return ReactElement(
293
- type,
294
- key,
295
- ref,
296
- self,
297
- source,
298
- ReactCurrentOwner.current,
299
- props,
300
- );
273
+ return ReactElement(type, key, ref, ReactCurrentOwner.current, props);
274
}
275
276
/**
@@ -320,8 +293,6 @@ export function cloneAndReplaceKey(oldElement, newKey) {
293
oldElement.type,
294
newKey,
295
oldElement.ref,
323
- oldElement._self,
324
- oldElement._source,
296
oldElement._owner,
297
oldElement.props,
298
);
@@ -348,12 +319,6 @@ export function cloneElement(element, config, children) {
319
// Reserved names are extracted
320
let key = element.key;
321
let ref = element.ref;
351
- // Self is preserved since the owner is preserved.
352
- const self = element._self;
353
- // Source is preserved since cloneElement is unlikely to be targeted by a
354
- // transpiler, and the original source is probably a better indicator of the
355
- // true owner.
356
- const source = element._source;
322
323
// Owner will be preserved, unless ref is overridden
324
let owner = element._owner;
@@ -415,7 +380,7 @@ export function cloneElement(element, config, children) {
380
props.children = childArray;
381
}
382
418
- return ReactElement(element.type, key, ref, self, source, owner, props);
383
+ return ReactElement(element.type, key, ref, owner, props);
384
}
385
386
/**
packages/react/src/ReactElementValidator.js
-1
@@ -39,7 +39,6 @@ function setCurrentlyValidatingElement(element) {
39
const owner = element._owner;
40
const stack = describeUnknownElementTypeFrameInDEV(
41
element.type,
42
- element._source,
42
owner ? owner.type : null,
43
);
44
setExtraStackFrame(stack);
packages/react/src/jsx/ReactJSXElement.js
-15
@@ -170,21 +170,6 @@ function ReactElement(type, key, ref, self, source, owner, props) {
170
writable: true,
171
value: false,
172
});
173
- // self and source are DEV only properties.
174
- Object.defineProperty(element, '_self', {
175
- configurable: false,
176
- enumerable: false,
177
- writable: false,
178
- value: self,
179
- });
180
- // Two elements created in two different places should be considered
181
- // equal for testing purposes and therefore we hide it from enumeration.
182
- Object.defineProperty(element, '_source', {
183
- configurable: false,
184
- enumerable: false,
185
- writable: false,
186
- value: source,
187
- });
173
if (Object.freeze) {
174
Object.freeze(element.props);
175
Object.freeze(element);
packages/react/src/jsx/ReactJSXElementValidator.js
-1
@@ -40,7 +40,6 @@ function setCurrentlyValidatingElement(element) {
40
const owner = element._owner;
41
const stack = describeUnknownElementTypeFrameInDEV(
42
element.type,
43
- element._source,
43
owner ? owner.type : null,
44
);
45
ReactDebugCurrentFrame.setExtraStackFrame(stack);
packages/shared/ReactComponentStackFrame.js
+12
-43
@@ -7,7 +7,6 @@
7
* @flow
8
*/
9
10
-import type {Source} from 'shared/ReactElementType';
10
import type {LazyComponent} from 'react/src/ReactLazy';
11
12
import {enableComponentStackLocations} from 'shared/ReactFeatureFlags';
@@ -29,7 +28,6 @@ const {ReactCurrentDispatcher} = ReactSharedInternals;
28
let prefix;
29
export function describeBuiltInComponentFrame(
30
name: string,
32
- source: void | null | Source,
31
ownerFn: void | null | Function,
32
): string {
33
if (enableComponentStackLocations) {
@@ -49,7 +47,7 @@ export function describeBuiltInComponentFrame(
47
if (__DEV__ && ownerFn) {
48
ownerName = ownerFn.displayName || ownerFn.name || null;
49
}
52
- return describeComponentFrame(name, source, ownerName);
50
+ return describeComponentFrame(name, ownerName);
51
}
52
}
53
@@ -293,31 +291,9 @@ export function describeNativeComponentFrame(
291
return syntheticFrame;
292
}
293
296
-const BEFORE_SLASH_RE = /^(.*)[\\\/]/;
297
-
298
-function describeComponentFrame(
299
- name: null | string,
300
- source: void | null | Source,
301
- ownerName: null | string,
302
-) {
294
+function describeComponentFrame(name: null | string, ownerName: null | string) {
295
let sourceInfo = '';
304
- if (__DEV__ && source) {
305
- const path = source.fileName;
306
- let fileName = path.replace(BEFORE_SLASH_RE, '');
307
- // In DEV, include code for a common special case:
308
- // prefer "folder/index.js" instead of just "index.js".
309
- if (/^index\./.test(fileName)) {
310
- const match = path.match(BEFORE_SLASH_RE);
311
- if (match) {
312
- const pathBeforeSlash = match[1];
313
- if (pathBeforeSlash) {
314
- const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
315
- fileName = folderName + '/' + fileName;
316
- }
317
- }
318
- }
319
- sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
320
- } else if (ownerName) {
296
+ if (ownerName) {
297
sourceInfo = ' (created by ' + ownerName + ')';
298
}
299
return '\n in ' + (name || 'Unknown') + sourceInfo;
@@ -325,19 +301,17 @@ function describeComponentFrame(
301
302
export function describeClassComponentFrame(
303
ctor: Function,
328
- source: void | null | Source,
304
ownerFn: void | null | Function,
305
): string {
306
if (enableComponentStackLocations) {
307
return describeNativeComponentFrame(ctor, true);
308
} else {
334
- return describeFunctionComponentFrame(ctor, source, ownerFn);
309
+ return describeFunctionComponentFrame(ctor, ownerFn);
310
}
311
}
312
313
export function describeFunctionComponentFrame(
314
fn: Function,
340
- source: void | null | Source,
315
ownerFn: void | null | Function,
316
): string {
317
if (enableComponentStackLocations) {
@@ -351,7 +325,7 @@ export function describeFunctionComponentFrame(
325
if (__DEV__ && ownerFn) {
326
ownerName = ownerFn.displayName || ownerFn.name || null;
327
}
354
- return describeComponentFrame(name, source, ownerName);
328
+ return describeComponentFrame(name, ownerName);
329
}
330
}
331
@@ -362,7 +336,6 @@ function shouldConstruct(Component: Function) {
336
337
export function describeUnknownElementTypeFrameInDEV(
338
type: any,
365
- source: void | null | Source,
339
ownerFn: void | null | Function,
340
): string {
341
if (!__DEV__) {
@@ -375,36 +348,32 @@ export function describeUnknownElementTypeFrameInDEV(
348
if (enableComponentStackLocations) {
349
return describeNativeComponentFrame(type, shouldConstruct(type));
350
} else {
378
- return describeFunctionComponentFrame(type, source, ownerFn);
351
+ return describeFunctionComponentFrame(type, ownerFn);
352
}
353
}
354
if (typeof type === 'string') {
382
- return describeBuiltInComponentFrame(type, source, ownerFn);
355
+ return describeBuiltInComponentFrame(type, ownerFn);
356
}
357
switch (type) {
358
case REACT_SUSPENSE_TYPE:
386
- return describeBuiltInComponentFrame('Suspense', source, ownerFn);
359
+ return describeBuiltInComponentFrame('Suspense', ownerFn);
360
case REACT_SUSPENSE_LIST_TYPE:
388
- return describeBuiltInComponentFrame('SuspenseList', source, ownerFn);
361
+ return describeBuiltInComponentFrame('SuspenseList', ownerFn);
362
}
363
if (typeof type === 'object') {
364
switch (type.$$typeof) {
365
case REACT_FORWARD_REF_TYPE:
393
- return describeFunctionComponentFrame(type.render, source, ownerFn);
366
+ return describeFunctionComponentFrame(type.render, ownerFn);
367
case REACT_MEMO_TYPE:
368
// Memo may contain any component type so we recursively resolve it.
396
- return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
369
+ return describeUnknownElementTypeFrameInDEV(type.type, ownerFn);
370
case REACT_LAZY_TYPE: {
371
const lazyComponent: LazyComponent<any, any> = (type: any);
372
const payload = lazyComponent._payload;
373
const init = lazyComponent._init;
374
try {
375
// Lazy may contain any component type so we recursively resolve it.
403
- return describeUnknownElementTypeFrameInDEV(
404
- init(payload),
405
- source,
406
- ownerFn,
407
- );
376
+ return describeUnknownElementTypeFrameInDEV(init(payload), ownerFn);
377
} catch (x) {}
378
}
379
}
packages/shared/ReactElementType.js
-8
@@ -7,11 +7,6 @@
7
* @flow
8
*/
9
10
-export type Source = {
11
- fileName: string,
12
- lineNumber: number,
13
-};
14
-
10
export type ReactElement = {
11
$$typeof: any,
12
type: any,
@@ -23,7 +18,4 @@ export type ReactElement = {
18
19
// __DEV__
20
_store: {validated: boolean, ...},
26
- _self: React$Element<any>,
27
- _shadowChildren: any,
28
- _source: Source,
21
};
packages/shared/checkPropTypes.js
-1
@@ -22,7 +22,6 @@ function setCurrentlyValidatingElement(element: any) {
22
const owner = element._owner;
23
const stack = describeUnknownElementTypeFrameInDEV(
24
element.type,
25
- element._source,
25
owner ? owner.type : null,
26
);
27
ReactDebugCurrentFrame.setExtraStackFrame(stack);