Skip to content

Commit

Permalink
Remove __self and __source location from elements (#28265)
Browse files Browse the repository at this point in the history
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 commit 37d901e.
  • Loading branch information
sebmarkbage committed Feb 7, 2024
1 parent d920f21 commit 734b023
Show file tree
Hide file tree
Showing 16 changed files with 613 additions and 957 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<379c4788c6c39f07c9097d9bf684b088>>
* @generated SignedSource<<28cd2d45c2e89bdb4e404f0aa2b0ab0d>>
*/

"use strict";
Expand Down Expand Up @@ -555,14 +555,14 @@ function insertBefore(parentInstance, child, beforeChild) {
}
var scheduleTimeout = setTimeout,
cancelTimeout = clearTimeout;
function describeComponentFrame(name, source, ownerName) {
source = "";
ownerName && (source = " (created by " + ownerName + ")");
return "\n in " + (name || "Unknown") + source;
function describeComponentFrame(name, ownerName) {
var sourceInfo = "";
ownerName && (sourceInfo = " (created by " + ownerName + ")");
return "\n in " + (name || "Unknown") + sourceInfo;
}
function describeFunctionComponentFrame(fn, source) {
function describeFunctionComponentFrame(fn) {
return fn
? describeComponentFrame(fn.displayName || fn.name || null, source, null)
? describeComponentFrame(fn.displayName || fn.name || null, null)
: "";
}
var hasOwnProperty = Object.prototype.hasOwnProperty,
Expand Down Expand Up @@ -1329,21 +1329,21 @@ function describeFiber(fiber) {
case 26:
case 27:
case 5:
return describeComponentFrame(fiber.type, null, null);
return describeComponentFrame(fiber.type, null);
case 16:
return describeComponentFrame("Lazy", null, null);
return describeComponentFrame("Lazy", null);
case 13:
return describeComponentFrame("Suspense", null, null);
return describeComponentFrame("Suspense", null);
case 19:
return describeComponentFrame("SuspenseList", null, null);
return describeComponentFrame("SuspenseList", null);
case 0:
case 2:
case 15:
return describeFunctionComponentFrame(fiber.type, null);
return describeFunctionComponentFrame(fiber.type);
case 11:
return describeFunctionComponentFrame(fiber.type.render, null);
return describeFunctionComponentFrame(fiber.type.render);
case 1:
return (fiber = describeFunctionComponentFrame(fiber.type, null)), fiber;
return (fiber = describeFunctionComponentFrame(fiber.type)), fiber;
default:
return "";
}
Expand Down Expand Up @@ -1595,7 +1595,6 @@ function createChildReconciler(shouldTrackSideEffects) {
element.key,
element.props,
null,
null,
returnFiber.mode,
lanes
);
Expand Down Expand Up @@ -1658,7 +1657,6 @@ function createChildReconciler(shouldTrackSideEffects) {
newChild.key,
newChild.props,
null,
null,
returnFiber.mode,
lanes
)),
Expand Down Expand Up @@ -2055,7 +2053,6 @@ function createChildReconciler(shouldTrackSideEffects) {
newChild.key,
newChild.props,
null,
null,
returnFiber.mode,
lanes
)),
Expand Down Expand Up @@ -3851,7 +3848,6 @@ function updateMemoComponent(
Component.type,
null,
nextProps,
null,
workInProgress,
workInProgress.mode,
renderLanes
Expand Down Expand Up @@ -8564,21 +8560,20 @@ function createFiberFromTypeAndProps(
type,
key,
pendingProps,
source,
owner,
mode,
lanes
) {
owner = 2;
source = type;
if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
else if ("string" === typeof type) owner = 5;
var fiberTag = 2;
owner = type;
if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
else if ("string" === typeof type) fiberTag = 5;
else
a: switch (type) {
case REACT_FRAGMENT_TYPE:
return createFiberFromFragment(pendingProps.children, mode, lanes, key);
case REACT_STRICT_MODE_TYPE:
owner = 8;
fiberTag = 8;
mode |= 8;
0 !== (mode & 1) && (mode |= 16);
break;
Expand Down Expand Up @@ -8618,30 +8613,30 @@ function createFiberFromTypeAndProps(
if ("object" === typeof type && null !== type)
switch (type.$$typeof) {
case REACT_PROVIDER_TYPE:
owner = 10;
fiberTag = 10;
break a;
case REACT_CONTEXT_TYPE:
owner = 9;
fiberTag = 9;
break a;
case REACT_FORWARD_REF_TYPE:
owner = 11;
fiberTag = 11;
break a;
case REACT_MEMO_TYPE:
owner = 14;
fiberTag = 14;
break a;
case REACT_LAZY_TYPE:
owner = 16;
source = null;
fiberTag = 16;
owner = null;
break a;
}
throw Error(
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
((null == type ? type : typeof type) + ".")
);
}
key = createFiber(owner, pendingProps, key, mode);
key = createFiber(fiberTag, pendingProps, key, mode);
key.elementType = type;
key.type = source;
key.type = owner;
key.lanes = lanes;
return key;
}
Expand Down Expand Up @@ -9152,19 +9147,19 @@ function wrapFiber(fiber) {
fiberToWrapper.set(fiber, wrapper));
return wrapper;
}
var devToolsConfig$jscomp$inline_1012 = {
var devToolsConfig$jscomp$inline_1011 = {
findFiberByHostInstance: function () {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-5c0866230-20240207",
version: "18.3.0-canary-37d901e2b-20240207",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1190 = {
bundleType: devToolsConfig$jscomp$inline_1012.bundleType,
version: devToolsConfig$jscomp$inline_1012.version,
rendererPackageName: devToolsConfig$jscomp$inline_1012.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1012.rendererConfig,
var internals$jscomp$inline_1189 = {
bundleType: devToolsConfig$jscomp$inline_1011.bundleType,
version: devToolsConfig$jscomp$inline_1011.version,
rendererPackageName: devToolsConfig$jscomp$inline_1011.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1011.rendererConfig,
overrideHookState: null,
overrideHookStateDeletePath: null,
overrideHookStateRenamePath: null,
Expand All @@ -9181,26 +9176,26 @@ var internals$jscomp$inline_1190 = {
return null === fiber ? null : fiber.stateNode;
},
findFiberByHostInstance:
devToolsConfig$jscomp$inline_1012.findFiberByHostInstance ||
devToolsConfig$jscomp$inline_1011.findFiberByHostInstance ||
emptyFindFiberByHostInstance,
findHostInstancesForRefresh: null,
scheduleRefresh: null,
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-5c0866230-20240207"
reconcilerVersion: "18.3.0-canary-37d901e2b-20240207"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1191 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
var hook$jscomp$inline_1190 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
if (
!hook$jscomp$inline_1191.isDisabled &&
hook$jscomp$inline_1191.supportsFiber
!hook$jscomp$inline_1190.isDisabled &&
hook$jscomp$inline_1190.supportsFiber
)
try {
(rendererID = hook$jscomp$inline_1191.inject(
internals$jscomp$inline_1190
(rendererID = hook$jscomp$inline_1190.inject(
internals$jscomp$inline_1189
)),
(injectedHook = hook$jscomp$inline_1191);
(injectedHook = hook$jscomp$inline_1190);
} catch (err) {}
}
exports._Scheduler = Scheduler;
Expand Down
Loading

0 comments on commit 734b023

Please sign in to comment.