Repository navigation
[Devtools] Make link style value clickable #21827
Description
I didn't find a suitable place to open feature request of react devtools.
We're developing a babel plugin to inject a useDebugValue into every component so that developers can immediately see the source file path of inspecting component like:
We are expecting this file:// url clickable and open the default code editor on clicked, like those image urls in DOM panel:
This can be a helpful feature to help developers quickly location source files, stackoverflow questions and more
Activity
kkragoth commentedon Jul 8, 2021
Hello,
I am very interested in starting to contribute to this project and I would like to grab this issue since it seems quite easy to start but I've never set up this devtools project so I am little nervous. If I could be pointed in right direction with docs (I saw architecture and dev workflow from issue Combine view highlighting code but all links would be useful!) and starting place for this issue I'd be happy to try this as a first issue
bvaughn commentedon Jul 8, 2021
@kkragoth Feel free to work on this issue!
I just posted a contributing guide which should hopefully have all of the info you need to get started:
https://github.com/facebook/react/blob/main/packages/react-devtools/CONTRIBUTING.md
bvaughn commentedon Jul 8, 2021
Please also keep in mind that links should not be clickable when props are editable, (since this would interfere with editing), only when they're read-only
PrinceRajRoy commentedon Jul 9, 2021
@bvaughn I was trying this out, any suggestion how to use/open the default code editor? It works fine with vscode url path as
vscode://file/{path to file}2021-07-09.15-35-29.mp4
otakustay commentedon Jul 9, 2021
Default editor should be registered system wide, I think it is enough to just open the
file://protocol url and leave OS to decide which app to handle thiskkragoth commentedon Jul 9, 2021
@otakustay I thought the same but I started working in parallel and file:/// seems to be intercepted by Chrome (for security reasons) and that's the issue that @PrinceRajRoy might be talking about.
Screen.Recording.2021-07-09.at.18.54.23.mov
PrinceRajRoy commentedon Jul 9, 2021
@kkragoth indeed, I tried with firefox too, same security issue.
otakustay commentedon Jul 10, 2021
This is not a problem, the displayed string is fully controlled by developers, they can change it to
vscode://if their default editor is vscode, for devtools it just renders a link and all behavior should comply with browser.rainedoescode commentedon Jul 17, 2021
It looks like it may be possible to use
process.env.EDITORto check the user's default text editor, but it's not guaranteed to be a coding environmentanushaNemilidinne commentedon Jul 24, 2021
Hello! is anyone working on this issue? Been using React for almost 2 years and I always wanted to contribute to this open source project.
bvaughn commentedon Jul 26, 2021
So far as I know, there is no open PR for this so it's still up for grabs.
kkragoth commentedon Jul 26, 2021
I'm little nervous to start PR, but I found out I have some questions that maybe other joining contributors and someone later assigned to issue might ask.
I'v very new to this project so I thought the best place to start is with KeyValue file (edited in PR).
I have some questions that I think will be useful for anyone starting work with this issue being new to project
Also I believe this issue was started as a way for developers to get quickly to source file. Devtools sometimes render 'source' in panel for component. This could be made to be a clickable link instead of copying to clipboard
bvaughn commentedon Jul 26, 2021
DevTools already has this feature built-in. Sometimes props can be edited (e.g. if you're using a DEV build of React) and sometimes not. We shouldn't change that for this feature. My point was just that links should not be clickable when props are editable because that would break the editing experience.
kkragoth commentedon Jul 26, 2021
I understand and never broke editing experience.
I only had no idea how to start devtools where props can't be modified since I've been only using DEV builds, and now after your comment I know I should've been using production builds. The code I supplied works if props can't be modified then display it as link but if it's editable then nothing changes.
bvaughn commentedon Jul 26, 2021
That seems right then. (Though I suggest using
color: var(--color-link);for those styled links to make them fit the theme right.github-actions commentedon Apr 10, 2024
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
github-actions commentedon Apr 17, 2024
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!