React: Transform JSX in the browser

[koba04]

Now, Babel removed browser.js from babel-core.
https://github.com/babel/babel/commit/c0afdfd1a83aab0c25a1fc23cee0b09d560f4d35

React Getting Started documentation is using browser.js of babel-core 5.8.23.
http://facebook.github.io/react/docs/getting-started.html

Do you have any plan for supporting JSX transformer for the browser?
Will it be deprecated?

Thanks.

[zpao]

I guess we could reinstate JSXTransformer but I don't really want to… @sebmck whyyyyyyyyyyyyyy

[sebmck]

@zpao Why is this something that you want to support?

[jimfb]

@sebmck Am I missing something obvious here? The in-browser transformation is fairly critical to new users getting started. It is used in sample code to give people a first taste of JSX, is used in fiddles for debugging/testing/demoing, is used in a lot of places. It is even used on the reactjs homepage. browser.js seems like a fairly critical feature to me.

[zpao]

@sebmck feel free to point me elsewhere to have this discussion. The main reason I want it is to keep it simple when starting with React. "load this script and use type='text/babel' and it'll work" is a nice story and eases people into the need for server-side transformation. It would also be pretty bad to require a build pipeline for hello world. I want people to focus on React initially, not the tooling.

Could we compile our own to get the same story? Yep. We did it before and we can do it again (though maybe we won't ship it anywhere this time, just on our site, examples, jsfiddle). It was just nice to say that you were owning it :P

[shaoshiva]

I just migrated an app to react 0.14 with babel 6 and I didn't found a way to maintain the in-browser transpilation that I had previously with react 0.13 and JSXTransformer. It make me sad because it was a very convenient way for development.

[zpao]

As noted you can still use babel 5 in the browser. I wouldn't recommend using it for anything except test cases or quick examples though. If you have a whole app and build pipeline, you should rely on that.

[shaoshiva]

Yes it's exactly what I did, but my build pipeline was too slow, I had to wait 6-7 seconds for the ~30 jsx files to be transpiled by Grunt with the grunt-react plugin. Now I rely on Webpack + Babel 6, it's a lot faster, enough fast for development.

For in-browser transpilation I just found this :
https://github.com/Daniel15/babel-standalone

It seems to be the successor of babel-browser, that's a great news, and it resolves the issue ;) I hope it will be maintained.

[otoinsa]

This documentation bit should be corrected:

The link to in-browser tool leads to "deprecated".

Also - is there an alternative to babel-browser that works a lot like it used to?
It's very important for a lot of users to be able to develop on various machines/env; so this used to be a great tool during development period.

I don't understand how can I use the babel-standalone tool for my app.js file that has bunch of es5 react classes with JSX. Is there any alternative?

Right now I'm using the old browser.js...

[jimfb]

@otoinsa unofficial/unsupported, but... http://www.jimsproch.com/react/

That's what I use myself when testing locally, so I thought I'd share. It works pretty well for my needs.

[otoinsa]

Thank you @jimfb, that is very helpful!
I'll test it first chance tommorow :)

I think this is an essential addition to my dev workflow :)

[mxstbr]

Just ran into this today, the link to Babel's old browser.js in the documentation leads to this page, which has a link to Daniel15/babel-standalone. I take that as an endorsement – can I swap out the docs for in-browser transforms to directly link to babel-standalone and update the text accordingly?

[zpao]

babel-standalone doesn't actually do any transforming of script tags on its own, you'd have to write a wrapper (which I have done just need to get it shipping somewhere).

We can update the docs or just stop linking entirely.

[Daniel15]

I've got an issue to handle transforming script tags with babel-standalone: https://github.com/Daniel15/babel-standalone/issues/15. However, I haven't had any time to implement it. @danmartinez101 built https://github.com/danmartinez101/throw-in-the-towel/blob/master/index.js which looks like it should work. I'm happy to accept pull requests to add this to babel-standalone :smile:

[ghost]

I'll have a PR submitted for this tonight actually.

[zpao]

Here's what I wrote with the intention of just building for us to ship in our docs: https://gist.github.com/zpao/7f3f2063c3c2a39132e3 (though I think I need to fix something, haven't tested in a couple weeks)

The nice thing is that it is 95% the same code we had before with JSXTransformer, mostly just a changed transform call.

The problem with throw-in-the-towel is that it doesn't do all the things that we learned along the way with JSXTransfomer. The biggest thing is going to be actually creating script tags and doing that in the right order - it's vital for sourcemaps and new Function()() will have some fun issues (I forget exactly what). (You can figure all that out in your PR, not worth going into here but feel free to CC me).

[brownieboy]

Has anybody looked into Guy Bedford's SystemJS Babel Plugin as a possible solution for this? https://github.com/systemjs/plugin-babel

[ldct]

The problem with throw-in-the-towel is that it doesn't do all the things that we learned along the way with JSXTransfomer. The biggest thing is going to be actually creating script tags and doing that in the right order - it's vital for sourcemaps and new Function()() will have some fun issues (I forget exactly what).

Did you have a test suite for JSXTransformer testing these issues?

[zpao]

Nope, was just handle as they come, never felt the need to write tests for it.

[Daniel15]

Here's what I wrote with the intention of just building for us to ship in our docs: https://gist.github.com/zpao/7f3f2063c3c2a39132e3

Is it okay if I pull something like that into babel-standalone? It seems reasonable to have an extended version in Babel-standalone

It's got a differing license (BSD on that script vs MIT on Babel and Babel-standlone) and the Facebook copyright header so I'm not quite sure how that works. I guess I'd have to keep the copyright header, unless you relicense the script under MIT too?

[satya164]

I had made something to avoid a setup process while getting started - http://github.com/satya164/quik

It doesn't transpile inline scripts in html, (though it should be easy to support), but allows to use JSX without having to setup a build process.

[jimfb]

@satya164 If you're looking for something to use for testing/development, you can take a look at http://www.jimsproch.com/react/

It's completely unofficial/unsupported, but it will transpile inline scripts in html; it works pretty well for my own needs.

[zpao]

@Daniel15 that code is BSD and unlikely to change - it's essentially just the old JSXTransformer we wrote for React. You should be able to redistribute and just maintain the license but I'm not a lawyer and all that. Alternatively we just make a new package here and do the inverse.

[zpao]

Yes, that's a result of Facebook (and thus fb.me) being blocked. We could probably get around that by making the fiddles use a different location (eg cdnjs), but is otherwise unrelated to the issue here.

[Sophia-Gold]

Hi. Just wanted to throw my hat in here and say I am the edge case in terms of wanting to compile jsx in the browser. Had the tutorial told me that wasn't supported for over six months due to most people using webpack (or mentioned webpack at all...) I might not have wasted a lot of time trying to get code running with react and not understanding why everyone's answers to my Stack Overflow questions weren't running... I'm not complaining so much as just asking where support is at for this now and what is planned for the future? Will this new version of JSXTranformer be implemented as part of babel-standalone? Or at least on its own so people aren't confused by the docs? I'm trying to make a decision as to whether I can get babel-standalone to compile jsx and/or whether webpack is worth it for really lightweight projects. I'm currently using a templating framework, but virtual DOM would be easier to implement with all my existing js code so would love to use react...just not in a project file comparable to native development. Thanks!

[brownieboy]

Cody Lindley outlines seven different approaches to React setups in his article Taming the React Setup.

The third one of these is an in-line browser transpilation option with only a tiny bit of setup and _no_ build step. To quote the author:

SystemJS, with help from the jspm CDN, will just sort out all of the details for React, JSX, and Babel (i.e. dynamic loading) – in the BROWSER AT RUNTIME!

It's pretty amazing how that works, but there's a major downside: the reliance on the JSPM CDN to sort it all out means that it will only work if you have an internet connection. No offline use. Still, it might suit some.

[Sophia-Gold]

Thanks! I actually decided to just not use JSX and you know what? It's _much_ easier for me to write straight JavaScript. Maybe it's because I haven't yet developed a large site with React, but I'm really not sure what JSX adds beyond making it easier for designers who are more familiar with html.

And the downsides are huge. Babel became a mess with version six and Webpack is kind of an odd choice for a package manger if you ask me. I give it only a year or two until that becomes almost unusable as well and then tons of people's React projects will require major overhauls. Unless fb is going to pay its developers to work on those open source projects I see the dependencies as major liabilities.

Anyway, I'm pretty set for now :)

[gunn]

Is there a JSX transformer that just transforms JSX?

It seems like something that should exist. If I don't need ES6 then most of babel's 90,000 lines are going to waste.

[Daniel15]

Is there a JSX transformer that just transforms JSX?

@gunn - Load _just_ the JSX plugin for Babel, nothing else. The bulk of Babel (parsing/transformation code) is still necessary even if you just want one plugin. I don't think anyone's built a simple non-AST transform for JSX though.

[gunn]

@Daniel15 I'm afraid just babel-core would still be quite heavy.

Some other ideas:
https://github.com/Javey/vdt.js has an approach that only transforms JSX and works in hundreds of lines, but I don't know if it would have problems with edge-cases.

Maybe jstransform could be made small enough if all the non-jsx requires were eliminated from this file: https://github.com/facebookarchive/jstransform/blob/master/visitors/index.js

[Daniel15]

Yeah, a simple parser that only parses JSX (rather than the entire JavaScript AST) would be doable. You might be able to use bits of the vdt.js one: https://github.com/Javey/vdt.js/blob/master/src/lib/parser.js

jstransform still uses a JavaScript parser (Esprima) so it's still going to be much heavier than just parsing JSX and nothing else.

[Daniel15]

I finally integrated this into babel-standalone in https://github.com/Daniel15/babel-standalone/commit/03bd0ce30036325126dfb9dbb9ff23228e4555bb, based off @zpao's script. It'll now automatically compile and execute scripts in <script type="text/babel"> tags :smile:

[misterfresh]

Is there a browser plugin to support jsx syntax natively?

This would be useful for development to be able to skip transpiling after every change in the code.

At the moment I'm using this : http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/
and this : https://shinglyu.github.io/web/2016/04/06/minimal_react.html

[satya164]

@misterfresh Try https://github.com/satya164/quik

[misterfresh]

@satya164 This is more like a starter kit. Now with ES2015 native modules we should be able to avoid bundling in small projects. For example see React without webpack

[anywhichway]

There is new in browser transform library for JSX at https://github.com/anywhichway/jsxdirect

[jimmont]

these resources allow setting up to use modern javascript modules/features:
https://github.com/andreypopp/es6-template-strings-jsx
https://github.com/misterfresh/react-without-webpack

[mikeaustin]

I've been looking for a way to compile string JSX to a React component. It's a little different from a JSX template literal, where the JSX would be parsed, and the props passed immediately. I'm looking for more of a parser-generator I guess.

const component = generate(components, values, <Foo>{bar + 1}</Foo>
where 'Foo' would be passed in through components, and bar through 'values'. Value's is trickier since {} can contain expressions.

[misterfresh]

The most elegant solution to this issue so far : https://github.com/developit/htm