Switch to es6 modules

[micahscopes]

I'm using rollup, and would love a build of Tone.js that uses es6 modules. It could drastically reduce compile sizes!

The project could still compile a UMD version to ship, so that people could use it in the familiar way with require(...), but people using tree shaking could benefit immensely.

[tambien]

This is definitely a goal in the near term.

[micahscopes]

@tambien I just forked to see if I can get something working!

[hiddedejong]

If I can be of any help, please let me know!

[micahscopes]

okay, I have done some gruntwork to replace amd syntax with es module syntax. unfortunately, there is a bug in rollup with the circular dependency resolution, so I had to be pretty explicit about module paths.

I added "submodule" files to re-export modules from each folder, then re-exported modules at the main level.

unfortunately, from here I'm not sure how to proceed. I haven't done much in the way of complicated organization with rollup, so I have to figure out at the very least how to get the main objects without explicitly importing each of them by name.

@hiddedejong @tambien if you wanna mess around with this, I've made a branch here: https://github.com/micahscopes/Tone.js/tree/es-modules

in the base directory, do npm install then npm run rollup. right now it builds to build/index.js, but doesn't do much else! needs cleanup, at the least.

[tambien]

@micahscopes Good start. Thanks.

What i do currently is have a build script which just collects all of the files into a main.js and then run requirejs on that, so you could probably do the same thing with rollup.

[micahscopes]

So I'm realizing that to do this right, it's gonna take a much more thorough, manual rewrite, exporting and importing specific functions from existing modules. I wish my scripting skills were up to par to do this automatically, but they really aren't. I'm pretty clumsy with sed and stuff.

[tambien]

@micahscopes Yeah, it's a pretty big undertaking of reformatting all of the tests and reworking the build process. I was going to tackle it when i've got a decent chunk of free time to devote to it. While i was doing that, i also wanted to convert it to es6 classes and use some other new es6 features.

I'd also like point out that if reducing the compile size is your main objective and you're using Webpack or similar, you can currently import individual modules which would reduce the compiled size like Rollup would.

For example, instead of:

import Tone from 'tone'

you could import only the modules that you need:

import Player from 'Tone/source/Player'

@micahscopes and @hiddedejong thanks for offering to help. I'll post here when i've started the process and you and whomever else can jump in on helping convert some of the modules and tests over.

[hiddedejong]

Sounds good!

[micahscopes]

@tambien it makes sense to do it well!

Also... just wanted to say that this project is 100% amazing.

It's interesting to dig into the architecture. One thing I noticed while looking through the code is that that even simple Synth objects bring along the whole Transport structure in order to do "toSeconds", even if nobody is using the Transport.

This is very convenient for cases when you want to use the transport, but if I'm not using the transport, it adds roughly another ~50k minified. So I'm wondering if it would make some sense to further modularize stuff like this, but it could potentially require some significant changes to the API, and might bring the project in a direction it's not meant to go in, since the API is really wonderful as is.

FYI, my use case is building web components, which is why I'm so interested in the modularity. At the moment, I'm interested in using the instrument objects with an existing web audio context and without any timing stuff.

[tambien]

I am going to close this for now, but es6 is definitely a long-term goal for this project.

@micahscopes So much relies on the Transport, as you said, i don't think i could really remove it without rearchitecting the project.

[bryanbraun]

I just wanted to check back in to see if there's any interest in reviving this issue.

It would be nice to take advantage of ES6 features, not just for Rollup, but for direct use in browsers since support is really improving.

Adding an es6 entrypoint would also enable people to use tools like Pika and import Tonejs into apps that require no bundling (which is what I'm hoping to do). Currently, that's not possible:

[tambien]

@bryanbraun take a look at the typescript branch. gladly accepting contributions there!