Translation updates for: config.md . --------- Signed-off-by: Alexandre Daubois <2144837+alexandre-daubois@users.noreply.github.com> Co-authored-by: henderkes <7896469+henderkes@users.noreply.github.com> Co-authored-by: Alexandre Daubois <2144837+alexandre-daubois@users.noreply.github.com>
5.9 KiB
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.
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ı yenilerworker.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/watcherkü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
watchetkinse, 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.
