codesnips

erb

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

export default class extends Controller {
  static targets = ["input", "counter"]
  static values = {
    max: { type: Number, default: 280 }

Stimulus controller for dynamic form interactions

stimulus javascript hotwire
by Jordan Lee 2 tabs
erb 
<div class="search-page">
  <div class="search-header mb-6">
    <h1 class="text-2xl font-bold mb-4">Search Posts</h1>

    <%= form_with url: posts_path,
        method: :get,

Live search with Turbo Frames and debouncing

hotwire turbo stimulus
by Jordan Lee 3 tabs
ruby 
class PostsController < ApplicationController
  def create
    @post = current_member.posts.build(post_params)

    if @post.save
      redirect_to @post, status: :see_other

Inline form validation feedback via Turbo Streams

rails hotwire turbo
by Henry Kim 2 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
erb 
<%= turbo_stream_from [Current.account, :notifications] %>
<div id="notifications"></div>

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

rails hotwire turbo
by Henry Kim 2 tabs
erb 
<%= link_to 'Sort: newest', projects_path(sort: 'new'),
      data: { turbo_action: 'replace' },
      class: 'text-sm text-gray-700 hover:underline' %>

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

rails hotwire turbo
by Henry Kim 2 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
erb 
<turbo-stream action="highlight" target="<%= dom_id(@project) %>">
  <template>
    <%= render @project %>
  </template>
</turbo-stream>

Custom turbo_stream action tag: highlight an updated element

rails hotwire turbo
by Henry Kim 3 tabs
erb 
<head>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
</head>

Morphing page refreshes with turbo_refreshes_with

rails hotwire turbo
by Henry Kim 2 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 ExportJob < ApplicationJob
  def perform(export_id)
    export = Export.find(export_id)

    export.update!(status: :processing, percent: 0)
    broadcast(export)

Broadcast job progress updates to a Turbo Frame

rails hotwire turbo
by Henry Kim 2 tabs
erb 
<%= turbo_stream_from [Current.account, :events] %>

ActionCable channel that streams Turbo updates safely

rails hotwire turbo
by Henry Kim 2 tabs