터보링크를 핫와이어로 업그레이드/마이그레이션하는 방법

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 설정이 될 것입니다. 최신 단계로 기존 레일 애플리케이션의 속도를 높이려면 아래 가이드가 터보링크에서 핫와이어로 마이그레이션하는 데 도움이 될 수 있습니다.

Devise 및 Rails UJS에 대한 참고 사항

장치를 핫와이어로 사용하려면 몇 가지 변경 사항이 필요합니다. 실용적인 가이드는 GoRails episode을 확인하십시오.

현재로서는 Rails UJS 여전히 Hotwire와 공존할 수 있습니다. 아래 가이드는 Rails UJS가 설치되어 있다는 가정 하에 작성되었습니다. UJS와 완전히 작별하고 싶다면 이것을 확인하십시오Drifting Ruby episode.

설치

gem을 설치합니다hotwire-rails. gem은 다음을 설치할 래퍼입니다.

터보(@hotwired/turbo-rails")

Stimulus JS 라이브러리(@hotwired/stimulus)

이미 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 %>

프로그래밍 방식으로 Turbolink를 리디렉션합니다.

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

3. 원격 양식 비활성화

모든 원격 양식을 비활성화하려면 turbo-rails에 언급된 대로 application.rb에서 구성을 설정하십시오.

config.action_view.form_with_generates_remote_forms = false

또는 local: true 를 추가하여 모든 형식을 하나씩 변경할 수 있습니다.

<!-- 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로 교체

핫와이어 및 대체 접근 방식을 사용하여 페이지의 콘텐츠를 업데이트합니다. 새로운 turbo_stream 접근 방식의 이점을 얻고자 합니다.


읽어 주셔서 감사합니다.

질문? 피드백? 알려줘요 :)