Reputation: 128
I'm confused as to exactly what I need to do to run my old jQuery snippets and Rails UJS along with Turbo.
DHH added this PR in June that was supposed to improve compatibility, but it lacks details on exactly how the setup should work.
I still have a bunch of legacy jQuery and UJS snippets throughout my app, but I also am trying to move to Turbo. I initially attempted to drop UJS entirely, but it's just too much at one time. At this point, I'm running Rails 6.1.4.1 with Webpacker and do not have any UJS gems in my Gemfile.
The upgrade page says:
"Rails UJS is offered either directly from the Rails framework or by the classic jquery-ujs plugin."
Does this mean that UJS is now built into Rails and is not a separate gem? Or should I add gem 'jquery-rails'
to my Gemfile?
What about my package.json? I now need to go back in and yarn add jquery-ujs
as indicated here?
What about application.js? I had previously imported @rails/ujs here, like:
import Rails from "@rails/ujs"
Rails.start()
When I added Turbo, I commented out these lines. Are they necessary or no?
And regarding jQuery, I had cobbled together (pasted from other sites) a way to use the $
global:
var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;
Is this no longer necessary?
Edit to include dependencies portion of package.json and application.js ...
package.json
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"@hotwired/turbo-rails": "^7.0.0-rc.5",
"@rails/request.js": "^0.0.5",
"@rails/webpacker": "5.4.2",
"chart.js": "^3.0.2",
"chartkick": "^4.0.2",
"cssnext": "^1.8.4",
"expose-loader": "^2.0.0",
"flatpickr": "4.6.6",
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"select2": "4.0.13",
"signature_pad": "^3.0.0-beta.4",
"slim-select": "1.26.1",
"stimulus": "^2.0.0",
"stimulus-flatpickr": "^1.4.0",
"tippy.js": "^6.3.1",
"trim-canvas": "^0.1.2"
}
application.js
// Allow global access to jQuery and $
var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;
// This was uncommented when I used rails/ujs
// import Rails from "@rails/ujs"
import "@hotwired/turbo-rails"
// This was uncommented when I used rails/ujs
// Rails.start()
// select2 menus
require("select2")
// tooltips
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css';
// stimulus js
import { Application } from "stimulus"
// Flatpickr date picker
import Flatpickr from "stimulus-flatpickr"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
application.register("flatpickr", Flatpickr)
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
Upvotes: 3
Views: 2132