- fix hotwire setup

palkan · palkan · commit 731bbd04d162 · 2025-06-20T15:58:01.000-07:00
diff --git a/src/content/tutorial/15-css-and-js/1-propshaft/content.md b/src/content/tutorial/15-css-and-js/1-propshaft/content.md
@@ -70,7 +70,7 @@ section.product img {
 
 Then we'll update `app/views/products/show.html.erb` to use these new styles.
 
-```erb#1,3,6,18-19
+```erb {1,3,6,18-19}
 <p><%= link_to "Back", products_path %></p>
 
 <section class="product">
diff --git a/src/content/tutorial/15-css-and-js/2-importmap/_files/.tk-config.json b/src/content/tutorial/15-css-and-js/2-importmap/_files/.tk-config.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../../templates/stock-notifications"
+}
diff --git a/src/content/tutorial/15-css-and-js/2-importmap/_files/workspace/.keep b/src/content/tutorial/15-css-and-js/2-importmap/_files/workspace/.keep
diff --git a/src/content/tutorial/15-css-and-js/2-importmap/_files/workspace/store/app/assets/stylesheets/application.css b/src/content/tutorial/15-css-and-js/2-importmap/_files/workspace/store/app/assets/stylesheets/application.css
@@ -0,0 +1,39 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1rem;
+}
+
+nav {
+  justify-content: flex-end;
+  display: flex;
+  font-size: 0.875em;
+  gap: 0.5rem;
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+nav a {
+  display: inline-block;
+}
+
+main {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.notice {
+  color: green;
+}
+
+section.product {
+  display: flex;
+  gap: 1rem;
+  flex-direction: row;
+}
+
+section.product img {
+  border-radius: 8px;
+  flex-basis: 50%;
+  max-width: 50%;
+}
diff --git a/src/content/tutorial/15-css-and-js/2-importmap/_files/workspace/store/app/views/products/show.html.erb b/src/content/tutorial/15-css-and-js/2-importmap/_files/workspace/store/app/views/products/show.html.erb
@@ -0,0 +1,19 @@
+<p><%= link_to "Back", products_path %></p>
+
+<section class="product">
+  <%= image_tag @product.featured_image if @product.featured_image.attached? %>
+
+  <section class="product-info">
+    <% cache @product do %>
+      <h1><%= @product.name %></h1>
+      <%= @product.description %>
+    <% end %>
+
+    <%= render "inventory", product: @product %>
+
+    <% if authenticated? %>
+      <%= link_to "Edit", edit_product_path(@product) %>
+      <%= button_to "Delete", @product, method: :delete, data: { turbo_confirm: "Are you sure?" } %>
+    <% end %>
+  </section>
+</section>
diff --git a/src/content/tutorial/15-css-and-js/2-importmap/content.md b/src/content/tutorial/15-css-and-js/2-importmap/content.md
@@ -0,0 +1,44 @@
+---
+type: lesson
+title: Import Maps
+focus: /workspace/store/config/importmap.rb
+previews:
+  - 3000
+custom:
+  shell:
+    workdir: "/workspace/store"
+---
+
+### Import Maps
+
+Rails uses import maps for JavaScript by default. This allows you to write
+modern JavaScript modules with no build steps.
+
+You can find the JavaScript pins in `config/importmap.rb`. This file maps the
+JavaScript package names with the source file which is used to generate the
+importmap tag in the browser.
+
+```ruby
+# Pin npm packages by running ./bin/importmap
+
+pin "application"
+pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin_all_from "app/javascript/controllers", under: "controllers"
+pin "trix"
+pin "@rails/actiontext", to: "actiontext.esm.js"
+```
+
+:::tip
+Each pin maps a JavaScript package name (e.g., `"@hotwired/turbo-rails"`)
+to a specific file or URL (e.g., `"turbo.min.js"`). `pin_all_from` maps all
+files in a directory (e.g., `app/javascript/controllers`) to a namespace (e.g.,
+`"controllers"`).
+:::
+
+Import maps keep the setup clean and minimal, while still supporting modern
+JavaScript features.
+
+What are these JavaScript files already in our import map? They are a frontend
+framework called Hotwire that Rails uses by default.
diff --git a/src/content/tutorial/15-css-and-js/3-hotwire/_files/.tk-config.json b/src/content/tutorial/15-css-and-js/3-hotwire/_files/.tk-config.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../../templates/stock-notifications"
+}
diff --git a/src/content/tutorial/15-css-and-js/3-hotwire/_files/workspace/.keep b/src/content/tutorial/15-css-and-js/3-hotwire/_files/workspace/.keep
diff --git a/src/content/tutorial/15-css-and-js/3-hotwire/_files/workspace/store/app/assets/stylesheets/application.css b/src/content/tutorial/15-css-and-js/3-hotwire/_files/workspace/store/app/assets/stylesheets/application.css
@@ -0,0 +1,39 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1rem;
+}
+
+nav {
+  justify-content: flex-end;
+  display: flex;
+  font-size: 0.875em;
+  gap: 0.5rem;
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+nav a {
+  display: inline-block;
+}
+
+main {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.notice {
+  color: green;
+}
+
+section.product {
+  display: flex;
+  gap: 1rem;
+  flex-direction: row;
+}
+
+section.product img {
+  border-radius: 8px;
+  flex-basis: 50%;
+  max-width: 50%;
+}
diff --git a/src/content/tutorial/15-css-and-js/3-hotwire/_files/workspace/store/app/views/products/show.html.erb b/src/content/tutorial/15-css-and-js/3-hotwire/_files/workspace/store/app/views/products/show.html.erb
@@ -0,0 +1,19 @@
+<p><%= link_to "Back", products_path %></p>
+
+<section class="product">
+  <%= image_tag @product.featured_image if @product.featured_image.attached? %>
+
+  <section class="product-info">
+    <% cache @product do %>
+      <h1><%= @product.name %></h1>
+      <%= @product.description %>
+    <% end %>
+
+    <%= render "inventory", product: @product %>
+
+    <% if authenticated? %>
+      <%= link_to "Edit", edit_product_path(@product) %>
+      <%= button_to "Delete", @product, method: :delete, data: { turbo_confirm: "Are you sure?" } %>
+    <% end %>
+  </section>
+</section>
diff --git a/src/content/tutorial/15-css-and-js/3-hotwire/content.md b/src/content/tutorial/15-css-and-js/3-hotwire/content.md
@@ -0,0 +1,31 @@
+---
+type: lesson
+title: Hotwire
+previews:
+  - 3000
+custom:
+  shell:
+    workdir: "/workspace/store"
+---
+
+### Hotwire
+
+Hotwire is a JavaScript framework designed to take full advantage of server-side
+generated HTML. It is comprised of 3 core components:
+
+1. [**Turbo**](https://turbo.hotwired.dev/) handles navigation, form
+   submissions, page components, and updates without writing any custom
+   JavaScript.
+2. [**Stimulus**](https://stimulus.hotwired.dev/) provides a framework for when
+   you need custom JavaScript to add functionality to the page.
+3. [**Native**](https://native.hotwired.dev/) allows you to make hybrid mobile
+   apps by embedding your web app and progressively enhancing it with native
+   mobile features.
+
+We haven't written any JavaScript yet, but we have been using Hotwire on the
+frontend. For instance, the form you created to add and edit a product was
+powered by Turbo.
+
+Learn more in the [Asset Pipeline](https://guides.rubyonrails.org/asset_pipeline.html) and
+[Working with JavaScript in Rails](https://guides.rubyonrails.org/working_with_javascript_in_rails.html)
+guides.
diff --git a/src/content/tutorial/2-rails-new/3-directory-structure/content.md b/src/content/tutorial/2-rails-new/3-directory-structure/content.md
@@ -1,6 +1,6 @@
 ---
 type: lesson
-title: Creating your first Rails app
+title: Directory Structure
 editor: false
 custom:
   shell:
diff --git a/src/templates/active-storage/workspace/store/app/javascript/application.js b/src/templates/active-storage/workspace/store/app/javascript/application.js
@@ -1,4 +1,6 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 
+import "@hotwired/turbo-rails"
+import "controllers"
 import "trix"
 import "@rails/actiontext"
diff --git a/src/templates/active-storage/workspace/store/config/importmap.rb b/src/templates/active-storage/workspace/store/config/importmap.rb
@@ -1,5 +1,12 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application"
+
+pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+
+pin_all_from "app/javascript/controllers", under: "controllers"
+
 pin "trix"
 pin "@rails/actiontext", to: "actiontext.esm.js"
diff --git a/src/templates/active-storage/workspace/store/test/fixtures/action_text/rich_texts.yml b/src/templates/active-storage/workspace/store/test/fixtures/action_text/rich_texts.yml
diff --git a/src/templates/rails-new/workspace/store/app/javascript/application.js b/src/templates/rails-new/workspace/store/app/javascript/application.js
@@ -1 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+
+import "@hotwired/turbo-rails"
+import "controllers"
diff --git a/src/templates/rails-new/workspace/store/app/javascript/controllers/application.js b/src/templates/rails-new/workspace/store/app/javascript/controllers/application.js
@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }
diff --git a/src/templates/rails-new/workspace/store/app/javascript/controllers/index.js b/src/templates/rails-new/workspace/store/app/javascript/controllers/index.js
@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
diff --git a/src/templates/rails-new/workspace/store/bin/importmap b/src/templates/rails-new/workspace/store/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/src/templates/rails-new/workspace/store/config/importmap.rb b/src/templates/rails-new/workspace/store/config/importmap.rb
@@ -1,3 +1,9 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application"
+
+pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+
+pin_all_from "app/javascript/controllers", under: "controllers"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": "../../../../../templates/stock-notifications"`
	`3`	`+}`