Remove __self and __source location from elements #28265
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
React Core Team
sebmarkbage
commented
Feb 7, 2024
| @@ -23,7 +18,4 @@ export type ReactElement = { | |||
|
|
|||
| // __DEV__ | |||
| _store: {validated: boolean, ...}, | |||
| _self: React$Element<any>, | |||
| _shadowChildren: any, | |||
There was a problem hiding this comment.
Not sure what this was about. Goes way back. #7504
There was a problem hiding this comment.
sebmarkbage
changed the title
sebmarkbage
force-pushed
the
rmsourceself
branch
4 times, most recently
from
f6dac6f to
141a01a
Compare
Along with all the places using it like the _debugSource on Fiber. This removes source location info from React DevTools and React Native Inspector.
sebmarkbage
force-pushed
the
rmsourceself
branch
from
141a01a to
6bb9cb4
Compare
hoxyq
reviewed
Feb 7, 2024
There was a problem hiding this comment.
- Can we revert the changes for DevTools (except the test) and add $FlowFixMe and TODOs for migration from
_debugSourcefield in fiber? So if we end up publishing new patch version of DevTools, the "go to source" feature will still work in DEV for previous versions of React - What is the timeline for
console.createTask? Is this currently in exploration phase?
packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
Show resolved
Hide resolved
|
I don’t think we’d do the console.createTask thing until Chrome fixes the UI and let custom UIs access the data. For the devtools thing it would be better to do throw hack strategy that we use for prod component stacks. |
We could but it's a bit annoying to keep that code in sync with other parts of React. I also worry that it'll just not get done and encourage people to stay on old versions instead. If we did do the lazy thing, it could also work on older versions of React. |
sebmarkbage
force-pushed
the
rmsourceself
branch
from
7a7c8c5 to
5354d85
Compare
This is fairly lazy in that only the selected instance calls this so the slow component stack call is ok.
sebmarkbage
force-pushed
the
rmsourceself
branch
from
5354d85 to
ee1b0bc
Compare
|
@rickhanlonii stamped verbally. |
github-actions bot
pushed a commit
that referenced
this pull request
Feb 7, 2024
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)
huozhi
pushed a commit
to vercel/next.js
that referenced
this pull request
Feb 9, 2024
Updates React from 2bc7d336a to ba5e6a832. ### React upstream changes - facebook/react#28283 - facebook/react#28280 - facebook/react#28079 - facebook/react#28233 - facebook/react#28276 - facebook/react#28272 - facebook/react#28265 - facebook/react#28259 - facebook/react#28153 - facebook/react#28246 - facebook/react#28218 - facebook/react#28263 - facebook/react#28257 - facebook/react#28261 - facebook/react#28262 - facebook/react#28260 - facebook/react#28258 - facebook/react#27864 - facebook/react#28254 - facebook/react#28219 - facebook/react#28248 - facebook/react#28216 - facebook/react#28249 - facebook/react#28241 - facebook/react#28243 - facebook/react#28253 - facebook/react#28256 - facebook/react#28236 - facebook/react#28237 - facebook/react#28242 - facebook/react#28251 - facebook/react#28252 Closes NEXT-2411
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 3 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 3. Although `source` field is accumulated and stored, it is not displayed anywhere, see InspectorOverlay.js. Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 3 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 3. Although `source` field is accumulated and stored, it is not displayed anywhere, see InspectorOverlay.js. Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Differential Revision: D53757524
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Feb 14, 2024
Summary: Changelog: [Internal] Required for landing D53543159. 2 reasons for landing this: 1. Inspector is technically deprecated and will be removed once React DevTools are shipped with Chrome DevTools for RN debugging. 2. Long-term solution for source fetching is lazy loading based on component stacks - facebook/react#28265 Reviewed By: kassens Differential Revision: D53757524 fbshipit-source-id: cbb2aab79ba40ea66da5c1ddde95d3fe374b6006
This was referenced Feb 15, 2024
hoxyq
added a commit
that referenced
this pull request
Feb 22, 2024
…filters (#28417) Following #28265, this should disable location-based component filters. ``` // Following __debugSource removal from Fiber, the new approach for finding the source location // of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames // To find the original location, React DevTools will perform symbolication, source maps are required for that. // In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily. // Eager symbolication can become quite expensive for large applications. ``` I am planning to publish a patch version of RDT soon, so I think its better to remove this feature, instead of shipping it in a broken state. The reason for filtering out these filters is a potential cases, where we load filters from the backend (like in RN, where we storing some settings on device), or these filters can be stored in user land (`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__`). Explicitly tested the case when: 1. Load current RDT extension, add location-based component filter 2. Reload the page and observe that previously created component filter is preserved 3. Re-load RDT extension with these changes, observe there is no previously created component filter and user can't create a new location-based filter 4. Reload RDT extension without these changes, no location-based filters saved, user can create location-based filters
hoxyq
added a commit
that referenced
this pull request
Feb 22, 2024
Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](#28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](#28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](#28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [#28348](#28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [#28320](#28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](#28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [#28318](#28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [#28226](#28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](#28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](#28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [#28296](#28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [#28273](#28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](#28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [#28265](#28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [#28246](#28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28218](#28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [#28254](#28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [#28219](#28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28216](#28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](#28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [#28241](#28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [#28243](#28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28236](#28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28237](#28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [#28242](#28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [#28240](#28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [#28239](#28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [#28245](#28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [#28244](#28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [#28238](#28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [#28235](#28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [#28221](#28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [#28215](#28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [#28214](#28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [#28213](#28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [#28212](#28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [#28211](#28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28210](#28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28186](#28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](#28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](#27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [#28160](#28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [#27871](#27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [#27842](#27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [#27804](#27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [#27805](#27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [#27790](#27790))
hoxyq
added a commit
that referenced
this pull request
Mar 5, 2024
… stacks (#28351) `_debugSource` was removed in #28265. This PR migrates DevTools to define `source` for Fiber based on component stacks. This will be done lazily for inspected elements, once user clicks on the element in the tree. `DevToolsComponentStackFrame.js` was just copy-pasted from the implementation in `ReactComponentStackFrame`. Symbolication part is done in #28471 and stacked on this commit.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
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.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…filters (facebook#28417) Following facebook#28265, this should disable location-based component filters. ``` // Following __debugSource removal from Fiber, the new approach for finding the source location // of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames // To find the original location, React DevTools will perform symbolication, source maps are required for that. // In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily. // Eager symbolication can become quite expensive for large applications. ``` I am planning to publish a patch version of RDT soon, so I think its better to remove this feature, instead of shipping it in a broken state. The reason for filtering out these filters is a potential cases, where we load filters from the backend (like in RN, where we storing some settings on device), or these filters can be stored in user land (`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__`). Explicitly tested the case when: 1. Load current RDT extension, add location-based component filter 2. Reload the page and observe that previously created component filter is preserved 3. Re-load RDT extension with these changes, observe there is no previously created component filter and user can't create a new location-based filter 4. Reload RDT extension without these changes, no location-based filters saved, user can create location-based filters
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [facebook#28417](facebook#28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [facebook#28399](facebook#28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [facebook#28408](facebook#28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [facebook#28348](facebook#28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [facebook#28320](facebook#28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28309](facebook#28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [facebook#28318](facebook#28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [facebook#28226](facebook#28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28297](facebook#28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [facebook#28145](facebook#28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [facebook#28296](facebook#28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [facebook#28273](facebook#28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [facebook#28233](facebook#28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28265](facebook#28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [facebook#28246](facebook#28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28218](facebook#28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [facebook#28254](facebook#28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [facebook#28219](facebook#28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28216](facebook#28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [facebook#28249](facebook#28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [facebook#28241](facebook#28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [facebook#28243](facebook#28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28236](facebook#28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [facebook#28237](facebook#28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [facebook#28242](facebook#28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [facebook#28240](facebook#28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [facebook#28239](facebook#28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [facebook#28245](facebook#28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [facebook#28244](facebook#28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [facebook#28238](facebook#28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [facebook#28235](facebook#28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [facebook#28221](facebook#28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [facebook#28215](facebook#28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [facebook#28214](facebook#28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [facebook#28213](facebook#28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [facebook#28212](facebook#28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [facebook#28211](facebook#28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [facebook#28210](facebook#28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [facebook#28186](facebook#28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [facebook#28232](facebook#28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [facebook#27982](facebook#27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [facebook#28160](facebook#28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [facebook#27871](facebook#27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [facebook#27842](facebook#27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [facebook#27804](facebook#27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [facebook#27805](facebook#27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [facebook#27790](facebook#27790))
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
… stacks (facebook#28351) `_debugSource` was removed in facebook#28265. This PR migrates DevTools to define `source` for Fiber based on component stacks. This will be done lazily for inspected elements, once user clicks on the element in the tree. `DevToolsComponentStackFrame.js` was just copy-pasted from the implementation in `ReactComponentStackFrame`. Symbolication part is done in facebook#28471 and stacked on this commit.
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
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.
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Along with all the places using it like the
_debugSourceon Fiber. This still lets them be passed intocreateElement(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:
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()orconsole.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.