search

josefarias / hotwire_combobox

An accessible autocomplete for Ruby on Rails.
https://hotwirecombobox.com
MIT License
418 stars 24 forks source link

Importmaps are pinning and preloading both UMD and ESM builds (and ~25 other files) #177

Open searls opened 3 weeks ago

searls commented 3 weeks ago

I'm trying to clear these warnings from my browser while debugging my app, because only the admin section of my site currently uses hotwire_combobox:

The resource /assets/hotwire_combobox.esm-3cc9ba76.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
The resource /assets/hotwire_combobox.umd-c0b89259.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

If you're using importmaps, the importmap.rb:

pin_all_from File.expand_path("../app/assets/javascripts", __dir__)

Will pin and (apparently?) preload both of these files (they aren't checked into the repo, as they're generated):

app/assets/javascripts/hotwire_combobox.esm.js
app/assets/javascripts/hotwire_combobox.umd.js

I guess there are two issues here:

  1. Is the UMD build ever appropriate to pin or preload for importmaps users? Since importmaps depends on ESM, I would hazard a guess no? In that case it might be more appropriate to rewrite hw_importmap.rb to only pin the ESM build
  2. Would it be possible to make the preload-or-not config exposed to end users in a reasonable way? This feels like it may be a limitation of importmap-rails, given that Mission Control has a similar issue

Additionally, by using pin_all_from, individual modulepreload links are generated for each and every JavaScript file in the project, which is probably not what you want

<link rel="modulepreload" href="/assets/controllers/hw_combobox_controller-7808ba7e.js">
<link rel="modulepreload" href="/assets/hotwire_combobox.esm-3cc9ba76.js">
<link rel="modulepreload" href="/assets/hotwire_combobox.umd-c0b89259.js">
<link rel="modulepreload" href="/assets/hw_combobox/helpers-8ec22533.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox-1aae564d.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/actors-4cfc477f.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/announcements-c9445511.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/async_loading-dfdc40ad.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/autocomplete-60883f3d.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/base-911febd6.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/dialog-50e693d4.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/events-b35491be.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/filtering-d226165c.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/form_field-6e867c92.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/multiselect-4e9dc1e7.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/navigation-38901208.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/new_options-28b5f452.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/options-f024585b.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/selection-06963375.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/toggle-39497388.js">
<link rel="modulepreload" href="/assets/hw_combobox/models/combobox/validity-d73d5ad4.js">
<link rel="modulepreload" href="/assets/hw_combobox/vendor/bodyScrollLock-e4b6c83f.js">
<link rel="modulepreload" href="/assets/hw_combobox/vendor/requestjs-e9b49506.js">
searls commented 3 weeks ago

I forked the repo to try finding a workaround, and was able to get it to load by changing hw_importmap.rb in each of these ways:

pin "hotwire_combobox", to: "hotwire_combobox.esm.js", preload: true
pin "hotwire_combobox", to: "controllers/hw_combobox_controller.js", preload: true
pin_all_from HotwireCombobox::Engine.root.join("app/assets/javascripts/hw_combobox"), under: "hw_combobox", to: "hw_combobox"

This also required me to have an import 'hotwire_combobox' somewhere in my application.js for them to load, though.

Additionally, (and more importantly), the actual hotwire combobox functionality didn't work. I'm unsure why not and couldn't figure it out

josefarias commented 3 weeks ago

Thanks for raising this and trying to find a workaround.

Yeah, this is a remnant from first spiking on the library and trying a spray approach. I'll have to take a look and see what we need and don't need. UMD is probably fine to drop, and I'd expect ESM to be able to stand on its own, since that's what's published on npm for use in non-importmap apps. But that's evidently not working so something's up.

I'll keep this open while I (or someone else) take a look.