Open2021/01/29にコメント追加8

Turbolinks 5からTurbo Driveへの移行

Hotwire

Turbo

turbolinks

en30 2021/01/29に更新

npmパッケージを変更

$ yarn remove turbolinks
$ yarn add @hotwired/turbo

執筆時点では 7.0.0-beta.3

en30 2021/01/29に更新

importしている部分の変更

- import Turbolinks from "turbolinks";
+ import * as Turbo from "@hotwired/turbo";

en30 2021/01/29に更新

（なるほどZennのdiff）

en30 2021/01/29に更新

不要になったstartを削除

- Turbolinks.start()

en30 2021/01/29に更新

turbolinks -> turboの一括置換

イベント、data attributeは基本 turbolinks を turbo に置き換えれば良い。

en30 2021/01/29

イベント

一応もう少し真面目に調べてみる。

Turbolinks

$ curl --silent https://github.com/turbolinks/turbolinks | ruby -e "puts STDIN.read.scan(/<code>(turbolinks:[a-z-]+)<\/code>/)" | sort | uniq
turbolinks:before-cache
turbolinks:before-render
turbolinks:before-visit
turbolinks:click
turbolinks:load
turbolinks:render
turbolinks:request-end
turbolinks:request-start
turbolinks:visit

Turbo Drive

$ curl --silent https://turbo.hotwire.dev/reference/events | ruby -e "puts STDIN.read.scan(/turbo:[a-z-]+/)" | sort | uniq
turbo:before-cache
turbo:before-fetch-request
turbo:before-fetch-response
turbo:before-render
turbo:before-stream-render
turbo:before-visit
turbo:click
turbo:load
turbo:render
turbo:submit-end
turbo:submit-start
turbo:visit

diff

$ diff -u <(curl --silent https://github.com/turbolinks/turbolinks | ruby -e "puts STDIN.read.scan(/<code>turbolinks:([a-z-]+)<\/code>/)" | sort | uniq) <(curl --silent https://turbo.hotwire.dev/reference/events | ruby -e "puts STDIN.read.scan(/turbo:([a-z-]+)/)" | sort | uniq)

 before-cache
+before-fetch-request
+before-fetch-response
 before-render
+before-stream-render
 before-visit
 click
 load
 render
-request-end
-request-start
+submit-end
+submit-start
 visit

en30 2021/01/29

data attribute

ちょっと網羅できてるか怪しいけど…

Turbolinks

Turbolinksのリポジトリ内で

$ ag 'data-turbo' | ruby -ne 'puts $_.scan(/data-turbolinks[a-z-]*/)' | sort | uniq                                           !4352
data-turbolinks
data-turbolinks-action
data-turbolinks-eval
data-turbolinks-permanent
data-turbolinks-preview
data-turbolinks-suppress-warning
data-turbolinks-track

Turbo

$ ag 'data-turbo' | ruby -ne 'puts $_.scan(/data-turbo[a-z-]*/)' | sort | uniq
data-turbo
data-turbo-action
data-turbo-eval
data-turbo-frame
data-turbo-permanent
data-turbo-preview
data-turbo-suppress-warning
data-turbo-track

diff

 action
 eval
+ frame
 permanent
 preview
 suppress-warning
 track

en30 2021/01/29

初期loadかどうかの判定

Turbolinks

turbolinks:load イベントの event.data.timing.visitStart を使っていた。

Turbo Drive

turbo:load イベントの event.detail.timing.visitStart に。