thomas
said over 1 year ago
on
Custom Turbo Stream Actions
:
To access TurboStreams, don't import `@hotwired/turbo` nor `StreamActions`. Instead use Turbo made available in the window:
Hope that helps.
If you are using rails 7, chances are you are using the new importmap feature. Rails 7 is loading Turbo through the turbo-rails gem and importmap '@hotwired/turbo-rails', like so:
# config/importmap.rb # you should see the following line pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
To access TurboStreams, don't import `@hotwired/turbo` nor `StreamActions`. Instead use Turbo made available in the window:
# app/javascript/turbo_streams/toast.js
# here we removed import { StreamActions } from ...
# and we use Turbo made available with turbo-rails gem instead
window.Turbo.StreamActions.toast = function() {
...
}The new importmap feature aims to remove yarn dependency. To use toastify-js, you can add it to your config>importmap.rb
# config/importmap.rb pin "toastify-js", to: "https://ga.jspm.io/npm:toastify-js@1.12.0/src/toastify.js"
Then add the css tag in your view/layout
app/views/layouts/application.html.erb <head> ... <%= stylesheet_link_tag "application", "https://ga.jspm.io/npm:toastify-js@1.12.0/src/toastify.css", "data-turbo-track": "reload" %> </head>
Hope that helps.