erb

ruby
require 'application_system_test_case'

class TasksTest < ApplicationSystemTestCase
  test 'deleting a task removes it from the list' do
    task = tasks(:one)

System test: asserting Turbo Stream responses

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire
by codesnips 4 tabs
erb
<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus
by Henry Kim 2 tabs
ruby
class SignupForm
  include ActiveModel::Model
  include ActiveModel::Attributes

  attribute :account_name, :string
  attribute :email, :string

Shallow Controller, Deep Params: Form Object Pattern

rails activemodel form-object
by codesnips 3 tabs
ruby
class TasksController < ApplicationController
  def destroy
    @task = Task.find(params[:id])
    @task.destroy!

    respond_to do |format|

Remove deleted items instantly with turbo_stream.remove

rails hotwire turbo
by Henry Kim 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"

export default class extends Controller {
  connect() {
    // Global shortcuts

Keyboard shortcuts with Stimulus and Mousetrap

stimulus javascript ux
by Jordan Lee 2 tabs
erb
<%= form_with url: projects_path, method: :get,
              data: { controller: 'debounced-submit', turbo_frame: 'results' } do |f| %>
  <%= f.search_field :q, value: params[:q], placeholder: 'Search…', class: 'w-full rounded border p-2' %>
<% end %>

<%= turbo_frame_tag 'results' do %>

Debounced live search with Stimulus + Turbo Streams

rails hotwire stimulus
by Henry Kim 2 tabs
ruby
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_member

    def connect
      self.current_member = env['warden']&.user || reject_unauthorized_connection

Presence indicator with ActionCable + Turbo Streams

rails hotwire turbo
by Henry Kim 3 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :post, touch: true
  belongs_to :author, class_name: "User"

  validates :body, presence: true, length: { maximum: 10_000 }

Granular Cache Invalidation with touch: true

rails caching activerecord
by codesnips 4 tabs
erb
<%= form_with model: @project, data: { controller: 'disable-submit' } do |f| %>
  <%= f.text_field :name, class: 'rounded border p-2' %>
  <%= f.submit 'Save', data: { disable_submit_target: 'button' }, class: 'rounded bg-blue-600 px-3 py-2 text-white' %>
<% end %>

Disable submit button while Turbo form is submitting

rails hotwire stimulus
by Henry Kim 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal", "message", "confirm", "cancel"]
  static values = {
    message: String

Turbo confirmation dialogs with custom modal

hotwire turbo stimulus
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    url: String,
    delay: { type: Number, default: 800 },

Stimulus: autosave draft with Turbo-friendly requests

rails stimulus hotwire
by codesnips 3 tabs