developit / preact-redux

:loop: Preact integration for Redux (no shim needed!)
https://npm.im/preact-redux
MIT License
288 stars 27 forks source link

Bad bundling #5

Closed ForsakenHarmony closed 7 years ago

ForsakenHarmony commented 7 years ago

The bundling even with the sourcemaps of the generated file can't be properly interpreted by Webstorm.

This leads to it saying connect and Provider cannot be found

It still works, but I'm constantly getting a warning

developit commented 7 years ago

Interesting. I've never used Webstorm but I'll check out the maps. Might just need to rebuild and publish.

ForsakenHarmony commented 7 years ago

It's just a strange way to do it, because it wraps the whole thing into a function that later on exports it, which webstorm is probably not capable of interpreting

developit commented 7 years ago

Weird, I somehow missed this reply. The exported format is UMD (if I recall correctly), which is fairly common.

ForsakenHarmony commented 7 years ago

https://gist.github.com/ForsakenHarmony/d74559dc21174afc55d6b82eaa2a171a

I can't even figure out where Provider is exported here

EDIT: oh wait, nvm it's at the bottom as a return

developit commented 7 years ago

yup yup, that's just the UMD format. It allows a single bundle to support globals (window.preactRedux), AMD (define(['preact-redux'], ...)) and CommonJS (require('preact-redux')).

Personally I think there's no reason to support AMD anymore, but the various bundlers (in this case rollup) don't seem to want to remove it.

An simpler bundle that straddled these things might look like:

(function(global) {
  // lib code here
  var exports = { Provider, connect };

  if (typeof module!=='undefined') {
    // commonjs (including babel-transpiled ES Modules):
    module.exports = exports;
  }
  else {
    // globals (script tag, jsfiddle, etc):
    global.preactRedux = exports;
  }
}(this));

Super interesting side note though: the output after uglify-js has run on a bundle is almost always smaller when there is a wrapping function like the one above (or like the UMD bundle in your gist). Uglify doesn't mangle top-level variable names, so wrapping everything in a function means it can go wild on all the names that were at the top level in src/, since they are now all local to that outer function. I've tried playing with the various output module type settings (actually in this repo if I recall) and UMD is strangely the smallest after uglify+gzip, despite supporting the most formats. Crazy!

developit commented 7 years ago

Fixed in 2.0.2.