خطافات JavaScript في Livewire v4

يوفر Livewire v4 خطافات JavaScript للتكامل مع دورة حياة المكون.

خطافات دورة حياة الطلب

// الربط بكل طلب Livewire
Livewire.hook('request', ({ uri, options, payload, respond, succeed, fail }) => {
    // قبل إرسال الطلب
    console.log('الطلب يبدأ...', payload);
    
    // بعد استجابة ناجحة
    succeed(({ status, json }) => {
        console.log('الطلب نجح!', status);
    });
    
    // بعد استجابة فاشلة
    fail(({ status, content, preventDefault }) => {
        console.error('الطلب فشل!', status);
        // منع المعالجة الافتراضية للخطأ
        preventDefault();
    });
});

خطافات دورة حياة المكون

// عند تهيئة المكون
Livewire.hook('component.init', ({ component, cleanup }) => {
    console.log('المكون تمت تهيئته:', component.name);
    
    // التنظيف عند تدمير المكون
    cleanup(() => {
        console.log('المكون تم تدميره');
    });
});

// قبل تحويل DOM
Livewire.hook('morph.updating', ({ el, component, toEl, skip, childrenOnly }) => {
    // تخطي التحويل لعناصر محددة
    if (el.hasAttribute('data-no-morph')) {
        skip();
    }
});

// بعد تحويل DOM
Livewire.hook('morph.updated', ({ el, component }) => {
    // إعادة تهيئة المكتبات الخارجية
    initTooltips(el);
});

خطافات العناصر

// عند إضافة عناصر جديدة لـ DOM
Livewire.hook('element.init', ({ el, component }) => {
    // تهيئة أي JS خاص بالعنصر
    if (el.hasAttribute('data-chart')) {
        initChart(el);
    }
});

// قبل إزالة العنصر
Livewire.hook('element.removing', ({ el, component, skip }) => {
    // التنظيف قبل الإزالة
    if (el.chart) {
        el.chart.destroy();
    }
});