Document plugin / preset workflows

[guybedford]

We should document how to use:

• JSX for React
• Stage 1 options etc
• Custom plugins

[brownieboy]

+1 for seeing the "JSX for React" documentation.

I'm trying to use the SystemJS plugin-babel with React, but can't see how to configure it correctly. I'm not using JSPM, by the way, so is that even possible? This is as far as I got: https://github.com/brownieboy/react-systemjs-babelplugin-example

I managed to get it transpiling ES2015 (i.e. no React) here https://github.com/brownieboy/systemjs-babelplugin-example.

[kuhe]

Regarding JSX & React,

It could be mentioned that to avoid loading 300 JS files in the browser, jspm 0.17(beta) can do a bundle for example of the following contents, separate from your application code:

    require('react');
    require('react-dom');
    require('systemjs-plugin-babel');
    require('../jspm_packages/npm/babel-plugin-transform-react-jsx@6.6.0/lib/index.js');

But it needs to be imported with <script charset="utf-8"></script> due to a particular RegExp.

[stoffeastrom]

+1 for custom plugins. For example how would I use the transform-decorators-legacy babel plugin?

[kavi87]

I'd love to know how to use the transform-decorators-legacy plugin as well.

[guybedford]

It's worth using jspm for these cases (jspm install npm:transform-decorators-legacy) then setting the plugins config as in https://github.com/systemjs/plugin-babel#custom-presets-and-transforms.

[EisenbergEffect]

@guybedford How would we add the transform-decorators-legacy plugin?

[guybedford]

@EisenbergEffect this can be done via:

jspm install npm:babel-plugin-transform-decorators-legacy --dev

then adding to the configuration file:

babelOptions: {
  plugins: ['babel-plugin-transform-decorators-legacy']
}

[EisenbergEffect]

I'm interested to see how I would set this up without using jspm.

[guybedford]

@EisenbergEffect one approach that can work here (although isn't really a good idea) is to use jspm to create a build of the plugin (although that will then suck in all the parts of Babel itself that it needs).

So you can do:

jspm build babel-plugin-transform-decorators-legacy --format amd decorators-plugin-build.js

And then change the babelOptions to reference that file to use decorators:

babelOptions: {
  plugins: ['decorators-plugin-build.js']
}

That build file can then work in non-jspm SystemJS projects.

[FullStackForger]

Why would it suck in other parts of babel @guybedford?

[super2457]

I wasted a day here.

[guybedford]

@super2457 sorry to hear that. You can use @node/babel-plugin-x as the plugin name if you will only use the transpiler for bundling and not browser loading.