コレは何
Turbolinks 5.0.0 へのアップデートの記録です。
課題
さらっと bundle update でイケるかと思いきや、いくつか対応が必要な箇所がありました。
- ページ内リンクでイベント発火してしまう件
- jquery-turbolinks 対応
- nprogress-rails 不要
対応
ページ内リンクでイベント発火してしまう件
<a href="#hoge">アンカー</a>
など、ページ内リンクをクリックするとイベントが発火し、リロードが走ってしまうようです。
↓ で暫定対応としました。
app/assets/javascripts/turbolinks-compatibility.coffee
# HACK: ページ内リンクで発火してしまう問題への対応
# Turbolinks should follow same-page anchor links without reloading the page
# https://github.com/turbolinks/turbolinks/issues/75
Turbolinks.Controller.prototype.nodeIsVisitableOld = Turbolinks.Controller.prototype.nodeIsVisitable
Turbolinks.Controller.prototype.nodeIsVisitable = (node) ->
node.getAttribute('href') && node.getAttribute('href')[0] != '#' && Turbolinks.Controller.prototype.nodeIsVisitableOld(node)
jquery-turbolinks 対応
イベント名が変わっているため、jquery-turbolinks に依存している場合には読み替えが必要です。
app/assets/javascripts/turbolinks-compatibility.coffee
# HACK: jquery-turbolinks 対応
# https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
{defer, dispatch} = Turbolinks
handleEvent = (eventName, handler) ->
document.addEventListener(eventName, handler, false)
translateEvent = ({from, to}) ->
handler = (event) ->
event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data)
event.preventDefault() if event.defaultPrevented
handleEvent(from, handler)
translateEvent from: "turbolinks:click", to: "page:before-change"
translateEvent from: "turbolinks:request-start", to: "page:fetch"
translateEvent from: "turbolinks:request-end", to: "page:receive"
translateEvent from: "turbolinks:before-cache", to: "page:before-unload"
translateEvent from: "turbolinks:render", to: "page:update"
translateEvent from: "turbolinks:load", to: "page:change"
translateEvent from: "turbolinks:load", to: "page:update"
loaded = false
handleEvent "DOMContentLoaded", ->
defer ->
loaded = true
handleEvent "turbolinks:load", ->
if loaded
dispatch("page:load")
jQuery?(document).on "ajaxSuccess", (event, xhr, settings) ->
if jQuery.trim(xhr.responseText).length > 0
dispatch("page:update")
nprogress-rails 不要
Turbolinks の標準機能でプログレスバーを表示してくれるようになっていました。
これまでお世話になった nprogress-rails とはお別れです 
。
スタイルは .turbolinks-progress-bar でカスタマイズ可能 
です。
app/assets/stylesheets/turbolinks_progressbar.scss
.turbolinks-progress-bar {
background-color: orange;
}