사용자 지정 터보 스트림 작업

Turbo Hotwire는 깔끔합니다. Turbo 프레임의 단순함이 정말 마음에 듭니다. 그러나 CableReady을 사용한 후 터보 스트림이 약간 제한적으로 느껴집니다. 커스텀 터보 액션을 생성하기 위해 터보 스트림을 향상시키는 보석/패키지를 찾을 수 없었을 때 저는 놀랐습니다.

면책 조항: 이 게시물은 Turbo streams 및 StimulusJS에 익숙하지 않은 경우 이해가 되지 않습니다.

일부 작업이 완료된 후 새 페이지로 리디렉션하거나 양식을 재설정하려는 경우 터보 스트림 작업으로는 이를 수행할 수 있는 방법이 없다고 가정해 보겠습니다. CableReady로 할 수 있는 일cable_ready.redirect_to(url: some_url) ( docs ).

그래서 사용자 지정 터보 스트림 작업을 만드는 방법이 궁금했습니다. DHH(Rails의 최초 제작자)가 터보 스트림에 대해 논의한 방식으로 볼 때 터보가 더 많은 작업을 지원할 가능성은 낮습니다.
pending PR 하지만 많이 움직이지는 않았습니다.

오늘 우리는 무엇을 할 수 있습니까?

구조를 위한 자극 컨트롤러

StimulusJS에서 사용하는 터보 스트림 패턴을 모방할 수 있습니다. StimulusJS에는 자극 컨트롤러가 있는 새 요소가 DOM에 추가될 때 실행되는 연결이라는 수명 주기 메서드가 있습니다.

리디렉션 예제의 경우 다음과 같이 작성할 수 있습니다.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
      // take a value as an argument where to redirect
    static values = { url: String } 
    connect() {
        // perform wanted behavior
        Turbo.visit(this.urlValue)
        // clean up after action is executed
      this.element.remove()
    }
}

따라서 본문의 아무 곳에나 추가된 다음 html은 리디렉션을 수행합니다.

<template data-controller="redirect" data-redirect-url-value="<%= your_redirect_url %>"></template>

따라서 터보 스트림을 사용하여 다음을 본체에 연결할 수 있습니다.

<%= turbo_stream.append_all "body" do %>
    <template data-controller="redirect" data-redirect-url-value="<%= your_redirect_url %>"></template>
<% end %>

그리고 브라우저는 이 터보 스트림 응답에 따라 리디렉션됩니다. BTW: append_all를 사용하여 특정 id를 가진 요소의 존재에 의존하지 않고 본문에 추가할 수 있습니다.

더 나은 개발자 경험

가장 우아한 솔루션은 아니지만 작동하며 오버헤드가 거의 없습니다. 다음과 같은 것을 허용하는 도우미를 작성하여 개발자 경험을 개선할 수 있습니다.

<%= turbo_stream_action :redirect, url: "http://www.rstuder.ch" %>

따라서 본문에 추가하고 값의 해시를 자극 컨트롤러의 값으로 변환하는 터보 스트림 태그를 생성하는 도우미를 작성할 수 있습니다.

module TurboStreamHelper
  def turbo_stream_action(action, **values)
    controller_name = action.to_s.dasherize

    data_attrs = {
      "data-controller" => controller_name
    }

    data_attrs = values.each_with_object(data_attrs) do |(key, value), attrs|
      attrs["data-#{controller_name}-#{key.to_s.dasherize}-value"] = value
    end

    turbo_stream.append_all "body" do
      content_tag(:template, nil, data_attrs.merge)
    end
  end
end

그래서 우리는 사용자 지정 작업을 만들고 터보 스트림 템플릿의 인수를 사용하여 호출할 수 있는 기능을 제공하는 몇 가지 규칙에 대한 간단한 API를 얻었습니다.

결론

Stimulus Controller가 포함된 터보 스트림은 사용자 지정 작업을 수행할 수 있는 충분한 성능을 제공합니다. 추가 의존성 없이. 어쨌든 CableReady를 사용한다면 다음을 살펴보십시오.
this package from the wonderful Marco Roth 터보 스트림과 함께 케이블 준비 작업을 사용할 수 있도록 합니다.

추신: 이 게시물은 원래 rstuder.ch에 게시되었습니다.