This repository was archived by the owner on Jun 26, 2020. It is now read-only.
Handle & render the _source property #406
Merged
Conversation
This file contains hidden or 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
To take advantage of this, use the [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) babel plugin. The `_source` property was added to react [last year](facebook/react@009b7c8) and can be used by development tools to track the source file & line of react elements. React Native is also [taking advantage of it](facebook/react-native#6351). Test Plan: - install the [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) babel plugin - open the react devtools to an element that was created in your app (can't have been created by a library you're using, because those are probably pre-transpiled & ignored by babel)
ghost
added
Contributor
Author
frontend/PropState.js
Outdated
| * - if it has `/src/` in it, assume that's the project root | ||
| * - if it starts w/ `/Users/name/`, replace that with `~/` | ||
| */ | ||
| var shortFilePath = text => { |
Contributor
There was a problem hiding this comment.
Do we need this? I'd rather fix any environments that pass an absolute path. I've been meaning to check whether babelify and babel-loader do.
Contributor
Author
There was a problem hiding this comment.
I like having an absolute path -- and it's critical for React Native's "open the file in your editor" functionality
Contributor
Author
There was a problem hiding this comment.
Of course, we could change it to include both an absolute path and a project-relative path? or sth. or the # that is how long the project prefix is, so we could do source.filePath.slice(source.prefixLength) or sth
Contributor
There was a problem hiding this comment.
I think the project-relative path is always what you want. The packager would know where the root is.
Contributor
|
lgtm |
|
|
||
| ### Supporting tools | ||
|
|
||
| - The babel plugin [trasnform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) is required if you want react devtools to tell you the source file & line number of created react elements. It's display in the bottom of the right panel if the information is present. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
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.
To take advantage of this, use the transform-react-jsx-source babel plugin.
The
_sourceproperty was added to react last year and can be used by development tools to track the source file & line of react elements. React Native is also taking advantage of it.Test Plan:
have been created by a library you're using, because those are probably
pre-transpiled & ignored by babel)
^
src/run.js:12