Microbundle: Support JSX ?

[wcastand]

Hi, i wonder if it's possible to use JSX in the source code.
This is a test repo : https://github.com/wcastand/test-microbundle
I have a small repo to test it out and right now i get an error from nodent :

▲ test-microbundle at master ✔ yarn build
yarn run v1.3.2
$ microbundle --jsx
SyntaxError: Unexpected token (4:2) /Users/willoo/Documents/Projects/test-microbundle/src/index.js (nodent)
  <div>
--^
✨  Done in 0.50s.

In the source code you have an options for jsx in buble options.jsx but nodent is before buble.

[developit]

I think we can pass this to nodent:

nodent({
  parser: {
    plugins: {
      jsx: require('acorn-jsx')
    }
  }
})

[wcastand]

Is there a way to add this in my project or i make a PR to include jsx parsing by default in nodent ? or we add an options to include jsx ?

[developit]

I think we should just support it out-of-the-box.

[wcastand]

There was a release just before this was merged.
Any idea when it will be published ?

Thank for your work and reactivity :)

[albinekb]

Hi, I cant seem to get JSX to work either, just installed:

$ microbundle
SyntaxError: Unexpected token (37:8) /Users/albinekb/Devel/Projects/react-native-net-info-hoc/src/components/withNetInfo.js (nodent)
        <ComposedComponent {...this.props} connection={{ ...this.state }} />
--------^
✨  Done in 1.41s.

[wcastand]

It wasn't pushed to npm yet :)
the PR was merged 1 hour after the last release so i think he waits to get more change before pushing a new version :)

[alexindigo]

Curious if this is out.

[developit]

about to be.

[alexindigo]

Actually, I’m seeing some errors.
I cloned this master, ran build and installed into my project. Everything worked as expected, but then I tried to plug in, created bundle into another prohect and it threw with h is undefined.
Looks like it compiled <h1> into h(‘h1’, ... with h not being defined anywhere.

[alexindigo]

I can provide more details when I get to the computer.

[developit]

That seems correct. The default pragma is h(), you can change it to anything you want:

microbundle --jsx React.createElement

btw - this is released as 0.3.0 if you want to test it out that way.

[alexindigo]

So it's passing arguments to rollup? Or --jsx is just undocumented feature?
Thanks, I'll test it.

[alexindigo]

Btw, another thing that is somewhat confusing:

--external

microbundle --jsx React.createElement --compress false --external electron --output lib src/index.js

(node:11195) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: 'ipcRenderer' is not exported by node_modules/electron/index.js
(node:11195) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
'ipcRenderer' is not exported by node_modules/electron/index.js

It still tries to pull in electron dependency

Does work with --external all though.

[alexindigo]

Seems working with --jsx React.createElement flag. Thanks.

[estrattonbailey]

A note for other users: as of 0.4.3 (might be other versions, but that's where I am), the --external flag has two requirements:

1. If --external all, your external modules must be installed as dependencies
2. If --external <name>, your external module must be installed as peerDependencies

[developit]

Adding a package to your peerDepenencies will make it external, no flags needed.