Skip to content

Commit 82dd48d

Browse files
sebmarkbagesebmarkbage
committed
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. DiffTrain build for [37d901e](37d901e)
1 parent a6a77a2 commit 82dd48d

34 files changed

+726
-1264
lines changed

‎compiled/facebook-www/JSXDEVRuntime-dev.classic.js

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ if (__DEV__) {
372372

373373
var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
374374
var prefix;
375-
function describeBuiltInComponentFrame(name, source, ownerFn) {
375+
function describeBuiltInComponentFrame(name, ownerFn) {
376376
{
377377
if (prefix === undefined) {
378378
// Extract the VM specific prefix used by each line.
@@ -641,7 +641,7 @@ if (__DEV__) {
641641

642642
return syntheticFrame;
643643
}
644-
function describeFunctionComponentFrame(fn, source, ownerFn) {
644+
function describeFunctionComponentFrame(fn, ownerFn) {
645645
{
646646
return describeNativeComponentFrame(fn, false);
647647
}
@@ -652,7 +652,7 @@ if (__DEV__) {
652652
return !!(prototype && prototype.isReactComponent);
653653
}
654654

655-
function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
655+
function describeUnknownElementTypeFrameInDEV(type, ownerFn) {
656656
if (type == null) {
657657
return "";
658658
}
@@ -682,11 +682,7 @@ if (__DEV__) {
682682

683683
case REACT_MEMO_TYPE:
684684
// Memo may contain any component type so we recursively resolve it.
685-
return describeUnknownElementTypeFrameInDEV(
686-
type.type,
687-
source,
688-
ownerFn
689-
);
685+
return describeUnknownElementTypeFrameInDEV(type.type, ownerFn);
690686

691687
case REACT_LAZY_TYPE: {
692688
var lazyComponent = type;
@@ -697,7 +693,6 @@ if (__DEV__) {
697693
// Lazy may contain any component type so we recursively resolve it.
698694
return describeUnknownElementTypeFrameInDEV(
699695
init(payload),
700-
source,
701696
ownerFn
702697
);
703698
} catch (x) {}
@@ -720,7 +715,6 @@ if (__DEV__) {
720715
var owner = element._owner;
721716
var stack = describeUnknownElementTypeFrameInDEV(
722717
element.type,
723-
element._source,
724718
owner ? owner.type : null
725719
);
726720
ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
@@ -1060,21 +1054,6 @@ if (__DEV__) {
10601054
enumerable: false,
10611055
writable: true,
10621056
value: false
1063-
}); // self and source are DEV only properties.
1064-
1065-
Object.defineProperty(element, "_self", {
1066-
configurable: false,
1067-
enumerable: false,
1068-
writable: false,
1069-
value: self
1070-
}); // Two elements created in two different places should be considered
1071-
// equal for testing purposes and therefore we hide it from enumeration.
1072-
1073-
Object.defineProperty(element, "_source", {
1074-
configurable: false,
1075-
enumerable: false,
1076-
writable: false,
1077-
value: source
10781057
});
10791058

10801059
if (Object.freeze) {
@@ -1183,7 +1162,6 @@ if (__DEV__) {
11831162
var owner = element._owner;
11841163
var stack = describeUnknownElementTypeFrameInDEV(
11851164
element.type,
1186-
element._source,
11871165
owner ? owner.type : null
11881166
);
11891167
ReactDebugCurrentFrame.setExtraStackFrame(stack);

‎compiled/facebook-www/JSXDEVRuntime-dev.modern.js

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ if (__DEV__) {
372372

373373
var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
374374
var prefix;
375-
function describeBuiltInComponentFrame(name, source, ownerFn) {
375+
function describeBuiltInComponentFrame(name, ownerFn) {
376376
{
377377
if (prefix === undefined) {
378378
// Extract the VM specific prefix used by each line.
@@ -641,7 +641,7 @@ if (__DEV__) {
641641

642642
return syntheticFrame;
643643
}
644-
function describeFunctionComponentFrame(fn, source, ownerFn) {
644+
function describeFunctionComponentFrame(fn, ownerFn) {
645645
{
646646
return describeNativeComponentFrame(fn, false);
647647
}
@@ -652,7 +652,7 @@ if (__DEV__) {
652652
return !!(prototype && prototype.isReactComponent);
653653
}
654654

655-
function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
655+
function describeUnknownElementTypeFrameInDEV(type, ownerFn) {
656656
if (type == null) {
657657
return "";
658658
}
@@ -682,11 +682,7 @@ if (__DEV__) {
682682

683683
case REACT_MEMO_TYPE:
684684
// Memo may contain any component type so we recursively resolve it.
685-
return describeUnknownElementTypeFrameInDEV(
686-
type.type,
687-
source,
688-
ownerFn
689-
);
685+
return describeUnknownElementTypeFrameInDEV(type.type, ownerFn);
690686

691687
case REACT_LAZY_TYPE: {
692688
var lazyComponent = type;
@@ -697,7 +693,6 @@ if (__DEV__) {
697693
// Lazy may contain any component type so we recursively resolve it.
698694
return describeUnknownElementTypeFrameInDEV(
699695
init(payload),
700-
source,
701696
ownerFn
702697
);
703698
} catch (x) {}
@@ -720,7 +715,6 @@ if (__DEV__) {
720715
var owner = element._owner;
721716
var stack = describeUnknownElementTypeFrameInDEV(
722717
element.type,
723-
element._source,
724718
owner ? owner.type : null
725719
);
726720
ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
@@ -1060,21 +1054,6 @@ if (__DEV__) {
10601054
enumerable: false,
10611055
writable: true,
10621056
value: false
1063-
}); // self and source are DEV only properties.
1064-
1065-
Object.defineProperty(element, "_self", {
1066-
configurable: false,
1067-
enumerable: false,
1068-
writable: false,
1069-
value: self
1070-
}); // Two elements created in two different places should be considered
1071-
// equal for testing purposes and therefore we hide it from enumeration.
1072-
1073-
Object.defineProperty(element, "_source", {
1074-
configurable: false,
1075-
enumerable: false,
1076-
writable: false,
1077-
value: source
10781057
});
10791058

10801059
if (Object.freeze) {
@@ -1183,7 +1162,6 @@ if (__DEV__) {
11831162
var owner = element._owner;
11841163
var stack = describeUnknownElementTypeFrameInDEV(
11851164
element.type,
1186-
element._source,
11871165
owner ? owner.type : null
11881166
);
11891167
ReactDebugCurrentFrame.setExtraStackFrame(stack);

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
a1ace9d3c2a0fc53703f11e30f32d0a009c5a8c9
1+
37d901e2b81e12d40df7012c6f8681b8272d2555

‎compiled/facebook-www/React-dev.classic.js

Lines changed: 10 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ if (__DEV__) {
2424
) {
2525
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
2626
}
27-
var ReactVersion = "18.3.0-www-classic-8ed7454f";
27+
var ReactVersion = "18.3.0-www-classic-965940b9";
2828

2929
// ATTENTION
3030
// When adding new symbols to this file,
@@ -744,7 +744,7 @@ if (__DEV__) {
744744
* @internal
745745
*/
746746

747-
function ReactElement$1(type, key, ref, self, source, owner, props) {
747+
function ReactElement$1(type, key, ref, owner, props) {
748748
var element = {
749749
// This tag allows us to uniquely identify this as a React Element
750750
$$typeof: REACT_ELEMENT_TYPE,
@@ -772,21 +772,6 @@ if (__DEV__) {
772772
enumerable: false,
773773
writable: true,
774774
value: false
775-
}); // self and source are DEV only properties.
776-
777-
Object.defineProperty(element, "_self", {
778-
configurable: false,
779-
enumerable: false,
780-
writable: false,
781-
value: self
782-
}); // Two elements created in two different places should be considered
783-
// equal for testing purposes and therefore we hide it from enumeration.
784-
785-
Object.defineProperty(element, "_source", {
786-
configurable: false,
787-
enumerable: false,
788-
writable: false,
789-
value: source
790775
});
791776

792777
if (Object.freeze) {
@@ -808,8 +793,6 @@ if (__DEV__) {
808793
var props = {};
809794
var key = null;
810795
var ref = null;
811-
var self = null;
812-
var source = null;
813796

814797
if (config != null) {
815798
if (hasValidRef$1(config)) {
@@ -826,10 +809,7 @@ if (__DEV__) {
826809
}
827810

828811
key = "" + config.key;
829-
}
830-
831-
self = config.__self === undefined ? null : config.__self;
832-
source = config.__source === undefined ? null : config.__source; // Remaining properties are added to a new props object
812+
} // Remaining properties are added to a new props object
833813

834814
for (propName in config) {
835815
if (
@@ -897,23 +877,13 @@ if (__DEV__) {
897877
}
898878
}
899879

900-
return ReactElement$1(
901-
type,
902-
key,
903-
ref,
904-
self,
905-
source,
906-
ReactCurrentOwner$2.current,
907-
props
908-
);
880+
return ReactElement$1(type, key, ref, ReactCurrentOwner$2.current, props);
909881
}
910882
function cloneAndReplaceKey(oldElement, newKey) {
911883
var newElement = ReactElement$1(
912884
oldElement.type,
913885
newKey,
914886
oldElement.ref,
915-
oldElement._self,
916-
oldElement._source,
917887
oldElement._owner,
918888
oldElement.props
919889
);
@@ -938,13 +908,7 @@ if (__DEV__) {
938908
var props = assign({}, element.props); // Reserved names are extracted
939909

940910
var key = element.key;
941-
var ref = element.ref; // Self is preserved since the owner is preserved.
942-
943-
var self = element._self; // Source is preserved since cloneElement is unlikely to be targeted by a
944-
// transpiler, and the original source is probably a better indicator of the
945-
// true owner.
946-
947-
var source = element._source; // Owner will be preserved, unless ref is overridden
911+
var ref = element.ref; // Owner will be preserved, unless ref is overridden
948912

949913
var owner = element._owner;
950914

@@ -1007,7 +971,7 @@ if (__DEV__) {
1007971
props.children = childArray;
1008972
}
1009973

1010-
return ReactElement$1(element.type, key, ref, self, source, owner, props);
974+
return ReactElement$1(element.type, key, ref, owner, props);
1011975
}
1012976
/**
1013977
* Verifies the object is a ReactElement.
@@ -1245,7 +1209,7 @@ if (__DEV__) {
12451209

12461210
var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
12471211
var prefix;
1248-
function describeBuiltInComponentFrame(name, source, ownerFn) {
1212+
function describeBuiltInComponentFrame(name, ownerFn) {
12491213
{
12501214
if (prefix === undefined) {
12511215
// Extract the VM specific prefix used by each line.
@@ -1514,7 +1478,7 @@ if (__DEV__) {
15141478

15151479
return syntheticFrame;
15161480
}
1517-
function describeFunctionComponentFrame(fn, source, ownerFn) {
1481+
function describeFunctionComponentFrame(fn, ownerFn) {
15181482
{
15191483
return describeNativeComponentFrame(fn, false);
15201484
}
@@ -1525,7 +1489,7 @@ if (__DEV__) {
15251489
return !!(prototype && prototype.isReactComponent);
15261490
}
15271491

1528-
function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
1492+
function describeUnknownElementTypeFrameInDEV(type, ownerFn) {
15291493
if (type == null) {
15301494
return "";
15311495
}
@@ -1555,11 +1519,7 @@ if (__DEV__) {
15551519

15561520
case REACT_MEMO_TYPE:
15571521
// Memo may contain any component type so we recursively resolve it.
1558-
return describeUnknownElementTypeFrameInDEV(
1559-
type.type,
1560-
source,
1561-
ownerFn
1562-
);
1522+
return describeUnknownElementTypeFrameInDEV(type.type, ownerFn);
15631523

15641524
case REACT_LAZY_TYPE: {
15651525
var lazyComponent = type;
@@ -1570,7 +1530,6 @@ if (__DEV__) {
15701530
// Lazy may contain any component type so we recursively resolve it.
15711531
return describeUnknownElementTypeFrameInDEV(
15721532
init(payload),
1573-
source,
15741533
ownerFn
15751534
);
15761535
} catch (x) {}
@@ -1590,7 +1549,6 @@ if (__DEV__) {
15901549
var owner = element._owner;
15911550
var stack = describeUnknownElementTypeFrameInDEV(
15921551
element.type,
1593-
element._source,
15941552
owner ? owner.type : null
15951553
);
15961554
ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
@@ -1850,21 +1808,6 @@ if (__DEV__) {
18501808
enumerable: false,
18511809
writable: true,
18521810
value: false
1853-
}); // self and source are DEV only properties.
1854-
1855-
Object.defineProperty(element, "_self", {
1856-
configurable: false,
1857-
enumerable: false,
1858-
writable: false,
1859-
value: self
1860-
}); // Two elements created in two different places should be considered
1861-
// equal for testing purposes and therefore we hide it from enumeration.
1862-
1863-
Object.defineProperty(element, "_source", {
1864-
configurable: false,
1865-
enumerable: false,
1866-
writable: false,
1867-
value: source
18681811
});
18691812

18701813
if (Object.freeze) {
@@ -1971,7 +1914,6 @@ if (__DEV__) {
19711914
var owner = element._owner;
19721915
var stack = describeUnknownElementTypeFrameInDEV(
19731916
element.type,
1974-
element._source,
19751917
owner ? owner.type : null
19761918
);
19771919
setExtraStackFrame(stack);
@@ -3704,7 +3646,6 @@ if (__DEV__) {
37043646
var owner = element._owner;
37053647
var stack = describeUnknownElementTypeFrameInDEV(
37063648
element.type,
3707-
element._source,
37083649
owner ? owner.type : null
37093650
);
37103651
ReactDebugCurrentFrame.setExtraStackFrame(stack);

0 commit comments

Comments
 (0)