Skip to content

Commit 1410da5

Browse files
EhyiahEhyiah
committed
add fr trad for hot-reload.md
1 parent f4667e3 commit 1410da5

File tree

1 file changed

+139
-0
lines changed

1 file changed

+139
-0
lines changed

‎docs/fr/hot-reload.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# Hot Reload
2+
3+
FrankenPHP inclut une fonctionnalité de **hot reload** intégrée, conçue pour améliorer considérablement l'expérience développeur.
4+
5+
![Mercure](../hot-reload.png)
6+
7+
Cette fonctionnalité offre un workflow similaire au **Hot Module Replacement (HMR)** présent dans les outils JavaScript modernes (comme Vite ou webpack).
8+
Au lieu de rafraîchir manuellement le navigateur après chaque modification de fichier (code PHP, templates, fichiers JavaScript et CSS...),
9+
FrankenPHP met à jour le contenu en temps réel.
10+
11+
Le Hot Reload fonctionne nativement avec WordPress, Laravel, Symfony et tout autre application ou framework PHP.
12+
13+
Lorsqu'il est activé, FrankenPHP surveille votre répertoire de travail actuel pour détecter les modifications du système de fichiers.
14+
Quand un fichier est modifié, il envoie une mise à jour [Mercure](mercure.md) au navigateur.
15+
16+
Selon votre configuration, le navigateur va soit :
17+
18+
- **Transformer le DOM** (en préservant la position de défilement et l'état des champs de saisie) si [Idiomorph](https://github.com/bigskysoftware/idiomorph) est chargé.
19+
- **Recharger la page** (rechargement standard) si Idiomorph n'est pas présent.
20+
21+
## Configuration
22+
23+
Pour activer le hot reload, activez Mercure, puis ajoutez la sous-directive `hot_reload` à la directive `php_server` dans votre `Caddyfile`.
24+
25+
> [!WARNING]
26+
> Cette fonctionnalité est destinée **uniquement aux environnements de développement**.
27+
> N'activez pas `hot_reload` en production, car la surveillance du système de fichiers entraîne une surcharge de performance et expose des endpoints internes.
28+
29+
```caddyfile
30+
localhost
31+
32+
mercure {
33+
anonymous
34+
}
35+
36+
root public/
37+
php_server {
38+
hot_reload
39+
}
40+
```
41+
42+
Par défaut, FrankenPHP surveillera tous les fichiers du répertoire de travail actuel correspondant à cette syntaxe globale : `./**/*.{css,env,gif,htm,html,jpg,jpeg,js,mjs,php,png,svg,twig,webp,xml,yaml,yml}`
43+
44+
Il est possible de définir explicitement les fichiers à surveiller en utilisant la syntaxe globale :
45+
46+
```caddyfile
47+
localhost
48+
49+
mercure {
50+
anonymous
51+
}
52+
53+
root public/
54+
php_server {
55+
hot_reload src/**/*{.php,.js} config/**/*.yaml
56+
}
57+
```
58+
59+
Utilisez la forme longue pour spécifier le topic Mercure à utiliser ainsi que les répertoires ou fichiers à surveiller en fournissant des chemins à l'option `hot_reload` :
60+
61+
```caddyfile
62+
localhost
63+
64+
mercure {
65+
anonymous
66+
}
67+
68+
root public/
69+
php_server {
70+
hot_reload {
71+
topic hot-reload-topic
72+
watch src/**/*.php
73+
watch assets/**/*.{ts,json}
74+
watch templates/
75+
watch public/css/
76+
}
77+
}
78+
```
79+
80+
## Intégration côté client
81+
82+
Bien que le serveur détecte les modifications, le navigateur doit s'abonner à ces événements pour mettre à jour la page.
83+
FrankenPHP expose l'URL du Hub Mercure à utiliser pour s'abonner aux modifications de fichiers via la variable d'environnement `$_SERVER['FRANKENPHP_HOT_RELOAD']`.
84+
85+
Une bibliothèque JavaScript pratique, [frankenphp-hot-reload](https://www.npmjs.com/package/frankenphp-hot-reload), est également disponible pour gérer la logique côté client.
86+
Pour l'utiliser, ajoutez ce qui suit à votre layout principal :
87+
88+
```php
89+
<!DOCTYPE html>
90+
<title>FrankenPHP Hot Reload</title>
91+
<?php if (isset($_SERVER['FRANKENPHP_HOT_RELOAD'])): ?>
92+
<meta name="frankenphp-hot-reload:url" content="<?=$_SERVER['FRANKENPHP_HOT_RELOAD']?>">
93+
<script src="https://cdn.jsdelivr.net/npm/idiomorph"></script>
94+
<script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
95+
<?php endif ?>
96+
```
97+
98+
La bibliothèque s'abonnera automatiquement au hub Mercure, récupérera l'URL actuelle en arrière-plan lorsqu'une modification de fichier est détectée et transformera le DOM.
99+
Elle est disponible en tant que package [npm](https://www.npmjs.com/package/frankenphp-hot-reload) et sur [GitHub](https://github.com/dunglas/frankenphp-hot-reload).
100+
101+
Alternativement, vous pouvez implémenter votre propre logique côté client en vous abonnant directement au hub Mercure en utilisant la classe JavaScript native `EventSource`.
102+
103+
### Mode Worker
104+
105+
Si vous exécutez votre application en [mode Worker](worker.md), le script de votre application reste en mémoire.
106+
Cela signifie que les modifications de votre code PHP ne seront pas reflétées immédiatement, même si le navigateur se recharge.
107+
108+
Pour la meilleure expérience développeur, vous devriez combiner `hot_reload` avec [la sous-directive `watch` dans la directive `worker`](config.md#watching-for-file-changes).
109+
110+
- `hot_reload` : rafraîchit le **navigateur** lorsque les fichiers changent
111+
- `worker.watch` : redémarre le worker lorsque les fichiers changent
112+
113+
```caddy
114+
localhost
115+
116+
mercure {
117+
anonymous
118+
}
119+
120+
root public/
121+
php_server {
122+
hot_reload
123+
worker {
124+
file /path/to/my_worker.php
125+
watch
126+
}
127+
}
128+
```
129+
130+
### Comment ça fonctionne
131+
132+
1. **Surveillance** : FrankenPHP surveille le système de fichiers pour les modifications en utilisant [la bibliothèque `e-dant/watcher`](https://github.com/e-dant/watcher) en interne (nous avons contribué au binding Go).
133+
2. **Redémarrage (mode Worker)** : si `watch` est activé dans la configuration du worker, le worker PHP est redémarré pour charger le nouveau code.
134+
3. **Envoi** : un payload JSON contenant la liste des fichiers modifiés est envoyé au [hub Mercure](https://mercure.rocks) intégré.
135+
4. **Réception** : le navigateur, à l'écoute via la bibliothèque JavaScript, reçoit l'événement Mercure.
136+
5. **Mise à jour** :
137+
138+
- Si **Idiomorph** est détecté, il récupère le contenu mis à jour et transforme le HTML actuel pour correspondre au nouvel état, appliquant les modifications instantanément sans perdre l'état.
139+
- Sinon, `window.location.reload()` est appelé pour rafraîchir la page.

0 commit comments

Comments
 (0)