Livewire Unsaved Changes Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require mckenziearts/livewire-unsaved-changes
   

   Publish the config (optional, for customization):

   php artisan vendor:publish --provider="McKenzieArts\LivewireUnsavedChanges\ServiceProvider"
   

2. Basic Usage: Add the component to your Livewire form view:

   <livewire:your-component>
       @include('livewire-unsaved-changes::unsaved-changes')
   

   Wrap your form fields in the x-data directive:

   <form x-data="unsavedChangesForm">
       <!-- Form fields -->
   </form>
   

3. First Use Case: For a simple form, initialize the component in your Livewire class:

   public function mount()
   {
       $this->unsavedChanges = true; // Enable tracking
   }
   

Implementation Patterns

Core Workflow

1. Form Initialization:

   • Use x-data="unsavedChangesForm" on your <form> element to enable tracking.
   • Initialize the Livewire component with $this->unsavedChanges = true in mount().

2. Dynamic Field Tracking:

   • For dynamic fields (e.g., added via JavaScript), use Alpine’s x-model with Livewire’s wire:model:

     <input x-model="form.dynamicField" wire:model="dynamicField">
     

3. Integration with Livewire Events:

   • Trigger unsavedChanges events in your Livewire class:

     public function someAction()
     {
         $this->dispatch('unsaved-changes');
     }
     

4. Conditional Rendering:

   • Show/hide the bar based on logic:

     @if($this->shouldShowUnsavedChanges)
         @include('livewire-unsaved-changes::unsaved-changes')
     @endif
     

Advanced Patterns

• Custom Styling: Override Tailwind classes in your project’s CSS:

  .unsaved-changes-bar {
      @apply bg-yellow-500 text-white;
  }
  

• Multi-Form Pages: Use unique Alpine x-data namespaces:

  <form x-data="unsavedChangesForm1">...</form>
  <form x-data="unsavedChangesForm2">...</form>
  

• Server-Side Validation Sync: Reset the unsaved state after validation errors:

  protected $rules = [...];
  public function updated($property)
  {
      $this->validateOnly($property);
      $this->dispatch('reset-unsaved-changes');
  }
  

Gotchas and Tips

Common Pitfalls

1. Alpine/Livewire Conflicts:

   • Ensure Alpine’s x-data is not nested inside Livewire’s wire:model without proper binding.
   • Fix: Use wire:model.defer for laggy fields to avoid false unsaved triggers.

2. Dynamic Components:

   • Livewire’s dynamic components (e.g., @foreach) may not auto-track changes.
   • Fix: Manually dispatch unsaved-changes in mount() or updated():

     public function mount()
     {
         $this->dispatch('unsaved-changes');
     }
     

3. Route Model Binding:

   • Unsaved changes may persist after route changes if not cleared.
   • Fix: Listen for navigating events in Alpine:

     <script>
         window.addEventListener('navigating', () => {
             unsavedChangesForm.reset();
         });
     </script>
     

Debugging Tips

• Check Alpine State: Inspect the unsavedChangesForm object in browser dev tools (console.log(unsavedChangesForm)) to verify tracking.

• Disable Auto-Reset: Temporarily disable auto-reset in config ('auto_reset_on_save' => false) to debug unsaved state persistence.

• Event Listeners: Verify events are firing with Alpine’s x-on:

  <div x-on:unsaved-changes="console.log('Change detected!')">
  

Extension Points

1. Custom Triggers: Extend the component to support custom events (e.g., x-on:custom-trigger="unsavedChangesForm.markDirty").

2. Positioning: Override the default position (top/bottom) via config:

   'position' => 'bottom', // or 'top'
   

3. Animation Control: Disable animations in config for performance:

   'animate' => false,
   

4. Localization: Customize the "unsaved changes" text via Alpine:

   <script>
       unsavedChangesForm.message = 'Cambios sin guardar';
   </script>