CodeSnips

ruby

class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = current_user.likes.create!(post: @post)
    respond(liked: true)

Turbo Streams: swap a button state and counter in one response

rails hotwire turbo

by codesnips 4 tabs

javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field", "status"]
  static values = {
    key: String,

Stimulus controller for autosaving form drafts

stimulus forms ux

by Jordan Lee 2 tabs

erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Disable Turbo Drive on external links

rails hotwire turbo

by codesnips 3 tabs

javascript

import { Turbo } from "@hotwired/turbo-rails"

Turbo.StreamActions.redirect = function () {
  const url = this.getAttribute("url")
  if (!url) return

Turbo Streams: server-driven redirect (Turbo Native friendly)

rails hotwire turbo-streams

by codesnips 4 tabs

erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Importmap setup for Stimulus controllers (Rails 7 style)

rails hotwire stimulus

by codesnips 4 tabs

erb

<div class="bookmarks">
  <h1>Saved Bookmarks</h1>

  <table>
    <tbody id="bookmarks">
      <%= render partial: "bookmark", collection: @bookmarks %>

Link that submits DELETE with Turbo (data-turbo-method)

rails hotwire turbo

by codesnips 4 tabs

javascript

let installed = false;

function notify(message, level = "error") {
  document.dispatchEvent(
    new CustomEvent("flash:show", { detail: { message, level } })
  );

Turbo Drive lifecycle: attach global error handler

rails turbo hotwire

by codesnips 3 tabs

javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["wrapper", "template", "anchor"]

  add(event) {

Stimulus: nested fields add/remove without re-rendering

rails stimulus hotwire

by codesnips 4 tabs

erb

<%# locals: item %>
<button
  type="button"
  class="toggle-btn"
  data-controller="toggle"
  data-action="click->toggle#toggle"

Optimistic toggle button with Stimulus “revert on failure”

rails hotwire stimulus

by codesnips 3 tabs

ruby

class Task < ApplicationRecord
  POSITION_GAP = 1024

  belongs_to :board

  scope :ordered, -> { order(:position) }

Reorder a list server-side and reflect instantly with Turbo Streams

rails hotwire turbo

by codesnips 4 tabs

javascript

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

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

  connect() {

Autofocus first input when a Turbo modal opens (Stimulus)

rails hotwire stimulus

by codesnips 3 tabs

ruby

module FlashHelper
  FLASH_CLASSES = {
    "notice" => "flash--success",
    "alert"  => "flash--error",
    "error"  => "flash--error"
  }.freeze

Turbo Stream flash messages without custom JS

rails hotwire turbo

by codesnips 4 tabs