Sıcak Yeniden Yükleme

FrankenPHP, geliştirici deneyimini büyük ölçüde iyileştirmek için tasarlanmış yerleşik bir sıcak yeniden yükleme özelliğine sahiptir.

Hot Reload

Bu özellik, Vite veya webpack gibi modern JavaScript araçlarındaki Sıcak Modül Değişimi (HMR) ile benzer bir iş akışı sunar. Her dosya değişikliğinden (PHP kodu, şablonlar, JavaScript ve CSS dosyaları…) sonra tarayıcıyı manuel olarak yenilemek yerine, FrankenPHP sayfa içeriğini gerçek zamanlı olarak günceller.

Sıcak Yeniden Yükleme, WordPress, Laravel, Symfony ve diğer tüm PHP uygulamaları veya framework’leri ile yerel olarak çalışır.

Etkinleştirildiğinde, FrankenPHP dosya sistemi değişiklikleri için mevcut çalışma dizininizi izler. Bir dosya değiştirildiğinde, tarayıcıya bir Mercure güncellemesi gönderir.

Kurulumunuza bağlı olarak, tarayıcı ya:

Idiomorph yüklüyse DOM’u dönüştürür (kaydırma konumunu ve girdi durumunu koruyarak).
Idiomorph mevcut değilse sayfayı yeniden yükler (standart canlı yeniden yükleme).

# Yapılandırma

Sıcak yeniden yüklemeyi etkinleştirmek için Mercure’ü etkinleştirin, ardından Caddyfile dosyanızdaki php_server yönergesine hot_reload alt yönergesini ekleyin.

Warning
Bu özellik yalnızca geliştirme ortamları içindir. hot_reload‘u üretimde etkinleştirmeyin, zira bu özellik güvenli değildir (hassas dahili ayrıntıları açığa çıkarır) ve uygulamanın yavaşlamasına neden olur.

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload
}

Varsayılan olarak, FrankenPHP mevcut çalışma dizinindeki şu glob desenine uyan tüm dosyaları izleyecektir: ./**/*.{css,env,gif,htm,html,jpg,jpeg,js,mjs,php,png,svg,twig,webp,xml,yaml,yml}

İzlenecek dosyaları glob sözdizimi kullanarak açıkça ayarlamak mümkündür:

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload src/**/*{.php,.js} config/**/*.yaml
}

Kullanılacak Mercure konusunu ve izlenecek dizin veya dosyaları belirtmek için hot_reload‘un uzun biçimini kullanın:

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload {
        topic hot-reload-topic
        watch src/**/*.php
        watch assets/**/*.{ts,json}
        watch templates/
        watch public/css/
    }
}

# İstemci Tarafı Entegrasyonu

Sunucu değişiklikleri algılarken, tarayıcının sayfayı güncellemek için bu olaylara abone olması gerekir. FrankenPHP, dosya değişikliklerine abone olmak için kullanılacak Mercure Hub URL’sini $_SERVER['FRANKENPHP_HOT_RELOAD'] ortam değişkeni aracılığıyla gösterir.

İstemci tarafı mantığını yönetmek için kullanışlı bir JavaScript kütüphanesi olan frankenphp-hot-reload da mevcuttur. Kullanmak için ana düzeninize aşağıdakileri ekleyin:

<!DOCTYPE html>
<title>FrankenPHP Hot Reload</title>
<?php if (isset($_SERVER['FRANKENPHP_HOT_RELOAD'])): ?>
<meta name="frankenphp-hot-reload:url" content="<?=$_SERVER['FRANKENPHP_HOT_RELOAD']?>">
<script src="https://cdn.jsdelivr.net/npm/idiomorph"></script>
<script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
<?php endif ?>

Kütüphane otomatik olarak Mercure hub’ına abone olacak, bir dosya değişikliği algılandığında arka planda mevcut URL’yi getirecek ve DOM’u dönüştürecektir. Bir npm paketi olarak ve GitHub üzerinden edinilebilir.

Alternatif olarak, EventSource yerel JavaScript sınıfını kullanarak doğrudan Mercure hub’ına abone olarak kendi istemci tarafı mantığınızı uygulayabilirsiniz.

# Mevcut DOM Düğümlerini Korumak

Nadir durumlarda, Symfony web hata ayıklama araç çubuğu gibi geliştirme araçları kullanırken olduğu gibi, belirli DOM düğümlerini korumak isteyebilirsiniz. Bunu yapmak için, ilgili HTML öğesine data-frankenphp-hot-reload-preserve özniteliğini ekleyin:

<div data-frankenphp-hot-reload-preserve><!-- Hata ayıklama çubuğum --></div>

# Çalışan Modu

Uygulamanızı Çalışan Modunda çalıştırıyorsanız, uygulama betiğiniz bellekte kalır. Bu, tarayıcı yeniden yüklense bile PHP kodunuzdaki değişikliklerin hemen yansımayacağı anlamına gelir.

En iyi geliştirici deneyimi için hot_reload‘u worker yönergesindeki watch alt yönergesiyle birleştirmelisiniz.

hot_reload: dosyalar değiştiğinde tarayıcıyı yeniler
worker.watch: dosyalar değiştiğinde çalışanı yeniden başlatır

localhost

mercure {
    anonymous
}

root public/
php_server {
    hot_reload
    worker {
        file /path/to/my_worker.php
        watch
    }
}

# Nasıl Çalışır

İzleme: FrankenPHP, arka planda e-dant/watcher kütüphanesini kullanarak (Go bağlayıcısını biz geliştirdik) dosya sistemindeki değişiklikleri izler.
Yeniden Başlatma (Çalışan Modu): Çalışan yapılandırmasında watch etkinse, yeni kodu yüklemek için PHP çalışanı yeniden başlatılır.
Gönderme: Değiştirilen dosyaların listesini içeren bir JSON yükü, yerleşik Mercure hub’ına gönderilir.
Alma: JavaScript kütüphanesi aracılığıyla dinleyen tarayıcı, Mercure olayını alır.
Güncelleme:

Idiomorph algılanırsa, güncellenmiş içeriği getirir ve mevcut HTML’i yeni duruma uydurmak için dönüştürerek, durum kaybetmeden değişiklikleri anında uygular.
Aksi takdirde, sayfayı yenilemek için window.location.reload() çağrılır.

Bu sayfayı düzenleyin