The Stimulus 2.0 Tutorial | Drifting Ruby

# Terminal
rails webpacker:set up:stimulus
yarn set up
bin/webpack-dev-server

# bundle.json
"stimulus": "^2.0.0",

# welcome/index.html.erb
<div data-controller="good day" data-hello-number-value=4>
  <%# <h1 data-target="good day.output"></h1> %>
  <h1 data-hello-target="output"></h1>
  <button data-action='good day#clicked'>CLICK ME</button>
</div>


<div data-controller="text-input">
  <enter kind="textual content" data-action="text-input#modified" data-text-input-target="enter">
  <h1 data-text-input-target="output"></h1>
</div>


<div data-controller="styling"
     data-styling-primary-class="btn-primary">
  <button class="btn" data-styling-target="button" data-action='styling#clicked'>
    CLICK ME
  </button>
</div>


<div data-controller="styling"
     data-styling-primary-class="btn-primary">
  <button class="btn" data-styling-target="button" data-action='styling#clicked'>
    CLICK ME
  </button>
  <button data-action="styling#clicked:as soon as">CLICK ONCE</button>
</div>

# javascript/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "output" ]
  static values = { quantity: Quantity }
  join() {
    this.numberValueChanged()
  }

  clicked() {
    this.numberValue++
  }

  numberValueChanged() {
    this.outputTarget.textContent = this.numberValue
  }
}

# javascript/controllers/styling_controller.js
import { Controller} from "stimulus"

export default class extends Controller {
  static targets = ["button"]
  static lessons = ["primary"]

  join() {
    this.buttonTarget.classList.add(this.primaryClass)
  }

  clicked() {
    this.buttonTarget.classList.toggle(this.primaryClass)
  }
}

# javascript/controllers/text_input_controller.js
import { Controller} from "stimulus"

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

  join() {}

  modified() {
    this.outputTarget.textContent = this.inputTarget.worth
  }
}