Merge pull request #134 from hotwired-laravel/turbo-drive-components

Turbo Drive components

Author: tonysm

docs/broadcasting.md

@@ -26,16 +26,16 @@ You may add this tag to any Blade view passing the channel you want to listen to
 />
 ```
 
-For convenience, you may prefer using the `<x-turbo-stream-from>` Blade component that ships with Turbo Laravel (it requires that you have a custom element named `<turbo-echo-stream-source>` available, since that's the tag this component will render). You may pass the model as the `source` prop to it, it will figure out the channel name for that specific model using [Laravel's conventions](https://laravel.com/docs/broadcasting#model-broadcasting-conventions):
+For convenience, you may prefer using the `<x-turbo::stream-from>` Blade component that ships with Turbo Laravel (it requires that you have a custom element named `<turbo-echo-stream-source>` available, since that's the tag this component will render). You may pass the model as the `source` prop to it, it will figure out the channel name for that specific model using [Laravel's conventions](https://laravel.com/docs/broadcasting#model-broadcasting-conventions):
 
 ```blade
-<x-turbo-stream-from :source="$post" />
+<x-turbo::stream-from :source="$post" />
 ```
 
 By default, it expects a private channel, so it must be used in a page where users are already authenticated. You may control the channel type in the tag with a `type` attribute.
 
 ```blade
-<x-turbo-stream-from :source="$post" type="public" />
+<x-turbo::stream-from :source="$post" type="public" />
 ```
 
 Make sure you have the Broadcast Auth Route for your models registered in your `routes/channels.php` file:

docs/helpers.md

@@ -28,39 +28,39 @@ Which will generate a `comments_post_123` DOM ID, assuming your Post model has a
 
 ## Blade Components
 
-### The `<x-turbo-frame>` Blade Component
+### The `<x-turbo::frame>` Blade Component
 
-You may also prefer using the `<x-turbo-frame>` Blade component that ships with the package. This way, you don't need to worry about using the `@domid()` helper for your Turbo Frame:
+You may also prefer using the `<x-turbo::frame>` Blade component that ships with the package. This way, you don't need to worry about using the `@domid()` helper for your Turbo Frame:
 
 ```blade
-<x-turbo-frame :id="$post">
+<x-turbo::frame :id="$post">
     <!-- Content -->
-</x-turbo-frame>
+</x-turbo::frame>
 ```
 
 To the `:id` prop, you may pass a string, which will be used as-is as the DOM ID, an Eloquent model instance, which will be passed to the `dom_id()` function that ships with the package (the same one as the `@domid()` Blade directive uses behind the scenes), or an array tuple where the first item is an instance of an Eloquent model and the second is the prefix of the DOM ID, something like this:
 
 ```blade
-<x-turbo-frame :id="[$post, 'comments']">
+<x-turbo::frame :id="[$post, 'comments']">
     <!-- Comments -->
-</x-turbo-frame>
+</x-turbo::frame>
 ```
 
-Additionally, you may also pass along any prop that is supported by the Turbo Frame custom Element to the `<x-turbo-frame>` Blade component, like `target`, `src`, or `loading`. These are the listed attributes, but any other attribute will also be forwarded to the `<turbo-frame>` tag that will be rendered by the `<x-turbo-frame>` component. For a full list of what's possible to do with Turbo Frames, see the [documentation](https://turbo.hotwired.dev/handbook/frames).
+Additionally, you may also pass along any prop that is supported by the Turbo Frame custom Element to the `<x-turbo::frame>` Blade component, like `target`, `src`, or `loading`. These are the listed attributes, but any other attribute will also be forwarded to the `<turbo-frame>` tag that will be rendered by the `<x-turbo::frame>` component. For a full list of what's possible to do with Turbo Frames, see the [documentation](https://turbo.hotwired.dev/handbook/frames).
 
-### The `<x-turbo-stream>` Blade Component
+### The `<x-turbo::stream>` Blade Component
 
-If you're rendering a Turbo Stream inside a your Blade files, you may use the `<x-turbo-stream>` helper:
+If you're rendering a Turbo Stream inside a your Blade files, you may use the `<x-turbo::stream>` helper:
 
 ```blade
-<x-turbo-stream :target="$post" action="update">
+<x-turbo::stream :target="$post" action="update">
     @include('posts._post', ['post' => $post])
-<x-turbo-stream>
+<x-turbo::stream>
 ```
 
 Just like in the Turbo Frames' `:id` prop, the `:target` prop of the Turbo Stream component accepts a string, a model instance, or an array to resolve the DOM ID using the `dom_id()` function.
 
-### The `<x-turbo-refreshes-with>` Blade Component
+### The `<x-turbo::refreshes-with>` Blade Component
 
 We can configure which update method Turbo should so to update the document:
 
@@ -76,10 +76,10 @@ You can also configure the scroll behavior on Turbo:
 | `reset` | Resets the scroll position to the top, mimicking for the browser handles new page visits |
 | `preserve` | Preserves the current scroll position (usually results in a better UX when used with the `morph` method) |
 
-You may use the `<x-turbo-refreshes-with />` component in your main layout's `<head>` tag or on specific pages to configure how Turbo should update the page. Here's an example:
+You may use the `<x-turbo::refreshes-with />` component in your main layout's `<head>` tag or on specific pages to configure how Turbo should update the page. Here's an example:
 
 ```blade
-<x-turbo-refreshes-with method="morph" scroll="preserve" />
+<x-turbo::refreshes-with method="morph" scroll="preserve" />
 ```
 
 This will render two HTML `<meta>` tags:

docs/turbo-frames.md

@@ -15,19 +15,19 @@ The Turbo Stream tag that ships with Turbo can be used on your Blade views just
 In this case, the `@domid()` directive is being used to create a dom ID that looks like this `create_comment_post_123`. There's also a Blade Component that ships with Turbo Laravel and can be used like this:
 
 ```blade
-<x-turbo-frame :id="[$post, 'create_comment']">
+<x-turbo::frame :id="[$post, 'create_comment']">
     <p>Loading...</p>
-</x-turbo-frame>
+</x-turbo::frame>
 ```
 
 When using the Blade Component, you don't have to worry about using the `@domid()` directive or the `dom_id()` function, as this gets handled automatically by the package. You may also pass a string if you want to enforce your own DOM ID.
 
 Any other attribute passed to the Blade Component will get forwarded to the underlying `<turbo-frame>` element, so if you want to turn a Turbo Frame into a lazy-loading Turbo Frame using the Blade Component, you can do it like so:
 
 ```blade
-<x-turbo-frame :id="[$post, 'create_comment']" loading="lazy" :src="route('post.comments.create', $post)">
+<x-turbo::frame :id="[$post, 'create_comment']" loading="lazy" :src="route('post.comments.create', $post)">
     <p>Loading...</p>
-</x-turbo-frame>
+</x-turbo::frame>
 ```
 
 This will work for any other attribute you want to forward to the underlying component.

docs/turbo-streams.md

@@ -291,24 +291,24 @@ Remember, these are Blade views, so you have the full power of Blade at your han
 @endif
 ```
 
-Similar to the `<x-turbo-frame>` Blade component, there's also a `<x-turbo-stream>` Blade component that can simplify things a bit. It has the same convention of figuring out the DOM ID when you're passing a model instance or an array as `target` attribute of the `<x-turbo-frame>` component. When using the component version, there's no need to specify the template wrapper for the Turbo Stream tag, as that will be added by the component itself. So, the same example would look something like this:
+Similar to the `<x-turbo::frame>` Blade component, there's also a `<x-turbo::stream>` Blade component that can simplify things a bit. It has the same convention of figuring out the DOM ID when you're passing a model instance or an array as `target` attribute of the `<x-turbo::frame>` component. When using the component version, there's no need to specify the template wrapper for the Turbo Stream tag, as that will be added by the component itself. So, the same example would look something like this:
 
 ```blade
 @include('layouts.turbo.flash_stream')
 
-<x-turbo-stream :target="[$comment->post, 'comments']" action="append">
+<x-turbo::stream :target="[$comment->post, 'comments']" action="append">
     @include('comments._comment', ['comment' => $comment])
-</x-turbo-stream>
+</x-turbo::stream>
 ```
 
 I hope you can see how powerful this can be to reusing views.
 
 ## Custom Actions
 
-You may also use the `<x-turbo-stream>` Blade component for your custom actions as well:
+You may also use the `<x-turbo::stream>` Blade component for your custom actions as well:
 
 ```blade
-<x-turbo-stream action="console_log" value="Hello World" />
+<x-turbo::stream action="console_log" value="Hello World" />
 ```
 
 Custom actions are only supported from Blade views. You cannot return those from controllers using the Pending Streams Builder.

docs/upgrade.md

@@ -10,7 +10,13 @@ First, update the namespaces from the previous package. You can either do it fro
 find app config resources tests -type f -exec sed -i 's/Tonysm\\TurboLaravel/HotwiredLaravel\\TurboLaravel/g' {} +
 ```
 
-Next, require the new package and remove the previous one:
+Next, update your views referencing the old components as `<x-turbo-*` to the new format which is `<x-turbo::*`. This command should be enough:
+
+```bash
+find app resources tests -type f -exec sed -i 's/x-turbo-/x-turbo::/g' {} +
+```
+
+Then, require the new package and remove the previous one:
 
 ```bash
 composer require hotwired-laravel/turbo-laravel:2.0.0-beta1

resources/views/components/exempts-page-from-cache.blade.php

@@ -0,0 +1 @@
+<meta name="turbo-cache-control" content="no-cache">

resources/views/components/exempts-page-from-preview.blade.php

@@ -0,0 +1 @@
+<meta name="turbo-cache-control" content="no-preview">

resources/views/components/frame.blade.php

@@ -1,3 +1,19 @@
+@props(['id', 'loading' => null, 'src' => null, 'target' => null])
+
+@php
+    $domId = (function ($id) {
+        if (is_string($id)) {
+            return $id;
+        }
+
+        if ($id instanceof Illuminate\Database\Eloquent\Model) {
+            return dom_id($id);
+        }
+
+        return dom_id(...$id);
+    })($id);
+@endphp
+
 <turbo-frame
     id="{{ $domId }}"
     @if ($loading) loading="{{ $loading }}" @endif

resources/views/components/page-requires-reload.blade.php

@@ -0,0 +1 @@
+<meta name="turbo-visit-control" content="reload">

resources/views/components/refreshes-with.blade.php

@@ -1,2 +1,9 @@
+@props(['method' => 'replace', 'scroll' => 'reset'])
+
+@php
+    throw_unless(in_array($method, ['replace', 'morph']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshMethod($method));
+    throw_unless(in_array($scroll, ['reset', 'preserve']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshScroll($scroll));
+@endphp
+
 <meta name="turbo-refresh-method" content="{{ $method }}">
 <meta name="turbo-refresh-scroll" content="{{ $scroll }}">