codesnips

turbo-streams

erb 
<!DOCTYPE html>
<html>
  <head>
    <title>Contacts</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Turbo Frames modal: load, submit, then close via stream

rails turbo hotwire
by codesnips 4 tabs
erb 
<div id="toasts" class="fixed right-4 top-4 z-50 space-y-2"></div>

Toast notifications delivered with Turbo Streams

rails hotwire turbo
by Henry Kim 2 tabs
erb 
<%# Append is also broadcast from the model; this response scrolls the author's view %>
<%= turbo_stream.append "messages" do %>
  <%= render partial: "messages/message", locals: { message: @message } %>
<% end %>

<turbo-stream action="scroll_to" target="<%= dom_id(@message) %>" behavior="smooth" block="end">

Scroll into view after append using a custom Turbo Stream action

rails hotwire turbo
by codesnips 4 tabs
ruby 
class SupportMailbox < ApplicationMailbox
  def process
    ticket = Ticket.find_or_create_by!(message_id: mail.message_id) do |t|
      t.subject = mail.subject
      t.from_email = mail.from&.first
      t.body = mail.decoded

Action Mailbox: broadcast incoming emails into a feed

rails hotwire turbo
by Henry Kim 3 tabs
erb 
<%= turbo_stream_from :comments %>

<section class="comments">
  <h2>Discussion</h2>

  <%= turbo_frame_tag "new_comment" do %>

Inline create form that prepends into a list with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
ruby 
class CommentsController < ApplicationController
  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.build(comment_params)
    @comment.author = current_user

Turbo Streams for real-time list updates

hotwire turbo turbo-streams
by Jordan Lee 2 tabs
ruby 
class SignupsController < ApplicationController
  def new
    @user = User.new
  end

  def create

Inline form validation feedback via Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
ruby 
class Comment < ApplicationRecord
  belongs_to :commentable, polymorphic: true
  belongs_to :author, class_name: "User"

  scope :visible, -> { where(deleted_at: nil).order(:created_at) }

Turbo Streams: partial replace with morphing (less jitter)

rails turbo hotwire
by codesnips 4 tabs
ruby 
class Comment < ApplicationRecord
  belongs_to :account
  belongs_to :author, class_name: "User"

  validates :body, presence: true

Per-account stream scoping to prevent “cross-tenant” updates

rails hotwire turbo-streams
by codesnips 4 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
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