Use importmap in Trestle

Tao-Galasse commented 5 months ago

Hello @spohlenz,

I have troubles using importmap with trestle.

If I add to my Trestle config :

config.hook(:javascripts) do
  javascript_importmap_tags
end

or if I try to override the views/layouts/trestle/admin.html.erb file to add <%= javascript_importmap_tags %> in the <head> tag, it seems like the javascripts from trestle are not working correctly anymore.

When I'm going in a form and submit it with errors on it, the errors doesn't appear on the UI ; the same thing happens for flash or every other kind of UI element (for errors or success).

However, if I refresh the page of the form manually, it seems like everything works again.

It looks like there is a strange interaction between importmap & turbolinks, but I don't really understand why.

Would you have any clue about this issue? Do you know if there is a workaround to make it works properly, or should I rewrite my components to not use importmaps in favor of any other jsbundling? 😕

Thanks a lot for your time & help! 🙏 😊

spohlenz commented 5 months ago

I believe this issue may be more to do with which scripts that your importmaps are including, rather than using importmaps themselves. If your importmaps include turbo, then I can definitely see this behavior as being likely.

It should be possible to just use Stimulus and your custom controllers -- I do this in a number of projects, though not using importmaps but rather a javascript_packs_tag call.

If that doesn't help, could you please post the HTML output that javascript_importmap_tags is including in the layout.

Tao-Galasse commented 5 months ago

My importmap is including turbo & turbo-rails, indeed.

To use javascript_packs_tag, I would need to install & use webpacker, am I wrong? I wanted to avoid this, if possible.

A dirty-but-working workaround I found was to set Turbo.session.drive = false in my application.js. I suppose it's bad for performances in some cases but it seems ok for my use case 🤔

spohlenz commented 5 months ago

To use javascript_packs_tag, I would need to install & use webpacker, am I wrong? I wanted to avoid this, if possible.

Yes, sorry I wasn't necessarily suggesting you should do it this way. Just explaining how I have done it for a number of my applications.

My importmap is including turbo & turbo-rails, indeed.

I'm yet to investigate importmaps fully, but the aim will be to keep turbo/turbo-rails from being included within the importmaps for Trestle, while including it still within your main application's JS imports.

Perhaps the selective module import feature will be useful.

Tao-Galasse commented 5 months ago

Ok, I will take a look at this.

Thanks again for your help! 😊 🙏

amozoss commented 5 months ago

For me removing import "@hotwired/turbo-rails" worked.

I was seeing the same weird behaviors, like the sidebar toggle button working initially, but not working after navigating a page. Another symptom was the redirect from a /new page wasn't working.

Not ideal to not have turbo, but works for now

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 0d7b494..91a46f2 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,3 +1,2 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "@hotwired/turbo-rails"
import "controllers"

amozoss commented 5 months ago

Not entirely sure why rebuilding the bundle with this change makes it seem to work, but it does

diff --git a/app/assets/bundle/trestle/bundle.js b/app/assets/bundle/trestle/bundle.js
index 8c51c4ac..2cef5d20 100644
Binary files a/app/assets/bundle/trestle/bundle.js and b/app/assets/bundle/trestle/bundle.js differ
diff --git a/frontend/js/core/events.js b/frontend/js/core/events.js
index 31f4e5d7..77d0b833 100644
--- a/frontend/js/core/events.js
+++ b/frontend/js/core/events.js
@@ -43,8 +43,4 @@ ready(function () {
 })

 // Trigger the page load events.
-if (turbolinks) {
-  $(document).on('turbolinks:load', triggerReady)
-} else {
-  $(document).ready(triggerReady)
-}
+$(document).on('turbo:load', triggerReady)

TrestleAdmin / trestle

Use importmap in Trestle #458