Persist data-turbo-permanent element within frames

[seanpdoyle]

Related to #64

Introduce the FrameRenderer (as a descendant of the Renderer
interface, inspired by the SnapshotRenderer implementation) to serve
as an abstraction for the behavior the FrameController was previously
responsible for.

Extract turbo-frame content extraction from the FrameController
class and combine it with code copied from SnapshotRenderer
responsible for cloning permanent elements into the new HTML.

It's likely that there is a concept awaiting extraction, or a less
duplicative way of re-using the permanent element extraction logic, but
this is a start.

Note, this commit does not resolve the <turbo-stream> element
rendering shortcomings, but might blaze a trail for a StreamRenderer
implementation.

[acetinick]

@seanpdoyle is this PR intended to improve the ability to persist elements between turbo requests within a < turbo-frame > tag?

I am looking to find a way to resolve a situation where I am looking to build a live filter and have the following code. Everything works fine, except when the turbo response comes back the text field loses focus, and looking for a way to persist the < div > section using a data-turbo-permanent attribute.

<turbo-frame>
  <div data-turbo-permanent>
      <%= form_for @criteria,  as: :criteria,  method: :get, url: locations_url,  data: { controller: "search" } do |f| %>
            <%= f.search_field :query, placeholder: "Search...",  data: { action: "debounced:input->search#trigger" } %>
      <% end %>
  </div>

  <table>
    <% for result in @results>
    <tr><td><%= result.name %></td></tr>
    <% end %>
  </table>

</turbo-frame>

[seanpdoyle]

@acetinick this diff intends to make that behavior possible. It's also worth noting that any element that declares data-turbo-permanent also has an id attribute.

You could modify the structure of your code example and make use of data-turbo-target to move the search outside of the <turbo-frame> to make that behavior possible before this change ships:

- <%= form_for @criteria,  as: :criteria,  method: :get, url: locations_url,  data: { controller: "search" } do |f| %>
+ <%= form_for @criteria,  as: :criteria,  method: :get, url: locations_url,  id: "search-criteria", data: { controller: "search", turbo_frame: "search", turbo_permanent: true } do |f| %>
  <%= f.search_field :query, placeholder: "Search...",  data: { action: "debounced:input->search#trigger" } %>
<% end %>

- <turbo-frame>
+ <turbo-frame id="search">
  <table>
    <% for result in @results>
    <tr><td><%= result.name %></td></tr>
    <% end %>
  </table>

</turbo-frame>

[indigotechtutorials]

@seanpdoyle is this PR intended to improve the ability to persist elements between turbo requests within a < turbo-frame > tag?

I am looking to find a way to resolve a situation where I am looking to build a live filter and have the following code. Everything works fine, except when the turbo response comes back the text field loses focus, and looking for a way to persist the < div > section using a data-turbo-permanent attribute.

<turbo-frame>
  <div data-turbo-permanent>
      <%= form_for @criteria,  as: :criteria,  method: :get, url: locations_url,  data: { controller: "search" } do |f| %>
            <%= f.search_field :query, placeholder: "Search...",  data: { action: "debounced:input->search#trigger" } %>
      <% end %>
  </div>

  <table>
    <% for result in @results>
    <tr><td><%= result.name %></td></tr>
    <% end %>
  </table>

</turbo-frame>

Yes this made u be able to have a permanent element inside frames