January 21, 2021

Testing Skypack

Javascript is the toughest part of building Madmin. Ideally, we don't have to do much to add our assets to your application, but it's tricky.

Asset Pipeline
Adding assets to the asset pipeline requires configuration tweaks to the manifest.json and adding gem dependencies that include the assets.

Assets in webpacker are easier, but you still have to "yarn add" the dependencies and potentially tweak the webpack .js files. These changes could conflict with your code and that's no bueno.

The solution I'm trying now is using Skypack for the assets. They can simply live on a CDN and be included in the HTML. Here's a commit for testing this: https://github.com/excid3/madmin/commit/24a209183a6e4ae259cbe32ac0d2993baa092bc2

<%= stylesheet_link_tag "https://cdn.skypack.dev/flatpickr/dist/flatpickr.min.css", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "https://cdn.skypack.dev/slim-select/dist/slimselect.min.css", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "https://cdn.skypack.dev/trix/dist/trix.css", "data-turbo-track": "reload" %>

<%= javascript_pack_tag "madmin", "data-turbo-track": "reload" %>

<script type="module">
  import { Application } from 'https://cdn.skypack.dev/stimulus'
  const application = Application.start()

  import stimulusFlatpickr from 'https://cdn.skypack.dev/stimulus-flatpickr'
  application.register("flatpickr", stimulusFlatpickr)

  import stimulusSlimselect from 'https://cdn.skypack.dev/stimulus-slimselect'
  application.register("slimselect", stimulusSlimselect)

This works super well so far, but I haven't tested with Safari, Firefox, etc.

Rails Dependencies
Unfortunately, this won't work for everything. The ActiveStorage, ActionText, Hotwire, Turbolinks, and other JS that ships with Rails really needs to have matching versions.

I think the solution we may end up with is using Skypack in the asset pipeline and Webpacker that way we can solve both problems. No additional dependencies need to be added and Madmin can ship with the latest assets it needs and provide seamless updates, all while using the same base Javascript that comes with Rails.


Sign up or login to comment
© 2021 12in12