Template: configure Stimulus and Turbo

Author: mockdeep

Gemfile

@@ -22,8 +22,11 @@ gem "propshaft"
 gem "puma", "~> 7.0"
 gem "rack-ssl"
 gem "sass"
+gem "stimulus-rails"
 gem "stripe"
+gem "strong_migrations"
 gem "thread"
+gem "turbo-rails"
 gem "will_paginate"
 
 group :development do
@@ -39,10 +42,12 @@ group :development do
 end
 
 group :development, :test do
+  gem "bundler-audit", require: false
   gem "capybara"
   gem "coveralls_reborn", require: false
   gem "debug"
   gem "factory_bot"
+  gem "factory_bot_rails", require: false
   gem "pry-byebug"
   gem "rspec"
   gem "rspec-rails"

Gemfile.lock

@@ -100,6 +100,9 @@ GEM
     brakeman (8.0.2)
       racc
     builder (3.3.0)
+    bundler-audit (0.9.3)
+      bundler (>= 1.2.0)
+      thor (~> 1.0)
     byebug (13.0.0)
       reline (>= 0.6.0)
     capybara (3.40.0)
@@ -146,6 +149,9 @@ GEM
       tzinfo
     factory_bot (6.5.6)
       activesupport (>= 6.1.0)
+    factory_bot_rails (6.5.1)
+      factory_bot (~> 6.5)
+      railties (>= 6.1.0)
     feedbag (1.0.2)
       addressable (~> 2.8)
       nokogiri (~> 1.8, >= 1.8.2)
@@ -381,8 +387,12 @@ GEM
       simplecov_json_formatter (~> 0.1)
     simplecov-html (0.13.2)
     simplecov_json_formatter (0.1.4)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     stringio (3.2.0)
     stripe (18.3.1)
+    strong_migrations (2.5.2)
+      activerecord (>= 7.1)
     sync (0.5.0)
     term-ansicolor (1.11.3)
       tins (~> 1)
@@ -396,6 +406,9 @@ GEM
       readline
       sync
     tsort (0.2.0)
+    turbo-rails (2.0.20)
+      actionpack (>= 7.1.0)
+      railties (>= 7.1.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (3.2.0)
@@ -440,11 +453,13 @@ DEPENDENCIES
   bcrypt
   bootsnap
   brakeman
+  bundler-audit
   capybara
   coveralls_reborn
   debug
   dotenv-rails
   factory_bot
+  factory_bot_rails
   feedbag
   feedjira
   good_job (~> 4.13.0)
@@ -470,8 +485,11 @@ DEPENDENCIES
   sass
   selenium-webdriver
   simplecov
+  stimulus-rails
   stripe
+  strong_migrations
   thread
+  turbo-rails
   web-console
   webdrivers
   webmock

app/javascript/application.ts

@@ -1,11 +1,17 @@
 // @ts-nocheck
+import "@hotwired/turbo-rails";
+import "@rails/activestorage";
 import "jquery";
 import "bootstrap";
 import "mousetrap";
 import "jquery-visible";
 import _ from "underscore";
 import Backbone from "backbone";
 
+import "./controllers/index";
+
+Turbo.session.drive = false;
+
 /* global jQuery, Mousetrap */
 var $ = jQuery;
 

app/javascript/controllers/application.ts

@@ -0,0 +1,5 @@
+import {Application} from "@hotwired/stimulus";
+
+const application = Application.start();
+
+export {application};

app/javascript/controllers/dialog_controller.ts

@@ -0,0 +1,7 @@
+import {Controller} from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect(): void {
+    this.element.textContent = "Hello World!";
+  }
+}

app/javascript/controllers/index.ts

@@ -0,0 +1,10 @@
+/*
+ * This file is auto-generated by ./bin/rails stimulus:manifest:update
+ * Run that command whenever you add a new controller or create them with
+ * ./bin/rails generate stimulus controllerName
+ */
+
+import {application} from "./application";
+
+import DialogController from "./dialog_controller";
+application.register("dialog", DialogController);

package.json

@@ -12,6 +12,11 @@
   "dependencies": {
     "@fontsource/lato": "^5.2.7",
     "@fontsource/reenie-beanie": "^5.2.8",
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo": "^8.0.20",
+    "@hotwired/turbo-rails": "^8.0.20",
+    "@rails/actioncable": "^8.1.100",
+    "@rails/activestorage": "^8.1.100",
     "backbone": "1.0.0",
     "bootstrap": "3.1.1",
     "font-awesome": "4.7.0",
@@ -25,9 +30,11 @@
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.7.0",
     "@types/backbone": "latest",
+    "@types/hotwired__turbo": "^8.0.5",
     "@types/jquery": "latest",
     "@types/mousetrap": "latest",
     "@types/node": "^25.2.3",
+    "@types/rails__actioncable": "^8.0.3",
     "@types/underscore": "latest",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",

pnpm-lock.yaml

@@ -0,0 +1,10 @@
+import {expect, it} from "vitest";
+import {bootStimulus} from "spec/javascript/support/stimulus";
+import DialogController from "controllers/dialog_controller";
+
+it("updates the text content of its element", async () => {
+  document.body.innerHTML = "<div data-controller='dialog'></div>";
+  await bootStimulus("dialog", DialogController);
+
+  expect(document.body.textContent).toBe("Hello World!");
+});

spec/javascript/controllers/dialog_controller_spec.ts

@@ -0,0 +1,27 @@
+import {afterEach} from "vitest";
+import type {Context, Controller} from "@hotwired/stimulus";
+import {Application} from "@hotwired/stimulus";
+
+let application: Application | null = null;
+
+type ControllerClass<T> = new (context: Context) => T;
+
+async function bootStimulus<T extends Controller>(
+  name: string,
+  controller: ControllerClass<T>,
+): Promise<void> {
+  application ??= Application.start();
+
+  application.register(name, controller);
+  application.handleError = (error: Error): void => { throw error; };
+
+  await Promise.resolve();
+}
+
+afterEach(() => {
+  if (application) { application.stop(); }
+
+  application = null;
+});
+
+export {bootStimulus};