Tuts / Examples for Hotwire + Asset pipeline + Skypack?

[danielvlopes]

I explained what “download ESM from skypack” means here:

Using SortableJS, skypack, Stimulus & fetch (without RailsUJS)

We’ve been migrating https://knowyourteam.com to Turbo (and out of jQuery as well), and I was just migrating one of our features that requires drag-n-drop and it took me a bit longer than I expected to get it working. So I’m sharing the code here in case others might have similar needs. This covers: Downloading SortableJs library from skypack.dev as ESM. Wrapping a third-party lib with a Stimulus controller. Using fetch instead of Ajax. Not using Rails UJS Our importmap.json (no changes) { …

In the link above I’m using SortableJS so you’d open their cdn URL and grab the other URL inside. For example:

1. Open https://cdn.skypack.dev/sortablejs@1.13.0?min
2. Then grab the path and open the final URL: https://cdn.skypack.dev/-/sortablejs@v1.13.0-mei9zfSyMp6mF9rZklbl/dist=es2020,mode=imports,min/optimized/sortablejs.js
3. Place the file above in the app/assets/javascripts/libraries and the stimulus help from your importmap will pickup the import correctly.

I hope this helps.