ターボリンクをホットワイヤーにアップグレード/移行する方法

Replace stimulus imports

Replace turbolinks namespaces with turbo

Disable remote forms

Render form errors

ルートの取得に関するフォーム

モーダルのフォーム

Replace .js.erb to turbo_stream.erb

次の Rails 7 リリースでは、ホットワイヤーとスティミュラスが新しい Rails プロジェクトのデフォルトの JavaScript セットアップになります.最新のステップアップで既存の Rails アプリケーションを高速化するには、以下のガイドがターボリンクからホットワイヤーへの移行に役立ちます.

Devise と Rails UJS に関する注意事項

hotwire でデバイスを使用するには、いくつかの変更が必要です.実用的なガイドについては、GoRails episode を確認してください.

今のところ、Rails UJS は引き続き Hotwire と共存できます.以下のガイドは、Rails UJS がインストールされていることを前提に作成されています. UJS に完全に別れを告げたい場合は、この Drifting Ruby episode を確認してください.

インストール

gem hotwire-rails をインストールします. gem は以下をインストールするラッパーです.

ターボ (@hotwired/turbo-rails")

刺激 JS ライブラリ (@hotwired/stimulus)

刺激を既にインストールしている場合は、yarn または npm を使用してパッケージを削除します.例: yarn remove stimulus@^2.0.0 .

交換

# old
gem 'turbolinks'
# new
gem 'hotwire-rails'

実行 ./bin/bundle install実行 ./bin/rails hotwire:installapplication.js のターボリンク参照を削除します.

// old
require("turbolinks").start()
// new 
import "@hotwired/turbo-rails"

1. 刺激のインポートを置き換える

Stimulus JS が既にインストールされている場合は、既存の刺激コントローラーを更新する必要があります.インポート ライブラリを @hotwired/stimulus に設定します.

// old
import { Controller } from "stimulus"
//new 
import { Controller } from "@hotwired/stimulus"

2.ターボリンクの名前空間をターボに置き換えます

アプリにターボリンクの参照が含まれているかどうかを確認し、新しいターボ名前空間にスワップします.

例えば:

スクリプトタグ

// old
document.addEventListener('turbolinks:load', ...)
// new
document.addEventListener('turbo:load', ...)

ターボリンクは特定のリンクのクリックをオプトアウトします

<!-- old -->
<%= link_to path, data:{turbolinks: false} do %>
<!-- new -->
<%= link_to path, data:{turbo: false} do %>

プログラムでターボリンクをリダイレクトします.

# old
Turbolinks.visit(location)
# new
Turbo.visit(location)

3.リモートフォームを無効にする

turbo-rails で説明されているように、application.rb で構成を設定して、すべてのリモート フォームを無効にします.

config.action_view.form_with_generates_remote_forms = false

または、 local: true を追加して、すべてのフォームを 1 つずつ変更することもできます.

<!-- old -->
<%= form_with model: @task, url: task_path(@task), method: :put do %>
...
<% end %>

<!-- new -->
<%= form_with model: @task, url: task_path(@task), method: :put, local: true do %>
...
<% end %>

4. レンダリング フォーム エラー

4.1. GET ルートのフォーム

/new または /edit ページのように

ページにエラーをレンダリングするために、else-leg でフォームをレンダリングするときに status: unprocessable_entity を追加します.

# old
def create
  @task = Task.new(task_params)
  if @task.save
    redirect_to tasks_path, notice: 'Task created.'
  else
    render :new
  end
end

# new
def create
  @task = Task.new(task_params)
  if @task.save
    redirect_to tasks_path, notice: 'Task created.'
  else
    render :new, status: :unprocessable_entity
  end
end

4.2 モーダルのフォーム

ステップ 3.1 で :unprocessable_entity アプローチを使用しても、モーダルに表示されるフォームでは機能しません.この GoRails episode では、詳細なソリューションについて詳しく説明しています. status: :unprocessable_entity の代わりに、新しい turbo_stream 形式を使用してエラーをレンダリングします. Turbo_stream.erb はフォーム ID を見つけて、それを新しい HTML テンプレートに置き換えます.

これは、既存の js.erb テンプレートを新しい turbo_stream 形式に置き換える良い機会でもあります.

# old
def create
  @task = Task.new(task_params)
  if @task.save
    redirect_to tasks_path, notice: 'Task created.'
  else
    render :new
  end
end

# new
def create
  @task = Task.new(task_params)
  if @task.save
    redirect_to tasks_path, notice: 'Task created.'
  else
    respond_to { |format| format.turbo_stream }
  end
end

次に、モーダル フォームに id を追加します. dom_id ヘルパー here について読んでください.

<!-- old -->
<%= form_with model: @task) do |f| %>
...
<% end %>
<!-- new -->
<%= form_with model: @task, id: dom_id(@task) do |f| %>
...
<% end %>

最後に、コントローラーのアクション名と一致する新しいファイルをビュー フォルダーに追加します: create.turbo_stream.erb

<%= turbo_stream.replace "new_task", partial: "tasks/form", task: @task %>

new_task は、dom_id(@task) によって生成されるフォームの ID を参照します.

"tasks/form" は、モーダル

でフォームを最初に表示するのと同じフォーム パーシャルです.

@task は、フォーム

に渡されるエラーのある更新されたインスタンスです.

5. .js.erb を turbo_stream.erb に置き換えます

hotwire とその代替アプローチを使用して、ページのコンテンツを更新します.新しい Turbo_stream アプローチを活用したいと考えています.


読んでくれてありがとう.

質問?フィードバック?お知らせ下さい :)