İçeriğe atla

DevinimJS Bridge

DevinimJS, DizgePHP'in tarayıcı etkileşim katmanıdır. Custom element'ler sunucu tarafında dv() ile render edilir; gerektiğinde sunucu, bridge protokolü ile client state'ini düzeltir.

dv() ile bileşen render

<?= dv('counter', start: 3, step: 1) ?>
<?= dv('data-table', columns: ['ID', 'Ad'], rows: $rows, label: 'Liste') ?>
<?= dv('field', id: 'email', name: 'email', label: 'E-posta', control: 'input', attrs: ['type' => 'email']) ?>

dv() tüm prop değerlerini otomatik kaçırır. Bileşen ismi allowlist ile doğrulanır.

Bridge protokolü

Client tarafında yapılan bir değişikliğin sunucu tarafından düzeltilmesi gerektiğinde:

dv_bridge('counter', '#my-counter', 'change', function (array $detail): ?Patch {
    $count = (int) ($detail['count'] ?? 0);
    return $count > 100 ? dv_patch(['start' => 100]) : null;
});

Bridge handler'ı null döndürürse düzeltme yapılmaz. dv_patch([...]) ile client state'i güncellenir.

Bridge script'leri

<?= dv_bridge_scripts() ?>

Bu çağrı bridge endpoint'ini, CSRF token'ını ve tüm binding'leri JSON olarak sayfaya gömer, ardından bridge istemcisini yükler.

CLI Araçları →