Support for Livewire modifiers (#33)

Author: pascalbaljet

README.md

@@ -240,6 +240,16 @@ Normally you would use a `wire:model` attribute to bind a component property wit
 </form>
 ```
 
+Additionally, you can pass an optional modifier to the `@wire` directive. This feature was added in v2.4.0. If you're upgrading from a previous version *and* you published the Blade views, you should republish them *or* update them manually.
+
+```blade
+<x-form wire:submit.prevent="submit">
+    @wire('debounce.500ms')
+        <x-form-input name="email" />
+    @endwire
+</form>
+```
+
 ### Select elements
 
 Besides the `name` attribute, the `select` element has a required `options` attribute, which should be a simple *key-value* array.

resources/views/bootstrap-4/form-checkbox.blade.php

@@ -4,7 +4,7 @@
         value="{{ $value }}"
 
         @if($isWired())
-            wire:model="{{ $name }}"
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
         @else
             name="{{ $name }}"
         @endif

resources/views/bootstrap-4/form-input.blade.php

@@ -14,7 +14,7 @@
             type="{{ $type }}"
 
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
                 value="{{ $value }}"

resources/views/bootstrap-4/form-radio.blade.php

@@ -3,7 +3,7 @@
         type="radio"
 
         @if($isWired())
-            wire:model="{{ $name }}"
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
         @else
             name="{{ $name }}"
         @endif

resources/views/bootstrap-4/form-select.blade.php

@@ -3,7 +3,7 @@
 
     <select
         @if($isWired())
-            wire:model="{{ $name }}"
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
         @else
             name="{{ $name }}"
         @endif

resources/views/bootstrap-4/form-textarea.blade.php

@@ -3,7 +3,7 @@
 
     <textarea
         @if($isWired())
-            wire:model="{{ $name }}"
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
         @else
             name="{{ $name }}"
         @endif

resources/views/tailwind-2/form-checkbox.blade.php

@@ -5,7 +5,7 @@
             value="{{ $value }}"
 
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind-2/form-input.blade.php

@@ -6,7 +6,7 @@
             'class' => 'block w-full ' . ($label ? 'mt-1' : '')
         ]) !!}
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
                 value="{{ $value }}"

resources/views/tailwind-2/form-radio.blade.php

@@ -4,7 +4,7 @@
             type="radio"
 
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind-2/form-select.blade.php

@@ -4,7 +4,7 @@
 
         <select
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind-2/form-textarea.blade.php

@@ -4,7 +4,7 @@
 
         <textarea
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind/form-checkbox.blade.php

@@ -5,7 +5,7 @@
             value="{{ $value }}"
 
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind/form-input.blade.php

@@ -6,7 +6,7 @@
             'class' => 'form-input block w-full ' . ($label ? 'mt-1' : '')
         ]) !!}
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
                 value="{{ $value }}"

resources/views/tailwind/form-radio.blade.php

@@ -4,7 +4,7 @@
             type="radio"
 
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind/form-select.blade.php

@@ -4,7 +4,7 @@
 
         <select
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

resources/views/tailwind/form-textarea.blade.php

@@ -4,7 +4,7 @@
 
         <textarea
             @if($isWired())
-                wire:model="{{ $name }}"
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
                 name="{{ $name }}"
             @endif

src/Components/Component.php

@@ -49,6 +49,18 @@ public function isNotWired(): bool
         return !$this->isWired();
     }
 
+    /**
+     * Returns the optional wire modifier.
+     *
+     * @return string
+     */
+    public function wireModifier(): ?string
+    {
+        $modifier = app(FormDataBinder::class)->getWireModifier();
+
+        return $modifier ? ".{$modifier}" : null;
+    }
+
     /**
      * Generates an ID, once, for this component.
      *

src/FormDataBinder.php

@@ -14,7 +14,7 @@ class FormDataBinder
     /**
      * Wired to a Livewire component.
      */
-    private bool $wire = false;
+    private $wire = false;
 
     /**
      * Bind a target to the current instance
@@ -54,17 +54,28 @@ public function pop(): void
      */
     public function isWired(): bool
     {
-        return $this->wire;
+        return $this->wire !== false;
     }
 
     /**
-     * Enable Livewire binding.
+     * Returns the modifier, if set.
      *
+     * @return string|null
+     */
+    public function getWireModifier(): ?string
+    {
+        return is_string($this->wire) ? $this->wire : null;
+    }
+
+    /**
+     * Enable Livewire binding with an optional modifier.
+     *
+     * @param string $modifier
      * @return void
      */
-    public function wire(): void
+    public function wire($modifier = null): void
     {
-        $this->wire = true;
+        $this->wire = $modifier ?: null;
     }
 
     /**

src/Support/ServiceProvider.php

@@ -36,8 +36,8 @@ public function boot()
             return '<?php app(\ProtoneMedia\LaravelFormComponents\FormDataBinder::class)->pop(); ?>';
         });
 
-        Blade::directive('wire', function () {
-            return '<?php app(\ProtoneMedia\LaravelFormComponents\FormDataBinder::class)->wire(); ?>';
+        Blade::directive('wire', function ($modifier) {
+            return '<?php app(\ProtoneMedia\LaravelFormComponents\FormDataBinder::class)->wire(' . $modifier . '); ?>';
         });
 
         Blade::directive('endwire', function () {

tests/Feature/LivewireTest.php

@@ -33,6 +33,14 @@ public function render()
     }
 }
 
+class FormComponentWithModifier extends FormComponent
+{
+    public function render()
+    {
+        return view('livewire-form-lazy');
+    }
+}
+
 class LivewireTest extends TestCase
 {
     /** @test */
@@ -61,4 +69,31 @@ public function it_can_validate_the_fields()
             ->assertSeeHtml('The checkbox must be accepted')
             ->assertSeeHtml('The radio must be accepted');
     }
+
+    /** @test */
+    public function it_can_add_a_modifier_to_the_wire_directive()
+    {
+        $component = Livewire::test(FormComponentWithModifier::class);
+
+        $component->assertSeeHtml('wire:model.debounce.1000ms="input"')
+            ->assertSeeHtml('wire:model.debounce.1000ms="textarea"')
+            ->assertSeeHtml('wire:model.debounce.1000ms="select"')
+            ->assertSeeHtml('wire:model.debounce.1000ms="multi_select"')
+            ->assertSeeHtml('wire:model.debounce.1000ms="checkbox"')
+            ->assertSeeHtml('wire:model.debounce.1000ms="radio"');
+
+        $component->set('input', '')
+            ->set('textarea', '')
+            ->set('select', '')
+            ->set('multi_select', [])
+            ->set('checkbox', false)
+            ->set('radio', false)
+            ->call('submit')
+            ->assertSeeHtml('The input field is required')
+            ->assertSeeHtml('The textarea field is required')
+            ->assertSeeHtml('The select field is required')
+            ->assertSeeHtml('The multi select field is required')
+            ->assertSeeHtml('The checkbox must be accepted')
+            ->assertSeeHtml('The radio must be accepted');
+    }
 }

tests/Feature/views/livewire-form-lazy.blade.php

@@ -0,0 +1,16 @@
+<x-form wire:submit.prevent="submit">
+    @wire('debounce.1000ms')
+        <x-form-input name="input" />
+        <x-form-textarea name="textarea" />
+        <x-form-select name="select" :options="['' => '', 'c' => 'c']" />
+        <x-form-select name="multi_select" multiple :options="['d' => 'd', 'e' => 'e', 'f' => 'f']" />
+
+        <x-form-checkbox name="checkbox" />
+
+        <x-form-group name="radio">
+            <x-form-radio name="radio" />
+        </x-form-group>
+
+        <x-form-submit />
+    @endwire
+</x-form>