This gem is coupled to sprockets/asset pipeline

[kevindew]

Edit: it's April 2022, I'm updating this issue title to restate that the issue is that this gem is coupled to sprockets rather than it does not support webpacker. This is to reflect that webpacker is no longer the default way to load assets in Rails as of Rails 7.

The underlying problem that prevents the use of webpacker is the coupling this gem has to asset pipeline and is the same problem that needs to be overcome to adopt any of the approaches to using modern JavaScript in Rails 7, thus pretty much all the content in this issue is still relevant despite the change in context with Rails' webpacker status.

---

Like #500 this relates to our experiences on Content Publisher trying out the webpacker approach to javascript that arrived in Rails 5.1: alphagov/content-publisher#217

In trying it out we got to learn a bunch about how we could bridge this compatibility gap - I'm using this issue to document what was learnt and suggestions on what could be done.

Why even bother?

We're at an interesting time now in a few areas. The govuk_frontend_toolkit gem is deprecated and it's replacement is a node module; Rails has taken a jump into node_modules over the past couple of years; and there's sufficiently few JS modules in this library now that it isn't a huge task to rework modify them whereas time will make this harder.

Using assets from this gem in via webpacker

The Rails approach to this is pretty clear: publish as both a gem and as an NPM package

Outside of this there are some hacky ways to achieve the sharing

We could pull through through the various assets (sass, js, maybe even erb) and then also have those files in the gem for still working with asset-pipeline (which is what activestorage does). Having the govuk-frontend pulled through via node-modules also seems safer than doing it through a gem as we can manage version expectations of that in both app and this gem.

Make JS available as modules

The other aspect of this, which isn't essential for compatibility, but would be good for our general JS practice is to start using Javascript modules (as per govuk-frontend).

This would allow us to to import individual govuk-frontend components where we want them rather than having to always initialise all, and could be used to pull in and define dependencies (currently we have a dependency on jQuery but that's just implicit).

To maintain compatibility with asset-pipeline the modules can be compiled with rollup - proof of concept

/cc @alex-ju