Add transform-react-jsx-source to react-native preset #6351

frantic · 2016-03-07T23:47:55Z

Putting this up as request for comments.

The PR adds transform-react-jsx-source to the list of plugins that come by default with the react-native preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing react-native preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else?

facebook-github-bot · 2016-03-07T23:48:21Z

By analyzing the blame information on this pull request, we identified @skevy to be a potential reviewer.

ide · 2016-03-08T00:11:22Z

babel-preset-react-native is likely the right place -- we consolidate all babel plugins in this preset so that people can use the react-native preset in custom .babelrc files and automatically get the same configuration as a plain RN project.

Making the plugin run only in dev is trickier though.... perhaps we need to create 2 presets: babel-preset-react-native andbabel-preset-react-native/dev. The packager would choose which to load based on the "dev" param in the request for the JS bundle. Where this gets tricky is with custom .babelrc files since AFAIK you can't have a separate .babelrc for dev mode.

Another option is to have the packager explicitly load this plugin (ex:

react-native/packager/transformer.js

Line 82 in e6cb02d

const extraPlugins = [externalHelpersPlugin];

), and we'd not add it to rn-babelrc.json.

cc @davidaurelio

janicduplessis · 2016-03-08T02:40:24Z

There is a env option for the babelrc file, maybe it could work here. https://babeljs.io/docs/usage/babelrc/#env-option

Otherwise we could set an environment variable (or something else if there is a better way to pass data) in the packager before running the transforms and check it in the preset.

ide · 2016-03-08T02:49:28Z

Fantastic -- let's set BABEL_ENV = process.env.BABEL_ENV || (__DEV__ ? 'development' : 'production') then?

frantic · 2016-03-10T18:20:07Z

Lmk how you want to proceed, I don't have strong opinions regarding babel configuration, but I can't wait to show you a demo of what this thing enables us to do!

iamdustan · 2016-03-10T18:41:33Z

I want to see this demo!

janicduplessis · 2016-03-10T18:54:48Z

You can try something like this:

{
  plugins: resolvePlugins([
    ...
  ]),
  env: {
    development: {
      plugins: resolvePlugins(['babel-plugin-transform-react-jsx-source']),
    },
  },
}

I'm not sure the env config only works in .babelrc files. Then we should probably set the BABEL_ENV environment variable in the packager before running the transform based on the value of the dev param of the packager for the generated bundle.

janicduplessis · 2016-03-10T18:55:51Z

Maybe @kittens can chip in here see if we are doing this right :)

ide · 2016-03-10T20:17:48Z

@frantic could you try using Babel's env option that @janicduplessis linked to, and see if you can make it so that the plugin runs only in dev mode?

satya164 · 2016-03-10T22:34:49Z

Curious, what if someone is relying on a __source prop? Highly unlikely, but still!

sebmck · 2016-03-11T00:56:06Z

Yeah using the env option and setting the BABEL_ENV is the right way to conditionally load plugins.

ghost · 2016-04-15T17:00:19Z

@frantic do you have any updates for this pull request? It's been a while so we wanted to check in and see if you've looked at the requested changes.

facebook-github-bot · 2016-04-15T19:32:19Z

@frantic updated the pull request.

facebook-github-bot · 2016-04-15T20:16:15Z

@frantic updated the pull request.

frantic · 2016-04-15T20:16:34Z

Demo of how this will be useful (the commit that adds Inspector button is landing soon):

ghost · 2016-04-16T17:00:27Z

@martinbigio would you mind taking a look at this pull request? It's been a while since the last commit was reviewed.

frantic · 2016-05-05T22:03:59Z

@kittens does the code with BABEL_ENV look good? If so, I'm going to double-check the tests and land this.

ghost · 2016-05-05T22:18:13Z

@frantic updated the pull request.

ghost · 2016-05-06T17:00:37Z

@skevy would you mind taking a look at this pull request? It's been a while since the last commit was reviewed.

davidaurelio · 2016-05-13T20:59:36Z

package.json

    "babel-plugin-external-helpers": "^6.5.0",
    "babel-polyfill": "^6.6.1",
-    "babel-preset-react-native": "^1.7.0",
+    "babel-preset-react-native": "frantic/babel-preset-react-native",


Remove this, please. We will have to update this seperately (i.e. after publishing to npm)

Summary: Depends on #6351 Now you can open file directly from Elements Inspector! Credit for the original implementation goes to jaredly ![zcichu7kem](https://cloud.githubusercontent.com/assets/192222/14573876/cb100f6e-030c-11e6-925f-6a6dff510145.gif) **Test plan** Made sure it doesn't crash the app with or without #6351 (i.e. can be merged safely before #6351 gets in). Closes #7005 Differential Revision: D3313714 Pulled By: frantic fbshipit-source-id: 3b80abd3e81a0db5ca5136e2d2c94c775fa04f3a

Summary: Putting this up as request for comments. The PR adds [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) to the list of plugins that come by default with the `react-native` preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing `react-native` preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else? Closes facebook#6351 Differential Revision: D3302906 Pulled By: frantic fbshipit-source-id: 012d3a4142168f9f90d30d1686115d4dc3996eb9

Summary: Depends on facebook#6351 Now you can open file directly from Elements Inspector! Credit for the original implementation goes to jaredly ![zcichu7kem](https://cloud.githubusercontent.com/assets/192222/14573876/cb100f6e-030c-11e6-925f-6a6dff510145.gif) **Test plan** Made sure it doesn't crash the app with or without facebook#6351 (i.e. can be merged safely before facebook#6351 gets in). Closes facebook#7005 Differential Revision: D3313714 Pulled By: frantic fbshipit-source-id: 3b80abd3e81a0db5ca5136e2d2c94c775fa04f3a

Summary: Putting this up as request for comments. The PR adds [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) to the list of plugins that come by default with the `react-native` preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing `react-native` preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else? Closes facebook#6351 Differential Revision: D3302906 Pulled By: frantic fbshipit-source-id: 012d3a4142168f9f90d30d1686115d4dc3996eb9

oliviertassinari · 2016-06-25T17:22:20Z

Notice that highjacking the BABEL_ENV forced me to change the name of my NODE_ENV to development.
I'm using a different environment name to make a React Dom and React Native works under the same directory.
For more details, you can have a look at react-swipeable-views/pull#111.

satya164 · 2016-06-25T23:40:35Z

@oliviertassinari What do you mean by to make a React Dom and React Native works under the same directory?

oliviertassinari · 2016-06-26T10:21:06Z

@satya164 Well, I have two implementations of the same components for two platforms inside the same folder. Basically, x.js is targeting the react-dom, and x.native.js is targeting react-native.

To make this work, I have a single .babelrc at the root of the project. And I'm using 4 differents babel environment in my .babelrc.

one for the doc site in development mode
one for the doc site in production mode
one for the doc native app in development mode
one for the npm release

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)

* Handle & render the _source property 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) * add readme line * fix type check * remove `shortFilePath`

Summary: Depends on facebook#6351 Now you can open file directly from Elements Inspector! Credit for the original implementation goes to jaredly ![zcichu7kem](https://cloud.githubusercontent.com/assets/192222/14573876/cb100f6e-030c-11e6-925f-6a6dff510145.gif) **Test plan** Made sure it doesn't crash the app with or without facebook#6351 (i.e. can be merged safely before facebook#6351 gets in). Closes facebook#7005 Differential Revision: D3313714 Pulled By: frantic fbshipit-source-id: 3b80abd3e81a0db5ca5136e2d2c94c775fa04f3a

Summary: Putting this up as request for comments. The PR adds [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) to the list of plugins that come by default with the `react-native` preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing `react-native` preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else? Closes facebook#6351 Differential Revision: D3302906 Pulled By: frantic fbshipit-source-id: 012d3a4142168f9f90d30d1686115d4dc3996eb9

Summary: Depends on facebook#6351 Now you can open file directly from Elements Inspector! Credit for the original implementation goes to jaredly ![zcichu7kem](https://cloud.githubusercontent.com/assets/192222/14573876/cb100f6e-030c-11e6-925f-6a6dff510145.gif) **Test plan** Made sure it doesn't crash the app with or without facebook#6351 (i.e. can be merged safely before facebook#6351 gets in). Closes facebook#7005 Differential Revision: D3313714 Pulled By: frantic fbshipit-source-id: 3b80abd3e81a0db5ca5136e2d2c94c775fa04f3a

Summary: Putting this up as request for comments. The PR adds [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) to the list of plugins that come by default with the `react-native` preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing `react-native` preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else? Closes facebook#6351 Differential Revision: D3302906 Pulled By: frantic fbshipit-source-id: 012d3a4142168f9f90d30d1686115d4dc3996eb9

Summary: Putting this up as request for comments. The PR adds [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) to the list of plugins that come by default with the `react-native` preset. It will enable the use of a bunch of really cool tooling around JSX, however those are generally useful only in development mode. Is changing `react-native` preset the right thing to do in this case? Is there a way to enable this transform only in DEV? Should I add this somewhere else? Closes facebook/react-native#6351 Differential Revision: D3302906 Pulled By: frantic fbshipit-source-id: 012d3a4142168f9f90d30d1686115d4dc3996eb9

okonet · 2017-06-14T13:09:06Z

Can someone explain why https://github.com/facebook/react-native/pull/6351/files#diff-4676ea0b3c55c65c3929aa993144f07fR104 is needed?

davidaurelio · 2017-06-15T08:17:47Z

@okonet that’s for third-party code relying on it.

davidaurelio · 2017-06-15T08:18:16Z

I would be happy to remove it, but I am not sure how many user setups that would affect

okonet · 2017-06-15T09:24:34Z

Can we rewrite the check so it won't overwrite the passed env but only check if it's development?

davidaurelio · 2017-06-15T14:47:18Z

Maybe we can not overwrite passed-in envs. Please be aware that neither env.BABEL_ENV nor env.NODE_ENV are used for caching purposes, i.e. it is easy to poison your local cache by using different values, or not having files re-transformed when this value changes.

janicduplessis · 2017-06-15T17:55:58Z

The goal of this was to pass the packager dev env to babel so if you pass &dev=true it will run plugins in the env.development config.

janicduplessis · 2017-06-15T17:57:08Z

If it causes issues there are probably other ways to do it.

okonet · 2017-06-19T13:38:31Z

@janicduplessis yeah, the fact it overwrites and ignores BABEL_ENV is causing issues in multi-compile setups (web & RN for example)

See #8723 and #13733

I could do a PR with a potential fix but I don't have any experience with RN yet.

okonet · 2017-06-19T13:48:18Z

It seems this must be fixed in 0.46: https://github.com/okonet/react-native/blob/0.46-stable/babel-preset/configs/main.js

Summary: **Summary** Allows custom non-dev `BABEL_ENV`s besides `'production'`. With respect to facebook/react-native#6351 (comment). **Test plan** This change will break non-dev builds for people who for any reason has custom `BABEL_ENV` set but expects it to behave like `'production`' (current behavior). Though it can be easily fixed either by renaming their `env` from `production` to the value of custom `BABEL_ENV`, or by changing `BABEL_ENV` from custom to `'production'`. Other than this unusual case, nothing should change. Pull Request resolved: #364 Differential Revision: D14206886 Pulled By: cpojer fbshipit-source-id: 3e4ef2b2beb4ce94335f72cc974d35312f847a9f

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Mar 7, 2016

skevy self-assigned this Mar 8, 2016

ide added GH Review: needs-revision and removed GH Review: review-needed labels Mar 10, 2016

frantic force-pushed the jsx-source-preset branch from fbbc312 to fbe8a31 Compare April 15, 2016 19:31

facebook-github-bot added GH Review: review-needed and removed GH Review: needs-revision labels Apr 15, 2016

frantic mentioned this pull request Apr 15, 2016

Add "Open file" button to elements inspector #7005

Closed

frantic force-pushed the jsx-source-preset branch from dca61fe to b725ca1 Compare May 5, 2016 22:17

davidaurelio reviewed May 13, 2016
View reviewed changes

ghost closed this in 858643d May 18, 2016

oliviertassinari mentioned this pull request Jul 12, 2016

.babelrc custom environment name #8723

Closed

lebedev mentioned this pull request Aug 10, 2018

Allow custom BABEL_ENV for transformer facebook/metro#183

Closed

lebedev mentioned this pull request Feb 25, 2019

Allow custom BABEL_ENV facebook/metro#364

Closed

hramos removed the Import Failed label Mar 8, 2019

This pull request was closed.

Add transform-react-jsx-source to react-native preset #6351

Add transform-react-jsx-source to react-native preset #6351

Uh oh!

Conversation

frantic commented Mar 7, 2016

Uh oh!

facebook-github-bot commented Mar 7, 2016

Uh oh!

ide commented Mar 8, 2016

Uh oh!

janicduplessis commented Mar 8, 2016

Uh oh!

ide commented Mar 8, 2016

Uh oh!

frantic commented Mar 10, 2016

Uh oh!

iamdustan commented Mar 10, 2016

Uh oh!

janicduplessis commented Mar 10, 2016

Uh oh!

janicduplessis commented Mar 10, 2016

Uh oh!

ide commented Mar 10, 2016

Uh oh!

satya164 commented Mar 10, 2016

Uh oh!

sebmck commented Mar 11, 2016

Uh oh!

ghost commented Apr 15, 2016

Uh oh!

facebook-github-bot commented Apr 15, 2016

Uh oh!

facebook-github-bot commented Apr 15, 2016

Uh oh!

frantic commented Apr 15, 2016

Uh oh!

ghost commented Apr 16, 2016

Uh oh!

frantic commented May 5, 2016

Uh oh!

ghost commented May 5, 2016

Uh oh!

ghost commented May 6, 2016

Uh oh!

davidaurelio May 13, 2016

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented Jun 25, 2016

Uh oh!

satya164 commented Jun 25, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oliviertassinari commented Jun 26, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

okonet commented Jun 14, 2017

Uh oh!

davidaurelio commented Jun 15, 2017

Uh oh!

davidaurelio commented Jun 15, 2017

Uh oh!

okonet commented Jun 15, 2017

Uh oh!

davidaurelio commented Jun 15, 2017

Uh oh!

janicduplessis commented Jun 15, 2017

Uh oh!

janicduplessis commented Jun 15, 2017

Uh oh!

okonet commented Jun 19, 2017

Uh oh!

okonet commented Jun 19, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

satya164 commented Jun 25, 2016 •

edited

Loading

oliviertassinari commented Jun 26, 2016 •

edited

Loading