Statamic Livewire Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require marcorieser/statamic-livewire
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Marcorieser\StatamicLivewire\StatamicLivewireServiceProvider" --tag="config"
   

2. Register the Livewire Service Provider Add to config/app.php under providers:

   Marcorieser\StatamicLivewire\StatamicLivewireServiceProvider::class,
   

3. First Use Case: Embedding a Livewire Component in Antlers In a Statamic template (.antlers.html):

   {{ livewire:my-component property="value" }}
   

   Or in Blade:

   @livewire('my-component', ['property' => 'value'])
   

4. Create a Basic Livewire Component

   php artisan make:livewire MyComponent
   

   Example component (app/Http/Livewire/MyComponent.php):

   <?php
   
   namespace App\Http\Livewire;
   
   use Livewire\Component;
   
   class MyComponent extends Component
   {
       public $property = 'default';
   
       public function render()
       {
           return view('livewire.my-component');
       }
   }
   

5. Render the Component Create resources/views/livewire/my-component.blade.php:

   <div>
       <input wire:model="property" type="text">
       <p>Current value: {{ $property }}</p>
   </div>
   

Implementation Patterns

Common Workflows

1. Dynamic CMS Forms with Livewire

• Use Case: Build a custom entry editor or submission form without JavaScript.
• Pattern:
  • Extend Livewire\Component and bind to Statamic’s $data or $errors.
  • Example:

    public $title;
    public $content;
    
    public function mount()
    {
        $this->title = request('title', '');
        $this->content = request('content', '');
    }
    
    public function save()
    {
        $entry = Entry::make();
        $entry->title = $this->title;
        $entry->content = $this->content;
        $entry->save();
    }
    

  • Render in Antlers:

    {{ livewire:custom-entry-form entry_id="{{ entry.id }}" }}
    

2. Reactive Content Previews

• Use Case: Preview changes to a Statamic entry in real-time.
• Pattern:
  • Use Livewire’s wire:model to sync with Statamic’s $data.
  • Example:

    <div>
        <input wire:model="data.title" type="text">
        <div wire:ignore>
            {{ $data->title->toHtml() }}
        </div>
    </div>
    

  • Wire up the component to Statamic’s {{ entry }} object.

3. Polling for Updates

• Use Case: Fetch real-time updates (e.g., notifications, live stats).
• Pattern:
  • Use Livewire’s wire:poll to refresh data periodically.
  • Example:

    public function poll()
    {
        $this->stats = Stats::latest()->first();
    }
    

  • Blade:

    <div wire:poll.5000ms>
        {{ $stats->value }}
    </div>
    

4. Integration with Statamic Collections

• Use Case: Build a custom collection listing or filter UI.
• Pattern:
  • Query Statamic’s Collection facade inside Livewire.
  • Example:

    public $search = '';
    
    public function getEntriesProperty()
    {
        return Collection::query()
            ->where('title', 'like', "%{$this->search}%")
            ->get();
    }
    

  • Blade:

    <input wire:model="search" type="text">
    @foreach($entries as $entry)
        <div>{{ $entry->title }}</div>
    @endforeach
    

5. Hybrid Antlers/Blade Components

• Use Case: Mix Antlers logic with Livewire reactivity.
• Pattern:
  • Use {{ livewire: }} inside Antlers and pass dynamic data via wire:model.
  • Example:

    {{ livewire:user-profile user="{{ user }}" }}
    

  • Livewire component:

    public $user;
    
    public function mount($user)
    {
        $this->user = User::find($user);
    }
    

Integration Tips

1. Statamic Asset Handling

   • Use asset() helper or Statamic’s {{ url }} tag inside Livewire views for assets.
   • Example:

     <img src="{{ asset('images/' . $this->image) }}" alt="">
     

2. Form Submission with Statamic CSRF

   • Ensure Livewire forms include Statamic’s CSRF token:

     @csrf
     

3. Livewire + Statamic Validation

   • Combine Livewire’s validation with Statamic’s rules:

     use Illuminate\Validation\Rule;
     
     public function rules()
     {
         return [
             'title' => ['required', Rule::unique('entries')->ignore($this->entry)],
         ];
     }
     

4. Livewire Middleware

   • Apply Statamic middleware to Livewire components via handle():

     public function handle()
     {
         if (!auth()->check()) {
             return redirect()->route('login');
         }
     }
     

5. Testing

   • Use Livewire’s testing helpers alongside Statamic’s TestCase:

     public function test_component()
     {
         $this->actingAs($user)
              ->livewire(MyComponent::class)
              ->assertSee('Expected Text');
     }
     

Gotchas and Tips

Pitfalls

1. Caching Conflicts

   • Issue: Statamic’s template caching may interfere with Livewire’s reactivity.
   • Fix: Disable caching for Livewire views or use {{ cache:off }} in Antlers:

     {{ cache:off }}
     {{ livewire:my-component }}
     {{ /cache:off }}
     

2. Livewire + Antlers Syntax Clashes

   • Issue: Antlers tags ({{ }}) may conflict with Livewire’s Blade directives.
   • Fix: Use {{ livewire: }} in Antlers and escape Blade tags with @verbatim if needed:

     @verbatim
     @livewire('my-component')
     @endverbatim
     

3. State Persistence Across Requests

   • Issue: Livewire state may not persist if Statamic’s session handling differs.
   • Fix: Ensure SESSION_DRIVER is consistent (e.g., database or file) in .env.

4. Asset Pipeline Conflicts

   • Issue: Livewire’s Alpine.js or Tailwind may conflict with Statamic’s asset pipeline.
   • Fix: Exclude Livewire assets from Statamic’s build process or use @vite directives:

     @vite(['resources/js/app.js', 'resources/css/app.css'])
     

5. Livewire + Statamic Entry Data Binding

   • Issue: Directly binding to $entry->data may cause serialization errors.
   • Fix: Use wire:model with a getter/setter:

     public function getTitleProperty()
     {
         return $this->entry->title ?? '';
     }
     
     public function setTitleProperty($value)
     {
         $this->entry->title = $value;
     }
     

Debugging Tips

1. Livewire Wire:ignore

   • Use wire:ignore on dynamic content (e.g., iframes, third-party scripts) to avoid reactivity issues.

2. Log Livewire Events

   • Debug component lifecycle with:

     public function mounting()
     {
         \Log::info('Component mounted');
     }
     
     public function hydrating()
     {
         \Log::info('Component hydrated');
     }
     

3. Statamic Entry Events

   • Listen for Statamic events (e.g., EntrySaved) to sync Livewire state:

     Event::listen(EntrySaved::class, function ($event) {
         // Update Livewire component state
     });
     

4. Clear Livewire Cache

   • If components behave unexpectedly, clear Livewire’s cache:

     php artisan livewire:discover
     php artisan view:clear
     

5. Check for JavaScript Errors

   • Livewire relies on Alpine.js. Open browser dev tools (F12) to check for JS errors that may block reactivity.

Extension Points

1. Custom Livewire Directives
   • Extend Livewire’s directives for Statamic-specific use cases:

     Livewire