Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adopt Rollup #54

Open
11 tasks
curran opened this issue Dec 1, 2015 · 7 comments
Open
11 tasks

Adopt Rollup #54

curran opened this issue Dec 1, 2015 · 7 comments

Comments

@curran
Copy link
Collaborator

curran commented Dec 1, 2015

The way that the new D3 modules are structured using Rollup and ES6 modules is brilliant. The code is clean, the toolchain is clean, and the UMD bundles are clean and small, with only the necessary code included. Rollup also seems to have a better shim situation than browserify-shim.

These Chiasm modules should follow a similar pattern of organization to D3 modules:

  • chiasm-charts
  • chiasm
  • chiasm-component
  • chiasm-dataset-loader
  • chiasm-crossfilter
  • chiasm-dataset
  • chiasm-data-reduction
  • chiasm-injector
  • chiasm-layout
  • chiasm-svgsaver
  • chiasm-links
@curran
Copy link
Collaborator Author

curran commented Dec 3, 2015

Perhaps this should be rephrased as "adopt ES6 modules". Rollup is a great tool for building bundles. It would also be useful to load modules dynamically with a module loader library like ES6 Module Loader.

@Hypercubed
Copy link
Contributor

Hypercubed commented Jul 9, 2016

Does this mean each module continues to generate its own bundle? The easiest thing would be to publish only ES6 modules and bundle only at the top level (chiasm) or at the user level. I think we are all finally getting comfortable consuming CJS npm packages in the browser.

@curran
Copy link
Collaborator Author

curran commented Jul 10, 2016

Right, that's a great idea.

I'm currently pursuing the Rollup adoption over at reactive-vis, which outputs a bundle that contains all dependencies (including reactive-model and the parts of D3 that are used).

@Hypercubed
Copy link
Contributor

Do you see any benefit in converting chiasm modules now? Sounds like your focus is elsewhere, for me I'm just trying to get the footprint of Project-X down. As you can see here: http://hypercubed.github.io/Project-Chi/#/examples/treemap, lodash and jquery makeup ~8.5% of the code. I'm using neither of these directly.

@Hypercubed
Copy link
Contributor

Ok, so I would like to help with this but still unsure about the direction. Following the d3 pattern for each module we need to:

  1. Convert to ES6 modules.
  2. remove browserify.
  3. Add rollup and uglify to generate a build.

Not sure if we really need to do # 3 to each module.

Furthermore, from what I can tell d3 is still not using ES6 syntax just ES6 modules for rollup. If we add ES6 features (template strings, etc) do we also need to add a babel step for older browsers and < v4.0 node?

@curran
Copy link
Collaborator Author

curran commented Jul 12, 2016

That's an awesome treemap visualization!

I'd welcome the changes in the Chiasm modules. Your 3 steps sound good to me. It's true that D3 is using ES5 code, and only ES6 modules. This is why D3 can be bundled with Rollup without Babel. I suppose if we do want to start using ES6 language features, we'll need to add a Babel step to the Rollup build.

@Hypercubed
Copy link
Contributor

Thanks.

I'd like to push a little on # 3. What's the purpose of including a bundle when we are no longer supporting bower? If we do keep a bundle may I suggest that we do it on npm publish and exclude from the repo. That is what we did for crossfilter/universe then point users to npmcdn.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants