Modules & CSS

[backspaces]

Great idea! Two things I need are use of es6 modules and css wrapped in self executing modules (no exports)

First of all, I need a module for uPlot-lazy-interface, I work on a repo which is all es6 Modules based. uPlot has one, probably a rollup? It would import uPlot.js. It would also import the css:

Secondly, I don't want to force my users to deal with the uPlot css. I'd wrap the css in a module that is used only for it's side effects, i.e. has no exports. Looks like this:

document.head.innerHTML += `
<style>
${css}
</style>`

The point of both is to place dependencies within the JavaScript using them! Placing them globally results in many repos that have un-used resources, both JS and CSS. Es6 modules eliminate them.

[fquirin]

Hi,

I haven't really played with ES6 modules so far so I'm open for code suggestions :-) Are you looking for something like this? (I'm not sure if this actually works ^^)

import uPlot from './uPlot.esm.js';
//... lazy add-on ...
export default uPlot;

Which one of the uPlot libs are you using?

About CSS: uPlot lazy has no own CSS. If your uPlot import is working already you should be good :-)

Cu and happy Xmas :christmas_tree: Florian

[backspaces]

Hi! Sorry to be late responding.

Re: modules. Yup, they are great but slow in maturing.

I looked at uPlot's package.json & rollup.config.js and found out that uPlot.js is an es6 module, and all the other formats are derived from that via rollup. Interestingly done too.

So one fairly easy way to create a "subclass" of uPlot, you can import uPlot, add your code, and export your uPlot-lazy-interface from that. And if you want to support other forms like iife, cjs, and so on, use rollup.

I realize all that may sound like greek, but it's not all that hard:

• Create the uPlot-lazy-interface as an es6 module, importing uPlot and adding your code.
• And if you want multiple output formats, a fairly simple set of rollup transforms can do that. I can show you how to do that too.

In terms of the css, there is a fairly easy way to do that too. You create an es6 module which is a wrapper around the css which simply creates a