Turbo Frame demo code

app/assets/stylesheets/application.css

@@ -13,3 +13,12 @@
  *= require_tree .
  *= require_self
  */
+
+li {
+  margin: 0.5rem 0;
+}
+
+.frame {
+  border: solid 1px black;
+  padding: 1rem;
+}

app/controllers/home_controller.rb

@@ -0,0 +1,9 @@
+class HomeController < ApplicationController
+  before_action :set_frame
+
+  protected
+
+  def set_frame
+    @frame = request.headers['HTTP_TURBO_FRAME']
+  end
+end

app/helpers/home_helper.rb

@@ -0,0 +1,2 @@
+module HomeHelper
+end

app/javascript/controllers/tester_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="tester"
+export default class extends Controller {
+  static values = {
+    frame: String
+  };
+
+  connect() {
+    console.log("Connected", this.element);
+  }
+
+  open(e) {
+    e.preventDefault();
+
+    const a = e.currentTarget;
+    if (!a.href) return;
+    const frame = document.getElementById(this.frameValue);
+    console.log("YOO HOO", frame, e.currentTarget);
+    if (!frame) return;
+
+    if (frame.src == a.href) {
+      frame.reload();
+    } else {
+      frame.src = a.href;
+    }
+  }
+}

app/views/home/index.html.erb

@@ -0,0 +1,33 @@
+<h1>Hello there!</h1>
+
+<div class="frame">
+  <%= turbo_frame_tag 'testing' do %>
+    <p>I am the index page. It's <%= Time.now %> now.</p>
+  <% end %>
+</div>
+
+<div data-controller="tester" data-tester-frame-value="testing">
+  <ul>
+    <li>
+      Clicking the link below sets the <code>src</code> property of the
+      Turbo Frame with ID <code>testing</code> to <code>"/other"</code>.
+    </li>
+    <li>
+      This should make a request to <code>/other</code> with the
+      header <code>Turbo-Frame: testing</code>.
+    </li>
+    <li>
+      The other page contains a Turbo Frame, too. If the <code>Turbo-Frame</code>
+      header is set, it will be used for its ID. Otherwise it's set to something
+      irrelevant.
+    </li>
+    <li>
+      So if the header was properly set for the request, we'll see the frame update,
+      otherwise we'll get a <strong>Content missing</strong> message.
+    </li>
+  </ul>
+
+  <p>
+    <a href="/other" data-action="tester#open">Go load that frame</a>
+  </p>
+</div>

app/views/home/other.html.erb

@@ -0,0 +1,8 @@
+<h1>Other</h1>
+
+<div class="frame">
+  <%= turbo_frame_tag(@frame || 'something') do %>
+    <p>I am the other page at <%= Time.now %>.</p>
+    <p>Turbo Frame header was <code><%= @frame.inspect %></code></p>
+  <% end %>
+</div>

config/routes.rb

@@ -5,6 +5,8 @@
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", as: :rails_health_check
 
+  get "other" => "home#other"
+
   # Defines the root path route ("/")
-  # root "posts#index"
+  root "home#index"
 end

test/controllers/home_controller_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class HomeControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end