Adds Turbo Frame, Turbo Stream, and Turbo Stream From Blade components

[tonysm]

Added

• Adds new Blade components for x-turbo-frame, x-turbo-stream, and x-turbo-stream-from so we can simplify usage

---

This pushes some decisions to the package itself. Below you can find the before/after of using each component.

Turbo Frame

<turbo-frame id="@domid($post)">
  @include('posts._post', ['post' => $post])
</turbo-frame>

We can now write it like:

<x-turbo-frame :id="$post">
  @include('posts._post', ['post' => $post])
</x-turbo-frame>

Notice that you may pass an instance of an Eloquent Model to the id property, which will be used to generate a DOM ID using the dom_id function that ships with the package. There's no need to use the @domid Blade directive here.

The available properties are: src, loading, and target. Additionally, any other attributes passed to the component will be rendered inside the turbo-frame tag, so you may pass down a class attribute, for instance.

Turbo Stream

The Turbo Stream content needed to be wrapped in a <template tag (except for the "remove" action), so that decision was pushed to the Blade component itself, app-land code doesn't need to worry about this anymore.

So, before we would write something like this:

<turbo-stream target="@domid($post, 'comments')" action="append">
  <template>
    @include('comments._comment', ['comment' => $comment])
  </template>
</turbo-stream>

And now you may write it like:

<x-turbo-stream :target="[$post, 'comments']" action="append">
  @include('comments._comment', ['comment' => $comment])
</x-turbo-stream>

Notice that you may also pass an array which will then be used to generate the DOM ID using the dom_id function that ships with the package, so there's no need to use the @domid() Blade directive here anymore. Also, the <template> tag wrapping the content of the Turbo Stream is gone, that's now the responsibility of the Blade component to add.

Turbo Stream From

The package published a custom HTML Element for listening for Turbo Stream broadcasts. It can now be used with the x-turbo-stream-from Blade component.

Before you would have:

<turbo-echo-stream-source channel="{{ $post->broadcastingChannel() }}">
</turbo-echo-stream-source>

Now, you may prefer doing it like so:

<x-turbo-stream-from :source="$post" />

You may pass a string for the source property or an instance of an Eloquent Model, from which the package will get the broadcasting channel name. You may also specify which channel type using the type property. By default, it will be "private", but you may also use "public" or "presence". Additionally, any other attribute passed down to this component will be forwarded to the underlying HTML Element.