React-redux: jsmain:next should point to a “redistributable ES2015 bundle”

[flying-sheep]

what that means is “syntax the platform (browser/node) can read except for the ES2015 import/export syntax”

funnily my test project doesn’t work with specifically react-redux:

• rollup(babel(), commonjs(), npm({'jsnext:main': true})) → rollup’s acon can’t parse the object spread syntax here
• 'jsnext:main': false → https://github.com/rollup/rollup-plugin-commonjs/issues/29

cc @Rich-Harris @TrySound @Victorystick

[flying-sheep]

lol, currently it’s exactly the opposite: ES2015 with some ES2016 features _except_ for ES2015 module syntax :smile:

[gaearon]

Please feel free to make a PR to fix this.

[flying-sheep]

sure. first i need to know: are you comfortable switching to ES2015 module syntax and relying on babel to convert it to require calls?

in any case, the normal NPM bundle would be created as it currently is: babel with your current plugins and presets.

switching module syntax would mean for the redistributable bundle: current stuff minus module-transformer

not switching would mean: current stuff, after that use this to convert require syntax to ES2015 syntax (would probably need quite a bit of code to make it work outside of rollup.

[gaearon]

sure. first i need to know: are you comfortable switching to ES2015 module syntax and relying on babel to convert it to require calls?

We just had a regression that forced us to go back to CommonJS: https://github.com/rackt/react-redux/pull/233. I'm happy to revert this in React Redux 5 where we'll drop IE8 compat though.

[flying-sheep]

hmm, was es3ify no option?

[gaearon]

Seems inconvenient to add Browserify transforms to Webpack build.
And we don't want to support IE8 forever anyway. React is dropping it in next version, and so do we.

[flying-sheep]

it’s also available for webpack but yeah, i can wait :smile:

[flying-sheep]

hmm, just thinking: your build system is basically npm run scripts right?

but using the babel CLI means i can’t programmatically do:

var options  = JSON.parse(require('fs').readFileSync('.babelrc', 'utf8'))
options.babelrc = false
options.splice(options.indexOf('es2015-loose'), 1, 'es2015-loose-rollup')
babelDir('src', options)

[thisconnect]

Would you accept a PR in the way redux has a rollup-able es6 module?

https://github.com/reactjs/redux/blob/master/package.json#L25

[gaearon]

Yes.

[thisconnect]

Building ./es the redux way was straightforward and did build. I use npm link to test my local react-redux es build in a rollup test. When trying to rollup this error is thrown

[Error: Module node_modules/react-redux/node_modules/react/react.js does not export Component (imported by node_modules/react-redux/es/components/Provider.js)]

My understanding is that import { Component, PropTypes, Children } from 'react' does not work in this case. React does not provide es modules.

The following changes would fix that, but I do not really feel confy changing src for this. :/

-import { Component, PropTypes, Children } from 'react'
+import React from 'react'
 import storeShape from '../utils/storeShape'
 import warning from '../utils/warning'

+const { Component, PropTypes, Children } = React

At this point I almost want to give up rolling up dependencies and only rollup my own code. As the journey would countinue with react-router.

Interestingly react-router already distributes es modules and uses import React from 'react' instead import {something} from 'react', almost everywhere. I only found https://github.com/reactjs/react-router/blob/master/modules/PropTypes.js#L1 where it destructs directly from 'react'

https://github.com/reactjs/react-router/pull/2530

[gaearon]

Even if it worked, we _don’t_ want to end up with the whole React in React Redux bundle. It’s not supposed to be embedded in the output. Webpack lets use set “externals” to express that; I presume Rollup has a similar mechanism? cc @Rich-Harris

[Rich-Harris]

Yep, just add external: [ 'react' ] to your Rollup config

[thisconnect]

Using babel directly (as it is done in redux) wont include react and keeps import React from 'react'

[timdorr]

This should be fixed on next, I believe. Give 5.0.0-beta.2 a whirl. There is both a jsnext:main and module entry in the package.json now.