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:
parent
b39542a2ba
commit
684dcb53ba
8 changed files with 40 additions and 1 deletions
1
Gemfile
1
Gemfile
|
@ -20,6 +20,7 @@ gem 'sass-rails', '~> 6.0'
|
|||
gem 'terser', '~> 1.1', '>= 1.1.17'
|
||||
gem 'react-rails', '~> 2.7', '>= 2.7.1'
|
||||
gem 'jsbundling-rails', '~> 1.1'
|
||||
gem 'turbo-rails', '~> 2.0'
|
||||
|
||||
# For authentication.
|
||||
gem 'devise', '~> 4.9', '>= 4.9.2'
|
||||
|
|
|
@ -341,6 +341,10 @@ GEM
|
|||
timeout (0.4.1)
|
||||
timers (4.3.5)
|
||||
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)
|
||||
concurrent-ruby (~> 1.0)
|
||||
warden (1.2.9)
|
||||
|
@ -396,6 +400,7 @@ DEPENDENCIES
|
|||
stackprof (~> 0.2.25)
|
||||
terser (~> 1.1, >= 1.1.17)
|
||||
thread-local (~> 1.1)
|
||||
turbo-rails (~> 2.0)
|
||||
web-console (~> 4.2)
|
||||
will_paginate (~> 4.0)
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import "@hotwired/turbo-rails";
|
||||
|
||||
document.getElementById("locale").addEventListener("change", function () {
|
||||
document.getElementById("locale-form").submit();
|
||||
});
|
|
@ -21,6 +21,7 @@
|
|||
= signed_in_meta_tag
|
||||
- if user_signed_in?
|
||||
= current_user_id_meta_tag
|
||||
= yield :head
|
||||
%body{:class => body_class}
|
||||
#container
|
||||
= yield :before_title
|
||||
|
@ -50,7 +51,8 @@
|
|||
= button_to t('.userbar.logout'), destroy_auth_user_session_path, method: :delete,
|
||||
params: {return_to: request.fullpath}
|
||||
- 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')
|
||||
|
||||
#footer
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
- turbo_page_requires_reload
|
||||
|
||||
- if @outfit
|
||||
- title(@outfit.name || t('.default_outfit_name'))
|
||||
- open_graph type: 'openneo-impress:outfit', title: yield(:title),
|
||||
|
@ -22,5 +24,6 @@
|
|||
= csrf_meta_tags
|
||||
= impress_2020_meta_tags
|
||||
%meta{name: 'dti-current-user-id', content: user_signed_in? ? current_user.id : "null"}
|
||||
= yield :head
|
||||
%body
|
||||
#wardrobe-2020-root
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
"@chakra-ui/react": "^1.6.0",
|
||||
"@emotion/react": "^11.1.4",
|
||||
"@emotion/styled": "^11.0.0",
|
||||
"@hotwired/turbo-rails": "^8.0.4",
|
||||
"@loadable/component": "^5.12.0",
|
||||
"@sentry/react": "^5.30.0",
|
||||
"@sentry/tracing": "^5.30.0",
|
||||
|
|
BIN
vendor/cache/turbo-rails-2.0.5.gem
vendored
Normal file
BIN
vendor/cache/turbo-rails-2.0.5.gem
vendored
Normal file
Binary file not shown.
25
yarn.lock
25
yarn.lock
|
@ -1339,6 +1339,23 @@ __metadata:
|
|||
languageName: node
|
||||
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":
|
||||
version: 0.11.13
|
||||
resolution: "@humanwhocodes/config-array@npm:0.11.13"
|
||||
|
@ -1411,6 +1428,13 @@ __metadata:
|
|||
languageName: node
|
||||
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":
|
||||
version: 0.13.2
|
||||
resolution: "@reach/alert@npm:0.13.2"
|
||||
|
@ -3177,6 +3201,7 @@ __metadata:
|
|||
"@chakra-ui/react": "npm:^1.6.0"
|
||||
"@emotion/react": "npm:^11.1.4"
|
||||
"@emotion/styled": "npm:^11.0.0"
|
||||
"@hotwired/turbo-rails": "npm:^8.0.4"
|
||||
"@loadable/component": "npm:^5.12.0"
|
||||
"@sentry/react": "npm:^5.30.0"
|
||||
"@sentry/tracing": "npm:^5.30.0"
|
||||
|
|
Loading…
Reference in a new issue