Feat/add es modules bundling

[TimDaub]

Greetings 👋 👾

I checkout out this library and liked it quite a lot 🎉 However, I noticed that I can't directly include it as an ES module. I know, so far its been using rollup. But I'm a fan of KISS, so I just replaced it with microbundle.

So now, including dist/webglplot.module.js should allow inclusion like this:

<script type="module">
  import WebGLplot, { WebglLine, ColorRGBA } from "./node_modules/webgl-plot/dist/webglplot.module.js";
  // ...

Here's your sin example running with modules (I've used npm link so far only). Got this no-build process mainly as an idea from preact's docs.

I haven't tested the other ways to import. Not sure what I should be looking for, so I'm looking for help/reviews. Thanks!

Hope you like it!

Best, Tim

[danchitnis]

Hi Tim,

Thanks for this. This sounds interesting. I am not familiar microbundle. Can we test CodePen example before merging? Also, we have to test webglplot-examples, and the React examples/website. Can the JS code live outside the HTML? otherwise that would be tedious after each Typescript compilation.

From what I understand React v16 doesn't benefit from esm modules. What about Preact?

Best wishes, Danial

[TimDaub]

Hey,

Can we test CodePen example before merging?

OK. I'll take a look and report back.

Can the JS code live outside the HTML?

Yes, totally. See here (e.g. "Applying the module to your HTML").

From what I understand React v16 doesn't benefit from esm modules. What about Preact?

I'm unfamiliar with the direction React is headed. Preact is embracing esm already. See here. It's pretty cool if you ask me.

I'll try testing it and report back.

[TimDaub]

Hey,

reporting back with an example: https://jsfiddle.net/mdnquy9s/11/ I've included this file https://github.com/TimDaub/webgl-plot/blob/feat/add-js-modules-bundling/dist/webglplot.modern.js via jsdeliver.net.

What do you think?

[danchitnis]

Thanks for this. I will have a look into the code in the next couple of days. I think RollupJS has an es6 module export option. (I used it in another project)

[danchitnis]

I have now added an esm bundle alongside a umd bundle. The esm module should perform similar to your example. There was no need for a new package as the standard RollupJS could do the job. See the Bundle section of the ReadMe file.

[TimDaub]

Hey 👋

that's great! If you prefer an even more concise syntax, linking from https://unpkg.com/webgl-plot?module is possible to! unpkg.com's source is npm.

Thanks for adding the suggestion! :) Closing...