Stimulus

Complete a controller identifier

A controller identifier in a data-controller attribute refers to the corresponding JavaScript controller. RubyMine resolves this connection and suggests the controllers available in the project.

1. Open app/views/messages/index.html.erb and replace its contents with the following code:

   <h1>Clipboard</h1> <div data-controller=""> <p>Hello from Stimulus</p> <button type="button">Copy</button> <span></span> </div>

2. Place the caret between the quotation marks in the data-controller attribute. RubyMine automatically displays the available Stimulus controller identifiers. If the list does not appear, press Ctrl+Space.

   

3. Select clipboard. The opening tag should now look as follows:

   <div data-controller="clipboard">

Declare and connect targets and an action

A Stimulus controller declares targets and action methods in JavaScript. RubyMine uses these declarations to complete the corresponding data attributes in an ERB template.

In this procedure, you will declare two targets and one action in the clipboard controller. You will then use completion to connect the HTML elements in app/views/messages/index.html.erb to those declarations.

1. Open app/javascript/controllers/clipboard_controller.js and replace the generated controller with the following code:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] copy() { } }

   The controller declares the source and status targets and exposes the copy action. RubyMine uses these declarations to provide completion in HTML and ERB templates.

2. Return to app/views/messages/index.html.erb and start typing data- in the opening p tag.

3. Select data-clipboard-target, suggested by RubyMine based on the controller connected to the enclosing div.

   

4. Invoke completion inside the attribute value. RubyMine suggests the names from the controller's static targets array.

   Select source.

   

5. Repeat the step above to add the same attribute to the span element and select status as its value. The line should look like this:

   <span data-clipboard-target="status"></span>

6. In the opening button tag, add a data-action attribute and type click->clipboard# to invoke code completion.

   RubyMine suggests the action methods declared in the clipboard controller.

   Select copy.

   

7. The complete app/views/messages/index.html.erb file should now look as follows:

   <h1>Clipboard</h1> <div data-controller="clipboard"> <p data-clipboard-target="source">Hello from Stimulus</p> <button type="button" data-action="click->clipboard#copy">Copy</button> <span data-clipboard-target="status"></span> </div>

Complete target properties

For every name in the static targets declaration, Stimulus provides corresponding JavaScript properties. RubyMine adds these derived properties to completion inside the controller.

In this procedure, you will implement the copy action. It uses the browser Clipboard API to copy text from the source target and then displays a confirmation in the status target.

1. Open app/javascript/controllers/clipboard_controller.js and change the empty copy method to an asynchronous method:

   async copy() { }

2. Inside the method, enter:

   await navigator.clipboard.writeText(this.s

   At this point, the completion list includes the sourceTarget and statusTarget properties derived from the static targets declaration.

   

3. Select sourceTarget and complete the expression with .textContent:

   await navigator.clipboard.writeText(this.sourceTarget.textContent)

4. On the next line, enter this., select statusTarget from the invoked code completion, and assign the confirmation text to its textContent property. This property is derived from the status name in static targets.

   The complete controller should now look as follows:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] async copy() { await navigator.clipboard.writeText(this.sourceTarget.textContent) this.statusTarget.textContent = "Copied" } }

Declare and use a value and a CSS class

From static values and static classes declarations, RubyMine derives the corresponding data attributes for ERB templates and properties for JavaScript code.

1. Open app/javascript/controllers/clipboard_controller.js and add the values and classes declarations after the existing targets declaration:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] static values = { message: String } static classes = ["success"] async copy() { await navigator.clipboard.writeText(this.sourceTarget.textContent) this.statusTarget.textContent = "Copied" } }

   The controller now declares a value named message and a logical CSS class named success. These names provide the source declarations for completion in the next steps.

2. Open app/assets/stylesheets/application.css and add the CSS class that will indicate a successful copy operation:

   .copied { color: green; }

3. Return to app/views/messages/index.html.erb and in the opening div tag that contains data-controller="clipboard", start typing data-clipboard-.

   RubyMine suggests attributes derived from the controller declarations, including data-clipboard-message-value and data-clipboard-success-class.

   

4. Select both attributes and specify their values. The complete view should now look as follows:

   <h1>Clipboard</h1> <div data-controller="clipboard" data-clipboard-message-value="Copied" data-clipboard-success-class="copied"> <p data-clipboard-target="source">Hello from Stimulus</p> <button type="button" data-action="click->clipboard#copy">Copy</button> <span data-clipboard-target="status"></span> </div>

   The two attributes connect the message and success declarations to the values Copied and copied in this template.

5. Return to app/javascript/controllers/clipboard_controller.js and replace the hardcoded "Copied" string with this.

   From the invoked code completion list, select messageValue, which RubyMine derives from the message entry in static values.

   

6. On the next line, enter this.statusTarget.classList.add(this. to invoke code completion again.

   Select successClass, which RubyMine derives from the success entry in static classes:

   this.statusTarget.classList.add(this.successClass)

   The first completed property supplies the confirmation text. The second supplies the CSS class applied to the status element.

   The complete controller should now look as follows:

   import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["source", "status"] static values = { message: String } static classes = ["success"] async copy() { await navigator.clipboard.writeText(this.sourceTarget.textContent) this.statusTarget.textContent = this.messageValue this.statusTarget.classList.add(this.successClass) } }

7. Reload /messages/index and click Copy. The page displays the value from data-clipboard-message-value and applies the CSS class specified by data-clipboard-success-class.

Navigate to Stimulus declarations

RubyMine resolves target names and action descriptors in ERB templates to their declarations in Stimulus controllers.

In app/views/messages/index.html.erb, do one of the following:

• Place the caret at source or status in a data-clipboard-target attribute and press Ctrl+B. RubyMine navigates to the corresponding name in the static targets declaration.

• Place the caret in the clipboard#copy action descriptor and press Ctrl+B. RubyMine opens app/javascript/controllers/clipboard_controller.js and navigates to the copy method.

Rename a Stimulus action

Because action descriptors resolve to controller methods, renaming a method updates its usages in templates. You do not need to find and edit the descriptors manually.

1. In app/javascript/controllers/clipboard_controller.js, place the caret at the copy method and press Shift+F6.

2. In the Rename dialog, enter copyText and click Refactor.

   

3. In the Refactoring Preview tool window, review the code that this renaming will update in the affected app/views/messages/index.html.erb file and click Refactor.

   

   RubyMine renames the method and updates the descriptor in app/views/messages/index.html.erb from clipboard#copy to clipboard#copyText.