Code Action: Implement missing Stimulus Value on Controller

[marcoroth]

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

Given this controller:

// app/javascript/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    open: Boolean
  }
}

And this HTML, you would get this diagnostic:

<button data-controller="hello" data-hello-text-value="Hello World">
<!--                                       ^^^^
┌────────────────────────────────────────────────────────────────────────────────────────────┐
│ "text" isn't a valid Stimulus Value on the "hello" controller. Did you mean "open"?        │
│ Stimulus LSP (stimulus.controller.value.missing)                                           │
├────────────────────────────────────────────────────────────────────────────────────────────┤
│  View Problem (⌥F8)   Quick-Fix... (⌘.)                                                    │
└────────────────────────────────────────────────────────────────────────────────────────────┘
                        ┌────────────────────────────────────────────────────────────────┐
                        │ Quick-Fix                                                      │
                        ├────────────────────────────────────────────────────────────────┤
                        │ Add "text" value with type "String" to the "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 values = {
+   text: String,
  }
}

If there's already another value defined:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
-   open: Boolean
+   open: Boolean,
+   text: String,
  }
}

If the name contains dashed, like in the attribute data-hello-camel-cased-value="true", it would add the camelCased value key with the type Boolean:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
+   camelCased: Boolean,
  }
}