Add possibility to nest turbo frames

[alexandreruban]

I often get the case where I would like to nest turbo frames.

Let's take the example of the Article and the Comment models of the dummy app. Let's imagine that on the Articles#index page, we display multiple articles and we want to be able to add comments to them directly from this page.

When clicking on the "Add comment" button of the article with id 1, I need to append the new comment form on the right article, so I need a <turbo-frame id="article_1_new_comment">. I would like to be able to write it like this turbo_frame_tag(@article, Comment.new).

When submitting the form, I need to add the created comment at the right position so again, I need the nesting <turbo-frame id="article_1_comments"> to be able to append the comment in the comments list of the article with id 1. I would like to be able to write it like this turbo_frame_tag(@article, "comments").

What do you think? It would be nice to have a convention to prevent each developer team from writing its own nested_dom_id helper.

[seanpdoyle]

Could this be achieved with dom_id an a prefix argument?

turbo_frame_tag dom_id(@article, Comment.new)
turbo_frame_tag dom_id(@article, Comment.find(1))

On a somewhat related note, I've opened rails/rails#44081 on rails/rails to support calling dom_id with variable argument prefixes.

Edit: I think I understand, now. Are you saying that dom_id(Article.new, Comment.new) does not generate a new_comment prefix for Comment.new?

[alexandreruban]

I think I understand, now. Are you saying that dom_id(Article.new, Comment.new) does not generate a new_comment prefix for Comment.new?

Yes exactly! We have the following:

turbo_frame_tag dom_id(@article, Comment.new)
# The snippet above does not work as expected as it will render the following HTML
# <turbo-frame id="#<Comment:0x00007fe8d76dc7d0>_article_1"></turbo-frame>

turbo_frame_tag dom_id(@article, dom_id(Comment.new))
# The snippet above works but it's not very elegant
# <turbo-frame id="new_comment_article_1"></turbo-frame>

This is clearly a nice-to-have feature, but I really like being able to write with the elegant shorthand syntax:

turbo_frame_tag @article    # => <turbo-frame id="article_1"><turbo-frame>
turbo_frame_tag Comment.new # => <turbo-frame id="new_comment"><turbo-frame>

I think it would be nice to have the same kind of syntax in the case of "nested" frames and keep the dom_id hidden.

turbo_frame_tag @article, Comment.new # => <turbo-frame id="article_1_new_comment"></turbo-frame>

What do you think?

[alexandreruban]

@seanpdoyle did you have time to think about this feature?

I have another use case to show that it might be helpful to add this feature. For the comments list for a specific article, it would be great to easily generate the article_1_comments id for a Turbo Frame if the article id is 1.

# Without the feature
turbo_frame_tag dom_id("comments", @article) 
# => raises an error as "comments" does not responds to to_key?

turbo_frame_tag dom_id(@article, "comments") 
# => <turbo-frame id="comments_article_1"></turbo-frame>
# It works but the nesting feels like the other way around 

# With the feature
turbo_frame_tag(@article, "comments")
# => <turbo-frame id="article_1_comments"></turbo-frame>

That's the first scenario I added to the tests. What do you think?

[dhh]

@alexandreruban Can you add a second PR that documents the sugar?