hotwired/stimulus

A modest JavaScript framework for the HTML you already have

stimulus's Issues

Module parse failed error

Hey guys,
Pardon my ignorance with TypeScript, but is there something, in particular, I need to do to account for the use of TypeScript internally with Stimulus? I'm getting this error when following the handbook for installation with Webpack:

index.ts:33 Uncaught Error: Module parse failed: Unexpected token (4:17)
You may need an appropriate loader to handle this file type.
| 
| export default class extends Controller {
|   static targets = [ "text" ]
| 
|   copy() {
    at Object.<anonymous> (index.ts:33)
    at __webpack_require__ (index.ts:30)
    at webpackContext (index.ts:33)
    at definitionForModuleWithContextAndKey (index.ts:33)
    at index.ts:33
    at Array.map (<anonymous>)
    at definitionsFromContext (index.ts:33)
    at Object.<anonymous> (index.ts:33)
    at __webpack_require__ (index.ts:30)
    at ElementObserver.start (index.ts:33)

Do I need to set up typescript and ts-loader myself within my webpack config to allow proper compilation? It didn't cause any issues until I added in that line with the static keyword.

Any ideas?

Data API: set data value is typecasted upon render

Given the following HTML and controller:

<!-- index.html -->
<main data-controller="test" data-action="click->test#logstate"></main>

// test_controller.js
export default class Test extends Controller {
  initialize() {
    this.data.set('state', { foo: 'bar' });
  }
  logstate() {
    console.log(this.data.get('state'));
  }
}

The output HTML upon Stimulus render would give me a console log of [object Object], and a data attribute data-test-state="[object Object]".

I understand the Data API isn't fully documented, but is there a way to set an Object type as a data value without using a third-party state management library? As I understand it the Data API takes the given arguments and assigns a data-* attribute to the controller, calculating the attribute name with the first argument and assigning the stringified value to that attribute's value.

One approach I could see around the issue of trying to assign an Object is to do something like the following:

// Object
Object.entries({foo: 'bar', baz: 'buzz'})
  .map(([key,value]) => {
    this.data.set(key,value)
  })

// Array
this.data.set('list',['foo','bar','baz','buzz'].toString())

…which would give us:

<main data-controller="test" data-test-foo="bar" data-test-baz="buzz" data-test-list="foo,bar,baz,buzz"></main>

Now the values of the data attributes are available, even if the dev now has to parse objects/arrays back into their respective structures, and strings/numbers are still able to be retrieved or properly typecasted.

However, this doesn't seem ideal and if there is a built-in feature to save Object-typed data to a controller I'd be interested to check that out.

Thanks!

[FAQ] Page-Specific Javascript

Hi,

Sorry, I didn't find any forum to post this question.

May I know, can we achieve "Page-Specific Javascript" loading as mentioned in Organizing Javascript in Rails Application With Turbolinks article using this framework ?

Thanks.

How rails-ujs, SJR (server-generated javascript response) fit together with Stimulus?

I assume Stimulus will work well with rails-ujs and SJR pattern, but I noticed they are not mentioned in the handbook yet.

Is it possible to briefly describe how they fit together in Basecamp today? 🙂

NPM package for @stimulus/polyfills

Cool project! Would love to see a package for https://github.com/stimulusjs/stimulus/tree/master/packages/%40stimulus/polyfills on NPM to ease adding IE/Safari support. Thanks!

How create event of destroy component?

I want remove all listeners initialed in controller code if component unmounted, how it's make?
Have any event of life circle of component except 'initialize'?

Binding context

Hello, I liked that you are heading towards a monolithic architecture.
I'm wondering whether it is planned to work with the binding context?

Example knockoutjs:

<ul data-bind="template: { name: 'employeeTemplate',
                                  foreach: employees,
                                  as: 'employee' }"></ul>

Installation instructions outdated for v1.0.0.beta-2

Just had a quick go at bumping up from 0.9.0 to 1.0.0.beta-2 and ran into an error with importing the autoload function.

ERROR in ./app/javascript/src/index.js
21:0-8 "export 'autoload' was not found in 'stimulus/webpack-helpers'

The installation documentation still indicates that this is the initialisation process, so I'm not sure if this is just outdated or an actual bug.

import { Application } from  'stimulus';
import { autoload } from 'stimulus/webpack-helpers';

const application = Application.start();
const controllers = require.context('./controllers', true, /\.js$/);
autoload(controllers, application);

New Targets creation

This time I will try to act smarter and ask before write code 😂

Sometimes I need to create a DOM elements, that Stimulus controller should controller after.
For example in this interface, when I create a new item, I need a way to add it to DOM.

Right now I need to write this

    // create tag element
    const item = document.createElement('div')
    item.setAttribute('data-title', 'aa')
    item.setAttribute('data-id', 123)
    item.setAttribute('data-target', 'categories.selected_item')
    item.setAttribute('data-action', 'click->categories#removeItem')
    item.setAttribute('class', 'categories--selected-item')
    item.innerHTML = 'aa'

    this.targets.find('selected_items').appendChild(item)

Can we present some sort of function to simply create new dom elements inside. Like:

// element can be a 'div' by default
const target = this.targets.create('selected_item', { 
  element: 'div', 
  data: {}, 
  htmlOptions: { class: 'categories--selected-item' }, 
  innerHTML: '' 
})
this.targets.find('selected_items').appendChild(target)

---

Probably we can just create a simple standard way to adding mix-ins to controllers.
This case we can keep things like that outside of Stimulus

Custom elements interoperability?

stimulus seems very unobtrusive so I think it could work well with Custom elements, isn't? Would be great to see it on https://custom-elements-everywhere.com/

Does Stimulus support for loops?

Can you manage something in a loop? I didn't see examples for times when you have a list of things to manage. Example how do you manage a simple to do list? Or is this something you manage server side and with Turbolinks

stimulus and om99

I read through all of stimulus handbook (is there something else to read ?), and wow I am surprised it feels like we invented almost the same thing without knowing.

dom99 github
dom99 docs

stimulus - dom99

data-controller is like data-inside
data-target : data-element
data-action : data-function

is there something like data-list also ?
and data-template ?

noted differences, stimulus encourages to use a controller and put many things inside of it while dom99 approach is to let the developer structure components however he/she wants.

The docs of stimulus seems way better and more up to date and more concise.

I recommend putting npm install stimulus explicitly written out here https://github.com/stimulusjs/stimulus/blob/master/INSTALLING.md after the first sentence.

Thoughts ?

Support for multiple data-targets?

Hi Basecamp people,

Thank you for this well-thought, another great JS library first of all.
I am currently using this in building one of our prototype and I was wondering if one element can have multiple data-target attributes.

E.g.,

.notifications data-target="notifications.panel, application.panel"

So that I can access this element from both NotificationsController and ApplicationController.
I know I can achieve my goal with other options (e.g., jQuery selectors), but just curious if there's better "stimulusy" way to achieve this.

How turbolinks fit together with stimulus?

Wonderful! The way stimulus works is so straight-forward and the concept is so easy to understand!

I'm really looking forward to the enhancement of the documents, for example, I still don't understand in which cases it needs turbolinks?

How to write inheritance with stimulus controller ?

// javascript/packs/controllers/parent_controller.js
import { Controller } from "stimulus"
export class ParentController extends Controller {
  myParentFunction(){
  }
}

// javascript/packes/controllers/child_controller.js
import { ParentController } from "parent_controller.js"
export default class extends ParentController {
  connect(){
    console.log("child controller loaded!")
  }    
}                               

I have this error:

Uncaught TypeError: Super expression must either be null or a function, not object

Roadmap

Hey 🖖,
Any plan to have a public roadmap? I'm pretty much sure a lot of people willing to contribute to the project if they will know what is needed right now.

Kebab-cased or underscore_cased targets

If you have a multi-word target name it seems like the convention would be to kebab-case or underscore_case it's name as opposed to camelCase because of the way the controllers are named. However, this doesn't pair nice with the new class targets coming in 1.0.0.

For example, if I have a target called document-input I wouldn't be able to use a friendly getter as a method, I'd have to call it through it's key instead.

<input type="file" name="document" data-target="documents.document-input" data-action="documents#change">

export default class extends Controller {
  static targets = ['document-input'];

  change(event) {
    // I know I could use event.target in this example, but I'm just demonstrating
    // the case of accessing another target.
    this['document-inputTarget'];

    // If it was under_score cased it would be slightly better, but still a weird mix.
    this.document_inputTarget;
  }
}

Would the convention be to stick to camelCased target names so it can all look nice in the controllers, or could the class targets be converted from camelCase to kebab-case under the hood so that we can use the former in our scripts and the latter in our views?

EventListenerObject location?

Where in Action.ts ...
export class Action implements EventListenerObject
It is unclear where this interface is declared. it is not imported in the class file?

How to handle portals?

How can you render a child element of a controller into a different part of the DOM but delegate the events back to the original controller. This is the portal concept from React.

This is a common pattern with dropdowns, popovers, modals, etc. I'm not sure how to go about handling this scenario in stimulus.

For example, let's say your building a Popover, but you want to render the popover content in the <body> element so it's displayed over all other elements.

<body>
  <div data-controller="popover">
    <button data-action="click->popover#open">Open</button>
    <div data-target="popover.content" hidden>
      <div data-action="click->popover#handleClick">
        click me!
      </div>
    </div>
  </div>

  <!-- 
  when the popover button is clicked, you would copy the popover content
  and insert it into the DOM here, but you would still want the `#handleClick` action
  to trigger on the original controller.
  -->
  <div data="click->popover#handleClick">
     click me!
   </div>
</body>

Maybe there is some scope/context trickery that can be done to create some portal-type instance of a controller element, but delegate actions to a different controller? For example:

<body>
  <div data-controller="portal">
    <div data-controller="popover">
      <button data-action="click->popover#open">Open</button>
      <div data-target="portal.content" hidden>
        <div data-action="click->portal#delegate" data-to="popover#handleClick">
          click me!
        </div>
      </div>
    </div>

    <!--
    the portal controller could create a copy element for each portal.content
    it finds, then delegate to the proper controller somehow?
    -->
    <div data-action="click->portal#delegate" data-to="popover#handleClick">
      click me!
    </div>
  </div>
</body>

Have you guys used this pattern for anything on Basecamp? Any tips/ideas?

Turbolinks duplicates actions?

Here's a sample Stimulus + Turbolinks demo app:
https://pascallaliberte.github.io/stimulus-turbolinks-demo/

If an element that's watched by a Stimulus controller is on both the current and next page, Stimulus or Turbolinks seems to be connecting the actions twice (connect, disconnect, connect, connect).

How to reproduce:

1. Click between Proposals and Clients pages a few times
2. Watch the console for dropdown#connect, dropdown#disconnect
3. Click the dropdown menu (it might not open because it quickly open and then close because of multiple registered toggle actions
4. Watch the console for dropdown#toggle calls

Stimulus.js doesn't listen for DOMContentLoaded event when trying to render bootstrap.js modal

Thanks to all the contributors.
I am trying to add a modal overlay over bootstrap carousel on initial load to collect emails before allowing access to the slides in the carousel. Previously, I used JQuery and Turbolinks:

 $(document).on("turbolinks:load", function() {
   if ($("#carousel-example-generic").is(':visible') ) {
     $('#myModal').modal({show: true, backdrop: 'static', keyboard: false});      
   }
 });

and this html:

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  data-interval="false">
  <div class="modal fade" id="myModal" >  </div>
 </div>

But now, I want to use Stimulus.js but can't get the modal overlay to display on the bootstrap carousal even when I add an event listener for DOMContentLoaded, it is not used by stimulus.js.

 <div data-controller="presentation">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  data-interval="false" 
   data-target="presentaion.displayModal"  data-action="DOMContentLoaded->presentation#showModal"  >  </div>
</div>

The only way I have been able to get the modal display to work is to add the initialize method
to Stimulus.js controller that then calls another method that renders the modal as shown in presentation_controller.js below:

  import {Controller} from 'stimulus'
  import * as $ from 'jquery/dist/jquery'
  import 'bootstrap/dist/js/bootstrap';

  export default class extends Controller {
    initialize() {
      this.showModal();
    }
    get carouselModalElement() {
      return this.targets.find('displayModal')
    }
    showModal(){
       if ($("#carousel-example-generic").is(':visible') ) {
         $('#myModal').modal({show: true, backdrop: 'static', keyboard: false});    
       }
     }
  }

Is this the recommended way to do this with Stimulus.js or is there a better approach to achieve this.

Using ujs ajax events with stimulus actions

First of all, thank you for Stimulus -- it's great.

I'm wondering if it is possible currently or planned to be able to bind to ujs ajax events with stimulus's action binding syntax.

I have a modal I want to close on an ajax:success event after the modal's form is submitted . Placing the data attribute data: {action: 'ajax:success->modal#close'} on the form doesn't seem to bind, or I haven't been able to suss out my error.

It's no problem to bind it manually once the controller is connected, but the action syntax is pretty nifty.

spammy basecamp guys yet again... think of an idea that is actually good instead of backlinking and bloating the internet

Gem for asset pipeline

This is on the roadmap?

Just out of curiosity why did you decide to use TypeScript instead of CoffeeScript? Basecamp is moving towards TypeScript or something?

Safari issues with the website

First, thanks for the ideas expressed in stimulus.js - I want to use it for my next project; the description is very well-written.

Assuming that the website itself is based on turbolinks, I want to share my experience I had while using the page with the Safari browser (11.0.3) in combination with its swipe-back 2-finger gesture.

While the first problem seems to appear primarily on the desktop version, the second
problem happens on both, the mobile and desktop versions.

• Safari freezes for up to 4 seconds:

1. Click the "Building Something Real" link in the Handbook
2. Refresh Safari at this location
3. Scroll at about 2/3 towards the end of the "Building Something Real" page
4. Click the "Introduction" link on the handbook
5. Now use the swipe back gesture of Safari to return back to the "Building Something Real" page
6. The website now freezes for up to 4 seconds...

The problem can be reproduced with every turbolinks enabled website as long as the steps above are met and the page has been scrolled far enough. I am not really sure why this happens, but I assume it is the scroll restoration of turbolinks. (looking at Safari's timeline in dev tools, it seems that the last composite of the website is delayed... until it gets responsive again)

• Serious page flicker effects:
  Safari browser seems to cause a lot of flicker effects in combination with the swipe-back gesture in general, as long as the page to return to has some scrolling position. This happens on the mobile version as well.

Both effects do not appear when the back-button is used.

How can I handle mouseover mouseout events with a single data-action?

Hi, if I put two data-action on same HTML node, first one is not recognized.
For handle a mouseover mouseout event I need to build two different nodes.
Is there another way?

This code work but I don't know if is the best solution:

<div data-controller='monkey' >
  <div data-action='mouseover-monkey#mouseOver'>
    <div data-action='mouseout-monkey#mouseOut'>
      <img src="imageOver.png" ></img>
    </div>
  </div>
</div>

Thanks!

Slides example

I read the book. But have one question. Would it be possible to programmatically add a new slide?

Best practice for integrating with Rails and Authentication

Decided to take a look at Stimulus for loading a few ui pieces after initial page rendering in one of our older Rails apps. Newer apps we've gone with more of the single page app backed with Rails API, but this seems like a great way of using it to load smaller elements and it works well so far.

What approach do you take to deal with the authentication issue. For example, our Devise login screen shows up in the fetched HTML since we are calling :authenticate_user! in the ApplicationController. I don't want to ignore auth on the new routes for these partials as they may contain sensitive data, but it seems like implementing a complete JWT mechanism is overkill since it wouldn't be needed everywhere.

intended use / contrasting with other frameworks

Hey folks,

Hopefully this is the right place for this sort of question, if not I'm happy to move it.

I've been playing around with Stimulus recently and wanted to see if the way I'm thinking of using it is by design.

Controllers != Components

So in most component-based frameworks, if I want to change part of the page that is being managed by some component, then I need to do that within the component hierarchy. One of the attractive things about Stimulus seems to be that you can achieve the same thing by just setting up a new Controller for that part of the page.

Concrete example:

Components

I have a component that renders a form and validates it on submit.

In React this might look something like:

<Form>
  <input type="text" name="myField" onChange={ this.onChange } />
  <button type="submit" onClick={ this.onSubmit }>Save</button>
</Form>

This form and a few others in my app need to format a field as a phone number. So this might be accomplished by extracting a special component for phone number fields

<Form>
  <PhoneInput onChange={ this.onChange }></PhoneInput>
  <button type="submit" onClick={ this.onSubmit }>Save</button>
</Form>

Controllers

By contrast, with Stimulus it appears that you would be able to simply add the new behavior as a Controller that would be used in addition to existing ones on the page. In other words, you could add the formatting behavior without making any changes at all to the file with the validating behavior - even though they would both be working with the same field.

For example:

First step: just form validations

/views/users/_form.html.erb

<%= form_with(model: user, local: true, data: { controller: "form" }) do |form| %>
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :user_name, data: { target: "form.required_field" } %>
  </div>

  <div class="field">
    <%= form.label :phone_number %>
    <%= form.text_field :phone_number, id: :user_phone_number, data: { target: "form.required_field" } %>
  </div>

  <div class="actions">
    <%= form.submit data: { action: "form#validate" } %>
  </div>
<% end %>

/src/controllers/form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  validate(event) {
    this.validateRequiredFields()

    if (!this.valid) {
      event.preventDefault()
    }
  }

  private

  get valid() {
    return this.data.valid
  }

  set valid(value) {
    this.data.valid = value
  }

  validateRequiredFields() {
    let anyEmpty = false
    this.targets.findAll("required_field").forEach((element) => {
      let isEmpty = element.value === ""
      element.parentElement.classList.toggle("field_with_errors", isEmpty)
      element.parentElement.classList.toggle("field", !isEmpty)

      if (isEmpty) {
        anyEmpty = isEmpty
      }
    })
    this.valid = !anyEmpty
  }
}

Then if I want to add phone formatting, I can do so without changing that Controller that is handling form validations.

I just add a new controller to the specific part of the page where I need it:

/views/users/_form.html.erb

  <div class="field" data-controller="format">
    <%= form.label :phone_number %>
    <%= form.text_field :phone_number, id: :user_phone_number, data: { target: "form.required_field", action: "format#phoneNumber" } %>
  </div>

/src/controllers/format_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  phoneNumber(_event, target) {
    target.value = target.value.split(" ").join("-")
  }
}

Conclusion

Does this sound right?

In practice, would you expect to see multiple controllers handling different types of behaviors on a page or do you tend to organize things differently?

On Change event

Right now when you want to fire an action on change->
The event will be fired only when u change focus from input field itself.

<inpit type="text" data-action="change->controller#change_value" />

Should it work like that?
I thought it should fire an action on every input value change.

Unexpected token for static targets = ["ingredient"] in Webpack

I am receiving this after updating to 1.0 and using the new targets functionality. I have import { Controller } from 'stimulus' above but it seems to not be working, unless there is something I am missing

Communicating between controllers

I know this isn't exactly an issue, but I think it is a good question. I think of your controllers as controllers for components on a page.
How would you suggest to communicate between more controllers?

I have two components List (data rendered in a list) and ListFilter (bunch of selects and text inputs). List is loaded using AJAX. It should be reloaded every time ListFilter changes. I would like to use separate controllers for List and ListFilter to keep files small and organized.

So, how to trigger a List reload when ListFilter changes?

babel-runtime error

Uncaught SyntaxError: Unexpected identifier

I am not sure if this is a stimulus issue, I am using https://github.com/parcel-bundler/parcel and it the bundle keeps complaining that it cannot find babel-runtime/.... I do have that module within my node_modules

Clarify how to declare multi-word controller names in docs

Just something you might want to add to the docs eventually. After some experimenting with trying to get a multi-word controller working. I eventually realized that it has to be separated by a - instead of a _ like the controller file itself needs to be named.

<div data-controller="option-panel">
  <div data-target="option-panel.widget"></div>
  <div data-action="click->option-panel#show"></div>
</div>

... which points to ...

option_panel_controller.js

At first, I was putting _ in the markup data attributes before I realized it was a dash. This might be assumed by some folks, but still might not be a bad idea to mention it in the docs or in an FAQ somewhere.

I'm happy to submit a pull request for this as well but wasn't sure where or how you'd want to include this in the handbook.

Cheers :)

How to pass arguments through actions?

For the slideshow example:

If I wanted to "jump" to the second image and would like to implement a "jump" action, I need to pass in the index of the clicked image. How can this be done?

Controller ID or access to all controllers of the same type?

Dear folks who are building and using stimulus,
I am currently working on a controller to use the PhotoSwipe lightbox library. Photoswipe differentiates between different galleries on the same page by a unique ID. For this, I would like each instance of the photoswipe-controller to have some unique ID (e.g. in a data attribute).

Currently, the only way I can think of is kind of pedestrian, something like:

document.querySelectorAll('[data-controller*="photoswipe"]').forEach((element, index) => {
  element.dataset.controllerId = index
})

Can you think of a better way to identify the individual instances of the controller?

Thank you for building this awesome piece of software. It's kind of the JS framework I've been waiting for 😊

Question about documentation

In this page:
https://stimulusjs.org/handbook/managing-state
In the first version of src/controllers/slideshow_controller.js

there is a target attribute defined:

 static targets = [ "slide" ]

But then in the showSlide function we use the member slideTargets.

Is this an incomplete rename ?
Is there a relation a don't see explained in the rest of the document ?
Can you explain how we get from the first to the second ?

Embedded script tags prevent target detection

First off, thanks for the great work so far, stimulus is a joy to use.

Not sure if this is a bug or simply a limitation of the browser (or my misunderstanding of mutation observers, or something).

As of stimulus 1.0.0, in my experience if you have a <script> tag within a DOM node marked with a data-controller attribute, the corresponding stimulus controller will find targets with data-target attributes up to the point in the DOM where the <script> tag appears, and then no further. This has actually happened to me twice as I have been using stimulus in places that already had 'sprinkles of jquery', so this may be something that users run into as they replace those parts of their app with stimulus. This likely also comes up if people are using things like cocoon which embed script tags near the form.

Understandably having tiny <script> tags lying around may not be best practice, and I have been able to move them to the end of the document or at least beyond the last data-target, or replace them with stimulus entirely.

Let me know if you cannot reproduce or want help, but I assume this may be a known limitation?

Choose another name?

Hi.
The stimulus.js is really cool, but its name is not. It hard to remember and difficult to pronounce, it sounds terrible. Why don't we choose another name?

Error parsing descriptor string in production environment

Hi

First of all. Stimulus is great - thanks for sharing this with us. I've spent the day getting it into my Phoenix app which already uses turbolinks. It works great in my development environment 🎉.

After finishing up the intended work, I decided to ship it to our production environment. But it seems like the production build fails to setup the actions & targets. I assume it has something to do with minification of the javascript. 😢

I can't find any information in the docs about this issue. I'm not using webpack. The stimulus instance is starting, and the controllers are connected properly. But the actions cannot be parsed.

Here's an output of the stacktrace in Chrome.

Error parsing descriptor string "click->card-show#editDescription" for element

Error: Bad action descriptor "click->card-show#editDescription": r.forOptions is not a function
    at Function.e.forElementWithInlineDescriptorString (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:2)
    at e.buildActionForElementWithDescriptorString (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.getConnectedActionForElementWithDescriptorString (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.elementUnmatchedTokenForAttribute (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.elementUnmatchedToken (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.elementUnmatched (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.removeElement (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.processNode (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:3)
    at e.processRemovedNodes (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:2)
    at e.processMutation (app-14f4dbd96b765d1f3cea6ce9a38b92d7.js?vsn=d:2)

What to do? 😄 ❓

Submitting Remote Forms?

Hi there,

First of all: Thanks for sharing this library, it looks very promising and like a "missing piece of the puzzle" 👍

I am currently trying to integrate it in an existing Rails application with remote forms but I am struggling with making those play nicely with stimulus. When calling submit(), it seems to ignore the remote attribute and submits the form without XHR:

= simple_form_for @some_object, url: "some-url", html: {method: :get, data: {'controller' => 'filter'}}, remote: true do |f|
  = f.input :query, ..., input_html: {data: {action: "input->filter#update propertychange->filter#update"}}
  = f.button :submit

filter_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
  update() {
    this.element.submit();
  }
}

The update() method is called correctly when the input changes but it does submit the form with a regular HTTP request instead via XHR. It worked just fine with the previous jQuery-based approach. I tried it with jquery_ujs as well as rails-ujs.

Any ideas what might cause this?

Thanks!

initialize vs connect

How do the initialize() and connect() differs in use?

Unminified version

Please provide the unminified version: stimulus.umd.js and stimulus.umd.min.js.

Testing story?

Do you have any thoughts on testing Stimulus controllers? Do you tend to unit test them in part or whole? Or rely on integrated feature tests that incorporate JS?

Nested controller folders?

I didn't see anything in the documentation, so I'm curious how you would handle nested folders and how that gets written out in the data-controller values. I like the idea of using folders to group different types of controllers together (maybe pages, forms, components, etc.)

Integrating Stimulus with Ruby on Rails - Getting Started

A humble hello to whoever may be reading this. I can't tell you how excited I am for this framework. As an independent rails developer sprinkles of JS turn to spaghetti really quickly, this seems perfect.

My question:

Where does the Stimulus team recommend as best practice to put the JS controller files? For example, if I wanted to integrate a version of this walkthrough into an existing rails app.

I've spent the last hour + trying to integrate Stimulus into a demo rails 5 app and I can't seem to get things wired up. I get the initializing Content Script message listener in my console but I can't seem to make the controller actions fire. I think it's because I'm not putting these controllers in the right place?

Thanks so much any help is greatly appreciated.

Multiple events to the same action

I have an input text field, and I need to calculate a total when it is changed. I use the change and keyup events to do this. I couldn't find a way to bind multiple events to the same action.

If this indeed isn't possible, then I would suggest something like this:

<input type="text" data-action="(change,keyup)->controllerName#calculateTotal" />

I couldn't find anything on multiple different events on an element either? I would suggest something like this for it:

<input type="text" data-action-change="controllerName#calculateTotal" data-action-keyup="controllerName#keyUpPressed" />

Thank you for a great framework. This has really cleaned up my JavaScript.

Rails, Turbolinks, Stimulus and asset pipeline

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.

TypeScript Support

Since the app was written in TypeScript...are there plans to allow controllers to be written in TypeScript?

Glitch walkthrough example fails

Heads up: