PoC: support launch editor feature for selected component

[iChenLei]

Summary

support launch editor feature

Original Feature Request #20435

When you inspected a react component, you can click the launch editor icon to jump to your editor and navigate to the source code original file position.

supoort set custom launchEditorEndpoint

Why we need this ? Because different launch editor server middleware use different endpoint.

create-react-app user must use __open-stack-frame-in-editor as endpoint cause these hard code.

https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/launchEditorEndpoint.js#L9-L10

// TODO: we might want to make this injectable to support DEV-time non-root URLs.
module.exports = '/__open-stack-frame-in-editor';

launch-editor-middleware user often use __open-in-editor as endpoint.

https://github.com/yyx990803/launch-editor#middleware

const launchMiddleware = require('launch-editor-middleware')
app.use('/__open-in-editor', launchMiddleware())

Both middleware have many user around world (and exist many custom middleware actually).

Issues need to fix

1. Can we get the releative file path from devtools ? Now the source path is absolute(e.g. /Users/iChenLei/Documents/cra/reactapp/src/App.js:24).
2. If we only can use absolute file path, we need create pr for create-react-app/react-dev-utils to support absolute path.
   https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/launchEditor.js#L287-L290

+ const filePath = path.relative(process.cwd(), fileName)

3. Please help me make a suitable svg icon for launch editorfeature, Thanks for facebook/react official.
4. Is there common toast ui component to show message about set custom endpoint success ? I think feedback is necessary.

@bvaughn Sir, I need your code review and advices, thanks.

I must say that it's too hard for me to run the devtools extension build and test script, many network error / script error and other problems, It drives me crazy 😭 .

Test Plan

will add necessary unit test later

Circle CI Artifacts

Every one can download this build artifacts to test launch editor, but you must modilfy your launch editor middleware to support absolute file path otherwise you can't launch editor success. I will create a pull request to create-react-app/react-dev-utils to support absolute file path. Welcome any suggestion !

// for example
// ./node_modules/react-dev-utils/launchEditor.js
function launchEditor(fileName, lineNumber, colNumber) {
+ fileName = path.relative(process.cwd(), fileName)
  if (!fs.existsSync(fileName)) {
    return;
  }

React devtools build download -> build/devtools.tgz

[sizebot]

Comparing: 1a74726...fce4828

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	122.34 kB	122.34 kB	=	39.40 kB	39.40 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	128.92 kB	128.92 kB	=	41.46 kB	41.46 kB
facebook-www/ReactDOM-prod.classic.js	=	404.69 kB	404.69 kB	=	75.17 kB	75.17 kB
facebook-www/ReactDOM-prod.modern.js	=	393.04 kB	393.04 kB	=	73.27 kB	73.27 kB
facebook-www/ReactDOMForked-prod.classic.js	=	404.70 kB	404.70 kB	=	75.17 kB	75.17 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against fce4828

[rheh]

Question: What do the | do around the enums? Never seen that before?

[iChenLei]

Just do same as other type definintion around the file, maybe it's @flow 's grammer, I am not sure. I don't have enough experience about @flow to explain it. There is a detail explain -> https://flow.org/en/docs/types/unions/

[Airkro]

The ViewSource button looks like can get the relative file path.

react/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

Line 260 in c5cfa71

onClick={viewSource}

[Airkro]

And there is no need to think too much about the endpoint URI, let the server-side logic think about it

[iChenLei]

I almost forgot about this pull request, thanks for activation @Airkro . I will resolve the merge conflicts later.

[bvaughn]

This looks pretty Unix/Mac specific. Am I reading it wrong?

[benatshippabo]

It's just a url pointing to the server, so I think it should be fine

[bvaughn]

Related PR: #22649

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!