hotwire

ruby
class ProductsController < ApplicationController
  PER_PAGE = 24

  def index
    @page = [params[:page].to_i, 1].max
    @sort = %w[name price recent].include?(params[:sort]) ? params[:sort] : "recent"

Use data-turbo-action to control history (advance vs replace)

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

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

  async copy() {

Stimulus: copy-to-clipboard with fallback + selection

rails stimulus hotwire
by Sarah Chen 2 tabs
javascript
import { StreamActions } from "@hotwired/turbo"

StreamActions.highlight = function () {
  const className = this.getAttribute("data-highlight-class") || "flash-highlight"
  const duration = parseInt(this.getAttribute("data-highlight-duration"), 10) || 1500

Custom turbo_stream action tag: highlight an updated element

rails hotwire turbo
by codesnips 4 tabs
ruby
class Board < ApplicationRecord
  has_many :cards, dependent: :destroy
  belongs_to :owner, class_name: "User"

  validates :name, presence: true
end

Morphing page refreshes with turbo_refreshes_with

rails hotwire turbo
by codesnips 3 tabs
erb
<%= turbo_frame_tag dom_id(contact) do %>
  <tr class="contact-row">
    <td><%= contact.name %></td>
    <td><%= contact.email %></td>
    <td><%= contact.role.titleize %></td>
    <td class="actions">

Turbo Frames: Inline edit that swaps form <-> row

rails turbo hotwire
by codesnips 3 tabs
ruby
class Import < ApplicationRecord
  include ActionView::RecordIdentifier

  enum status: { pending: 0, processing: 1, completed: 2, failed: 3 }

  has_one_attached :file

Broadcast job progress updates to a Turbo Frame

rails hotwire turbo-streams
by codesnips 4 tabs
ruby
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user

ActionCable channel that streams Turbo updates safely

rails hotwire turbo
by codesnips 4 tabs
ruby
class ActivityPanelController < ApplicationController
  def show
    @project = Project.find(params[:project_id])
    @events = @project.events.order(created_at: :desc).limit(50)

    latest = @events.maximum(:updated_at)

ETag + last_modified for expensive Turbo Frame endpoints

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: 'User'

  # Automatically broadcast changes to all subscribers of this post
  after_create_commit -> { broadcast_append_to post, target: "comments" }

Turbo Stream broadcasts for real-time collaboration

hotwire turbo-streams actioncable
by Jordan Lee 3 tabs
ruby
class DashboardWidget < ApplicationRecord
  broadcasts_refreshes
end

Broadcasts refreshes for complex pages (less target wiring)

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Request spec: Turbo Stream template is rendered

rails hotwire turbo
by codesnips 3 tabs
ruby
Rails.application.routes.draw do
  concern :tabs do
    get :profile, on: :collection
    get :billing, on: :collection
    get :security, on: :collection
  end

Tabs UI using Turbo Frames (no client router)

rails hotwire turbo
by codesnips 4 tabs