feat: update version to v0.8.2

* feat: remove isLoader route property

* fix: has-parent-route fs-router util

* feat: handle routeGenerator nested __root

* feat: enable multiple roots with nested dynamic paths

* feat: enable nested routes

* fix: prevent route path creation for __root

* feat: prevent wrong path on subfolder index routes

* chore: cleaned tutorial example folder

* feat: update version to v0.8.0

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,28 +1,23 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
+## Description
 A clear and concise description of what the bug is.
 
-**To Reproduce**
-Steps to reproduce the behavior:
-
-**Expected behavior**
+## Expected behaviour
 A clear and concise description of what you expected to happen.
 
-**Screenshots**
+## How to reproduce
+Steps to reproduce the behavior:
+
+## Screenshots
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+## Tooling and environment
+ - Tuono version [e.g. 0.4.0]
+ - OS: [e.g. MacOS, Windows]
+ - Browser: [e.g. chrome, safari]
+ - Node version: [e.g. 20.0.0]
+ - Rust version: [e.g. 1.79.0]
+ - Crate version: [e.g. 1.78.0]
+ - Node Package Manger version: [e.g. pnpm: 9.5.0] 
 
-**Additional context**
+## Additional context
 Add any other context about the problem here.

.github/pull_request_template.md

@@ -1,3 +1,11 @@
+## Context
+
+<!--
+Explain the context and why you're making that change. What is the problem
+you're trying to solve? If a new feature is being added, describe the intended
+use case that feature fulfills.
+-->
+
 ## Description
 
 <!--
@@ -8,18 +16,3 @@ Bug fixes and new features should include tests.
 
 Contributors guide: https://github.com/Valerioageno/tuono/blob/main/CONTRIBUTING.md
 -->
-
-## Context
-
-<!--
-Explain the context and why you're making that change. What is the problem
-you're trying to solve? If a new feature is being added, describe the intended
-use case that feature fulfills.
--->
-
-## Solution
-
-<!--
-Summarize the solution and provide any necessary context needed to understand
-the code change.
--->

Cargo.toml

@@ -6,7 +6,7 @@ members = [
 		"crates/tuono_lib_macros",
 ]
 exclude = [
-		"examples/playground",
+		"examples/mdx",
 		"examples/tuono",
 		"examples/tutorial"
 ]

README.md

@@ -2,9 +2,6 @@
   <img src="https://raw.githubusercontent.com/Valerioageno/tuono/main/assets/logo.png" width="200px">
 </p>
 <h1 align="center">Tuono<br>The react/rust fullstack framework</h1>
-<p align="center">
-⚠️ This project is under heavy development ⚠️
-</p>
 <div align="center">
     <img src="https://github.com/Valerioageno/tuono/actions/workflows/rust.yml/badge.svg" />
     <img src="https://github.com/Valerioageno/tuono/actions/workflows/typescript.yml/badge.svg" />
@@ -41,6 +38,7 @@ by Tuono based on the files defined within the `./src/routes` directory.
 - 🍭  CSS modules
 - 🧬  Server Side Rendering
 - 🧵  Multi thread backend
+- ⌨️ MDX support
 - ⚙️   Build optimizations
 - Custom APIs*
 - Image optimization*
@@ -53,19 +51,21 @@ by Tuono based on the files defined within the `./src/routes` directory.
 As already mentioned above I strongly suggest you to take a look at the
 [tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md).
 
-Tuono is basically a CLI that provides all the commands to handle the fullstack project. 
-To download it you need [cargo](https://doc.rust-lang.org/cargo/) which is the [rust](https://www.rust-lang.org/)
+Tuono is the CLI that provides all the needed commands to handle the fullstack project. 
+To download it is required [cargo](https://doc.rust-lang.org/cargo/) which is the [rust](https://www.rust-lang.org/)
 package manager.
 
-To download and install it you just need to run `cargo install tuono`.
+Then run `cargo install tuono`.
 
-To create a new project run `tuono new [NAME]` (optionally you can pass the `--template` flag - check the 
+To list all the available commands run `tuono -h`
+
+To create a new project run `tuono new [NAME]` (optionally you can pass the `--template` (or `-t`) flag - check the 
 [examples](https://github.com/Valerioageno/tuono/tree/main/examples) folder).
 
 Then to run the local development environment run inside the project folder `tuono dev`
 
 Finally when the project will be ready to be deployed just run `tuono build` to create the final React assets
-and to set the server project to the `production` mode.
+and to set the server project in the `production` mode.
 
 Now to execute it just run `cargo run --release`.
 

crates/tuono/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono"
-version = "0.4.6"
+version = "0.8.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
@@ -30,4 +30,5 @@ glob = "0.3.1"
 regex = "1.10.4"
 reqwest = {version = "0.12.4", features =["blocking", "json"]}
 serde_json = "1.0"
+fs_extra = "1.3.0"
 

crates/tuono/src/app.rs

@@ -0,0 +1,300 @@
+use glob::glob;
+use glob::GlobError;
+use std::collections::{hash_map::Entry, HashMap};
+use std::path::PathBuf;
+use std::process::Child;
+use std::process::Command;
+use std::process::Stdio;
+
+use crate::route::Route;
+
+const IGNORE_EXTENSIONS: [&str; 3] = ["css", "scss", "sass"];
+const IGNORE_FILES: [&str; 1] = ["__root"];
+
+#[derive(Debug)]
+pub struct App {
+    pub route_map: HashMap<String, Route>,
+    pub base_path: PathBuf,
+}
+
+impl App {
+    pub fn new() -> Self {
+        let base_path = std::env::current_dir().unwrap();
+
+        let mut app = App {
+            route_map: HashMap::new(),
+            base_path,
+        };
+
+        app.collect_routes();
+
+        app
+    }
+
+    fn collect_routes(&mut self) {
+        glob(self.base_path.join("src/routes/**/*.*").to_str().unwrap())
+            .expect("Failed to read glob pattern")
+            .for_each(|entry| {
+                if self.should_collect_route(&entry) {
+                    self.collect_route(entry)
+                }
+            })
+    }
+
+    fn should_collect_route(&self, entry: &Result<PathBuf, GlobError>) -> bool {
+        let file_extension = entry.as_ref().unwrap().extension().unwrap();
+        let file_name = entry.as_ref().unwrap().file_stem().unwrap();
+
+        if IGNORE_EXTENSIONS.iter().any(|val| val == &file_extension) {
+            return false;
+        }
+
+        if IGNORE_FILES.iter().any(|val| val == &file_name) {
+            return false;
+        }
+        true
+    }
+
+    fn collect_route(&mut self, path_buf: Result<PathBuf, GlobError>) {
+        let entry = path_buf.unwrap();
+        let base_path_str = self.base_path.to_str().unwrap();
+        let path = entry
+            .to_str()
+            .unwrap()
+            .replace(&format!("{base_path_str}/src/routes"), "")
+            .replace(".rs", "")
+            .replace(".tsx", "");
+
+        if entry.extension().unwrap() == "rs" {
+            if let Entry::Vacant(route_map) = self.route_map.entry(path.clone()) {
+                let mut route = Route::new(path);
+                route.update_axum_info();
+                route_map.insert(route);
+            } else {
+                let route = self.route_map.get_mut(&path).unwrap();
+                route.update_axum_info();
+            }
+            return;
+        }
+        if let Entry::Vacant(route_map) = self.route_map.entry(path.clone()) {
+            let route = Route::new(path);
+            route_map.insert(route);
+        }
+    }
+
+    pub fn has_dynamic_routes(&self) -> bool {
+        self.route_map.iter().any(|(_, route)| route.is_dynamic)
+    }
+
+    pub fn build_react_prod(&self) {
+        Command::new("./node_modules/.bin/tuono-build-prod")
+            .output()
+            .expect("Failed to build the react source");
+    }
+
+    pub fn run_rust_server(&self) -> Child {
+        Command::new("cargo")
+            .arg("run")
+            .stdin(Stdio::piped())
+            .stdout(Stdio::piped())
+            .stderr(Stdio::piped())
+            .spawn()
+            .expect("Failed to run the rust server")
+    }
+}
+
+#[cfg(test)]
+mod tests {
+
+    use super::*;
+
+    #[test]
+    fn should_collect_routes() {
+        let mut app = App::new();
+        app.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/about.rs",
+            "/home/user/Documents/tuono/src/routes/index.rs",
+            "/home/user/Documents/tuono/src/routes/posts/index.rs",
+            "/home/user/Documents/tuono/src/routes/posts/[post].rs",
+            "/home/user/Documents/tuono/src/routes/posts/UPPERCASE.rs",
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| app.collect_route(Ok(PathBuf::from(route))));
+
+        let results = [
+            ("/index", "index"),
+            ("/about", "about"),
+            ("/posts/index", "posts_index"),
+            ("/posts/[post]", "posts_dyn_post"),
+            ("/posts/UPPERCASE", "posts_uppercase"),
+        ];
+
+        results.into_iter().for_each(|(path, module_import)| {
+            assert_eq!(
+                app.route_map
+                    .get(path)
+                    .unwrap()
+                    .axum_info
+                    .as_ref()
+                    .unwrap()
+                    .module_import,
+                String::from(module_import)
+            )
+        })
+    }
+
+    #[test]
+    fn should_create_multi_level_axum_paths() {
+        let mut app = App::new();
+        app.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/about.rs",
+            "/home/user/Documents/tuono/src/routes/index.rs",
+            "/home/user/Documents/tuono/src/routes/posts/index.rs",
+            "/home/user/Documents/tuono/src/routes/posts/any-post.rs",
+            "/home/user/Documents/tuono/src/routes/posts/[post].rs",
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| app.collect_route(Ok(PathBuf::from(route))));
+
+        let results = [
+            ("/index", "/"),
+            ("/about", "/about"),
+            ("/posts/index", "/posts"),
+            ("/posts/any-post", "/posts/any-post"),
+            ("/posts/[post]", "/posts/:post"),
+        ];
+
+        results.into_iter().for_each(|(path, expected_path)| {
+            assert_eq!(
+                app.route_map
+                    .get(path)
+                    .unwrap()
+                    .axum_info
+                    .as_ref()
+                    .unwrap()
+                    .axum_route,
+                String::from(expected_path)
+            )
+        })
+    }
+
+    #[test]
+    fn should_ignore_whitelisted_extensions() {
+        let mut app = App::new();
+        app.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/about.css",
+            "/home/user/Documents/tuono/src/routes/index.scss",
+            "/home/user/Documents/tuono/src/routes/posts/index.sass",
+        ];
+
+        routes.into_iter().for_each(|route| {
+            if app.should_collect_route(&Ok(PathBuf::from(route))) {
+                app.collect_route(Ok(PathBuf::from(route)))
+            }
+        });
+
+        assert!(app.route_map.is_empty())
+    }
+
+    #[test]
+    fn should_ignore_whitelisted_files() {
+        let mut app = App::new();
+        app.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/__root.tsx",
+            "/home/user/Documents/tuono/src/routes/posts/__root.tsx",
+        ];
+
+        routes.into_iter().for_each(|route| {
+            if app.should_collect_route(&Ok(PathBuf::from(route))) {
+                app.collect_route(Ok(PathBuf::from(route)))
+            }
+        });
+
+        assert!(app.route_map.is_empty())
+    }
+
+    #[test]
+    fn should_correctly_parse_routes_with_server_handler() {
+        let mut app = App::new();
+        app.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/about.rs",
+            "/home/user/Documents/tuono/src/routes/about.tsx",
+            "/home/user/Documents/tuono/src/routes/index.tsx",
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| app.collect_route(Ok(PathBuf::from(route))));
+
+        let results = [("/about", true), ("/index", false)];
+
+        results
+            .into_iter()
+            .for_each(|(path, expected_has_server_handler)| {
+                if expected_has_server_handler {
+                    assert!(app.route_map.get(path).unwrap().axum_info.is_some())
+                } else {
+                    assert!(app.route_map.get(path).unwrap().axum_info.is_none())
+                }
+            })
+    }
+
+    #[test]
+    fn has_dynamic_routes_works() {
+        let mut app = App::new();
+        app.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/index.rs",
+            "/home/user/Documents/tuono/src/routes/posts/[post].rs",
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| app.collect_route(Ok(PathBuf::from(route))));
+
+        assert!(app.has_dynamic_routes());
+
+        let mut app2 = App::new();
+        app2.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/[post].rs",
+            "/home/user/Documents/tuono/src/routes/posts/[post].rs",
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| app2.collect_route(Ok(PathBuf::from(route))));
+
+        assert!(app2.has_dynamic_routes());
+
+        let mut app3 = App::new();
+        app3.base_path = "/home/user/Documents/tuono".into();
+
+        let routes = [
+            "/home/user/Documents/tuono/src/routes/index.rs",
+            "/home/user/Documents/tuono/src/routes/posts/index.rs",
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| app3.collect_route(Ok(PathBuf::from(route))));
+
+        assert!(!app3.has_dynamic_routes())
+    }
+}

crates/tuono/src/cli.rs

@@ -0,0 +1,126 @@
+use fs_extra::dir::{copy, CopyOptions};
+use std::path::PathBuf;
+use std::thread::sleep;
+use std::time::Duration;
+
+use clap::{Parser, Subcommand};
+
+use crate::app::App;
+use crate::mode::Mode;
+use crate::scaffold_project;
+use crate::source_builder::{bundle_axum_source, check_tuono_folder, create_client_entry_files};
+use crate::watch;
+
+#[derive(Subcommand, Debug)]
+enum Actions {
+    /// Start the development environment
+    Dev,
+    /// Build the production assets
+    Build {
+        #[arg(short, long = "static")]
+        /// Statically generate the website HTML
+        ssg: bool,
+    },
+    /// Scaffold a new project
+    New {
+        /// The folder in which load the project. Default is the current directory.
+        folder_name: Option<String>,
+        /// The template to use to scaffold the project. The template should match one of the tuono
+        /// examples
+        #[arg(short, long)]
+        template: Option<String>,
+    },
+}
+
+#[derive(Parser, Debug)]
+#[command(version, about = "The react/rust fullstack framework")]
+struct Args {
+    #[command(subcommand)]
+    action: Actions,
+}
+
+fn init_tuono_folder(mode: Mode) -> std::io::Result<()> {
+    check_tuono_folder()?;
+    bundle_axum_source(mode)?;
+    create_client_entry_files()?;
+
+    Ok(())
+}
+
+pub fn app() -> std::io::Result<()> {
+    let args = Args::parse();
+
+    match args.action {
+        Actions::Dev => {
+            init_tuono_folder(Mode::Dev)?;
+            watch::watch().unwrap();
+        }
+        Actions::Build { ssg } => {
+            init_tuono_folder(Mode::Prod)?;
+            let app = App::new();
+
+            if ssg && app.has_dynamic_routes() {
+                // TODO: allow dynamic routes static generation
+                println!("Cannot statically build dynamic routes");
+                return Ok(());
+            }
+
+            app.build_react_prod();
+
+            if ssg {
+                println!("SSG: generation started");
+
+                let static_dir = PathBuf::from("out/static");
+
+                if static_dir.is_dir() {
+                    std::fs::remove_dir_all(&static_dir)
+                        .expect("Failed to clear the out/static folder");
+                }
+
+                std::fs::create_dir(&static_dir).expect("Failed to create static output dir");
+
+                copy(
+                    "./out/client",
+                    static_dir,
+                    &CopyOptions::new().overwrite(true).content_only(true),
+                )
+                .expect("Failed to clone assets into static output folder");
+
+                let mut rust_server = app.run_rust_server();
+
+                let reqwest = reqwest::blocking::Client::builder()
+                    .user_agent("")
+                    .build()
+                    .expect("Failed to build reqwest client");
+
+                // Wait for server
+                let mut is_server_ready = false;
+
+                while !is_server_ready {
+                    if reqwest.get("http://localhost:3000").send().is_ok() {
+                        is_server_ready = true
+                    }
+                    // TODO: add maximum tries
+                    sleep(Duration::from_secs(1))
+                }
+
+                app.route_map
+                    .iter()
+                    .for_each(|(_, route)| route.save_ssg_html(&reqwest));
+
+                // Close server
+                let _ = rust_server.kill();
+            };
+
+            println!("Build successfully finished");
+        }
+        Actions::New {
+            folder_name,
+            template,
+        } => {
+            scaffold_project::create_new_project(folder_name, template);
+        }
+    }
+
+    Ok(())
+}

crates/tuono/src/lib.rs

@@ -1,66 +1,7 @@
-use clap::{Parser, Subcommand};
-use std::process::Command;
-
-mod source_builder;
-use source_builder::{bundle_axum_source, create_client_entry_files};
-
-use crate::source_builder::{check_tuono_folder, Mode};
-
+mod app;
+pub mod cli;
+mod mode;
+mod route;
 mod scaffold_project;
+mod source_builder;
 mod watch;
-
-#[derive(Subcommand, Debug)]
-enum Actions {
-    /// Start the development environment
-    Dev,
-    /// Build the production assets
-    Build,
-    /// Scaffold a new project
-    New {
-        /// The folder in which load the project. Default is the current directory.
-        folder_name: Option<String>,
-        /// The template to use to scaffold the project. The template should match one of the tuono
-        /// examples
-        #[arg(short, long)]
-        template: Option<String>,
-    },
-}
-
-#[derive(Parser, Debug)]
-#[command(version, about = "The react/rust fullstack framework")]
-struct Args {
-    #[command(subcommand)]
-    action: Actions,
-}
-
-fn init_tuono_folder(mode: Mode) -> std::io::Result<()> {
-    check_tuono_folder()?;
-    bundle_axum_source(mode)?;
-    create_client_entry_files()?;
-
-    Ok(())
-}
-
-pub fn cli() -> std::io::Result<()> {
-    let args = Args::parse();
-
-    match args.action {
-        Actions::Dev => {
-            init_tuono_folder(Mode::Dev)?;
-            watch::watch().unwrap();
-        }
-        Actions::Build => {
-            init_tuono_folder(Mode::Prod)?;
-            let mut vite_build = Command::new("./node_modules/.bin/tuono-build-prod");
-            let _ = &vite_build.output()?;
-        }
-        Actions::New {
-            folder_name,
-            template,
-        } => {
-            scaffold_project::create_new_project(folder_name, template);
-        }
-    }
-
-    Ok(())
-}

crates/tuono/src/main.rs

@@ -1,5 +1,5 @@
-use tuono::cli;
+use tuono::cli::app;
 
 fn main() {
-    cli().unwrap();
+    app().expect("Failed to start the CLI")
 }

crates/tuono/src/mode.rs

@@ -0,0 +1,28 @@
+#[derive(PartialEq, Eq)]
+pub enum Mode {
+    Prod,
+    Dev,
+}
+
+impl Mode {
+    pub fn as_str<'a>(&self) -> &'a str {
+        if *self == Mode::Dev {
+            return "Mode::Dev";
+        }
+        "Mode::Prod"
+    }
+}
+
+#[cfg(test)]
+mod tests {
+
+    use super::*;
+
+    #[test]
+    fn should_correctly_print_the_mode_as_str() {
+        let dev = Mode::Dev.as_str();
+        let prod = Mode::Prod.as_str();
+        assert_eq!(dev, "Mode::Dev");
+        assert_eq!(prod, "Mode::Prod");
+    }
+}

crates/tuono/src/route.rs

@@ -0,0 +1,165 @@
+use fs_extra::dir::create_all;
+use regex::Regex;
+use reqwest::blocking::Client;
+use reqwest::Url;
+use std::fs::File;
+use std::io;
+use std::path::PathBuf;
+
+fn has_dynamic_path(route: &str) -> bool {
+    let regex = Regex::new(r"\[(.*?)\]").expect("Failed to create the regex");
+    regex.is_match(route)
+}
+
+#[derive(Debug, PartialEq, Eq)]
+pub struct AxumInfo {
+    // Path for importing the module
+    pub module_import: String,
+    // path for the the axum router
+    pub axum_route: String,
+}
+
+impl AxumInfo {
+    pub fn new(path: String) -> Self {
+        // Remove first slash
+        let mut module = path.chars();
+        module.next();
+
+        let axum_route = path.replace("/index", "");
+
+        if axum_route.is_empty() {
+            return AxumInfo {
+                module_import: module.as_str().to_string().replace('/', "_"),
+                axum_route: "/".to_string(),
+            };
+        }
+
+        if has_dynamic_path(&path) {
+            return AxumInfo {
+                module_import: module
+                    .as_str()
+                    .to_string()
+                    .replace('/', "_")
+                    .replace('[', "dyn_")
+                    .replace(']', ""),
+                axum_route: axum_route.replace('[', ":").replace(']', ""),
+            };
+        }
+
+        AxumInfo {
+            module_import: module.as_str().to_string().replace('/', "_").to_lowercase(),
+            axum_route,
+        }
+    }
+}
+
+#[derive(Debug, PartialEq, Eq)]
+pub struct Route {
+    path: String,
+    pub is_dynamic: bool,
+    pub axum_info: Option<AxumInfo>,
+}
+
+impl Route {
+    pub fn new(cleaned_path: String) -> Self {
+        Route {
+            path: cleaned_path.clone(),
+            axum_info: None,
+            is_dynamic: has_dynamic_path(&cleaned_path),
+        }
+    }
+
+    pub fn update_axum_info(&mut self) {
+        self.axum_info = Some(AxumInfo::new(self.path.clone()))
+    }
+
+    pub fn save_ssg_html(&self, reqwest: &Client) {
+        let path = &self.path.replace("index", "");
+
+        let mut response = reqwest
+            .get(format!("http://localhost:3000{path}"))
+            .send()
+            .unwrap();
+
+        let file_path = PathBuf::from(format!("out/static{}.html", &self.path));
+
+        let parent_dir = file_path.parent().unwrap();
+
+        if !parent_dir.is_dir() {
+            create_all(parent_dir, false).expect("Failed to create parent directories");
+        }
+
+        let mut file = File::create(file_path).expect("Failed to create the HTML file");
+
+        io::copy(&mut response, &mut file).expect("Failed to write the HTML on the file");
+
+        // Saving also the server response
+        if self.axum_info.is_some() {
+            let data_file_path =
+                PathBuf::from(&format!("out/static/__tuono/data{}/data.json", path));
+
+            let data_parent_dir = data_file_path.parent().unwrap();
+
+            if !data_parent_dir.is_dir() {
+                create_all(data_parent_dir, false)
+                    .expect("Failed to create data parent directories");
+            }
+
+            let base = Url::parse("http://localhost:3000/__tuono/data/data.json").unwrap();
+
+            let path = if path == "/" { "" } else { path };
+
+            let pathname = &format!("/__tuono/data{path}/data.json");
+
+            let url = base
+                .join(pathname)
+                .expect("Failed to build the reqwest URL");
+
+            let mut response = reqwest.get(url).send().unwrap();
+
+            let mut data_file =
+                File::create(data_file_path).expect("Failed to create the JSON file");
+
+            io::copy(&mut response, &mut data_file).expect("Failed to write the JSON on the file");
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+
+    use super::*;
+
+    #[test]
+    fn should_find_dynamic_paths() {
+        let routes = [
+            ("/home/user/Documents/tuono/src/routes/about.rs", false),
+            ("/home/user/Documents/tuono/src/routes/index.rs", false),
+            (
+                "/home/user/Documents/tuono/src/routes/posts/index.rs",
+                false,
+            ),
+            (
+                "/home/user/Documents/tuono/src/routes/posts/[post].rs",
+                true,
+            ),
+        ];
+
+        routes
+            .into_iter()
+            .for_each(|route| assert_eq!(has_dynamic_path(route.0), route.1));
+    }
+
+    #[test]
+    fn should_correctly_create_the_axum_infos() {
+        let info = AxumInfo::new("/index".to_string());
+
+        assert_eq!(info.axum_route, "/");
+        assert_eq!(info.module_import, "index");
+
+        let dyn_info = AxumInfo::new("/[posts]".to_string());
+
+        assert_eq!(dyn_info.axum_route, "/:posts");
+        assert_eq!(dyn_info.module_import, "dyn_posts");
+    }
+}

crates/tuono/src/source_builder.rs

@@ -1,27 +1,13 @@
-use glob::glob;
-use glob::GlobError;
-use regex::Regex;
 use std::collections::HashMap;
 use std::fs;
 use std::io;
 use std::io::prelude::*;
 use std::path::Path;
-use std::path::PathBuf;
 
-#[derive(PartialEq, Eq)]
-pub enum Mode {
-    Prod,
-    Dev,
-}
-
-impl Mode {
-    pub fn as_str<'a>(&self) -> &'a str {
-        if *self == Mode::Dev {
-            return "Mode::Dev";
-        }
-        "Mode::Prod"
-    }
-}
+use crate::app::App;
+use crate::mode::Mode;
+use crate::route::AxumInfo;
+use crate::route::Route;
 
 pub const SERVER_ENTRY_DATA: &str = "// File automatically generated by tuono
 // Do not manually update this file
@@ -47,7 +33,8 @@ pub const AXUM_ENTRY_POINT: &str = r##"
 // File automatically generated
 // Do not manually change it
 
-use tuono_lib::{tokio, Mode, Server, axum::Router, axum::routing::get};
+use tuono_lib::{tokio, Mode, Server, axum::Router};
+// AXUM_GET_ROUTE_HANDLER
 
 const MODE: Mode = /*MODE*/;
 
@@ -63,91 +50,9 @@ async fn main() {
 }
 "##;
 
-const ROOT_FOLDER: &str = "src/routes";
+const ROUTE_FOLDER: &str = "src/routes";
 const DEV_FOLDER: &str = ".tuono";
 
-#[derive(Debug, PartialEq, Eq)]
-struct Route {
-    /// Every module import is the path with a _ instead of /
-    pub module_import: String,
-    pub axum_route: String,
-}
-
-fn has_dynamic_path(route: &str) -> bool {
-    let regex = Regex::new(r"\[(.*?)\]").expect("Failed to create the regex");
-    regex.is_match(route)
-}
-
-impl Route {
-    pub fn new(path: &str) -> Self {
-        let route_name = path.replace(".rs", "");
-        // Remove first slash
-        let mut module = route_name.as_str().chars();
-        module.next();
-
-        let axum_route = path.replace("/index.rs", "").replace(".rs", "");
-
-        if axum_route.is_empty() {
-            return Route {
-                module_import: module.as_str().to_string().replace('/', "_"),
-                axum_route: "/".to_string(),
-            };
-        }
-
-        if has_dynamic_path(&route_name) {
-            return Route {
-                module_import: module
-                    .as_str()
-                    .to_string()
-                    .replace('/', "_")
-                    .replace('[', "dyn_")
-                    .replace(']', ""),
-                axum_route: axum_route.replace('[', ":").replace(']', ""),
-            };
-        }
-
-        Route {
-            module_import: module.as_str().to_string().replace('/', "_").to_lowercase(),
-            axum_route,
-        }
-    }
-}
-
-struct SourceBuilder {
-    route_map: HashMap<PathBuf, Route>,
-    base_path: PathBuf,
-}
-
-impl SourceBuilder {
-    pub fn new() -> Self {
-        let base_path = std::env::current_dir().unwrap();
-
-        SourceBuilder {
-            route_map: HashMap::new(),
-            base_path,
-        }
-    }
-
-    fn collect_routes(&mut self) {
-        glob(self.base_path.join("src/routes/**/*.rs").to_str().unwrap())
-            .unwrap()
-            .for_each(|entry| self.collect_route(entry))
-    }
-
-    fn collect_route(&mut self, path_buf: Result<PathBuf, GlobError>) {
-        let entry = path_buf.unwrap();
-        let base_path_str = self.base_path.to_str().unwrap();
-        let path = entry
-            .to_str()
-            .unwrap()
-            .replace(&format!("{base_path_str}/src/routes"), "");
-
-        let route = Route::new(&path);
-
-        self.route_map.insert(PathBuf::from(path), route);
-    }
-}
-
 fn create_main_file(base_path: &Path, bundled_file: &String) {
     let mut data_file =
         fs::File::create(base_path.join(".tuono/main.rs")).expect("creation failed");
@@ -157,38 +62,45 @@ fn create_main_file(base_path: &Path, bundled_file: &String) {
         .expect("write failed");
 }
 
-fn create_routes_declaration(routes: &HashMap<PathBuf, Route>) -> String {
+fn create_routes_declaration(routes: &HashMap<String, Route>) -> String {
     let mut route_declarations = String::from("// ROUTE_BUILDER\n");
 
     for (_, route) in routes.iter() {
-        let Route {
+        let Route { axum_info, .. } = &route;
+
+        if axum_info.is_some() {
+            let AxumInfo {
                 axum_route,
                 module_import,
-        } = &route;
+            } = axum_info.as_ref().unwrap();
 
             route_declarations.push_str(&format!(
                 r#".route("{axum_route}", get({module_import}::route))"#
             ));
+            let slash = if axum_route.ends_with('/') { "" } else { "/" };
             route_declarations.push_str(&format!(
-            r#".route("/__tuono/data{axum_route}", get({module_import}::api))"#
+                r#".route("/__tuono/data{axum_route}{slash}data.json", get({module_import}::api))"#
             ));
         }
+    }
 
     route_declarations
 }
 
-fn create_modules_declaration(routes: &HashMap<PathBuf, Route>) -> String {
+fn create_modules_declaration(routes: &HashMap<String, Route>) -> String {
     let mut route_declarations = String::from("// MODULE_IMPORTS\n");
 
     for (path, route) in routes.iter() {
-        let module_name = &route.module_import;
-        let path_str = path.to_str().unwrap();
+        if route.axum_info.is_some() {
+            let AxumInfo { module_import, .. } = route.axum_info.as_ref().unwrap();
+
             route_declarations.push_str(&format!(
-            r#"#[path="../{ROOT_FOLDER}{path_str}"]
-mod {module_name};
-"#
+                r#"#[path="../{ROUTE_FOLDER}{path}.rs"]
+                    mod {module_import};
+                    "#
             ))
         }
+    }
 
     route_declarations
 }
@@ -196,28 +108,41 @@ mod {module_name};
 pub fn bundle_axum_source(mode: Mode) -> io::Result<()> {
     let base_path = std::env::current_dir().unwrap();
 
-    let mut source_builder = SourceBuilder::new();
+    let app = App::new();
 
-    source_builder.collect_routes();
-
-    let bundled_file = generate_axum_source(&source_builder, mode);
+    let bundled_file = generate_axum_source(&app, mode);
 
     create_main_file(&base_path, &bundled_file);
 
     Ok(())
 }
 
-fn generate_axum_source(source_builder: &SourceBuilder, mode: Mode) -> String {
-    AXUM_ENTRY_POINT
+fn generate_axum_source(app: &App, mode: Mode) -> String {
+    let src = AXUM_ENTRY_POINT
         .replace(
             "// ROUTE_BUILDER\n",
-            &create_routes_declaration(&source_builder.route_map),
+            &create_routes_declaration(&app.route_map),
         )
         .replace(
             "// MODULE_IMPORTS\n",
-            &create_modules_declaration(&source_builder.route_map),
+            &create_modules_declaration(&app.route_map),
         )
-        .replace("/*MODE*/", mode.as_str())
+        .replace("/*MODE*/", mode.as_str());
+
+    let has_server_handlers = app
+        .route_map
+        .iter()
+        .filter(|(_, route)| route.axum_info.is_some())
+        .collect::<Vec<(&String, &Route)>>()
+        .is_empty();
+
+    if !has_server_handlers {
+        return src.replace(
+            "// AXUM_GET_ROUTE_HANDLER",
+            "use tuono_lib::axum::routing::get;",
+        );
+    }
+    src
 }
 
 pub fn check_tuono_folder() -> io::Result<()> {
@@ -246,103 +171,9 @@ mod tests {
 
     use super::*;
 
-    #[test]
-    fn should_find_dynamic_paths() {
-        let routes = [
-            ("/home/user/Documents/tuono/src/routes/about.rs", false),
-            ("/home/user/Documents/tuono/src/routes/index.rs", false),
-            (
-                "/home/user/Documents/tuono/src/routes/posts/index.rs",
-                false,
-            ),
-            (
-                "/home/user/Documents/tuono/src/routes/posts/[post].rs",
-                true,
-            ),
-        ];
-
-        routes
-            .into_iter()
-            .for_each(|route| assert_eq!(has_dynamic_path(route.0), route.1));
-    }
-
-    #[test]
-    fn should_collect_routes() {
-        let mut source_builder = SourceBuilder::new();
-        source_builder.base_path = "/home/user/Documents/tuono".into();
-
-        let routes = [
-            "/home/user/Documents/tuono/src/routes/about.rs",
-            "/home/user/Documents/tuono/src/routes/index.rs",
-            "/home/user/Documents/tuono/src/routes/posts/index.rs",
-            "/home/user/Documents/tuono/src/routes/posts/[post].rs",
-            "/home/user/Documents/tuono/src/routes/posts/UPPERCASE.rs",
-        ];
-
-        routes
-            .into_iter()
-            .for_each(|route| source_builder.collect_route(Ok(PathBuf::from(route))));
-
-        let results = [
-            ("/index.rs", "index"),
-            ("/about.rs", "about"),
-            ("/posts/index.rs", "posts_index"),
-            ("/posts/[post].rs", "posts_dyn_post"),
-            ("/posts/UPPERCASE.rs", "posts_uppercase"),
-        ];
-
-        results.into_iter().for_each(|(path, module_import)| {
-            assert_eq!(
-                source_builder
-                    .route_map
-                    .get(&PathBuf::from(path))
-                    .unwrap()
-                    .module_import,
-                String::from(module_import)
-            )
-        })
-    }
-
-    #[test]
-    fn should_create_multi_level_axum_paths() {
-        let mut source_builder = SourceBuilder::new();
-        source_builder.base_path = "/home/user/Documents/tuono".into();
-
-        let routes = [
-            "/home/user/Documents/tuono/src/routes/about.rs",
-            "/home/user/Documents/tuono/src/routes/index.rs",
-            "/home/user/Documents/tuono/src/routes/posts/index.rs",
-            "/home/user/Documents/tuono/src/routes/posts/any-post.rs",
-            "/home/user/Documents/tuono/src/routes/posts/[post].rs",
-        ];
-
-        routes
-            .into_iter()
-            .for_each(|route| source_builder.collect_route(Ok(PathBuf::from(route))));
-
-        let results = [
-            ("/index.rs", "/"),
-            ("/about.rs", "/about"),
-            ("/posts/index.rs", "/posts"),
-            ("/posts/any-post.rs", "/posts/any-post"),
-            ("/posts/[post].rs", "/posts/:post"),
-        ];
-
-        results.into_iter().for_each(|(path, expected_path)| {
-            assert_eq!(
-                source_builder
-                    .route_map
-                    .get(&PathBuf::from(path))
-                    .unwrap()
-                    .axum_route,
-                String::from(expected_path)
-            )
-        })
-    }
-
     #[test]
     fn should_set_the_correct_mode() {
-        let source_builder = SourceBuilder::new();
+        let source_builder = App::new();
 
         let dev_bundle = generate_axum_source(&source_builder, Mode::Dev);
         assert!(dev_bundle.contains("const MODE: Mode = Mode::Dev;"));
@@ -353,10 +184,25 @@ mod tests {
     }
 
     #[test]
-    fn should_correctly_print_the_mode_as_str() {
-        let dev = Mode::Dev.as_str();
-        let prod = Mode::Prod.as_str();
-        assert_eq!(dev, "Mode::Dev");
-        assert_eq!(prod, "Mode::Prod");
+    fn should_not_load_the_axum_get_function() {
+        let source_builder = App::new();
+
+        let dev_bundle = generate_axum_source(&source_builder, Mode::Dev);
+        assert!(!dev_bundle.contains("use tuono_lib::axum::routing::get;"));
+    }
+
+    #[test]
+    fn should_load_the_axum_get_function() {
+        let mut source_builder = App::new();
+
+        let mut route = Route::new(String::from("index.tsx"));
+        route.update_axum_info();
+
+        source_builder
+            .route_map
+            .insert(String::from("index.rs"), route);
+
+        let dev_bundle = generate_axum_source(&source_builder, Mode::Dev);
+        assert!(dev_bundle.contains("use tuono_lib::axum::routing::get;"));
     }
 }

crates/tuono/src/watch.rs

@@ -6,7 +6,8 @@ use watchexec::Watchexec;
 use watchexec_signals::Signal;
 use watchexec_supervisor::job::{start_job, Job};
 
-use crate::source_builder::{bundle_axum_source, Mode};
+use crate::mode::Mode;
+use crate::source_builder::bundle_axum_source;
 
 fn watch_react_src() -> Job {
     start_job(Arc::new(Command {
@@ -62,12 +63,13 @@ pub async fn watch() -> Result<()> {
 
         for event in action.events.iter() {
             for path in event.paths() {
-                if path.0.to_string_lossy().ends_with(".rs") {
+                let file_path = path.0.to_string_lossy();
+                if file_path.ends_with(".rs") {
                     should_reload_rust_server = true
                 }
 
-                // Either tsx and jsx
-                if path.0.to_string_lossy().ends_with("sx") {
+                // Either tsx, jsx and mdx
+                if file_path.ends_with("sx") || file_path.ends_with("mdx") {
                     should_reload_ssr_bundle = true
                 }
             }

crates/tuono_lib/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib"
-version = "0.4.6"
+version = "0.8.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
@@ -32,7 +32,7 @@ regex = "1.10.5"
 either = "1.13.0"
 tower-http = {version = "0.5.2", features = ["fs"]}
 
-tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.4.6"}
+tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.8.2"}
 # Match the same version used by axum
 tokio-tungstenite = "0.21.0"
 futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] }

crates/tuono_lib/src/manifest.rs

@@ -7,12 +7,19 @@ use std::path::PathBuf;
 
 const VITE_MANIFEST_PATH: &str = "./out/client/.vite/manifest.json";
 
-#[derive(Deserialize, Debug, Clone)]
+#[derive(Deserialize, Debug, Clone, PartialEq, Eq)]
 pub struct BundleInfo {
+    /// TODO: Add also the import field and load the dynamic
+    /// values in the payload bundles.
     pub file: String,
+    #[serde(default = "default_css_vector")]
     pub css: Vec<String>,
 }
 
+fn default_css_vector() -> Vec<String> {
+    Vec::with_capacity(0)
+}
+
 /// Manifest is the mapping between the vite output bundled files
 /// and the originals.
 /// Vite doc: https://vitejs.dev/config/build-options.html#build-manifest
@@ -45,6 +52,73 @@ fn remap_manifest_keys(manifest: HashMap<String, BundleInfo>) -> HashMap<String,
 mod tests {
     use super::*;
 
+    #[test]
+    fn correctly_parse_the_manifest_json() {
+        let manifest_example = r#"{
+  "../src/routes/index.tsx": {
+    "file": "assets/index.js",
+    "name": "index",
+    "src": "../src/routes/index.tsx",
+    "isDynamicEntry": true,
+    "imports": [
+      "client-main.tsx"
+    ],
+    "css": [
+      "assets/index.css"
+    ]
+  },
+  "meta-tags-lib": {
+    "file": "assets/meta-lib.js",
+    "name": "meta-tags-lib",
+    "imports": [
+      "client-main.tsx"
+    ]
+  },
+  "client-main.tsx": {
+    "file": "assets/client-main.js",
+    "name": "client-main",
+    "src": "client-main.tsx",
+    "isEntry": true,
+    "dynamicImports": [
+      "../src/routes/index.tsx",
+      "../src/routes/pokemons/[pokemon].tsx"
+    ],
+    "css": [
+      "assets/client-main.css"
+    ]
+  }
+}"#;
+
+        let parsed_manifest =
+            serde_json::from_str::<HashMap<String, BundleInfo>>(manifest_example).unwrap();
+
+        let mut result = HashMap::new();
+        result.insert(
+            "../src/routes/index.tsx".to_string(),
+            BundleInfo {
+                file: "assets/index.js".to_string(),
+                css: vec!["assets/index.css".to_string()],
+            },
+        );
+        result.insert(
+            "client-main.tsx".to_string(),
+            BundleInfo {
+                file: "assets/client-main.js".to_string(),
+                css: vec!["assets/client-main.css".to_string()],
+            },
+        );
+
+        result.insert(
+            "meta-tags-lib".to_string(),
+            BundleInfo {
+                file: "assets/meta-lib.js".to_string(),
+                css: Vec::new(),
+            },
+        );
+
+        assert_eq!(parsed_manifest, result);
+    }
+
     #[test]
     fn should_correctly_remap_the_manifest() {
         let mut parsed_manifest: HashMap<String, BundleInfo> = HashMap::new();

crates/tuono_lib_macros/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib_macros"
-version = "0.4.6"
+version = "0.8.2"
 edition = "2021"
 description = "The react/rust fullstack framework"
 keywords = [ "react", "typescript", "fullstack", "web", "ssr"]

docs/tutorial.md

@@ -23,6 +23,7 @@ Typescript and Rust knowledge is not a requirement though!
 * [Create a stand-alone component](#create-a-stand-alone-component)
 * [Create the /pokemons/[pokemon] route](#create-the-pokemonspokemon-route)
 * [Error handling](#error-handling)
+* [Seo and meta tags](#seo-and-meta-tags)
 * [Handle redirections](#handle-redirections)
 * [Building for production](#building-for-production)
 * [Conclusion](#conclusion)
@@ -547,6 +548,88 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
 If you now try to load a not existing pokemon (`http://localhost:3000/pokemons/tuono-pokemon`) you will 
 correctly receive a 404 status code in the console.
 
+## Seo and meta tags
+
+The website now works and the http errors are meaningful but we should also take care to be meaningful
+for the web crawlers. The best way to do it is to enrich the meta tags like the `<title>` and the
+`<description>`.
+
+To do so `tuono` exposes also the `<Head />` component useful exactly for handling this scenario. Let's update the `/` and the
+`/pokemons/[pokemon]` routes with this.
+
+```diff
+// src/routes/index.tsx
+import type { TuonoProps } from "tuono";
+++ import { Head } from "tuono"
+
+interface Pokemon {
+  name: string
+}
+
+interface IndexProps {
+  results: Pokemon[]
+}
+
+export default function IndexPage({
+  data,
+}: TuonoProps<IndexProps>): JSX.Element {
+  if (!data?.results) {
+    return <></>;
+  }
+
+  return (
+    <>
+++    <Head>
+++      <title>Tuono tutorial</title>
+++    </Head>
+      <header className="header">
+        <a href="https://crates.io/crates/tuono" target="_blank">
+          Crates
+        </a>
+        <a href="https://www.npmjs.com/package/tuono" target="_blank">
+          Npm
+        </a>
+      </header>
+      <div className="title-wrap">
+        <h1 className="title">
+          TU<span>O</span>NO
+        </h1>
+        <div className="logo">
+          <img src="rust.svg" className="rust" />
+          <img src="react.svg" className="react" />
+        </div>
+      </div>
+      <ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
+        {data.results.map((pokemon) => {
+          return pokemon.name;
+        })}
+      </ul>
+    </>
+  );
+}
+```
+
+```diff
+// src/routes/pokemons/[pokemon].tsx
+-- import { TuonoProps } from "tuono";
+++ import { TuonoProps, Head } from "tuono";
+import PokemonView from "../../components/PokemonView";
+
+export default function Pokemon({ data }: TuonoProps): JSX.Element {
+--  return <PokemonView pokemon={data} />;
+++  return (
+++        <>
+++            <Head>
+++                <title>Pokemon: ${data?.name}</title>
+++            </Head>
+++            <PokemonView pokemon={data} />
+++        </>
+++    )
+}
+```
+
+The `Head` component takes as children any valid HTML meta tag.
+
 ## Handle redirections
 
 What if there is a pokemon among all of them that should be considered the GOAT? What

examples/README.md

@@ -16,4 +16,13 @@ $ tuono new [NAME] --template [TEMPLATE]
 
 `[TEMPLATE]` is the folder name.
 
+## Troubleshooting for contributors
 
+There is a common error that happens during example development due to 
+pnpm workspace about the findings of different react versions.
+
+To overcome this issue run within the single example folder:
+
+```
+pnpm install --ignore-workspace && pnpm upgrade --save
+```

examples/mdx/.gitignore

@@ -0,0 +1,13 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.tuono
+out
+target

examples/mdx/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "tuono"
+version = "0.0.1"
+edition = "2021"
+
+[[bin]]
+name = "tuono"
+path = ".tuono/main.rs"
+
+[dependencies]
+tuono_lib = { path = "../../crates/tuono_lib/"}
+serde = { version = "1.0.202", features = ["derive"] }
+

examples/mdx/README.md

@@ -0,0 +1,9 @@
+# Tuono starter
+
+This is the starter tuono project. To download it run in your terminal:
+
+```shell
+$ tuono new [NAME]
+```
+
+

examples/mdx/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "tuono",
+  "description": "The react/rust fullstack framework",
+  "version": "0.0.1",
+  "dependencies": {
+    "@mdx-js/react": "^3.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tuono": "link:../../packages/tuono"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.3"
+  }
+}

examples/mdx/src/routes/__root.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import { MDXProvider } from '@mdx-js/react'
+
+interface RootRouteProps {
+  children: ReactNode
+}
+
+export default function RootRoute({ children }: RootRouteProps): JSX.Element {
+  return (
+    <main className="main">
+      <MDXProvider components={{}}>{children}</MDXProvider>
+    </main>
+  )
+}

examples/mdx/src/routes/index.mdx

@@ -0,0 +1 @@
+# Index page

examples/mdx/src/styles/global.css

@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  background: #fbfbfb;
+}
+
+main {
+  width: 673px;
+  margin: 20px auto;
+}
+
+.header {
+  display: flex;
+  gap: 20px;
+}
+
+.header a {
+  color: black;
+  font-size: 18px;
+  font-weight: 600;
+  text-decoration: none;
+  z-index: 2;
+}
+
+.title-wrap {
+  height: 200px;
+}
+
+.title {
+  position: absolute;
+  font-size: 200px;
+  line-height: 200px;
+  z-index: 0;
+  letter-spacing: -2px;
+  margin-left: -8px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.title span {
+  opacity: 0;
+}
+
+.button {
+  width: 140px;
+  height: 30px;
+  border: solid 3px black;
+  border-radius: 10px;
+  color: black;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.2s;
+}
+
+.button:hover {
+  color: white;
+  background: black;
+}
+
+.logo {
+  margin-left: 240px;
+  position: relative;
+  top: 25px;
+}
+
+.logo img {
+  position: absolute;
+}
+
+.rust {
+  animation: rotate 6s ease-in-out infinite;
+}
+
+.react {
+  top: 33px;
+  left: 28px;
+  animation: rotate 6s linear infinite reverse;
+}
+
+.subtitle {
+  font-size: 30px;
+  line-height: 30px;
+  letter-spacing: -1px;
+}
+
+.subtitle-wrap {
+  display: flex;
+  justify-content: space-between;
+}

examples/mdx/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/mdx/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/tutorial/src/routes/index.tsx

@@ -1,5 +1,5 @@
 // src/routes/index.tsx
-import type { TuonoProps } from 'tuono'
+import { Head, type TuonoProps } from 'tuono'
 import PokemonLink from '../components/PokemonLink'
 
 interface Pokemon {
@@ -19,6 +19,9 @@ export default function IndexPage({
 
   return (
     <>
+      <Head>
+        <title>Tuono tutorial</title>
+      </Head>
       <header className="header">
         <a href="https://crates.io/crates/tuono" target="_blank">
           Crates

examples/tutorial/src/routes/pokemons/[pokemon].tsx

@@ -1,4 +1,4 @@
-import type { TuonoProps } from 'tuono'
+import { Head, type TuonoProps } from 'tuono'
 import PokemonView from '../../components/PokemonView'
 
 interface Pokemon {
@@ -11,5 +11,12 @@ interface Pokemon {
 export default function PokemonPage({
   data,
 }: TuonoProps<Pokemon>): JSX.Element {
-  return <PokemonView pokemon={data} />
+  return (
+    <>
+      <Head>
+        <title>Pokemon: {data?.name}</title>
+      </Head>
+      <PokemonView pokemon={data} />
+    </>
+  )
 }

package.json

@@ -3,11 +3,11 @@
   "packageManager": "pnpm@9.1.1",
   "scripts": {
     "dev": "turbo dev --filter tuono",
-    "build": "turbo build",
-    "lint": "turbo lint",
-    "format": "turbo format",
-    "format:check": "turbo format:check",
-    "types": "turbo types",
+    "build": "turbo build --filter tuono",
+    "lint": "turbo lint --filter tuono",
+    "format": "turbo format --filter tuono",
+    "format:check": "turbo format:check --filter tuono",
+    "types": "turbo types --filter tuono",
     "test": "turbo test",
 	"test:watch": "turbo test:watch"
   },

packages/fs-router-vite-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono-fs-router-vite-plugin",
-  "version": "0.4.6",
+  "version": "0.8.2",
   "description": "Plugin for the tuono's file system router. Tuono is the react/rust fullstack framework",
   "scripts": {
     "dev": "vite build --watch",

packages/fs-router-vite-plugin/src/build-route-config.spec.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { buildRouteConfig } from './build-route-config'
+
+const routes = [
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+    parent: {
+      filePath: 'posts/__root.tsx',
+      fullPath:
+        '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      routePath: '/posts/__root',
+      variableName: 'Postsroot',
+      path: '/posts/__root',
+      cleanedPath: '/posts',
+      children: undefined,
+    },
+    path: '/posts/my-post',
+    cleanedPath: '/posts/my-post',
+  },
+  {
+    filePath: 'posts/index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostsIndex',
+    parent: {
+      filePath: 'posts/__root.tsx',
+      fullPath:
+        '/home/valerio/Documents/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      routePath: '/posts/__root',
+      variableName: 'Postsroot',
+      path: '/posts/__root',
+      cleanedPath: '/posts',
+      children: undefined,
+    },
+    path: '/posts/',
+    cleanedPath: '/posts/',
+  },
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostspostIndex',
+    parent: {
+      filePath: 'posts/__root.tsx',
+      fullPath:
+        '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      routePath: '/posts/__root',
+      variableName: 'Postsroot',
+      path: '/posts/__root',
+      cleanedPath: '/posts',
+      children: undefined,
+    },
+    path: '/posts/',
+    cleanedPath: '/posts/',
+  },
+]
+
+describe('buildRouteConfig works', async () => {
+  it('Should build the correct config', () => {
+    const expectedConfig =
+      'PostsMyPostRoute,PostsIndexRoute,PostspostIndexRoute'
+    const config = buildRouteConfig(routes)
+    expect(config).toStrictEqual(expectedConfig)
+  })
+})

packages/fs-router-vite-plugin/src/build-route-config.ts

@@ -0,0 +1,17 @@
+import { spaces } from './utils'
+import type { RouteNode } from './types'
+
+export function buildRouteConfig(nodes: RouteNode[], depth = 1): string {
+  const children = nodes.map((node) => {
+    const route = `${node.variableName}Route`
+
+    if (node.children?.length) {
+      const childConfigs = buildRouteConfig(node.children, depth + 1)
+      return `${route}.addChildren([${spaces(depth * 4)}${childConfigs}])`
+    }
+
+    return route
+  })
+
+  return children.filter(Boolean).join(`,`)
+}

packages/fs-router-vite-plugin/src/generator.ts

@@ -1,15 +1,17 @@
 import * as fsp from 'fs/promises'
 import path from 'path'
+import { buildRouteConfig } from './build-route-config'
+import { hasParentRoute } from './has-parent-route'
 
 import {
   cleanPath,
   determineNodePath,
   multiSortBy,
-  spaces,
   replaceBackslash,
   removeExt,
   routePathToVariable,
   removeGroups,
+  removeLastSlash,
   removeUnderscores,
   removeLayoutSegments,
 } from './utils'
@@ -18,6 +20,7 @@ import type { Config, RouteNode } from './types'
 import { ROUTES_FOLDER, ROOT_PATH_ID, GENERATED_ROUTE_TREE } from './constants'
 
 import { format } from 'prettier'
+import { sortRouteNodes } from './sort-route-nodes'
 
 let latestTask = 0
 
@@ -46,7 +49,7 @@ async function getRouteNodes(
 
         if (dirent.isDirectory()) {
           await recurse(relativePath)
-        } else if (fullPath.match(/\.(tsx|ts|jsx|js)$/)) {
+        } else if (fullPath.match(/\.(tsx|ts|jsx|js|mdx)$/)) {
           const filePath = replaceBackslash(path.join(dir, dirent.name))
           const filePathNoExt = removeExt(filePath)
           let routePath =
@@ -56,9 +59,6 @@ async function getRouteNodes(
 
           // Remove the index from the route path and
           // if the route path is empty, use `/'
-
-          const isLoader = routePath.includes('-loading')
-
           if (routePath === 'index') {
             routePath = '/'
           }
@@ -69,7 +69,6 @@ async function getRouteNodes(
             filePath,
             fullPath,
             routePath,
-            isLoader,
             variableName,
           })
         } else if (fullPath.match(/\.(rs)$/)) {
@@ -95,38 +94,6 @@ async function getRouteNodes(
   return { routeNodes, rustHandlersNodes }
 }
 
-export function hasParentRoute(
-  routes: RouteNode[],
-  node: RouteNode,
-  routePathToCheck: string | undefined,
-): RouteNode | null {
-  if (!routePathToCheck || routePathToCheck === '/') {
-    return null
-  }
-
-  const sortedNodes = multiSortBy(routes, [
-    (d): number => d.routePath.length * -1,
-    (d): string | undefined => d.variableName,
-  ]).filter((d) => d.routePath !== `/${ROOT_PATH_ID}`)
-
-  for (const route of sortedNodes) {
-    if (route.routePath === '/') continue
-
-    if (
-      routePathToCheck.startsWith(`${route.routePath}/`) &&
-      route.routePath !== routePathToCheck
-    ) {
-      return route
-    }
-  }
-
-  const segments = routePathToCheck.split('/')
-  segments.pop() // Remove the last segment
-  const parentRoutePath = segments.join('/')
-
-  return hasParentRoute(routes, node, parentRoutePath)
-}
-
 export async function routeGenerator(config = defaultConfig): Promise<void> {
   if (!isFirst) {
     isFirst = true
@@ -149,25 +116,12 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
   const { routeNodes: beforeRouteNodes, rustHandlersNodes } =
     await getRouteNodes(config)
 
-  const preRouteNodes = multiSortBy(beforeRouteNodes, [
-    (d): number => (d.routePath === '/' ? -1 : 1),
-    (d): number => d.routePath.split('/').length,
-    (d): number => (d.filePath.match(/[./]index[.]/) ? 1 : -1),
-    (d): number =>
-      d.filePath.match(
-        /[./](component|errorComponent|pendingComponent|loader|lazy)[.]/,
-      )
-        ? 1
-        : -1,
-    (d): number => (d.filePath.match(/[./]route[.]/) ? -1 : 1),
-    (d): number => (d.routePath.endsWith('/') ? -1 : 1),
-    (d): string => d.routePath,
-  ]).filter((d) => ![`/${ROOT_PATH_ID}`].includes(d.routePath || ''))
+  const preRouteNodes = sortRouteNodes(beforeRouteNodes)
+
+  const routeNodes: RouteNode[] = []
 
   // Loop over the flat list of routeNodes and
   // build up a tree based on the routeNodes' routePath
-  const routeNodes: RouteNode[] = []
-
   const handleNode = async (node: RouteNode): Promise<void> => {
     const parentRoute = hasParentRoute(routeNodes, node, node.routePath)
 
@@ -175,8 +129,8 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
     node.path = determineNodePath(node)
 
-    node.cleanedPath = removeGroups(
-      removeUnderscores(removeLayoutSegments(node.path)) ?? '',
+    node.cleanedPath = removeLastSlash(
+      removeGroups(removeUnderscores(removeLayoutSegments(node.path)) ?? ''),
     )
 
     if (node.parent) {
@@ -190,25 +144,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
     await handleNode(node)
   }
 
-  function buildRouteConfig(nodes: RouteNode[], depth = 1): string {
-    const children = nodes.map((node) => {
-      if (node.isLayout) {
-        return
-      }
-
-      const route = `${node.variableName}Route`
-
-      if (node.children?.length) {
-        const childConfigs = buildRouteConfig(node.children, depth + 1)
-        return `${route}.addChildren([${spaces(depth * 4)}${childConfigs}])`
-      }
-
-      return route
-    })
-
-    return children.filter(Boolean).join(`,`)
-  }
-
   const routeConfigChildrenText = buildRouteConfig(routeNodes)
 
   const sortedRouteNodes = multiSortBy(routeNodes, [
@@ -220,6 +155,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
   const imports = [
     ...sortedRouteNodes.map((node) => {
+      const extension = node.filePath.endsWith('mdx') ? '.mdx' : ''
       return `const ${
         node.variableName
       }Import = dynamic(() => import('./${replaceBackslash(
@@ -230,13 +166,16 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
           ),
           false,
         ),
-      )}'))`
+      )}${extension}'))`
     }),
   ].join('\n')
 
   const createRoutes = [
     ...sortedRouteNodes.map((node) => {
-      return `const ${node.variableName} = createRoute({ component: ${node.variableName}Import })`
+      const isRoot = node.routePath.endsWith(ROOT_PATH_ID)
+      const rootDeclaration = isRoot ? ', isRoot: true' : ''
+
+      return `const ${node.variableName} = createRoute({ component: ${node.variableName}Import${rootDeclaration} })`
     }),
   ].join('\n')
 
@@ -246,7 +185,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
         return [
           `const ${node.variableName}Route = ${node.variableName}.update({
           ${[
-            `path: '${node.cleanedPath}'`,
+            !node.path?.endsWith(ROOT_PATH_ID) && `path: '${node.cleanedPath}'`,
             `getParentRoute: () => ${node.parent?.variableName ?? 'root'}Route`,
             rustHandlersNodes.includes(node.path || '')
               ? 'hasHandler: true'

packages/fs-router-vite-plugin/src/has-parent-route.spec.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import { hasParentRoute } from './has-parent-route'
+
+const routes = [
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
+    routePath: '/posts/[post]',
+    variableName: 'Postspost',
+    path: '/posts/[post]',
+    cleanedPath: '/posts/[post]',
+  },
+  {
+    filePath: 'posts/__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
+    routePath: '/posts/__root',
+    variableName: 'Postsroot',
+    path: '/posts/__root',
+    cleanedPath: '/posts',
+  },
+  {
+    filePath: 'index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/index.tsx',
+    routePath: '/',
+    variableName: 'Index',
+    path: '/',
+    cleanedPath: '/',
+  },
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+    path: '/posts/my-post',
+    cleanedPath: '/posts/my-post',
+  },
+]
+
+const parent = {
+  filePath: 'posts/__root.tsx',
+  fullPath:
+    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
+  routePath: '/posts/__root',
+  variableName: 'Postsroot',
+  path: '/posts/__root',
+  cleanedPath: '/posts',
+}
+
+const myPost = {
+  filePath: 'posts/my-post.tsx',
+  fullPath:
+    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
+  routePath: '/posts/my-post',
+  variableName: 'PostsMyPost',
+  path: '/posts/my-post',
+  cleanedPath: '/posts/my-post',
+}
+
+const dynamicRoute = {
+  filePath: 'posts/[post].tsx',
+  fullPath:
+    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
+  routePath: '/posts/[post]',
+  variableName: 'Postspost',
+  path: '/posts/[post]',
+  cleanedPath: '/posts/[post]',
+}
+
+describe('hasParentRoute works', async () => {
+  it('Should detect parent route', () => {
+    const parentRoute = hasParentRoute(routes, myPost, myPost.path)
+    expect(parentRoute).toStrictEqual(parent)
+  })
+
+  it('Should detect parent route for dynamic routes', () => {
+    const parentRoute = hasParentRoute(routes, dynamicRoute, dynamicRoute.path)
+    expect(parentRoute).toStrictEqual(parent)
+  })
+})

packages/fs-router-vite-plugin/src/has-parent-route.ts

@@ -0,0 +1,37 @@
+import { ROOT_PATH_ID } from './constants'
+import { multiSortBy } from './utils'
+import type { RouteNode } from './types'
+
+export function hasParentRoute(
+  routes: RouteNode[],
+  node: RouteNode,
+  routePathToCheck = '/',
+): RouteNode | null {
+  const segments = routePathToCheck.split('/')
+  segments.pop() // Remove the last segment
+  const parentRoutePath = segments.join('/')
+
+  if (!parentRoutePath || parentRoutePath === '/') {
+    return null
+  }
+
+  const sortedNodes = multiSortBy(routes, [
+    (d): number => d.routePath.length * -1,
+    (d): string | undefined => d.variableName,
+  ])
+    // Exclude base __root file
+    .filter((d) => d.routePath !== `/${ROOT_PATH_ID}`)
+
+  for (const route of sortedNodes) {
+    if (route.routePath === '/') continue
+
+    if (
+      route.routePath.startsWith(parentRoutePath) &&
+      route.routePath.endsWith(ROOT_PATH_ID)
+    ) {
+      return route
+    }
+  }
+
+  return hasParentRoute(routes, node, parentRoutePath)
+}

packages/fs-router-vite-plugin/src/sort-route-nodes.spec.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect } from 'vitest'
+import { sortRouteNodes } from './sort-route-nodes'
+
+const routes = [
+  {
+    filePath: 'index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
+    routePath: '/',
+    variableName: 'Index',
+    path: '/',
+    cleanedPath: '/',
+  },
+  {
+    filePath: 'about.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
+    routePath: '/about',
+    variableName: 'About',
+    path: '/about',
+    cleanedPath: '/about',
+  },
+  {
+    filePath: '__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/__root.tsx',
+    routePath: '/__root',
+    variableName: 'root',
+  },
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
+    routePath: '/posts/[post]',
+    variableName: 'Postspost',
+  },
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+  },
+  {
+    filePath: 'posts/index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostsIndex',
+  },
+  {
+    filePath: 'posts/__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+    routePath: '/posts/__root',
+    variableName: 'Postsroot',
+  },
+]
+
+const expectedSorting = [
+  {
+    filePath: 'index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
+    routePath: '/',
+    variableName: 'Index',
+    path: '/',
+    cleanedPath: '/',
+  },
+  {
+    filePath: 'about.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
+    routePath: '/about',
+    variableName: 'About',
+    path: '/about',
+    cleanedPath: '/about',
+  },
+  {
+    filePath: 'posts/__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+    routePath: '/posts/__root',
+    variableName: 'Postsroot',
+  },
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+  },
+  {
+    filePath: 'posts/index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostsIndex',
+  },
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
+    routePath: '/posts/[post]',
+    variableName: 'Postspost',
+  },
+]
+
+describe('sortRouteNodes works', async () => {
+  it('Should correctly sort the nodes', () => {
+    const sorted = sortRouteNodes(routes)
+    expect(sorted).toStrictEqual(expectedSorting)
+  })
+})

packages/fs-router-vite-plugin/src/sort-route-nodes.ts

@@ -0,0 +1,17 @@
+import type { RouteNode } from './types'
+import { multiSortBy } from './utils'
+import { ROOT_PATH_ID } from './constants'
+
+// Routes need to be sorted in order to iterate over the handleNode fn
+// with first the items that might be parent routes
+export const sortRouteNodes = (routes: RouteNode[]): RouteNode[] =>
+  multiSortBy(routes, [
+    (d): number => (d.routePath === '/' ? -1 : 1),
+    (d): number => d.routePath.split('/').length,
+    // Dynamic route
+    (d): number => (d.routePath.endsWith(']') ? 1 : -1),
+    (d): number => (d.filePath.match(/[./]index[.]/) ? 1 : -1),
+    (d): number => (d.filePath.match(/[./]route[.]/) ? -1 : 1),
+    (d): number => (d.routePath.endsWith('/') ? -1 : 1),
+    (d): string => d.routePath,
+  ]).filter((d) => ![`/${ROOT_PATH_ID}`].includes(d.routePath || ''))

packages/fs-router-vite-plugin/src/types.ts

@@ -5,7 +5,6 @@ export interface RouteNode {
   path?: string
   cleanedPath?: string
   isLayout?: boolean
-  isLoader: boolean
   children?: RouteNode[]
   parent?: RouteNode
   variableName?: string

packages/fs-router-vite-plugin/src/utils.ts

@@ -100,6 +100,12 @@ export function trimPathLeft(pathToTrim: string): string {
   return pathToTrim === '/' ? pathToTrim : pathToTrim.replace(/^\/{1,}/, '')
 }
 
+export function removeLastSlash(str: string): string {
+  if (str.length > 1 && str.endsWith('/'))
+    return str.substring(0, str.length - 1)
+  return str
+}
+
 /**
  * The `node.path` is used as the `id` in the route definition.
  * This function checks if the given node has a parent and if so, it determines the correct path for the given node.

packages/fs-router-vite-plugin/tests/generator/mdx/routeTree.expected.ts

@@ -0,0 +1,29 @@
+// This file is auto-generated by Tuono
+
+import { createRoute, dynamic } from 'tuono'
+
+import RootImport from './routes/__root'
+
+const AboutImport = dynamic(() => import('./routes/about.mdx'))
+const IndexImport = dynamic(() => import('./routes/index'))
+
+const rootRoute = createRoute({ isRoot: true, component: RootImport })
+
+const About = createRoute({ component: AboutImport })
+const Index = createRoute({ component: IndexImport })
+
+// Create/Update Routes
+
+const AboutRoute = About.update({
+  path: '/about',
+  getParentRoute: () => rootRoute,
+})
+
+const IndexRoute = Index.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+})
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([IndexRoute, AboutRoute])

packages/fs-router-vite-plugin/tests/generator/mdx/routes/__root.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/mdx/routes/index.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routeTree.expected.ts

@@ -0,0 +1,67 @@
+// This file is auto-generated by Tuono
+
+import { createRoute, dynamic } from 'tuono'
+
+import RootImport from './routes/__root'
+
+const PostsrootImport = dynamic(() => import('./routes/posts/__root'))
+const AboutImport = dynamic(() => import('./routes/about'))
+const IndexImport = dynamic(() => import('./routes/index'))
+const PostspostImport = dynamic(() => import('./routes/posts/[post]'))
+const PostsIndexImport = dynamic(() => import('./routes/posts/index'))
+const PostsMyPostImport = dynamic(() => import('./routes/posts/my-post'))
+
+const rootRoute = createRoute({ isRoot: true, component: RootImport })
+
+const Postsroot = createRoute({ component: PostsrootImport, isRoot: true })
+const About = createRoute({ component: AboutImport })
+const Index = createRoute({ component: IndexImport })
+const Postspost = createRoute({ component: PostspostImport })
+const PostsIndex = createRoute({ component: PostsIndexImport })
+const PostsMyPost = createRoute({ component: PostsMyPostImport })
+
+// Create/Update Routes
+
+const PostsrootRoute = Postsroot.update({
+  getParentRoute: () => rootRoute,
+})
+
+const AboutRoute = About.update({
+  path: '/about',
+  getParentRoute: () => rootRoute,
+})
+
+const IndexRoute = Index.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+})
+
+const PostspostRoute = Postspost.update({
+  path: '/posts/[post]',
+  getParentRoute: () => PostsrootRoute,
+})
+
+const PostsIndexRoute = PostsIndex.update({
+  path: '/posts',
+  getParentRoute: () => PostsrootRoute,
+})
+
+const PostsMyPostRoute = PostsMyPost.update({
+  path: '/posts/my-post',
+  getParentRoute: () => PostsrootRoute,
+})
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([
+  IndexRoute,
+  AboutRoute,
+  PostsrootRoute.addChildren([
+    PostsMyPostRoute,
+    PostsIndexRoute,
+    PostspostRoute,
+  ]),
+  PostsMyPostRoute,
+  PostsIndexRoute,
+  PostspostRoute,
+])

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/__root.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx

@@ -0,0 +1 @@
+/** */

packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx

@@ -0,0 +1 @@
+/** */

packages/lazy-fn-vite-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono-lazy-fn-vite-plugin",
-  "version": "0.4.6",
+  "version": "0.8.2",
   "description": "Plugin for the tuono's lazy fn. Tuono is the react/rust fullstack framework",
   "scripts": {
     "dev": "vite build --watch",

packages/tuono/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono",
-  "version": "0.4.6",
+  "version": "0.8.2",
   "description": "The react/rust fullstack framework",
   "scripts": {
     "dev": "vite build --watch",
@@ -84,10 +84,12 @@
     "@babel/template": "^7.24.0",
     "@babel/traverse": "^7.24.1",
     "@babel/types": "^7.24.0",
+    "@mdx-js/rollup": "^3.0.1",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^20.12.7",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "fast-text-encoding": "^1.0.6",
+    "react-meta-tags": "^1.0.1",
     "tuono-fs-router-vite-plugin": "workspace:*",
     "tuono-lazy-fn-vite-plugin": "workspace:*",
     "vite": "^5.2.11",

packages/tuono/src/build/index.ts

@@ -2,6 +2,7 @@ import { build, createServer, InlineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import ViteFsRouter from 'tuono-fs-router-vite-plugin'
 import { LazyLoadingPlugin } from 'tuono-lazy-fn-vite-plugin'
+import mdx from '@mdx-js/rollup'
 
 const BASE_CONFIG: InlineConfig = {
   root: '.tuono',
@@ -9,7 +10,16 @@ const BASE_CONFIG: InlineConfig = {
   publicDir: '../public',
   cacheDir: 'cache',
   envDir: '../',
-  plugins: [react(), ViteFsRouter(), LazyLoadingPlugin()],
+  optimizeDeps: {
+    exclude: ['@mdx-js/react'],
+  },
+  plugins: [
+    { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
+    // @ts-ignore: TS configuration issue.
+    react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
+    ViteFsRouter(),
+    LazyLoadingPlugin(),
+  ],
 }
 
 const VITE_PORT = 3001
@@ -47,6 +57,7 @@ export function developmentCSRWatch() {
       ...BASE_CONFIG,
       // Entry point for the development vite proxy
       base: '/vite-server/',
+
       server: {
         port: VITE_PORT,
         strictPort: true,

packages/tuono/src/index.ts

@@ -1,3 +1,4 @@
+import Head from 'react-meta-tags'
 import {
   createRoute,
   createRootRoute,
@@ -18,4 +19,5 @@ export {
   RouterProvider,
   dynamic,
   useRouter,
+  Head,
 }

packages/tuono/src/react-meta-tags.d.ts

@@ -0,0 +1,2 @@
+declare module 'react-meta-tags'
+declare module 'react-meta-tags/server'

packages/tuono/src/router/components/RouteMatch.spec.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { RouteMatch } from './RouteMatch'
+import { cleanup, render, screen } from '@testing-library/react'
+import type { Route } from '../route'
+import '@testing-library/jest-dom'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const root = {
+  isRoot: true,
+  component: ({ children }: Props) => (
+    <div data-testid="root">root route {children}</div>
+  ),
+} as Route
+
+const parent = {
+  component: ({ children }: Props) => (
+    <div data-testid="parent">parent route {children}</div>
+  ),
+  options: {
+    getParentRoute: () => root,
+  },
+} as Route
+
+const route = {
+  component: () => <p data-testid="route">current route</p>,
+  options: {
+    getParentRoute: () => parent,
+  },
+} as Route
+
+describe('Test RouteMatch component', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  test('It should correctly render nested routes', () => {
+    vi.mock('../hooks/useServerSideProps.tsx', () => ({
+      useServerSideProps: (): { data: any; isLoading: boolean } => {
+        return {
+          data: undefined,
+          isLoading: false,
+        }
+      },
+    }))
+
+    render(<RouteMatch route={route} serverSideProps={{}} />)
+    expect(screen.getByTestId('root')).toHaveTextContent(
+      'root route parent route current route',
+    )
+    expect(screen.getByTestId('route')).toHaveTextContent('current route')
+  })
+})

packages/tuono/src/router/components/RouteMatch.tsx

@@ -19,20 +19,63 @@ export const RouteMatch = ({
 }: MatchProps): JSX.Element => {
   const { data, isLoading } = useServerSideProps(route, serverSideProps)
 
-  if (!route.isRoot) {
-    const Root = route.options.getParentRoute()
-    return (
-      <Root.component data={data} isLoading={isLoading}>
-        <React.Suspense>
-          <route.options.component data={data} isLoading={isLoading} />
-        </React.Suspense>
-      </Root.component>
-    )
-  }
+  const routes = React.useMemo(() => {
+    const components = loadParentComponents(route)
+    components.push(route)
+    return components
+  }, [route.id])
 
   return (
-    <React.Suspense>
-      <route.options.component data={data} isLoading={isLoading} />
-    </React.Suspense>
+    <TraverseRootComponents routes={routes} data={data} isLoading={isLoading} />
   )
 }
+
+interface TraverseRootComponentsProps {
+  routes: Route[]
+  data: any
+  isLoading: boolean
+  children?: React.ReactNode
+  index?: number
+}
+
+interface ParentProps {
+  children: React.ReactNode
+  data: any
+  isLoading: boolean
+}
+
+const TraverseRootComponents = ({
+  routes,
+  data,
+  isLoading,
+  index = 0,
+}: TraverseRootComponentsProps): JSX.Element => {
+  const Parent = React.memo(
+    routes[index]?.component as unknown as (props: ParentProps) => JSX.Element,
+  )
+
+  return (
+    <Parent data={data} isLoading={isLoading}>
+      {Boolean(routes.length > index) && (
+        <TraverseRootComponents
+          routes={routes}
+          data={data}
+          isLoading={isLoading}
+          index={index + 1}
+        />
+      )}
+    </Parent>
+  )
+}
+
+const loadParentComponents = (route: Route, loader: Route[] = []): Route[] => {
+  const parentComponent = route.options?.getParentRoute?.()
+
+  loader.push(parentComponent)
+
+  if (!parentComponent.isRoot) {
+    return loadParentComponents(parentComponent, loader)
+  }
+
+  return loader.reverse()
+}

packages/tuono/src/router/hooks/useServerSideProps.tsx

@@ -24,7 +24,8 @@ interface TuonoApi {
 }
 
 const fetchClientSideData = async (): Promise<TuonoApi> => {
-  const res = await fetch(`/__tuono/data${location.pathname}`)
+  const slash = location.pathname.endsWith('/') ? '' : '/'
+  const res = await fetch(`/__tuono/data${location.pathname}${slash}data.json`)
   const data: TuonoApi = await res.json()
   return data
 }

packages/tuono/src/router/route.ts

@@ -56,12 +56,7 @@ export class Route {
     const customId = this.options?.id || path
 
     // Strip the parentId prefix from the first level of children
-    let id = isRoot
-      ? rootRouteId
-      : joinPaths([
-          this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id,
-          customId,
-        ])
+    let id = isRoot ? rootRouteId : joinPaths([customId])
 
     if (path === rootRouteId) {
       path = '/'
@@ -71,12 +66,11 @@ export class Route {
       id = joinPaths(['/', id])
     }
 
-    const fullPath =
-      id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path])
+    const fullPath = id === rootRouteId ? '/' : path
 
     this.path = path
     this.id = id
-    this.fullPath = fullPath
+    this.fullPath = fullPath || ''
   }
 
   addChildren(routes: Route[]): Route {
@@ -91,6 +85,7 @@ export class Route {
   }
 }
 
+// TODO: not use yet. To be updated in tuono-fs-router-vite-plugin package
 export function createRootRoute(options: RouteOptions): Route {
   return new Route({ ...options, isRoot: true })
 }

packages/tuono/src/ssr/index.tsx

@@ -1,6 +1,8 @@
 import 'fast-text-encoding' // Mandatory for React18
 import * as React from 'react'
 import { renderToString, renderToStaticMarkup } from 'react-dom/server'
+import MetaTagsServer from 'react-meta-tags/server'
+import { MetaTagsContext } from 'react-meta-tags'
 import { RouterProvider, createRouter } from '../router'
 
 type RouteTree = any
@@ -42,16 +44,22 @@ export function serverSideRendering(routeTree: RouteTree) {
     const cssBundles = props.cssBundles as string[]
     const router = createRouter({ routeTree }) // Render the app
 
+    const metaTagsInstance = MetaTagsServer()
+
     const app = renderToString(
-      <RouterProvider router={router} serverProps={props} />,
+      <MetaTagsContext extract={metaTagsInstance.extract}>
+        <RouterProvider router={router} serverProps={props} />
+      </MetaTagsContext>,
     )
 
+    const metaTags = metaTagsInstance.renderToString()
+
     return `<!doctype html>
   <html>
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Playground</title>
+	  ${metaTags}
 	  ${generateCssLinks(cssBundles, mode)}
     </head>
     <body>