Merge pull request #137 from hotwired-laravel/refresh-method-and-scroll-components

tonysm · web-flow · commit 7df2ba63d50a · 2024-01-04T22:51:53.000-03:00
Adds a `&lt;x-turbo::refresh-method /&gt;` and `&lt;x-turbo::refresh-scroll /&gt;` components
diff --git a/docs/helpers.md b/docs/helpers.md
@@ -60,7 +60,7 @@ If you're rendering a Turbo Stream inside a your Blade files, you may use the `<
 
 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::refresh-method method="morph" />` Blade Component
 
 We can configure which update method Turbo should so to update the document:
 
@@ -69,14 +69,42 @@ We can configure which update method Turbo should so to update the document:
 | `replace` | Updates the entire body of the document on Turbo Visits |
 | `morph` | Uses DOM morphing to update the document instead of replacing everything |
 
+Here's how you can use it:
+
+```blade
+<x-turbo::refresh-method method="morph" />
+```
+
+The output would be:
+
+```blade
+<meta name="turbo-refresh-method" content="morph">
+```
+
+### The `<x-turbo::refresh-scroll scroll="preserve" />` Blade Component
+
 You can also configure the scroll behavior on Turbo:
 
 | Behavior | Description |
 |---|---|
 | `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:
+Here's how you can use it:
+
+```blade
+<x-turbo::refresh-scroll scroll="preserve" />
+```
+
+The output would be:
+
+```blade
+<meta name="turbo-refresh-scroll" content="preserve">
+```
+
+### The `<x-turbo::refreshes-with>` Blade Component
+
+You may configure both the refresh method and scroll behavior using 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" />
diff --git a/resources/views/components/refresh-method.blade.php b/resources/views/components/refresh-method.blade.php
@@ -0,0 +1,8 @@
+@props(['method' => 'replace'])
+
+@php
+    throw_unless(in_array($method, ['replace', 'morph']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshMethod($method));
+@endphp
+
+<meta name="turbo-refresh-method" content="{{ $method }}">
+
diff --git a/resources/views/components/refresh-scroll.blade.php b/resources/views/components/refresh-scroll.blade.php
@@ -0,0 +1,7 @@
+@props(['scroll' => 'reset'])
+
+@php
+    throw_unless(in_array($scroll, ['reset', 'preserve']), HotwiredLaravel\TurboLaravel\Exceptions\PageRefreshStrategyException::invalidRefreshScroll($scroll));
+@endphp
+
+<meta name="turbo-refresh-scroll" content="{{ $scroll }}">
diff --git a/resources/views/components/refreshes-with.blade.php b/resources/views/components/refreshes-with.blade.php
@@ -1,9 +1,4 @@
 @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 }}">
+<x-turbo::refresh-method :method="$method" />
+<x-turbo::refresh-scroll :scroll="$scroll" />
