Add Turbo to speed up the app, and set up for missing UJS features

Oh right, we don't have Rails UJS going on anymore, which is what
handled the confirmation prompts for deleting lists. Turbo is the more
standard modern solution to that, and should speed up certain
pageloads, so let's do it!

Here I install the `turbo-rails` gem, then run `rails turbo:install` to
install the `@hotwired/turbo-rails` npm package. Then I move
`application.js` that's run all on pages but the outfit editor into our
section of JS that gets run through the bundler, and add Turbo to it.

I had to fix a couple tricky things:

1. The outfit editor page doesn't play nice with being swapped into the
   document, so I make it require a full page reload instead.
2. Prefetching the Sign In link can cause the wrong `return_to` address
   to be written to the `session`. (It's a GET request that does, ever
   so slightly, take its own actions, oops!) As a simple hacky answer,
   we disallow prefetching on that link.

Haven't fixed up the UJS stuff for confirm prompts to use Turbo yet,
that's next!
This commit is contained in:
Emi Matchu 2024-03-13 13:43:48 -07:00
parent b39542a2ba
commit 684dcb53ba
8 changed files with 40 additions and 1 deletions

View file

@ -20,6 +20,7 @@ gem 'sass-rails', '~> 6.0'
gem 'terser', '~> 1.1', '>= 1.1.17' gem 'terser', '~> 1.1', '>= 1.1.17'
gem 'react-rails', '~> 2.7', '>= 2.7.1' gem 'react-rails', '~> 2.7', '>= 2.7.1'
gem 'jsbundling-rails', '~> 1.1' gem 'jsbundling-rails', '~> 1.1'
gem 'turbo-rails', '~> 2.0'
# For authentication. # For authentication.
gem 'devise', '~> 4.9', '>= 4.9.2' gem 'devise', '~> 4.9', '>= 4.9.2'

View file

@ -341,6 +341,10 @@ GEM
timeout (0.4.1) timeout (0.4.1)
timers (4.3.5) timers (4.3.5)
traces (0.11.1) traces (0.11.1)
turbo-rails (2.0.5)
actionpack (>= 6.0.0)
activejob (>= 6.0.0)
railties (>= 6.0.0)
tzinfo (2.0.6) tzinfo (2.0.6)
concurrent-ruby (~> 1.0) concurrent-ruby (~> 1.0)
warden (1.2.9) warden (1.2.9)
@ -396,6 +400,7 @@ DEPENDENCIES
stackprof (~> 0.2.25) stackprof (~> 0.2.25)
terser (~> 1.1, >= 1.1.17) terser (~> 1.1, >= 1.1.17)
thread-local (~> 1.1) thread-local (~> 1.1)
turbo-rails (~> 2.0)
web-console (~> 4.2) web-console (~> 4.2)
will_paginate (~> 4.0) will_paginate (~> 4.0)

View file

@ -1,3 +1,5 @@
import "@hotwired/turbo-rails";
document.getElementById("locale").addEventListener("change", function () { document.getElementById("locale").addEventListener("change", function () {
document.getElementById("locale-form").submit(); document.getElementById("locale-form").submit();
}); });

View file

@ -21,6 +21,7 @@
= signed_in_meta_tag = signed_in_meta_tag
- if user_signed_in? - if user_signed_in?
= current_user_id_meta_tag = current_user_id_meta_tag
= yield :head
%body{:class => body_class} %body{:class => body_class}
#container #container
= yield :before_title = yield :before_title
@ -50,7 +51,8 @@
= button_to t('.userbar.logout'), destroy_auth_user_session_path, method: :delete, = button_to t('.userbar.logout'), destroy_auth_user_session_path, method: :delete,
params: {return_to: request.fullpath} params: {return_to: request.fullpath}
- else - else
= link_to auth_user_sign_in_path_with_return_to, :id => 'userbar-log-in' do = link_to auth_user_sign_in_path_with_return_to,
id: 'userbar-log-in', "data-turbo-prefetch": false do
%span= t('.userbar.login') %span= t('.userbar.login')
#footer #footer

View file

@ -1,3 +1,5 @@
- turbo_page_requires_reload
- if @outfit - if @outfit
- title(@outfit.name || t('.default_outfit_name')) - title(@outfit.name || t('.default_outfit_name'))
- open_graph type: 'openneo-impress:outfit', title: yield(:title), - open_graph type: 'openneo-impress:outfit', title: yield(:title),
@ -22,5 +24,6 @@
= csrf_meta_tags = csrf_meta_tags
= impress_2020_meta_tags = impress_2020_meta_tags
%meta{name: 'dti-current-user-id', content: user_signed_in? ? current_user.id : "null"} %meta{name: 'dti-current-user-id', content: user_signed_in? ? current_user.id : "null"}
= yield :head
%body %body
#wardrobe-2020-root #wardrobe-2020-root

View file

@ -7,6 +7,7 @@
"@chakra-ui/react": "^1.6.0", "@chakra-ui/react": "^1.6.0",
"@emotion/react": "^11.1.4", "@emotion/react": "^11.1.4",
"@emotion/styled": "^11.0.0", "@emotion/styled": "^11.0.0",
"@hotwired/turbo-rails": "^8.0.4",
"@loadable/component": "^5.12.0", "@loadable/component": "^5.12.0",
"@sentry/react": "^5.30.0", "@sentry/react": "^5.30.0",
"@sentry/tracing": "^5.30.0", "@sentry/tracing": "^5.30.0",

BIN
vendor/cache/turbo-rails-2.0.5.gem vendored Normal file

Binary file not shown.

View file

@ -1339,6 +1339,23 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@hotwired/turbo-rails@npm:^8.0.4":
version: 8.0.4
resolution: "@hotwired/turbo-rails@npm:8.0.4"
dependencies:
"@hotwired/turbo": "npm:^8.0.4"
"@rails/actioncable": "npm:^7.0"
checksum: c35fdcc79876f3ceaed7100f2e6965bcf9aa647309dce7a6ed685e880ffc1ac475299e00538ecc926addfa4023704c9bd1ea37e70fbef3a77697f7f01d4e344f
languageName: node
linkType: hard
"@hotwired/turbo@npm:^8.0.4":
version: 8.0.4
resolution: "@hotwired/turbo@npm:8.0.4"
checksum: 3e7174d550adf3b9a0a4c45ff5d1b71d47c20de6ae01f646fbbaf8ed447677bd1a5fb6dbd46e95b14645a663fe58a6187c1c6d2a688b0981b5cf437379c5e00a
languageName: node
linkType: hard
"@humanwhocodes/config-array@npm:^0.11.13": "@humanwhocodes/config-array@npm:^0.11.13":
version: 0.11.13 version: 0.11.13
resolution: "@humanwhocodes/config-array@npm:0.11.13" resolution: "@humanwhocodes/config-array@npm:0.11.13"
@ -1411,6 +1428,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@rails/actioncable@npm:^7.0":
version: 7.1.3
resolution: "@rails/actioncable@npm:7.1.3"
checksum: 6019097498387a9c0684df0be380182820a0480173e05a5c5a830cef6cf3e40c9ec75b834af0396b0f57b4e658891c820163e84b9f2bd1ac293c90f5a12ce488
languageName: node
linkType: hard
"@reach/alert@npm:0.13.2": "@reach/alert@npm:0.13.2":
version: 0.13.2 version: 0.13.2
resolution: "@reach/alert@npm:0.13.2" resolution: "@reach/alert@npm:0.13.2"
@ -3177,6 +3201,7 @@ __metadata:
"@chakra-ui/react": "npm:^1.6.0" "@chakra-ui/react": "npm:^1.6.0"
"@emotion/react": "npm:^11.1.4" "@emotion/react": "npm:^11.1.4"
"@emotion/styled": "npm:^11.0.0" "@emotion/styled": "npm:^11.0.0"
"@hotwired/turbo-rails": "npm:^8.0.4"
"@loadable/component": "npm:^5.12.0" "@loadable/component": "npm:^5.12.0"
"@sentry/react": "npm:^5.30.0" "@sentry/react": "npm:^5.30.0"
"@sentry/tracing": "npm:^5.30.0" "@sentry/tracing": "npm:^5.30.0"