Using importmaps instead of Webpack, eliminating the requirement of Nodejs

[mdwagner]

Goal

For any-size Lucky projects, it would be nice to use importmaps instead of Webpack, as it could eliminate the need for Nodejs, making the experience more streamlined and less complicated, while also giving Lucky more control of the build pipeline.

Why

Besides the hype around Rails 7 switching to importmaps, this can be a good change to introduce for new projects, as the barrier to entry is much lower not needing to use Nodejs and Yarn. These tools are required for Lucky, but not all development teams are in the Node ecosystem, and so they feel like crutches to support the newer types of tooling.
Of course, these tools might be used in projects anyway, but what I'm suggesting is that they aren't required to start.

Show me the POC

After implementing a basic importmap concept, along with a few Lucky tasks, I created a POC of the usage.

I based my inspiration around importmap-rails for the most part, but tried to stick with what was necessary for the POC.

How it works

• Pin dependencies from a CDN using lucky importmap.pin react react-dom. This will create the importmap if not already there, and pin those dependencies to their CDN url.
• Pin and download dependencies using lucky importmap.pin react --download. This will do the same as the above, but will download the files from the CDN url into a vendor folder. It also prefixes the file content with a version of what the package is (since you don't have the URL with this approach).
• Unpin dependencies using lucky importmap.unpin react-dom. This will remove those dependencies from the importmap and the associated vendor files.
• Show the importmap using lucky importmap.json. This just shows the json file.
• It's recommended to add an es-module-shim, so I actually just included it in my importmap, but use the url directly.
• Load the importmap tags after the es-module-shim
• You can also preload modules from your importmap, which will create a <link> tag with that module url, allowing it load before anything else.

That was a lot of information haha. Take some to digest it and try it out (the POC Lucky project uses no database, so it should be pretty easy to get started). I'm also on the Discord server for any questions. Thanks.

[matthewmcgarvey]

Sidebar Suggestion

Maybe there's something I'm missing, but the tasks you added in your POC could be moved into the library. LuckyTask has Lucky in the name but it's just a general CLI command library. You wouldn't require them in your library, they'd be required in the apps tasks.cr file https://github.com/mdwagner/importmap-example-lucky/blob/master/tasks.cr and should just work ™️

Back to the big picture

I've never used importmaps before, but I appreciate the simplicity of it and trust Rails to make pretty good decisions on stuff like this. I'm definitely down to use this instead of webpack when it's ready!

[mdwagner]

Thanks for pointing that out, I thought the same thing the other day, but didn't get around to changing it yet.
It's still pretty new for Rails, but I think in the long run it'll be worth it.

[stephendolan]

How do dependency bumps work with importmaps? Will Dependabot-like things not be an option?

[mdwagner]

That's a good question and it looks like there is a similar discussion on importmap-rails: rails/importmap-rails#19

I'll have to look into it and get back to you.

[mdwagner]

looks like I could use this for some basic auditing: https://docs.npmjs.com/cli/v8/commands/npm-audit#bulk-advisory-endpoint

[stephendolan]

Yeah, but if we build an integration with that aren't we just basically making another package manager?

I guess I've not felt any pain from having Node as a prerequisite for apps, so maybe I'm just a bit overly skeptical.

Seems like we'd be a pretty early adopter, but without the massive team and community of other frameworks doing so.

[mdwagner]

I would say it's Experimental at this point. Just wanted to start the conversation anyway. We'll see how actual implementation goes and how Rails copes with it.