marcoroth/stimulus-lsp

Code Action: Add missing Stimulus CSS Class to `static classes` array on Controller

Opened this issue · 0 comments

This depends on #165

Given this controller:

// app/javascript/controllers/search_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static classes = ["loaded"]
}

and this HTML, it givens you the following diagnostic. We can implement a Code-Action to add the missing Stimulus CSS Class to the controller:

<form data-controller="search" data-search-loading-class="search--busy"></form>
<!--                                       ^^^^^^^
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ "loading" isn't a valid Stimulus CSS Class on the "search" controller. Did you mean "loaded"?  │
│ Stimulus LSP (stimulus.controller.class.missing)                                               │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│  View Problem (⌥F8)   Quick-Fix... (⌘.)                                                        │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
                        ┌────────────────────────────────────────────────────────────────┐
                        │ Quick-Fix                                                      │
                        ├────────────────────────────────────────────────────────────────┤
                        │ Add "loading" Stimulus CSS class to the "search" controller.   │
                        └────────────────────────────────────────────────────────────────┘

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

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
- static classes = ["loaded"]
+ static classes = ["loaded", "loading"]
}