Default wire setting (#76)

Author: pascalbaljet

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 3.5.0 - 2022-01-05
+
+- Added `default_wire` configuration
+- Fix for overriding `wire:model` attribute
+
 ## 3.4.0 - 2022-01-04
 
 - Added `tailwind-forms-simple` views

README.md

@@ -266,7 +266,7 @@ class ContactForm extends Component
 }
 ```
 
-Normally you would use a `wire:model` attribute to bind a component property with a form element. By using the `@wire` directive, this package will automatically use the `wire:model` attribute instead of the `name` attribute.
+Normally you would use a `wire:model` attribute to bind a component property with a form element. By using the `@wire` directive, this package will automatically add the `wire:model` attribute.
 
 ```blade
 <x-form wire:submit.prevent="submit">
@@ -289,6 +289,8 @@ Additionally, you can pass an optional modifier to the `@wire` directive. This f
 </x-form>
 ```
 
+It's also possible to use the `wire:model` attribute by default. You may set the `default_wire` configuration setting to `true` or a modifier like `debounce.500ms`. This way, you don't need the `@wire` and `@endwire` directives in your views. You may still override the default setting by manually adding the `wire:model` attribute to a form element.
+
 ### Select elements
 
 Besides the `name` attribute, the `select` element has a required `options` attribute, which should be a simple *key-value* array.

config/config.php

@@ -10,6 +10,9 @@
 
     'use_eloquent_date_casting' => false,
 
+    /** bool | string */
+    'default_wire' => false,
+
     'components' => [
         'form' => [
             'view'  => 'form-components::{framework}.form',

src/Components/Component.php

@@ -36,6 +36,10 @@ public function render()
      */
     public function isWired(): bool
     {
+        if ($this->attributes && count($this->attributes->whereStartsWith('wire:model')->getIterator())) {
+            return false;
+        }
+
         return app(FormDataBinder::class)->isWired();
     }
 

src/FormDataBinder.php

@@ -16,6 +16,11 @@ class FormDataBinder
      */
     private $wire = false;
 
+    /**
+     * Whether the default wire has been verified once.
+     */
+    private $verifiedDefaultWire = false;
+
     /**
      * Bind a target to the current instance
      *
@@ -54,6 +59,16 @@ public function pop(): void
      */
     public function isWired(): bool
     {
+        if (!$this->verifiedDefaultWire) {
+            $this->verifiedDefaultWire = true;
+
+            $defaultWire = config('form-components.default_wire');
+
+            if ($defaultWire !== false) {
+                $this->wire = $defaultWire;
+            }
+        }
+
         return $this->wire !== false;
     }
 

tests/Feature/LivewireTest.php

@@ -41,6 +41,30 @@ public function render()
     }
 }
 
+class FormComponentDefaultWired extends FormComponent
+{
+    public function render()
+    {
+        return view('livewire-form-default-wired');
+    }
+}
+
+class FormComponentDefaultWiredModifier extends FormComponent
+{
+    public function render()
+    {
+        return view('livewire-form-default-wired-lazy');
+    }
+}
+
+class FormComponentDefaultWiredWithOverride extends FormComponent
+{
+    public function render()
+    {
+        return view('livewire-form-default-wired-with-override');
+    }
+}
+
 class LivewireTest extends TestCase
 {
     /** @test */
@@ -96,4 +120,49 @@ public function it_can_add_a_modifier_to_the_wire_directive()
             ->assertSeeHtml('The checkbox must be accepted')
             ->assertSeeHtml('The radio must be accepted');
     }
+
+    /** @test */
+    public function it_can_wire_by_default()
+    {
+        config(['form-components.default_wire' => true]);
+
+        $component = Livewire::test(FormComponentDefaultWired::class);
+
+        $component->assertSeeHtml('wire:model="input"')
+            ->assertSeeHtml('wire:model="textarea"')
+            ->assertSeeHtml('wire:model="select"')
+            ->assertSeeHtml('wire:model="multi_select"')
+            ->assertSeeHtml('wire:model="checkbox"')
+            ->assertSeeHtml('wire:model="radio"');
+    }
+
+    /** @test */
+    public function it_can_wire_by_default_with_a_modifier()
+    {
+        config(['form-components.default_wire' => 'debounce.1000ms']);
+
+        $component = Livewire::test(FormComponentDefaultWiredModifier::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"');
+    }
+
+    /** @test */
+    public function it_can_wire_by_default_but_still_override_the_value()
+    {
+        config(['form-components.default_wire' => true]);
+
+        $component = Livewire::test(FormComponentDefaultWiredWithOverride::class);
+
+        $component->assertSeeHtml('wire:model="input"')
+            ->assertSeeHtml('wire:model="textarea"')
+            ->assertDontSeeHtml('wire:model="select"')
+            ->assertSeeHtml('wire:model.debounce.1000ms="multi_select"')
+            ->assertSeeHtml('wire:model="checkbox"')
+            ->assertSeeHtml('wire:model="radio"');
+    }
 }

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

@@ -0,0 +1,14 @@
+<x-form wire:submit.prevent="submit">
+    <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 />
+</x-form>

tests/Feature/views/livewire-form-default-wired-with-override.blade.php

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

tests/Feature/views/livewire-form-default-wired.blade.php

@@ -0,0 +1,14 @@
+<x-form wire:submit.prevent="submit">
+    <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 />
+</x-form>

tests/Unit/FormDataBinderTest.php

@@ -2,8 +2,8 @@
 
 namespace ProtoneMedia\LaravelFormComponents\Tests\Unit;
 
-use PHPUnit\Framework\TestCase;
 use ProtoneMedia\LaravelFormComponents\FormDataBinder;
+use ProtoneMedia\LaravelFormComponents\Tests\TestCase;
 
 class FormDataBinderTest extends TestCase
 {