Mobx: Compile to ES2015 modules and expose it at jsnext and module in package.json

[mohsen1]

What problem would it solve for you?

It helps shaking off unused MobX code when building for production

Do you think others will benefit from this change as well and it should in core package (see also mobx-utils)?

Rollup and Webpack users will get free tree shaking benefits

Are you willing to (attempt) a PR yourself?

Yes, all we need to do is to tell tsc to compile again with modules set to ES2015 and update package.json to have a "module" filed.

@developit and @Rich-Harris has a lot of experience with this

[developit]

Yup, it's an awkward solution, but TBH right now it seems like the only way to move forward.

[mweststrate]

@mohsen1 interested in setting up a PR?

[hccampos]

I would just like to point out that this broke our tests (run in PhantomJS) and gives out warnings in the TS build (via Angular CLI):

WARNING in ./src/xxx.ts
93:86-102 "export 'IObservableArray' was not found in 'mobx'

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
  at src/test.ts:301

[dmitriid]

It looks like it now breaks a lot of things. Probably due to "module": "lib/es2015/mobx.js" this module is included in the output bundle as-is, not the transpiled lib/mobx.js

[developit]

@dmitriid @hccampos @mohsen1 - ah - so you guys are now running into exactly the issue I ran into with preact-compat: you're shipping ES2015 as your modules entry, but people are against transpiling node_modules, so the raw ES2015 is just being bundled up. This gets reported as "uglifyjs errors", or the phantomjs errors above.

Solution for us was to bite the bullet and ship an ES Modules bundle that doesn't use an ES2015 syntax at all (so basically transpiling everything but the exports).

The initial work was done here:
https://github.com/developit/preact-compat/commit/61864696608477ca88faf1281433150234f97691

and then a fix was added to addres the first warning @hccampos noted:
https://github.com/developit/preact-compat/commit/a4624cdef9af217c146f28ce5ce6fe084abed775

[dmitriid]

Thanks for putting it into a proper description :) I can't be eloquent to save my life :)

[mweststrate]

@hccampos @dmitriid released 3.1.7 in the mean time, without this change

[dmitriid]

woohoo

[mweststrate]

(so basically transpiling everything but the exports).

Not sure typescript has an option for that... @developit

Seriously, I had a red flag when releasing this, cause, "es6 modules, can't be that easy, something must be wrong..." :-P. lol.

[mohsen1]

Sorry I broke everyone's build! :(

So per @developit we should target ES5 with ES2015 modules. I think TypeScript can do that. I'll propose another pull request.

[developit]

I should clarify - the example I linked to (preact-compat) actually transpiles from ESM to ESM rather than simply ignoring exports. Might be a case for Rollup, even if you just run it on your CommonJS bundle?

[mohsen1]

@developit #889 does export to ES2015 modules and ES5 code but Webpack is not shaking off unused exports.