Hotwire Discussion

Upgrade from Turbolinks to Turbo Drive

From what I read so far, Turbo Drive is basically just a repackaged Turbolinks that handles form submission as well as links. Is upgrading from Turbolinks to Turbo Drive as easy as a search and replace from “turbolinks” to “turbo” or are there any gotchas we should be aware of?

1 Like

For the most part, you ought to be able to get away with search-and-replace for Turbolinks to Turbo for the JavaScript API and turbolinks to turbo for events and attributes.

Also note that you no longer need to call start() when you load Turbo as a module, and events now use the standard CustomEvent.detail property instead of the data property.

One thing I’ve not found any replacement for is the old turbolinks-permanent directive - this is useful if you have a component like an audio or video you need to keep alive between page transitions. The new turbo-frame does not appear to work in the same way - it just creates blocks where you can update a component without navigation changes, but in this case I want the whole page to move while keeping that one component unchanged.

Haven’t tried it yet, but it seems to support data-turbo-permanent?

@jaredcwhite it’s not documented anywhere as far as I can see but data-turbo-permanent seems to work ok. Need to do some more testing to see if any issues with stimulus etc.

@danjac Hopefully it’s just a matter of “we haven’t documented it yet” rather than a sign it’s getting swapped out for something else…

After some testing I’ve found the new data-turbo-permanent kind of works - the HTML is preserved - but unlike Turbolinks 5 it appears to break seems audio (and possibly video) element behavior in page transitions, causing the audio to reset (i.e. as it would on a full page reload). Probably more testing is required and it might be related to how I have Stimulus setup.

It’s mentioned here: https://turbo.hotwire.dev/handbook/building#persisting-elements-across-page-loads :slight_smile:

2 Likes

After adding gem 'turbo-rails' I get DEPRECATION WARNING: Initialization autoloaded the constant Turbo::Broadcastable and startup aborts:

This is based on the README instructions. Am I missing a step?

How should I migrate the turbolinks:load events? I have tens of those handlers and I couldn’t find anything in the documentation about them.

Looks like you can use turbo:load

Re the audio issue: the workaround I’ve found seems to be creating an Audio object e.g. in a Stimulus controller instead of in HTML. This may also work with video.

One gotcha that I found is that Turbo does not define itself in the global scope when installed via webpack like Turbolinks used to do.

I have Stimulus controllers and SJR responses that used Turbo.visit(), and they all broke. I resorted to this in my application.js:

import { Turbo } from "@hotwired/turbo-rails"
window.Turbo = Turbo

Alternatively, I could have imported Turbo into each Stimulus controller that needed it. I wasn’t ready to rewrite my SJR responses yet, though.

DEPRECATION WARNING: Initialization autoloaded the constant Turbo::Broadcastable

This issue was fixed. It should not appear anymore under turbo-rails >= 0.5.3.

1 Like

Thanks for your response, but I fail to see the connection here. The message in your post is not something I’ve seen, and I’m already on version 0.5.3. Can you explain further?

Hey brian, that was an answer to @sdubois ’s error Upgrade from Turbolinks to Turbo Drive - #9 by sdubois

As for window.Turbo I think that’s the way to go :+1:

1 Like