تكامل Livewire v4 مع Alpine.js

<div x-data="{ loading: false }">
    <!-- استدعاء دوال Livewire -->
    <button x-on:click="loading = true; $wire.save().then(() => loading = false)">
        <span x-show="!loading">حفظ</span>
        <span x-show="loading">جاري الحفظ...</span>
    </button>
    
    <!-- الوصول لخصائص Livewire -->
    <span x-text="$wire.username"></span>
    <span x-text="$wire.user.name"></span>
    
    <!-- تعيين الخصائص -->
    <button x-on:click="$wire.set('total', $wire.total + 1)">زيادة</button>
</div>

<div x-data="{ 
    open: $wire.entangle('showModal'),
    search: $wire.entangle('searchQuery').live
}">
    <!-- تغييرات Alpine تتزامن مع Livewire -->
    <button x-on:click="open = !open">تبديل النافذة</button>
    
    <!-- معدل .live للمزامنة الفورية -->
    <input x-model="search" placeholder="بحث...">
    
    <div x-show="open" x-transition>
        محتوى النافذة هنا
    </div>
</div>

<div x-data>
    <!-- إرسال إلى Livewire من Alpine -->
    <button x-on:click="$wire.dispatch('item-selected', { id: 5 })">
        اختر عنصر
    </button>
    
    <!-- الاستماع لأحداث Livewire في Alpine -->
    <div x-on:item-saved.window="alert('تم الحفظ!')"></div>
</div>