Stimulus: Rails, Turbolinks, Stimulus and asset pipeline

[scottharvey]

What's the best way of installing Stimulus with Rails, Turbolinks using the asset pipeline?

I'm having an issue with the Stimulus action function firing multiple times after I visit another page and then come back to the original page with the Stimulus controller.

I have installed Stimulus by just downloading the https://unpkg.com/stimulus/dist/stimulus.umd.js file and then pulling it into application.coffee using #= require stimulus.umd

I was thinking I could call @application = Stimulus.Application.start() inside application.coffee file but then it is run on every page visit.

Should @application = Stimulus.Application.start() and @application.register "filter", class extends Stimulus.Controller be called from within a Turbolinks event? I tried a few different events but each time the action function would be called multiple times after revisiting the page.

Here is my current setup:

application.coffee

#= require jquery
#= require jquery_ujs
#= require turbolinks
#= require stimulus.umd
#= require_self
#= require filter

@application = Stimulus.Application.start()

filter.coffee

@application.register "filter", class extends Stimulus.Controller
  update: ->
    # Code should only be called once each time the action triggered.
    # After visiting another Turbolinks page and coming back this is called multiple times each time the action is triggered.

[xdmx]

I'm also interested in this, and in particular if it makes sense to use webpacker in conjunction with stimulus, in order to have the whole webpack/babel/etc integration, instead of relying on sprockets.

How Basecamp organizes the javascripts/stylesheets files with stimulus?

It'd be awesome to have a real world example that uses rails, turbolinks, actioncable, webpacker, stimulus, etc to see how they can all work together

[tortuetorche]

Hi folks,

This demo looks good: https://github.com/adrienpoly/todomvc_rails_on_stimulus

Have a good day,
Tortue Torche

[javan]

@scottharvey, your setup looks fine. Try adding an initialize method to your controller to see if it's being loading more than once:

@application.register "filter", class extends Stimulus.Controller
  initialize: ->
    console.log("Initialized", @element)

If you can publish an example app I'd be happy to take a closer look.

[adrienpoly]

thanks @tortuetorche for mentioning my repo. My approach was to use only webpacker. I have completely removed sprockets asset pipeline, which I think was the initial question from @scottharvey.

I am a modest dev, this TodoMvc is fare from being perfect yet but working on it whenever I have time. By the way I just love Stimulus!

[scottharvey]

@javan I created an example app and it seems to be working as expected so there is probably something else in my main app that's causing the events to fire twice.

One thing I did notice is that the Stimulus controller is initialized twice when I visit the page using a Turbolinks link. I don't think it's causing an issue but just something that was interesting, here's a gif showing that.

If I just refresh the page with the Stimulus controller then the controller is only initialized once.

Here's a link to my example app https://github.com/scottharvey/stimulus_asset_pipeline

[sstephenson]

Closing this for now, but feel free to continue the conversation over on the new Stimulus Discourse.