Hotwire: best practices for stimulus

import { Controller } from "@hotwired/stimulus";import { useClickOutside } from "stimulus-use";/* * Usage * ===== * * add data-controller="toggle" to common ancestor * * Action (add this to your button): * data-action="toggle#toggle" * * Targets (add this to the item to be shown/hidden): * data-toggle-target="toggleable" data-css-class="class-to-toggle" * */export default class extends Controller {  static targets = ["toggleable"];  connect() {    // Any clicks outside the controllers element can     // be setup to either add a 'hidden' class or     // remove a 'open' class etc.    useClickOutside(this);  }  toggle(e) {    e.preventDefault();    this.toggleableTargets.forEach((target) => {      target.classList.toggle(target.dataset.cssClass);    });  }  clickOutside(event) {    if (this.data.get("clickOutside") === "add") {      this.toggleableTargets.forEach((target) => {        target.classList.add(target.dataset.cssClass);      });    } else if (this.data.get("clickOutside") === "remove") {      this.toggleableTargets.forEach((target) => {        target.classList.remove(target.dataset.cssClass);      });    }  }}

import { Controller } from "@hotwired/stimulus";import Rails from "@rails/ujs";/* * Usage * ===== * * add data-controller="auto-submit" to your <form> element * * Action (add this to a <select> field): * data-action="change->auto-submit#submit" * */export default class extends Controller {  submit() {    Rails.fire(this.element, "submit");  }}

import { Controller } from "@hotwired/stimulus";import { useMutation } from "stimulus-use";/* * Usage * ===== * * add data-controller="display-empty" to common ancestor * * Classes: * data-display-empty-hide-class="hidden" * * Targets: * data-display-empty-target="emptyMessage" * data-display-empty-target="list" * */export default class extends Controller {  static targets = ["list", "emptyMessage"];  static classes = ["hide"];  connect() {    useMutation(this, {      element: this.listTarget,      childList: true,    });  }  mutate(entries) {    for (const mutation of entries) {      if (mutation.type === "childList") {        if (this.listTarget.children.length > 0) {          // hide empty state          this.emptyMessageTarget.classList.add(this.hideClass);        } else {          // show empty state          this.emptyMessageTarget.classList.remove(this.hideClass);        }      }    }  }}

import { Controller } from "@hotwired/stimulus";/* * Usage * ===== * * add data-controller="flash" to flash container * p.s. you probably also want data-turbo-cache="false" * * Action (for close cross): * data-action="click->flash#dismiss" * */export default class extends Controller {  connect() {    setTimeout(() => {      this.hideAlert();    }, 3000);  }  dismiss(event) {    event.preventDefault();    event.stopPropagation();    this.hideAlert();  }  hideAlert() {    this.element.style.display = "none";  }}

import { Controller } from "@hotwired/stimulus";/* * Usage * ===== * * add the following to the hoverable area * data-controller="hovercard" * data-hovercard-url-value="some-url" # Also make sure to `render layout: false` * data-action="mouseenter->hovercard#show mouseleave->hovercard#hide" * * Targets (add to your hovercard that gets loaded in): * data-hovercard-target="card" * */export default class extends Controller {  static targets = ["card"];  static values = { url: String };  show() {    if (this.hasCardTarget) {      this.cardTarget.classList.remove("hidden");    } else {      fetch(this.urlValue)        .then((r) => r.text())        .then((html) => {          const fragment = document            .createRange()            .createContextualFragment(html);          this.element.appendChild(fragment);        });    }  }  hide() {    if (this.hasCardTarget) {      this.cardTarget.classList.add("hidden");    }  }  disconnect() {    if (this.hasCardTarget) {      this.cardTarget.remove();    }  }}

import { Controller } from "@hotwired/stimulus";/* * Usage * ===== * * add this to the messages form: * data-controller="message-composer" * * Action (add this to your snippets): * data-action="click->message-composer#snippet" data-html="content..." * */export default class extends Controller {  connect() {    this.editor = this.element.querySelector("trix-editor").editor;  }  snippet(event) {    this.editor.setSelectedRange([0, 0]);    this.editor.insertHTML(event.target.dataset.html);  }}

import { Controller } from "@hotwired/stimulus";import { Turbo } from "@hotwired/turbo-rails";/* * Usage * ===== * * add data-controller="navigation-select" to common ancestor * * Action: * data-action="change->navigation-select#change" * */export default class extends Controller {  change(event) {    const url = event.target.value;    Turbo.visit(url);  }}

import ApplicationController from "./application_controller";/* * Usage * ===== * * add data-controller="slugify" to common ancestor or form tag * * Action (add to the title input): * data-action="slugify#change" * * Target (add to the slug input): * data-slugify-target="slugField" * */export default class extends ApplicationController {  static targets = ["slugField"];  change(event) {    const { value } = event.target;    this.slugFieldTarget.value = value.toLowerCase().replace(/[^a-z0-9]/, "");  }}