View Components and Turbo

[tonywok]

Hi there,

As a user of both turbo and view_components, I'd like to help get the ball rolling with how/if they interact with one another, specifically around turbo streams. I suspect this is about to become a very common question with the changes that are coming to rails 7.

I suspect the first thing folks are going to run into is they don't have access to the turbo helpers that come from turbo-rails -- or at least that's been my experience. This is admittedly odd, as I'd expect they'd be accessible via helpers, like other methods that are usually delegated to view context.

For example, when naively using helpers.turbo_frame_tag, I end up getting a undefined method 'capture_haml' for #<ActionView::Base:0x000000000a2eb8> error. Yes, I'm using haml -- clearly I've not dug in too deep yet (hence the discussion 😅)

My solution for now was to introduce a module mixin that does the following, shamefully...

module Helpers
  module Turbo
    def turbo_frame_tag(id, src: nil, target: nil, **attributes, &block)
      id = id.respond_to?(:to_key) ? dom_id(id) : id
      src = url_for(src) if src.present?

      tag.turbo_frame(**attributes.merge(id: id, src: src, target: target).compact, &block)
    end
  end
end

Good enough for goofing around, but I'm not going to implement the entire interface. So, this "works", but is obviously gross and temporary.

This pushes me in the direction of doing my turbo streaming in the controller (as opposed to the component template). Looking something like this...

some_component = SomeComponent.new(blah)
          
respond_to do |format|
  format.turbo_stream do
    render(turbo_stream: turbo_stream.replace(some_component.some_id) { view_context.render(some_component) })             
  end
end

Again, good enough for learning the lib, but definitely not something I'd want to be doing too much of in a production setting.

---

So, that brings me to my purpose, how do we intend view components to be used with turbo? Anyone have thoughts?

[boardfish]

We're looking into general Turbo support in #1106. #1099 and #1137 might also be relevant here. I'd suggest having a read through those issues to understand where Turbo support sits right now. What you're experiencing with the helpers raising an error might be an issue to raise either here or on the turbo-rails repo.

When you're streaming from the controller, it may be best to use ApplicationController.render to render your components. Hope that's all helpful to you!