turbo-drive
Carries state across Turbo visits. This extension adds no names. Just load it.
When you click a link, Turbo swaps out the whole body. The core alone already mounts the scopes of the new page and tears down the scopes of the old one. This extension adds two things on top of that.
data-turbo-permanent
Turbo moves elements that have an id and data-turbo-permanent to the new page as they are. With this extension, the scopes inside them come along with their state intact. They are not torn down when the enclosing scope is torn down.
Back-navigation cache
Turbo clones the page you leave and restores it when you go back. The clone is the DOM after mounting, so on its own it is a dead page. Right before the clone is taken, this extension attaches each scope's pre-mount markup, then uses it to mount the restored page again. Nothing is rendered twice.
Three ways to keep state
| What is kept | How | Where it lives |
|---|---|---|
| Values every page shares | Register with a plugin's provide and receive with h-inject | Core: provide |
| The same fragment, re-rendered | h-keep="key" | Core: h-keep |
| Elements moved across visits | data-turbo-permanent | This extension |
Adding it
With a plain script tag, load extensions/turbo-drive.iife.js. Wherever you use Turbo, always add this extension. Without it, a page you return to with the back button is not mounted.