Install and configure stimulus and turbo

Gemfile

@@ -14,38 +14,30 @@ gem 'pg'
 
 # Use Puma as the app server
 gem 'puma', '>= 5.5.2'
-# Use SCSS for stylesheets
-# gem 'sassc-rails', require: false
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # See https://github.com/rails/execjs#readme for more supported runtimes
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
-# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.5'
 # Use Redis adapter to run Action Cable in production
-# gem 'redis', '~> 3.0'
+gem 'redis', '~> 3.0'
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 
-# Use Capistrano for deployment
-# gem 'capistrano-rails', group: :development
-
 gem 'nokogiri', '>= 1.12.5'
 
 gem 'bootsnap', require: false
 
 gem 'haml'
 
-# gem 'bootstrap'
-
 gem 'friendly_id', '~> 5.1.0'
 
 gem 'newrelic_rpm'
 
 gem 'devise'
+
 gem 'omniauth'
 
 gem 'twilio-ruby', '~> 4.11.1'
@@ -56,6 +48,10 @@ gem 'jsbundling-rails'
 
 gem 'cssbundling-rails'
 
+gem 'turbo-rails'
+
+gem 'stimulus-rails'
+
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platform: :mri

Gemfile.lock

@@ -240,6 +240,7 @@ GEM
     rb-fsevent (0.11.0)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    redis (3.3.5)
     regexp_parser (2.2.0)
     responders (3.0.1)
       actionpack (>= 5.0)
@@ -291,15 +292,17 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    stimulus-rails (1.0.2)
+      railties (>= 6.0.0)
     strscan (3.0.1)
     temple (0.8.2)
     thor (1.2.1)
     tilt (2.0.10)
     timecop (0.9.4)
     timeout (0.2.0)
-    turbolinks (5.2.1)
+    turbo-rails (1.0.1)
-      turbolinks-source (~> 5.2)
+      actionpack (>= 6.0.0)
-    turbolinks-source (5.2.0)
+      railties (>= 6.0.0)
     twilio-ruby (4.11.1)
       builder (>= 2.1.2)
       jwt (~> 1.0)
@@ -355,14 +358,16 @@ DEPENDENCIES
   puma (>= 5.5.2)
   rails (~> 7.0.1)
   rails-controller-testing
+  redis (~> 3.0)
   rspec-rails (~> 5.1.0)
   rubocop
   seed_dump
   simplecov
   spring
   sprockets-rails
+  stimulus-rails
   timecop
-  turbolinks (~> 5)
+  turbo-rails
   twilio-ruby (~> 4.11.1)
   tzinfo-data
   uglifier (>= 1.3.0)

README.md

@@ -74,28 +74,35 @@ Postgres
 
 ### Gems
 
-| Name                | Description                        |
+| Name                | Description                                         |
-| ------------------- | ---------------------------------- |
+| ------------------- | --------------------------------------------------- |
-| puma                | webserver                          |
+| puma                | webserver                                           |
-| pg                  | postgres                           |
+| pg                  | postgres                                            |
-| sassc-rails         | sass compiler                      |
+| jquery-rails        | legacy, allows use of jquery                        |
-| jquery-rails        | legacy, allows use of jquery       |
+| jbuilder            | legacy, build json objects                          |
-| jbuilder            | legacy, build json objects         |
+| haml                | legacy, write views in haml syntax                  |
-| haml                | legacy, write views in haml syntax |
+| bootstrap           | css framework                                       |
-| bootstrap           | css framework                      |
+| newrelic_rpm        | legacy?, application monitoring                     |
-| newrelic_rpm        | legacy?, application monitoring    |
+| devise              | authentication                                      |
-| devise              | authentication                     |
+| omniauth            | authentication                                      |
-| omniauth            | authentication                     |
+| twilio-ruby         | legacy, text messaging                              |
-| twilio-ruby         | legacy, text messaging             |
+| activerecord-import | faster database imports                             |
-| activerecord-import | faster database imports            |
+| stimulus            | Create javascript controllers                       |
+| turbo-rails         | Manages what gets rendered on the frontend and when |
+| redis               | Caching system                                      |
+| jsbundling-rails    | Bundle javascript asssets                           |
+| cssbundling-rails   | Bundle css assets                                   |
 
 ### External APIs
 
 None yet. Hoping to integrate with Powerschool and Aspen for school administrative data.
 
-### Javascript libraries
+### Javascript
 
-Esbuild is used as the javascript bundler. The javascript testing library is jest.
+Esbuild is used as the javascript bundler. Scripts for esbuild are defined in package.json e.g. `yarn build`. This script will run if in development with `bin/dev`.
+The javascript testing library is jest. Manually run test with `yarn test`. Javascript tests will also run with `bundle exec rake`.
+
+Stimulus is installed. Create a stimulus controller with `./bin/rails generate stimulus [controller]`. If you create a stimulus controller manually, you can add it to `index.js` with the command `stimulus:manifest:update`.
 
 ### css
 

app/javascript/application.js

@@ -1,19 +1,22 @@
 // Entry point for the build script in your package.json
-import Rails from "@rails/ujs"
+import Rails from "@rails/ujs";
-import Turbolinks from "turbolinks"
+import * as ActiveStorage from "@rails/activestorage";
-import * as ActiveStorage from "@rails/activestorage"
-// import "channels"
 
-Rails.start()
+Rails.start();
-Turbolinks.start()
+ActiveStorage.start();
-ActiveStorage.start()
-import { initializeListenersForNavDropdowns, initializePopovers } from "./overview"
-import { initializeListenersForHomeDropdowns } from "./home"
-import { showEmptyDatasetModal } from "./modal"
 
-document.addEventListener("turbolinks:load", () => {
+import {
-  initializeListenersForNavDropdowns()
+  initializeListenersForNavDropdowns,
-  initializeListenersForHomeDropdowns()
+  initializePopovers,
-  initializePopovers()
+} from "./overview";
-  showEmptyDatasetModal()
+import { initializeListenersForHomeDropdowns } from "./home";
-})
+import { showEmptyDatasetModal } from "./modal";
+
+document.addEventListener("turbo:load", () => {
+  initializeListenersForNavDropdowns();
+  initializeListenersForHomeDropdowns();
+  initializePopovers();
+  showEmptyDatasetModal();
+});
+import "@hotwired/turbo-rails";
+import "./controllers";

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 }

app/javascript/controllers/index.js

@@ -0,0 +1,5 @@
+// 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";

app/views/layouts/application.html.erb

@@ -7,8 +7,8 @@
   <link href="https://fonts.googleapis.com/css?family=Cabin:400,600,700" rel="stylesheet" type="text/css"/>
   <title>MCIEA</title>
   <%= csp_meta_tag %>
-  <%= stylesheet_link_tag 'sqm', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= stylesheet_link_tag 'sqm', media: 'all', 'data-turbo-track': 'reload' %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
   <%= render partial: 'layouts/google_analytics', locals: { google_analytics_id: @google_analytics_id } %>
   <%= render partial: 'layouts/hotjar', locals: { hotjar_id: @hotjar_id } %>
 </head>

app/views/layouts/home.html.erb

@@ -3,9 +3,9 @@
   <title>MCIEA</title>
   <link href="https://fonts.googleapis.com/css?family=Bitter:400,600,700" rel="stylesheet" type="text/css"/>
   <link href="https://fonts.googleapis.com/css?family=Cabin:400,600,700" rel="stylesheet" type="text/css"/>
-  <%= stylesheet_link_tag 'sqm', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= stylesheet_link_tag 'sqm', media: 'all', 'data-turbo-track': 'reload' %>
-  <%= stylesheet_link_tag 'welcome', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= stylesheet_link_tag 'welcome', media: 'all', 'data-turbo-track': 'reload' %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
   <%= render partial: 'layouts/google_analytics', locals: { google_analytics_id: @google_analytics_id } %>
   <%= render partial: 'layouts/hotjar', locals: { hotjar_id: @hotjar_id } %>
 </head>

app/views/layouts/legacy/application.html.haml

@@ -8,9 +8,9 @@
     %link{href: "https://fonts.googleapis.com/css?family=Cabin:400,600,700", rel: "stylesheet", type: "text/css"}/
     %title MCIEA
     = csrf_meta_tags
-    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
+    = stylesheet_link_tag    'application', media: 'all', 'data-turbo-track': 'reload'
     = stylesheet_link_tag    'https://fonts.googleapis.com/css?family=Roboto:300,700'
-    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_include_tag 'application', 'data-turbo-track': 'reload'
 
     / Global site tag (gtag.js) - Google Analytics
     %script{:async => "", :src => "https://www.googletagmanager.com/gtag/js?id=UA-132936999-1"}

config/cable.yml

@@ -1,5 +1,6 @@
 development:
-  adapter: async
+  adapter: redis
+  url: redis://localhost:6379/1
 
 test:
   adapter: test

package.json

@@ -4,6 +4,8 @@
   "dependencies": {
     "@babel/preset-env": "^7.15.8",
     "@fortawesome/fontawesome-free": "^6.0.0-beta3",
+    "@hotwired/stimulus": "^3.0.1",
+    "@hotwired/turbo-rails": "^7.1.1",
     "@popperjs/core": "^2.10.2",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
@@ -12,8 +14,7 @@
     "bootstrap": "^5.1.3",
     "esbuild": "^0.13.6",
     "prettier": "^2.5.1",
-    "sass": "^1.43.4",
+    "sass": "^1.43.4"
-    "turbolinks": "^5.2.0"
   },
   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds",

yarn.lock

@@ -899,6 +899,24 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0-beta3.tgz"
   integrity sha512-4SqOuhC8tSLeQvbW1nDmq6T7+8vdSgHy/w7PRwCFzMQCbKuYFIir/3UuWsV1QblX1lt7SGlSgwbaCv9XhRt8HA==
 
+"@hotwired/stimulus@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.0.1.tgz#141f15645acaa3b133b7c247cad58ae252ffae85"
+  integrity sha512-oHsJhgY2cip+K2ED7vKUNd2P+BEswVhrCYcJ802DSsblJFv7mPFVk3cQKvm2vHgHeDVdnj7oOKrBbzp1u8D+KA==
+
+"@hotwired/turbo-rails@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-7.1.1.tgz#35c03b92b5c86f0137ed08bef843d955ec9bbe83"
+  integrity sha512-ZXpxUjCfkdbuXfoGrsFK80qsVzACs8xCfie9rt2jMTSN6o1olXVA0Nrk8u02yNEwSiVJm/4QSOa8cUcMj6VQjg==
+  dependencies:
+    "@hotwired/turbo" "^7.1.0"
+    "@rails/actioncable" "^7.0"
+
+"@hotwired/turbo@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.1.0.tgz#27e44e0e3dc5bd1d4bda0766d579cf5a14091cd7"
+  integrity sha512-Q8kGjqwPqER+CtpQudbH+3Zgs2X4zb6pBAlr6NsKTXadg45pAOvxI9i4QpuHbwSzR2+x87HUm+rot9F/Pe8rxA==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@@ -1094,6 +1112,11 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.4.tgz"
   integrity sha512-0LmSKJTuo2dL6BQ+9xxLnS9lbkyfz2mBGeBnQ2J7o9Bn0l0q+ZC6VuoZMZZXPvABI4QT7Nfknv5WhfKYL+boew==
 
+"@rails/actioncable@^7.0":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.2.tgz#69a6d999f4087e0537dd38fe0963db1f4305d650"
+  integrity sha512-G26maXW1Kx0LxQdmNNuNjQlRO/QlXNr3QfuwKiOKb5FZQGYe2OwtHTGXBAjSoiu4dW36XYMT/+L1Wo1Yov4ZXA==
+
 "@rails/activestorage@^6.0.0":
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/@rails/activestorage/-/activestorage-6.1.4.tgz"
@@ -3825,11 +3848,6 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
-turbolinks@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz"
-  integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==
-
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz"