Configurer le re-build automatique de l'app front lors de changements #47

Merged
kosssi merged 7 commits from html_auto_reload into main 2024-08-09 15:50:54 +02:00
Showing only changes of commit fb201f9d5d - Show all commits

View File

@ -1,16 +1,22 @@
use ::app::get_router; use ::app::get_router;
use axum::body::Body;
use axum::http::Request; use axum::http::Request;
use listenfd::ListenFd; use listenfd::ListenFd;
use notify::Watcher; use notify::Watcher;
use std::env; use std::env;
use std::path::Path; use std::path::Path;
use tokio::net::TcpListener; use tokio::net::TcpListener;
use tower_livereload::predicate::Predicate;
use tower_livereload::LiveReloadLayer; use tower_livereload::LiveReloadLayer;
kosssi marked this conversation as resolved Outdated

Ça vaudrait le coup de "comprendre" pourquoi on exclue les requêtes htmx dans ce contexte, et de l'expliquer en docstring de la fonction

(PS : les docstrings se font avec ### bla bla bla au dessus de la fonction)

Ça vaudrait le coup de "comprendre" pourquoi on exclue les requêtes htmx dans ce contexte, et de l'expliquer en docstring de la fonction (PS : les docstrings se font avec `### bla bla bla` au dessus de la fonction)

Le pourquoi du comment vient de cette issue dont le fix a été cette PR

En gros, c'est pour éviter que le script JS qui se gère du livereload côté client ne soit injecté dans chaque requête htmx ; car on n'en a besoin que sur la requête qui charge la page de "base".

Ça devrait donc, en effet, être approprié pour nous d'avoir ce mécanisme

PS : astuce, pour trouver cette info, j'ai cherché la ligne de code en question dans les PR github ;)

Le pourquoi du comment vient de cette [issue](https://github.com/leotaku/tower-livereload/issues/2) dont le fix a été cette [PR](https://github.com/leotaku/tower-livereload/pull/3) En gros, c'est pour éviter que le script JS qui se gère du livereload côté client ne soit injecté dans chaque requête htmx ; car on n'en a besoin que sur la requête qui charge la page de "base". Ça devrait donc, en effet, être approprié pour nous d'avoir ce mécanisme PS : astuce, pour trouver cette info, j'ai [cherché](https://github.com/search?q=%21req.headers%28%29.contains_key%28%22hx-request%22%29&type=pullrequests) la ligne de code en question dans les PR github ;)

J'ai ajouté de la documentation :

Nous filtrons les requêtes de htmx pour ne pas inclure le script JS qui gère le rechargement (Référence).

J'ai ajouté de la documentation : > Nous filtrons les requêtes de `htmx` pour ne pas inclure le script _JS_ qui gère le rechargement ([Référence](https://github.com/leotaku/tower-livereload/pull/3)).
/// Nous filtrons les requêtes de `htmx` pour ne pas inclure le script _JS_ qui gère le rechargement /// Nous filtrons les requêtes de `htmx` pour ne pas inclure le script _JS_ qui gère le rechargement
/// Voir https://github.com/leotaku/tower-livereload/pull/3 /// Voir https://github.com/leotaku/tower-livereload/pull/3
fn not_htmx_predicate<T>(req: &Request<T>) -> bool { #[derive(Copy, Clone)]
!req.headers().contains_key("hx-request") struct NotHtmxPredicate;
impl<T> Predicate<Request<T>> for NotHtmxPredicate {
fn check(&mut self, req: &Request<T>) -> bool {
!(req.headers().contains_key("hx-request"))
}
} }
const DEFAULT_LISTENER: &str = "localhost:3000"; const DEFAULT_LISTENER: &str = "localhost:3000";
@ -28,22 +34,24 @@ async fn get_tcp_listener() -> TcpListener {
} }
} }
fn get_livereload_layer(templates_path: &Path) -> LiveReloadLayer<NotHtmxPredicate> {
kosssi marked this conversation as resolved Outdated

Tout ce passage à base de listeners est un peu cryptique ; je pense que ça vaudrait le coup de le sortir dans une fonction au nom explicite pour gagner en lisibilité :) (get_tcp_listener par exemple)

Ça vaudrait le coup, aussi, de commenter l'objectif / la raison d'être des différents listeners et autre créés ici

Tout ce passage à base de listeners est un peu cryptique ; je pense que ça vaudrait le coup de le sortir dans une fonction au nom explicite pour gagner en lisibilité :) (`get_tcp_listener` par exemple) Ça vaudrait le coup, aussi, de commenter l'objectif / la raison d'être des différents listeners et autre créés ici

Nous avons fait du pair-programming ce matin pour répondre à cette conversation d’où les 2 commits avec @florian_briand ;)

Nous avons fait du pair-programming ce matin pour répondre à cette conversation d’où les 2 commits avec @florian_briand ;)
let livereload = LiveReloadLayer::new();
let reloader = livereload.reloader();
let mut watcher = notify::recommended_watcher(move |_| reloader.reload()).unwrap();
watcher
.watch(templates_path, notify::RecursiveMode::Recursive)
.unwrap();
livereload.request_predicate::<Body, NotHtmxPredicate>(NotHtmxPredicate)
}
#[tokio::main] #[tokio::main]
async fn main() { async fn main() {
let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap(); let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
let assets_path = Path::new(&manifest_dir).join("assets"); let assets_path = Path::new(&manifest_dir).join("assets");
let templates_path = Path::new(&manifest_dir).join("templates"); let templates_path = Path::new(&manifest_dir).join("templates");
// Setup the livereload let livereload_layer = get_livereload_layer(&templates_path);
let livereload = LiveReloadLayer::new(); let router = get_router(assets_path.as_path()).layer(livereload_layer);
let reloader = livereload.reloader();
let mut watcher = notify::recommended_watcher(move |_| reloader.reload()).unwrap();
watcher
.watch(&templates_path, notify::RecursiveMode::Recursive)
.unwrap();
let router =
get_router(assets_path.as_path()).layer(livereload.request_predicate(not_htmx_predicate));
let listener: TcpListener = get_tcp_listener().await; let listener: TcpListener = get_tcp_listener().await;
println!("Listening on: http://{}", listener.local_addr().unwrap()); println!("Listening on: http://{}", listener.local_addr().unwrap());