sverweij / state-machine-cat

write beautiful state charts :scream_cat:
https://state-machine-cat.js.org
MIT License
793 stars 45 forks source link

Add an ESM distribution in addition to CommonJS #164

Closed zachallaun closed 1 year ago

zachallaun commented 1 year ago

First off, thanks for the great project!

I'm trying to use state-machine-cat as a visualization tool for an Elixir statechart library I'm working on. The visualization is embedded in a live notebook that is ultimately powered by another library called Kino.

By far the easiest way to manage external dependencies with Kino is by embedding through a CDN, but the engine only understands ESM. I'm making this work for now by essentially bundling an ESM build using esbuild and arguments very similar to these, but if you would consider including an esm build in your dist folder, I'd be able to easily use a tool like jsdelivr.com, which would be just dandy.

Proposed Behavior

Include an esm build in dist.

Current Behavior

Includes only a commonjs build.

Considered alternatives

I can get around this by generating an esm bundle myself, but this means checking a large bundle into my project to distribute it and setting up JS asset tooling.

sverweij commented 1 year ago

Hi @zachallaun thank you for your interest in state-machine-cat - your use case looks like a nice one :-)

state-machine-cat is written as ES modules - and these modules (in src) are part of the distribution on npm. They're not in dist, but in src

The package.json contains the information for any environment to either pick ESM or commonjs via the module attribute and the exports.

In short - I'd expect ESM use of state-machine-cat to already work out of the box.

zachallaun commented 1 year ago

Thank you for the explanation!

It seems like jsdelivr, at least, doesn't seem to be auto-bundling the project, so imports weren't being resolved. Here's an example, for instance: https://cdn.jsdelivr.net/npm/state-machine-cat@10.0.1/src/index.min.mjs

I did a bit more digging, and it looks like this is a somewhat new "advancement" and jsdelivr actually has an in-beta way to do it: https://www.jsdelivr.com/esm. It's apparently as easy as appending +esm to the path 😄

https://cdn.jsdelivr.net/npm/state-machine-cat@10.0.1/+esm

Going to close this. Thanks for pointing me in the right direction.

sverweij commented 1 year ago

Hi @zachallaun thanks for the feedback - and for the tip with the +esm. Good luck with the Elixir project!