Découverte de Stimulus.js

Stimulus est un framework JavaScript minimaliste qui complète le HTML plutôt que de le remplacer. Il est parfait pour les développeurs qui veulent ajouter des comportements interactifs sans passer à un framework complet comme React ou Vue.

Pourquoi Stimulus ?

Stimulus agit comme une colle entre HTML et JavaScript. Plutôt que d’avoir à écrire du JavaScript séparément et de sélectionner des éléments à la main, Stimulus vous permet d’associer vos scripts directement à vos éléments HTML via des attributs.

Exemple simple : Compteur

HTML

<div data-controller="counter">
  <button data-action="click->counter#decrement">-</button>
  <span data-counter-target="output">0</span>
  <button data-action="click->counter#increment">+</button>
</div>

JavaScript (controllers/counter_controller.js)

import { Controller } from "@hotwired/stimulus";

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

  connect() {
    this.count = 0;
    this.update();
  }

  increment() {
    this.count++;
    this.update();
  }

  decrement() {
    this.count--;
    this.update();
  }

  update() {
    this.outputTarget.textContent = this.count;
  }
}

Résultat visuel

Comment l’intégrer ?

Avec npm

npm install @hotwired/stimulus

Puis dans votre fichier d’entrée (ex. app.js dans Symfony avec Webpack Encore) :

import { Application } from "@hotwired/stimulus";
import CounterController from "./controllers/counter_controller";

window.Stimulus = Application.start();
Stimulus.register("counter", CounterController);

Exemple plus complexe : Affichage conditionnel

Supposons que vous vouliez afficher un bloc uniquement si une case est cochée :

HTML

<div data-controller="toggle">
  <label>
    <input type="checkbox" data-action="change->toggle#toggle">
    Afficher le contenu
  </label>
  <div data-toggle-target="content" hidden>
    Ce contenu est affiché quand la case est cochée.
  </div>
</div>

JavaScript (controllers/toggle_controller.js)

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["content"];

  toggle(event) {
    this.contentTarget.hidden = !event.target.checked;
  }
}

Conclusion

Stimulus est idéal pour les développeurs qui cherchent à ajouter des comportements dynamiques avec peu de JavaScript et une structure claire. Il se combine très bien avec les technologies comme Symfony, Rails, ou même du HTML statique.

Pour en savoir plus : https://stimulus.hotwired.dev

N’hésitez pas à expérimenter en ajoutant Stimulus à vos pages pour leur donner vie sans alourdir votre code.