Code Action: Add missing Stimulus Target to `static targets` array on Controller

[marcoroth]

We can provide a code action to fix the stimulus.controller.target.missing diagnostic.

Given this controller:

// app/javascript/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
}

And this HTML, you would get this diagnostic:

<button data-controller="hello" data-hello-target="output">
<!--                                               ^^^^^^
┌──────────────────────────────────────────────────────────────────────────┐
│ "output" isn't a valid Stimulus target on the "hello" controller.        │
│ Stimulus LSP (stimulus.controller.target.missing)                        │
├──────────────────────────────────────────────────────────────────────────┤
│  View Problem (⌥F8)   Quick-Fix... (⌘.)                                  │
└──────────────────────────────────────────────────────────────────────────┘
                        ┌──────────────────────────────────────────────────┐
                        │ Quick-Fix                                        │
                        ├──────────────────────────────────────────────────┤
                        │ Add "output" to `targets` on "hello" controller  │
                        └──────────────────────────────────────────────────┘

-->

Executing that action would update the controller accordingly and resolve the diagnostic:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
+ static targets = ["output"]
}

If there already was an existing target it would add it at the end:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
- static targets = ["input"]
+ static targets = ["input", "output"]
}