feat: update version to v0.2.2

* feat: handle Dev and Prod modes

* fix: remove useles variable override

* refactor: ssr entry point fn

* feat: pass Mode from server to client

* feat: enable read file from out/client dir

* feat: load manifest data from server side

* feat: remap manifest when loaded

* feat: load correct bundle server side

* doc: update README.md

* doc: update tutorial

.gitattributes

@@ -0,0 +1 @@
+examples/** linguist-documentation

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
         run: pnpm build
 
       - name: Publish
-        run: pnpm publish --no-git-checks --dry-run --filter ./packages/tuono
+        run: pnpm publish -r --no-git-checks --dry-run 
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
@@ -77,7 +77,7 @@ jobs:
         run: pnpm build
 
       - name: Publish
-        run: pnpm publish --no-git-checks --filter ./packages/tuono
+        run: pnpm publish -r --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.github/workflows/rust.yml

@@ -0,0 +1,40 @@
+name: Rust CI
+
+on:
+  push:
+    paths:
+      - '.github/**'
+      - 'crates/**'
+  pull_request:
+    paths:
+      - '.github/**'
+      - 'crates/**'
+
+env: 
+  CARGO_TERM_COLOR: always
+
+jobs:
+  lint_and_fmt:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: cargo fmt --all -- --check
+      - run: cargo clippy -- -D warnings
+
+  build_and_test:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    name: Build and test rust crates
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        toolchain:
+          - stable
+          - beta
+          - nightly
+    steps:
+      - uses: actions/checkout@v4
+      - run: rustup update ${{ matrix.toolchain }} && rustup default ${{ matrix.toolchain }}
+      - run: cargo build --verbose
+      - run: cargo test --verbose

.github/workflows/typescript.yml

@@ -0,0 +1,66 @@
+name: Typescript CI
+
+on:
+  push:
+    paths:
+      - '.github/**'
+      - 'packages/**'
+  pull_request:
+    paths:
+      - '.github/**'
+      - 'packages/**'
+
+jobs:
+  build-and-test:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    
+    steps:    
+    - name: Check out code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 2
+
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Install pnpm
+      run: npm i -g pnpm
+        
+    - name: Install dependencies
+      run: pnpm install
+      
+    - name: Build project
+      run: pnpm build
+
+    - name: Test project
+      run: pnpm test
+
+  fmt-lint-and-types:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:    
+    - name: Check out code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 2
+        
+    - name: Install pnpm
+      run: npm i -g pnpm
+       
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: Check formatting
+      run: pnpm format:check
+      
+    - name: Lint
+      run: pnpm lint
+ 
+    - name: Types
+      run: pnpm types

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+valerioageno@yahoo.it.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,21 @@
+![](https://github.com/Valerioageno/tuono/actions/workflows/rust.yml/badge.svg)
+![](https://github.com/Valerioageno/tuono/actions/workflows/typescript.yml/badge.svg)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+# How to contribute to Tuono
+
+## Contributions 
+Any feature contribution or suggestion is strongly appreciated.
+Since the current project size there isn't yet a defined way to start a discussion. Consider to [open a new issue](https://github.com/Valerioageno/tuono/issues/new)
+or to reach me using my email address [valerioageno@yahoo.it](mailto:valerioageno@ahoo.it). I'm also available on twitter (X) DMs @valerioageno.
+
+## Bugs
+
+**Did you find a bug?**
+- Ensure the bug was not already reported by searching on GitHub under [Issues](https://github.com/Valerioageno/tuono/issues).
+- If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/Valerioageno/tuono/issues/new). Be sure to include a title and clear description, as much relevant information as possible, and a code sample or an executable test case demonstrating the expected behavior that is not occurring.
+
+**Did you write a patch that fixes a bug?**
+- Open a new GitHub pull request with the patch.
+- Ensure the PR description clearly describes the problem and solution. Include the relevant issue number if applicable.
+- The pull requests must pass all the CI pipelines

README.md

@@ -5,19 +5,69 @@
 <p align="center">
 ⚠️ This project is under heavy development. API might drastically change ⚠️
 </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" />
+</div>
+
+<br>
+<br>
 
 
 Tuono (Italian word for "thunder", pronounced /2 Oh No/). 
 Why Tuono? Just a badass name.
 
-> If you want to see how this project actually works check the [tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md) page.
+> Check out the [tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md) to get started.
 
 ## Introduction
 
-NodeJs/Deno/Bun are the only tools that make a React app fullstack right? (no) 
+**NodeJs/Deno/Bun are the only runtimes that allow a React app to be fullstack right? (no)**
 
-Tuono wants to prove that it's possible creating fully fledged react applications without the need to host them on a JS runtime server leveraging the best of the two worlds: 
-super powered server and amazing development experience.
+Tuono is a fullstack React framework with the server side written in Rust. 
+Because of this Tuono is extremely fast and the requests are handled by multithreaded Rust server.
+React is still React - it is just superpowered.
+
+**Rust is an hard language then writing server side code is hard as well right? (no again)**
+
+Tuono provides a collection of utilities to handle the server side code seamlessly with the React code.
+Each server side route is managed with a separate file alongside the React route. The routing is handled
+by Tuono based on the files defined within the `./src/routes` directory.
+
+## Features
+
+- 🟦  Typescript
+- 🌐  Routing
+- 🔥  Hot Module Reload
+- 🍭  CSS modules
+- 🧬  Server Side Rendering
+- 🧵  Multi thread backend
+- ⚙️   Build optimizations
+- Custom APIs*
+- Image optimization*
+- Server streamed content*
+
+> *Development in progress
+
+## Getting started
+
+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/)
+package manager.
+
+To download and install it you just need to run `cargo install tuono`.
+
+To create a new project run `tuono new [NAME]` (optionally you can pass the `--template` 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.
+
+Now to execute it just run `cargo run --release`.
 
 ## Requirements
 
@@ -26,51 +76,22 @@ super powered server and amazing development experience.
 - node
 - pnpm (other package managers support will be added soon)
 
-## Installation
-
-```
-cargo install tuono
-```
-
-## Create a new project
-
-```
-tuono new [NAME]
-```
-
-## Development
-
-```
-tuono dev
-```
-## Features
-
-- [x]  FS routing
-- [x]  Hot Module Reload
-- [x]  CSS modules
-- [x]  Rust based server side rendering
-- [x]  Multi thread backend
-- [x]  Development environment
-- [ ]  Create custom APIs
-- [ ]  Image optimization
-- [ ]  Build optimization
-- [ ]  Server streamed content
-
-> 💡 Any suggestion or improvement is strongly appreciated
-
 ## Folder structure
 
 ```
-| public/ 
-- src/
-  | routes/
-  |	styles/
-| package.json
-| Cargo.toml
-| .gitignore
-| tsconfig.json
+├── package.json
+├── public
+├── src
+│   ├── routes
+│   └── styles
+├── Cargo.toml
+├── README.md
+└── tsconfig.json
 ```
 
+## Contributing
+Any help or suggestion will be appreciated and encouraged.
+
 ## License
 
 This project is licensed under the MIT License.

crates/tuono/Cargo.toml

@@ -1,13 +1,13 @@
 [package]
 name = "tuono"
-version = "0.1.2"
+version = "0.2.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
-homepage = "https://github.com/Valerioageno/tuono"
+repository = "https://github.com/Valerioageno/tuono"
 readme = "../../README.md"
 license-file = "../../LICENSE.md"
-categories = ["web-programming"]
+categories = ["web-programming", "reactjs", "typescript", "framework", "fullstack"]
 include = [
 		"src/*.rs",
 		"Cargo.toml"

crates/tuono/src/lib.rs

@@ -4,7 +4,8 @@ use std::process::Command;
 mod source_builder;
 use source_builder::{bundle_axum_source, create_client_entry_files};
 
-use crate::source_builder::check_tuono_folder;
+use crate::source_builder::{check_tuono_folder, Mode};
+
 mod scaffold_project;
 mod watch;
 
@@ -15,7 +16,14 @@ enum Actions {
     /// Build the production assets
     Build,
     /// Scaffold a new project
-    New { folder_name: Option<String> },
+    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)]
@@ -25,9 +33,9 @@ struct Args {
     action: Actions,
 }
 
-fn init_tuono_folder() -> std::io::Result<()> {
+fn init_tuono_folder(mode: Mode) -> std::io::Result<()> {
     check_tuono_folder()?;
-    bundle_axum_source()?;
+    bundle_axum_source(mode)?;
     create_client_entry_files()?;
 
     Ok(())
@@ -38,16 +46,19 @@ pub fn cli() -> std::io::Result<()> {
 
     match args.action {
         Actions::Dev => {
-            init_tuono_folder()?;
+            init_tuono_folder(Mode::Dev)?;
             watch::watch().unwrap();
         }
         Actions::Build => {
-            init_tuono_folder()?;
+            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 } => {
-            scaffold_project::create_new_project(folder_name);
+        Actions::New {
+            folder_name,
+            template,
+        } => {
+            scaffold_project::create_new_project(folder_name, template);
         }
     }
 

crates/tuono/src/scaffold_project.rs

@@ -38,12 +38,11 @@ fn create_file(path: PathBuf, content: String) -> std::io::Result<()> {
     Ok(())
 }
 
-pub fn create_new_project(folder_name: Option<String>) {
+pub fn create_new_project(folder_name: Option<String>, template: Option<String>) {
     let folder = folder_name.unwrap_or(".".to_string());
 
-    if folder != "." {
-        create_dir(&folder).unwrap();
-    }
+    // In case of missing select the tuono example
+    let template = template.unwrap_or("tuono".to_string());
 
     let client = blocking::Client::builder()
         .user_agent("")
@@ -60,21 +59,25 @@ pub fn create_new_project(folder_name: Option<String>) {
     let new_project_files = res
         .tree
         .iter()
-        .filter(|GithubFile { path, .. }| {
-            // TODO: Handle custom example download by CLI argument --template
-            if path.starts_with("examples/tuono/") {
-                return true;
-            }
-            false
-        })
+        .filter(|GithubFile { path, .. }| path.starts_with(&format!("examples/{template}/")))
         .collect::<Vec<&GithubFile>>();
 
+    if new_project_files.is_empty() {
+        println!("Template not found: {template}");
+        return;
+    }
+
+    if folder != "." {
+        create_dir(&folder).unwrap();
+    }
+
     let folder_name = PathBuf::from(&folder);
     let current_dir = env::current_dir().expect("Failed to get current working directory");
 
     let folder_path = current_dir.join(folder_name);
 
-    create_directories(&new_project_files, &folder_path).expect("Failed to create directories");
+    create_directories(&new_project_files, &folder_path, &template)
+        .expect("Failed to create directories");
 
     for GithubFile {
         element_type, path, ..
@@ -88,7 +91,7 @@ pub fn create_new_project(folder_name: Option<String>) {
                 .text()
                 .expect("Failed to parse the repo structure");
 
-            let path = PathBuf::from(&path.replace("examples/tuono/", ""));
+            let path = PathBuf::from(&path.replace(&format!("examples/{template}/"), ""));
 
             let file_path = folder_path.join(&path);
 
@@ -101,13 +104,17 @@ pub fn create_new_project(folder_name: Option<String>) {
     outro(folder);
 }
 
-fn create_directories(new_project_files: &Vec<&GithubFile>, folder_path: &Path) -> io::Result<()> {
+fn create_directories(
+    new_project_files: &[&GithubFile],
+    folder_path: &Path,
+    template: &String,
+) -> io::Result<()> {
     for GithubFile {
         element_type, path, ..
     } in new_project_files.iter()
     {
         if let GithubFileType::Tree = element_type {
-            let path = PathBuf::from(&path.replace("examples/tuono/", ""));
+            let path = PathBuf::from(&path.replace(&format!("examples/{template}/"), ""));
 
             let dir_path = folder_path.join(&path);
             create_dir(&dir_path).unwrap();

crates/tuono/src/source_builder.rs

@@ -8,6 +8,21 @@ 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"
+    }
+}
+
 pub const SERVER_ENTRY_DATA: &str = "// File automatically generated by tuono
 // Do not manually update this file
 import { routeTree } from './routeTree.gen'
@@ -37,9 +52,11 @@ use axum::response::Html;
 use axum::{routing::get, Router};
 use tower_http::services::ServeDir;
 use std::collections::HashMap;
-use tuono_lib::{ssr, Ssr};
+use tuono_lib::{ssr, Ssr, Mode, GLOBAL_MODE, manifest::load_manifest};
 use reqwest::Client;
 
+const MODE: Mode = /*MODE*/;
+
 // MODULE_IMPORTS
 
 #[tokio::main]
@@ -48,12 +65,27 @@ async fn main() {
 
     let fetch = Client::new();
 
+    GLOBAL_MODE.set(MODE).unwrap();
+
+    if MODE == Mode::Prod {
+        load_manifest()
+    }
+
     let app = Router::new()
         // ROUTE_BUILDER
-        .fallback_service(ServeDir::new("public").fallback(get(catch_all)))
+        .fallback_service(
+            ServeDir::new("public"))
+        .fallback_service(ServeDir::new("out/client")
+            .fallback(get(catch_all)))
         .with_state(fetch);
 
     let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
+
+    if MODE == Mode::Dev {
+        println!("\nDevelopment app ready at http://localhost:3000/");
+    } else {
+        println!("\nProduction app ready at http://localhost:3000/");
+    }
     axum::serve(listener, app).await.unwrap();
 }
 
@@ -65,7 +97,7 @@ async fn catch_all(Path(params): Path<HashMap<String, String>>, request: Request
 
 
     // TODO: remove unwrap
-    let payload = tuono_lib::Payload::new(&req, Box::new(""))
+    let payload = tuono_lib::Payload::new(&req, &"")
         .client_payload()
         .unwrap();
 
@@ -81,11 +113,6 @@ async fn catch_all(Path(params): Path<HashMap<String, String>>, request: Request
 const ROOT_FOLDER: &str = "src/routes";
 const DEV_FOLDER: &str = ".tuono";
 
-pub enum Mode {
-    Prod,
-    Dev,
-}
-
 #[derive(Debug, PartialEq, Eq)]
 struct Route {
     /// Every module import is the path with a _ instead of /
@@ -135,17 +162,15 @@ impl Route {
 
 struct SourceBuilder {
     route_map: HashMap<PathBuf, Route>,
-    mode: Mode,
     base_path: PathBuf,
 }
 
 impl SourceBuilder {
-    pub fn new(mode: Mode) -> Self {
+    pub fn new() -> Self {
         let base_path = std::env::current_dir().unwrap();
 
         SourceBuilder {
             route_map: HashMap::new(),
-            mode,
             base_path,
         }
     }
@@ -215,14 +240,22 @@ mod {module_name};
     route_declarations
 }
 
-pub fn bundle_axum_source() -> io::Result<()> {
+pub fn bundle_axum_source(mode: Mode) -> io::Result<()> {
     let base_path = std::env::current_dir().unwrap();
 
-    let mut source_builder = SourceBuilder::new(Mode::Dev);
+    let mut source_builder = SourceBuilder::new();
 
     source_builder.collect_routes();
 
-    let bundled_file = AXUM_ENTRY_POINT
+    let bundled_file = generate_axum_source(&source_builder, mode);
+
+    create_main_file(&base_path, &bundled_file);
+
+    Ok(())
+}
+
+fn generate_axum_source(source_builder: &SourceBuilder, mode: Mode) -> String {
+    AXUM_ENTRY_POINT
         .replace(
             "// ROUTE_BUILDER\n",
             &create_routes_declaration(&source_builder.route_map),
@@ -230,17 +263,13 @@ pub fn bundle_axum_source() -> io::Result<()> {
         .replace(
             "// MODULE_IMPORTS\n",
             &create_modules_declaration(&source_builder.route_map),
-        );
-
-    create_main_file(&base_path, &bundled_file);
-
-    Ok(())
+        )
+        .replace("/*MODE*/", mode.as_str())
 }
 
 pub fn check_tuono_folder() -> io::Result<()> {
     let dev_folder = Path::new(DEV_FOLDER);
     if !&dev_folder.is_dir() {
-        println!("exists");
         fs::create_dir(dev_folder)?;
     }
 
@@ -265,7 +294,7 @@ mod tests {
     use super::*;
 
     #[test]
-    fn find_dynamic_paths() {
+    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),
@@ -285,8 +314,8 @@ mod tests {
     }
 
     #[test]
-    fn collect_routes() {
-        let mut source_builder = SourceBuilder::new(Mode::Dev);
+    fn should_collect_routes() {
+        let mut source_builder = SourceBuilder::new();
         source_builder.base_path = "/home/user/Documents/tuono".into();
 
         let routes = [
@@ -320,8 +349,8 @@ mod tests {
     }
 
     #[test]
-    fn create_multi_level_axum_paths() {
-        let mut source_builder = SourceBuilder::new(Mode::Dev);
+    fn should_create_multi_level_axum_paths() {
+        let mut source_builder = SourceBuilder::new();
         source_builder.base_path = "/home/user/Documents/tuono".into();
 
         let routes = [
@@ -355,4 +384,24 @@ mod tests {
             )
         })
     }
+
+    #[test]
+    fn should_set_the_correct_mode() {
+        let source_builder = SourceBuilder::new();
+
+        let dev_bundle = generate_axum_source(&source_builder, Mode::Dev);
+        assert!(dev_bundle.contains("const MODE: Mode = Mode::Dev;"));
+
+        let prod_bundle = generate_axum_source(&source_builder, Mode::Prod);
+
+        assert!(prod_bundle.contains("const MODE: Mode = Mode::Prod;"));
+    }
+
+    #[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/watch.rs

@@ -6,7 +6,7 @@ use watchexec::Watchexec;
 use watchexec_signals::Signal;
 use watchexec_supervisor::job::{start_job, Job};
 
-use crate::source_builder::bundle_axum_source;
+use crate::source_builder::{bundle_axum_source, Mode};
 
 fn watch_react_src() -> Job {
     start_job(Arc::new(Command {
@@ -54,7 +54,7 @@ pub async fn watch() -> Result<()> {
 
     run_server.start().await;
 
-    println!("\nDevelopment app ready at http://localhost:3000/");
+    build_ssr_bundle.to_wait().await;
 
     let wx = Watchexec::new(move |mut action| {
         let mut should_reload = false;
@@ -75,10 +75,9 @@ pub async fn watch() -> Result<()> {
             run_server.stop();
             build_ssr_bundle.stop();
             build_ssr_bundle.start();
-            bundle_axum_source().expect("Failed to bunlde rust source");
+            bundle_axum_source(Mode::Dev).expect("Failed to bunlde rust source");
             run_server.start();
             println!("Ready!");
-            should_reload = false;
         }
 
         // if Ctrl-C is received, quit

crates/tuono_lib/Cargo.toml

@@ -1,13 +1,13 @@
 [package]
 name = "tuono_lib"
-version = "0.1.2"
+version = "0.2.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
-homepage = "https://github.com/Valerioageno/tuono"
+repository = "https://github.com/Valerioageno/tuono"
 readme = "../../README.md"
 license-file = "../../LICENSE.md"
-categories = ["web-programming"]
+categories = ["web-programming", "reactjs", "typescript", "framework", "fullstack"]
 include = [
 		"src/*.rs",
 		"Cargo.toml"
@@ -18,10 +18,14 @@ name = "tuono_lib"
 path = "src/lib.rs"
 
 [dependencies]
-ssr_rs = "0.5.2"
+ssr_rs = "0.5.4"
 axum = "0.7.5"
 serde = { version = "1.0.202", features = ["derive"] }
 erased-serde = "0.4.5"
 serde_json = "1.0"
 
-tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.1.2"}
+tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.2.2"}
+once_cell = "1.19.0"
+lazy_static = "1.5.0"
+regex = "1.10.5"
+

crates/tuono_lib/src/lib.rs

@@ -1,11 +1,14 @@
+pub mod manifest;
+mod mode;
 mod payload;
 mod request;
 mod response;
 
 pub mod ssr;
 
+pub use mode::{Mode, GLOBAL_MODE};
 pub use payload::Payload;
 pub use request::Request;
-pub use response::Response;
+pub use response::{Props, Response};
 pub use ssr_rs::Ssr;
 pub use tuono_lib_macros::handler;

crates/tuono_lib/src/manifest.rs

@@ -0,0 +1,99 @@
+use once_cell::sync::OnceCell;
+use serde::Deserialize;
+use std::collections::HashMap;
+use std::fs::File;
+use std::io::BufReader;
+use std::path::PathBuf;
+
+const VITE_MANIFEST_PATH: &str = "./out/client/.vite/manifest.json";
+
+#[derive(Deserialize, Debug, Clone)]
+pub struct BundleInfo {
+    pub file: String,
+    pub css: Vec<String>,
+}
+
+/// Manifest is the mapping between the vite output bundled files
+/// and the originals.
+/// Vite doc: https://vitejs.dev/config/build-options.html#build-manifest
+pub static MANIFEST: OnceCell<HashMap<String, BundleInfo>> = OnceCell::new();
+
+pub fn load_manifest() {
+    let file = File::open(PathBuf::from(VITE_MANIFEST_PATH)).unwrap();
+    let reader = BufReader::new(file);
+    let manifest = serde_json::from_reader(reader).unwrap();
+    MANIFEST.set(remap_manifest_keys(manifest)).unwrap();
+}
+
+fn remap_manifest_keys(manifest: HashMap<String, BundleInfo>) -> HashMap<String, BundleInfo> {
+    let mut new_hashmap = HashMap::new();
+
+    manifest.keys().for_each(|key| {
+        let new_key = key
+            .replace("../src/routes", "")
+            .replace(".tsx", "")
+            .replace(".jsx", "")
+            .replace("index", "");
+
+        new_hashmap.insert(new_key, manifest.get(key).unwrap().clone());
+    });
+
+    new_hashmap
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn should_correctly_remap_the_manifest() {
+        let mut parsed_manifest: HashMap<String, BundleInfo> = HashMap::new();
+        parsed_manifest.insert(
+            "../src/routes/index.tsx".to_string(),
+            BundleInfo {
+                file: "assets/index.js".to_string(),
+                css: vec!["assets/index.css".to_string()],
+            },
+        );
+        parsed_manifest.insert(
+            "../src/routes/about.jsx".to_string(),
+            BundleInfo {
+                file: "assets/about.js".to_string(),
+                css: vec!["assets/about.css".to_string()],
+            },
+        );
+        parsed_manifest.insert(
+            "../src/routes/posts/[post].tsx".to_string(),
+            BundleInfo {
+                file: "assets/posts/[post].js".to_string(),
+                css: vec!["assets/posts/[post].css".to_string()],
+            },
+        );
+        parsed_manifest.insert(
+            "client-main.tsx".to_string(),
+            BundleInfo {
+                file: "assets/main.js".to_string(),
+                css: vec!["assets/main.css".to_string()],
+            },
+        );
+
+        let remapped = remap_manifest_keys(parsed_manifest);
+
+        assert_eq!(
+            remapped.get("/").unwrap().file,
+            "assets/index.js".to_string()
+        );
+        assert_eq!(
+            remapped.get("/about").unwrap().file,
+            "assets/about.js".to_string()
+        );
+        assert_eq!(
+            remapped.get("/posts/[post]").unwrap().file,
+            "assets/posts/[post].js".to_string()
+        );
+        assert_eq!(
+            remapped.get("client-main").unwrap().file,
+            "assets/main.js".to_string()
+        );
+    }
+}

crates/tuono_lib/src/mode.rs

@@ -0,0 +1,10 @@
+use once_cell::sync::OnceCell;
+use serde::Serialize;
+
+#[derive(Debug, PartialEq, Eq, Serialize, Clone, Copy)]
+pub enum Mode {
+    Dev,
+    Prod,
+}
+
+pub static GLOBAL_MODE: OnceCell<Mode> = OnceCell::new();

crates/tuono_lib/src/payload.rs

@@ -1,25 +1,293 @@
+use crate::{manifest::MANIFEST, Mode, GLOBAL_MODE};
 use erased_serde::Serialize;
+use regex::Regex;
 use serde::Serialize as SerdeSerialize;
 
-use crate::request::Location;
-use crate::Request;
+use crate::request::{Location, Request};
+
+fn has_dynamic_path(route: &str) -> bool {
+    let regex = Regex::new(r"\[(.*?)\]").expect("Failed to create the regex");
+    regex.is_match(route)
+}
 
 #[derive(SerdeSerialize)]
-/// This is the data shared to the client
+/// This is the payload sent to the client for hydration
 pub struct Payload<'a> {
-    router: Location<'a>,
-    props: Box<dyn Serialize>,
+    router: Location,
+    props: &'a dyn Serialize,
+    mode: Mode,
+    #[serde(rename(serialize = "jsBundles"))]
+    js_bundles: Option<Vec<&'a String>>,
+    #[serde(rename(serialize = "cssBundles"))]
+    css_bundles: Option<Vec<&'a String>>,
 }
 
 impl<'a> Payload<'a> {
-    pub fn new(req: &Request<'a>, props: Box<dyn Serialize>) -> Payload<'a> {
+    pub fn new(req: &Request<'a>, props: &'a dyn Serialize) -> Payload<'a> {
         Payload {
             router: req.location(),
             props,
+            mode: *GLOBAL_MODE.get().expect("Failed to load the current mode"),
+            js_bundles: None,
+            css_bundles: None,
         }
     }
 
-    pub fn client_payload(&self) -> Result<String, serde_json::Error> {
+    pub fn client_payload(&mut self) -> Result<String, serde_json::Error> {
+        if self.mode == Mode::Prod {
+            self.add_bundle_sources();
+        }
         serde_json::to_string(&self)
     }
+
+    /// This method adds the route specific bundles to the server
+    /// side rendered HTML.
+    ///
+    /// The same matching algorithm is implemented on the client side in
+    /// this file (packages/tuono/src/router/components/Matches.ts).
+    ///
+    /// Optimizations should occour on both.
+    fn add_bundle_sources(&mut self) {
+        // Manifest should always be loaded. The load happen before starting
+        // the server.
+        let manifest = MANIFEST.get().expect("Failed to load manifest");
+
+        // The main bundle should always exist.
+        // The extension should be tsx even with JS only projects.
+        let main_bundle = manifest
+            .get("client-main")
+            .expect("Failed to get client-main bundle");
+
+        let mut js_bundles_sources = vec![&main_bundle.file];
+        let mut css_bundles_sources = main_bundle.css.iter().collect::<Vec<&String>>();
+
+        let pathname = &self.router.pathname();
+
+        let bundle_data = manifest.get(*pathname);
+
+        if let Some(data) = bundle_data {
+            js_bundles_sources.push(&data.file);
+
+            data.css
+                .iter()
+                .for_each(|source| css_bundles_sources.push(source))
+        } else {
+            let dynamic_routes = manifest
+                .keys()
+                .filter(|path| has_dynamic_path(path))
+                .collect::<Vec<&String>>();
+
+            if !dynamic_routes.is_empty() {
+                let path_segments = pathname
+                    .split('/')
+                    .filter(|path| !path.is_empty())
+                    .collect::<Vec<&str>>();
+
+                for dyn_route in dynamic_routes.iter() {
+                    let dyn_route_segments = dyn_route
+                        .split('/')
+                        .filter(|path| !path.is_empty())
+                        .collect::<Vec<&str>>();
+
+                    let mut route_segments_collector: Vec<&str> = vec![];
+
+                    for i in 0..dyn_route_segments.len() {
+                        if path_segments.len() == i {
+                            break;
+                        }
+                        if dyn_route_segments[i] == path_segments[i]
+                            || has_dynamic_path(dyn_route_segments[i])
+                        {
+                            route_segments_collector.push(dyn_route_segments[i])
+                        } else {
+                            break;
+                        }
+                    }
+
+                    if route_segments_collector.len() == path_segments.len() {
+                        let manifest_key = route_segments_collector.join("/");
+
+                        let route_data = manifest.get(&format!("/{manifest_key}"));
+                        if let Some(data) = route_data {
+                            js_bundles_sources.push(&data.file);
+                            data.css
+                                .iter()
+                                .for_each(|source| css_bundles_sources.push(source))
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+
+        self.js_bundles = Some(js_bundles_sources);
+        self.css_bundles = Some(css_bundles_sources);
+    }
+}
+
+#[cfg(test)]
+mod tests {
+
+    use super::*;
+    use axum::http::Uri;
+    use std::collections::HashMap;
+
+    use crate::manifest::BundleInfo;
+
+    fn prepare_payload(uri: Option<&str>, mode: Mode) -> Payload<'static> {
+        let mut manifest_mock = HashMap::new();
+        manifest_mock.insert(
+            "client-main".to_string(),
+            BundleInfo {
+                file: "assets/bundled-file.js".to_string(),
+                css: vec!["assets/bundled-file.css".to_string()],
+            },
+        );
+        manifest_mock.insert(
+            "/".to_string(),
+            BundleInfo {
+                file: "assets/index.js".to_string(),
+
+                css: vec!["assets/index.css".to_string()],
+            },
+        );
+        manifest_mock.insert(
+            "/posts/[post]".to_string(),
+            BundleInfo {
+                file: "assets/posts/[post].js".to_string(),
+
+                css: vec!["assets/posts/[post].css".to_string()],
+            },
+        );
+        manifest_mock.insert(
+            "/posts/[post]/[comment]".to_string(),
+            BundleInfo {
+                file: "assets/posts/[post]/[comment].js".to_string(),
+
+                css: vec!["assets/posts/[post]/[comment].css".to_string()],
+            },
+        );
+        manifest_mock.insert(
+            "/posts/custom-post".to_string(),
+            BundleInfo {
+                file: "assets/custom-post.js".to_string(),
+
+                css: vec!["assets/custom-post.css".to_string()],
+            },
+        );
+        manifest_mock.insert(
+            "/about".to_string(),
+            BundleInfo {
+                file: "assets/about.js".to_string(),
+
+                css: vec!["assets/about.css".to_string()],
+            },
+        );
+        MANIFEST.get_or_init(|| manifest_mock);
+        let location = Location::from(
+            &uri.unwrap_or("http://localhost:3000/")
+                .parse::<Uri>()
+                .unwrap(),
+        );
+
+        Payload {
+            router: location,
+            props: &None::<Option<()>>,
+            mode,
+            js_bundles: None,
+            css_bundles: None,
+        }
+    }
+
+    #[test]
+    fn should_load_the_bundles_on_mode_prod() {
+        let mut payload = prepare_payload(None, Mode::Prod);
+
+        let _ = payload.client_payload();
+        assert_eq!(
+            payload.js_bundles,
+            Some(vec![
+                &"assets/bundled-file.js".to_string(),
+                &"assets/index.js".to_string()
+            ])
+        );
+        assert_eq!(
+            payload.css_bundles,
+            Some(vec![
+                &"assets/bundled-file.css".to_string(),
+                &"assets/index.css".to_string()
+            ])
+        );
+    }
+
+    #[test]
+    fn should_not_load_the_bundles_on_mode_dev() {
+        let mut payload = prepare_payload(None, Mode::Dev);
+        let _ = payload.client_payload();
+        assert!(payload.js_bundles.is_none());
+        assert!(payload.css_bundles.is_none());
+    }
+
+    #[test]
+    fn should_load_the_correct_single_dyn_path_bundles() {
+        let mut payload = prepare_payload(Some("http://localhost:3000/posts/a-post"), Mode::Prod);
+        let _ = payload.client_payload();
+        assert_eq!(
+            payload.js_bundles,
+            Some(vec![
+                &"assets/bundled-file.js".to_string(),
+                &"assets/posts/[post].js".to_string()
+            ])
+        );
+        assert_eq!(
+            payload.css_bundles,
+            Some(vec![
+                &"assets/bundled-file.css".to_string(),
+                &"assets/posts/[post].css".to_string()
+            ])
+        );
+    }
+
+    #[test]
+    fn should_load_the_correct_nested_dyn_path_bundles() {
+        let mut payload = prepare_payload(
+            Some("http://localhost:3000/posts/a-post/a-comment"),
+            Mode::Prod,
+        );
+        let _ = payload.client_payload();
+        assert_eq!(
+            payload.js_bundles,
+            Some(vec![
+                &"assets/bundled-file.js".to_string(),
+                &"assets/posts/[post]/[comment].js".to_string()
+            ])
+        );
+        assert_eq!(
+            payload.css_bundles,
+            Some(vec![
+                &"assets/bundled-file.css".to_string(),
+                &"assets/posts/[post]/[comment].css".to_string()
+            ])
+        );
+    }
+
+    #[test]
+    fn should_load_the_defined_path_bundles() {
+        let mut payload = prepare_payload(Some("http://localhost:3000/about"), Mode::Prod);
+        let _ = payload.client_payload();
+        assert_eq!(
+            payload.js_bundles,
+            Some(vec![
+                &"assets/bundled-file.js".to_string(),
+                &"assets/about.js".to_string()
+            ])
+        );
+        assert_eq!(
+            payload.css_bundles,
+            Some(vec![
+                &"assets/bundled-file.css".to_string(),
+                &"assets/about.css".to_string()
+            ])
+        );
+    }
 }

crates/tuono_lib/src/request.rs

@@ -3,6 +3,35 @@ use std::collections::HashMap;
 
 use axum::http::{HeaderMap, Uri};
 
+/// Location must match client side interface
+#[derive(Serialize, Debug)]
+pub struct Location {
+    href: String,
+    pathname: String,
+    search: HashMap<String, String>,
+    search_str: String,
+    hash: String,
+}
+
+impl Location {
+    pub fn pathname(&self) -> &String {
+        &self.pathname
+    }
+}
+
+impl<'a> From<&'a Uri> for Location {
+    fn from(uri: &Uri) -> Self {
+        Location {
+            href: uri.to_string(),
+            pathname: uri.path().to_string(),
+            // TODO: handler search map
+            search: HashMap::new(),
+            search_str: uri.query().unwrap_or("").to_string(),
+            hash: "".to_string(),
+        }
+    }
+}
+
 #[derive(Debug, Clone)]
 pub struct Request<'a> {
     uri: &'a Uri,
@@ -10,17 +39,6 @@ pub struct Request<'a> {
     pub params: HashMap<String, String>,
 }
 
-/// Location must match client side interface
-#[derive(Serialize, Debug)]
-pub struct Location<'a> {
-    href: String,
-    pathname: &'a str,
-    search: HashMap<String, String>,
-    search_str: &'a str,
-    /// Server does not need it. Will be hanlder client side
-    hash: &'a str,
-}
-
 impl<'a> Request<'a> {
     pub fn new(
         uri: &'a Uri,
@@ -34,14 +52,7 @@ impl<'a> Request<'a> {
         }
     }
 
-    pub fn location(&self) -> Location<'a> {
-        Location {
-            href: self.uri.to_string(),
-            pathname: &self.uri.path(),
-            // TODO: handler search map
-            search: HashMap::new(),
-            search_str: &self.uri.query().unwrap_or(""),
-            hash: "",
-        }
+    pub fn location(&self) -> Location {
+        Location::from(self.uri)
     }
 }

crates/tuono_lib/src/response.rs

@@ -1,6 +1,56 @@
+use crate::Request;
+use crate::{ssr::Js, Payload};
+use axum::http::StatusCode;
+use axum::response::{Html, IntoResponse};
+use axum::Json;
 use erased_serde::Serialize;
 
+pub struct Props {
+    data: Box<dyn Serialize>,
+    http_code: StatusCode,
+}
+
 pub enum Response {
     Redirect(String),
-    Props(Box<dyn Serialize>),
+    Props(Props),
+}
+
+impl Props {
+    pub fn new(data: impl Serialize + 'static) -> Self {
+        Props {
+            data: Box::new(data),
+            http_code: StatusCode::OK,
+        }
+    }
+
+    pub fn new_with_status(data: impl Serialize + 'static, http_code: StatusCode) -> Self {
+        Props {
+            data: Box::new(data),
+            http_code,
+        }
+    }
+}
+
+impl Response {
+    pub fn render_to_string(&self, req: Request) -> impl IntoResponse {
+        match self {
+            Self::Props(Props { data, http_code }) => {
+                let payload = Payload::new(&req, data).client_payload().unwrap();
+
+                match Js::SSR.with(|ssr| ssr.borrow_mut().render_to_string(Some(&payload))) {
+                    Ok(html) => (*http_code, Html(html)),
+                    Err(_) => (*http_code, Html("500 Internal server error".to_string())),
+                }
+            }
+            // TODO: Handle here other enum arms
+            _ => todo!(),
+        }
+    }
+
+    pub fn json(&self) -> impl IntoResponse {
+        match self {
+            Self::Props(Props { data, http_code }) => (*http_code, Json(data)).into_response(),
+            _ => (StatusCode::INTERNAL_SERVER_ERROR, axum::Json("{}")).into_response(),
+        }
+    }
 }

crates/tuono_lib/src/ssr.rs

@@ -1,16 +1,26 @@
+use crate::{Mode, GLOBAL_MODE};
+use lazy_static::lazy_static;
 use ssr_rs::Ssr;
 use std::cell::RefCell;
 use std::fs::read_to_string;
+use std::path::PathBuf;
+
+lazy_static! {
+    static ref BUNDLE_PATH: &'static str = {
+        if GLOBAL_MODE.get().unwrap() == &Mode::Dev {
+            return "./.tuono/server/dev-server.js";
+        }
+        "./out/server/prod-server.js"
+    };
+}
 
 pub struct Js;
 
 impl Js {
     thread_local! {
         pub static SSR: RefCell<Ssr<'static, 'static>> = RefCell::new(
-              // TODO: handle here dev/prod source
                 Ssr::from(
-                    read_to_string("./.tuono/server/dev-server.js").unwrap(),
-                    ""
+                    read_to_string(PathBuf::from(*BUNDLE_PATH)).expect("Server bundle not found"), ""
                     ).unwrap()
                 )
     }

crates/tuono_lib_macros/Cargo.toml

@@ -1,12 +1,12 @@
 [package]
 name = "tuono_lib_macros"
-version = "0.1.2"
+version = "0.2.2"
 edition = "2021"
 description = "The react/rust fullstack framework"
-homepage = "https://github.com/Valerioageno/tuono"
+repository = "https://github.com/Valerioageno/tuono"
 readme = "../../README.md"
 license-file = "../../LICENSE.md"
-categories = ["web-programming"]
+categories = ["web-programming", "reactjs", "typescript", "framework", "fullstack"]
 include = [
 		"src/*.rs",
 		"Cargo.toml"

crates/tuono_lib_macros/src/handler.rs

@@ -8,7 +8,7 @@ pub fn handler_core(_args: TokenStream, item: TokenStream) -> TokenStream {
     let fn_name = item.clone().sig.ident;
 
     quote! {
-        use axum::response::{Html, IntoResponse};
+        use axum::response::IntoResponse;
         use std::collections::HashMap;
         use axum::extract::{State, Path};
         use reqwest::Client;
@@ -16,51 +16,29 @@ pub fn handler_core(_args: TokenStream, item: TokenStream) -> TokenStream {
         #item
 
         pub async fn route(
-            Path(params): Path<HashMap<String, String>>, 
-            State(client): State<Client>, 
+            Path(params): Path<HashMap<String, String>>,
+            State(client): State<Client>,
             request: axum::extract::Request
-        ) -> Html<String> {
+        ) -> impl IntoResponse {
            let pathname = &request.uri();
            let headers = &request.headers();
 
            let req = tuono_lib::Request::new(pathname, headers, params);
 
-           let local_response = #fn_name(req.clone(), client).await;
-
-            let res = match local_response {
-                tuono_lib::Response::Props(val) => {
-
-                    // TODO: remove unwrap
-                    let payload = tuono_lib::Payload::new(&req, val).client_payload().unwrap();
-
-                    tuono_lib::ssr::Js::SSR.with(|ssr| ssr.borrow_mut().render_to_string(Some(&payload)))
-                },
-                /// TODO: handle here redirection and rewrite
-                _ => Ok("500 Internal server error".to_string())
-            };
-
-            match res {
-                Ok(html) => Html(html),
-                _ => Html("500 internal server error".to_string())
-            }
+           #fn_name(req.clone(), client).await.render_to_string(req)
         }
 
         pub async fn api(
-            Path(params): Path<HashMap<String, String>>, 
-            State(client): State<Client>, 
+            Path(params): Path<HashMap<String, String>>,
+            State(client): State<Client>,
             request: axum::extract::Request
-        ) -> axum::response::Response {
-            let pathname = &request.uri();
+        ) -> impl IntoResponse{
+           let pathname = &request.uri();
            let headers = &request.headers();
 
            let req = tuono_lib::Request::new(pathname, headers, params);
 
-           let local_response = #fn_name(req.clone(), client).await;
-
-            let res = match local_response{
-                tuono_lib::Response::Props(val) => return axum::Json(val).into_response(),
-                _ => return axum::Json("").into_response()
-            };
+           #fn_name(req.clone(), client).await.json()
         }
     }
     .into()

crates/tuono_lib_macros/src/lib.rs

@@ -7,5 +7,3 @@ mod handler;
 pub fn handler(args: TokenStream, item: TokenStream) -> TokenStream {
     handler::handler_core(args, item)
 }
-
-

docs/tutorial.md

@@ -4,9 +4,29 @@ This tutorial is meant for giving you a sneak peek of the framework and is inten
 
 The first part is about the project setup and the base knowledge needed to work with tuono. The actual tutorial starts at [Tutorial introduction](#tutorial-introduction).
 
-> If you prefer to see directly the final outcome check out the [tutorial source](https://github.com/Valerioageno/tuono/tree/main/examples/tutorial).
+> I'd love to hear your thoughts about the framework and the tutorial - feel free to reach me 
+at [valerioageno@yahoo.it](mailto:valerioageno@yahoo.it) or on Twitter (X) DMs 
+[@valerioageno](https://twitter.com/valerioageno)
 
-## Installation
+This tutorial is **not meant** for people that don't know React - in that case I suggest you to first read the [React doc](https://react.dev/);
+
+Typescript and Rust knowledge is not a requirement though!
+
+## Table of Content
+
+* [CLI Installation](#cli-installation)
+* [Project scaffold](#project-scaffold)
+* [Start the dev environment](#start-the-dev-environment)
+* [The “/” route](#the--route)
+* [Tutorial introduction](#tutorial-introduction)
+* [Fetch all the pokemons](#fetch-all-the-pokemons)
+* [Create a stand-alone component](#create-a-stand-alone-component)
+* [Create the /pokemons/[pokemon] route](#create-the-pokemonspokemon-route)
+* [Error handling](#error-handling)
+* [Building for production](#building-for-production)
+* [Conclusion](#conclusion)
+
+## CLI Installation
 
 The tuono CLI is hosted on [crates.io](https://crates.io/crates/tuono); to download and install it just run on a terminal:
 
@@ -20,9 +40,11 @@ To check that is correctly installed run:
 $ tuono --version
 ```
 
+Run `tuono -h` to see all the available commands.
+
 ## Project scaffold
 
-To setup a new project you just need to run the following command:
+To setup a new fresh project you just need to run the following command:
 
 ```bash
 $ tuono new tuono-tutorial
@@ -38,15 +60,15 @@ Open it with your favourite code editor.
 
 The project will have the following structure:
 
-```bash
-| public/ 
-- src/
-  | routes/
-  |	styles/
-| package.json
-| Cargo.toml
-| .gitignore
-| tsconfig.json
+```
+├── package.json
+├── public
+├── src
+│   ├── routes
+│   └── styles
+├── Cargo.toml
+├── README.md
+└── tsconfig.json
 ```
 
 **public/**: put here all the files you want to be public
@@ -75,8 +97,8 @@ All the `index.tsx` files represent the folder root page (i.e. `src/routes/posts
 The file `index.rs` represents the server side capabilities for the index route. On this file you can:
 
 - Passing server side props
+- Changing http status code
 - Redirect/Rewrite to a different route (Available soon)
-- Changing http status code (Available soon)
 
 ## Tutorial introduction
 
@@ -84,6 +106,9 @@ Now that we have some knowledge about the project structure let’s start the re
 
 The goal is to use the [PokeAPI](https://pokeapi.co/docs/v2) to list all the pokemons of the first generation (the best one btw) and then reserve a dynamic page for each one separately.
 
+> If you have already installed the tuono CLI and you prefer read the code instead of writing it yourself 
+you can download the tutorial source with `tuono new tuono-tutorial --template tutorial`
+
 ## Fetch all the pokemons
 
 To start let’s fetch all of them in the root page; since we want to render them on the server side we gonna need to implement the logic in the `index.rs` file.
@@ -93,7 +118,7 @@ Clear the `index.rs` file and paste:
 ```rust
 // src/routes/index.rs
 use serde::{Deserialize, Serialize};
-use tuono_lib::{Request, Response};
+use tuono_lib::{Props, Request, Response};
 
 const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151";
 
@@ -110,15 +135,13 @@ struct Pokemon {
 
 #[tuono_lib::handler]
 async fn get_all_pokemons(_req: Request<'_>, fetch: reqwest::Client) -> Response {
-
     return match fetch.get(ALL_POKEMON).send().await {
         Ok(res) => {
             let data = res.json::<Pokemons>().await.unwrap();
-            Response::Props(Box::new(data))
+            Response::Props(Props::new(data))
         }
-        Err(_err) => Response::Props(Box::new(Pokemons { results: vec![] })),
+        Err(_err) => Response::Props(Props::new("{}")),
     };
-    
 }
 ```
 
@@ -302,8 +325,9 @@ These two will handle every requests that points to `http://localhost:3000/pokem
 Let’s first work on the server side file. Paste into the new `[pokemon].rs` file the following code:
 
 ```rust
+// src/routes/pokemons/[pokemon].rs
 use serde::{Deserialize, Serialize};
-use tuono_lib::{Request, Response};
+use tuono_lib::{Props, Request, Response};
 
 const POKEMON_API: &str = "https://pokeapi.co/api/v2/pokemon";
 
@@ -317,22 +341,16 @@ struct Pokemon {
 
 #[tuono_lib::handler]
 async fn get_pokemon(req: Request<'_>, fetch: reqwest::Client) -> Response {
-	// The param `pokemon` is defined in the route filename [pokemon].rs
+    // The param `pokemon` is defined in the route filename [pokemon].rs
     let pokemon = req.params.get("pokemon").unwrap();
-    
+
     return match fetch.get(format!("{POKEMON_API}/{pokemon}")).send().await {
         Ok(res) => {
             let data = res.json::<Pokemon>().await.unwrap();
-            Response::Props(Box::new(data))
+            Response::Props(Props::new(data))
         }
-        Err(_err) => Response::Props(Box::new(Pokemon {
-            name: "Nope".to_string(),
-            id: 0,
-            weight: 0,
-            height: 0,
-        })),
+        Err(_err) => Response::Props(Props::new("{}"))
     };
-    
 }
 ```
 
@@ -438,9 +456,119 @@ export default function PokemonView({
 }
 ```
 
+## Error handling
+
+With the current setup all the routes always return a `200 Success` http status no matter the response type.
+
+In order to return a more meaningful status code to the browser the `Props` struct can be initialized with also the
+`Props::new_with_status()` method.
+
+Let's see how it works!
+
+```diff
+// src/routes/pokemons/[pokemon].rs
+++ use reqwest::StatusCode;
+use serde::{Deserialize, Serialize};
+use tuono_lib::{Props, Request, Response};
+
+const POKEMON_API: &str = "https://pokeapi.co/api/v2/pokemon";
+
+#[derive(Debug, Serialize, Deserialize)]
+struct Pokemon {
+    name: String,
+    id: u16,
+    weight: u16,
+    height: u16,
+}
+
+#[tuono_lib::handler]
+async fn get_pokemon(req: Request<'_>, fetch: reqwest::Client) -> Response {
+    // The param `pokemon` is defined in the route filename [pokemon].rs
+    let pokemon = req.params.get("pokemon").unwrap();
+
+    return match fetch.get(format!("{POKEMON_API}/{pokemon}")).send().await {
+        Ok(res) => {
+++            if res.status() == StatusCode::NOT_FOUND {
+++                return Response::Props(Props::new_with_status("{}", StatusCode::NOT_FOUND));
+++             }
+
+            let data = res.json::<Pokemon>().await.unwrap();
+            Response::Props(Props::new(data))
+        }
+--        Err(_err) => Response::Props(Props::new(
+++        Err(_err) => Response::Props(Props::new_with_status(
+++            "{}",
+++            StatusCode::INTERNAL_SERVER_ERROR,
+        )),
+    };
+}
+```
+
+```diff
+// src/routes/index.rs
+++ use reqwest::StatusCode;
+use serde::{Deserialize, Serialize};
+use tuono_lib::{Props, Request, Response};
+
+const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151";
+
+#[derive(Debug, Serialize, Deserialize)]
+struct Pokemons {
+    results: Vec<Pokemon>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+struct Pokemon {
+    name: String,
+    url: String,
+}
+
+#[tuono_lib::handler]
+async fn get_all_pokemons(_req: Request<'_>, fetch: reqwest::Client) -> Response {
+    return match fetch.get(ALL_POKEMON).send().await {
+        Ok(res) => {
+            let data = res.json::<Pokemons>().await.unwrap();
+            Response::Props(Props::new(data))
+        }
+--        Err(_err) => Response::Props(Props::new(
+++        Err(_err) => Response::Props(Props::new_with_status(
+++            "{}", // Return empty JSON
+++            StatusCode::INTERNAL_SERVER_ERROR,
+        )),
+    };
+}
+```
+
+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.
+
+## Building for production
+
+The source now is ready to be released. Both server and client have been managed in a unoptimized way
+to easy the development experience. To build the project to the production state just run:
+
+```shell
+$ tuono build
+```
+
+This command just created the final assets within the `out` directory. To run then the prodiction server
+run:
+
+```shell
+$ cargo run --release
+```
+
+Check again [`http://localhost:3000/`](http://localhost:3000/) - This environment now has all the
+optimizations ready to unleash the power of a rust server that seamessly renders a React application!🚀
+
+> Note: The `out` directory is not standalone. You can't rely just on it to run the production server.
+
 ## Conclusion
 
 That’s it! You just created a multi thread full stack application with rust and react. 
 
-The project is still under heavy development and the script for the production build (`tuono build`) is not ready yet but 
+The project is still under heavy development and many features are not ready yet but 
 I hope you got the taste of what is like working with rust and react in the same stack.
+
+As I mentioned in the introduction I'd love to hear what you thought about the framework and the tutorial - feel free to reach me 
+at [valerioageno@yahoo.it](mailto:valerioageno@yahoo.it) or in Twitter (X) DMs [@valerioageno](https://twitter.com/valerioageno).

examples/README.md

@@ -7,3 +7,13 @@ To simply scaffold the base project run in your terminal:
 ```shell
 $ tuono new [NAME]
 ```
+
+You can install any example included in this folder by just using the `--template` flag:
+
+```shell
+$ tuono new [NAME] --template [TEMPLATE] 
+```
+
+`[TEMPLATE]` is the folder name.
+
+

examples/tuono/src/routes/index.rs

@@ -1,5 +1,5 @@
 use serde::Serialize;
-use tuono_lib::{Request, Response};
+use tuono_lib::{Props, Request, Response};
 
 #[derive(Serialize)]
 struct MyResponse<'a> {
@@ -8,7 +8,7 @@ struct MyResponse<'a> {
 
 #[tuono_lib::handler]
 async fn get_server_side_props(_req: Request<'_>, _fetch: reqwest::Client) -> Response {
-    Response::Props(Box::new(MyResponse {
+    Response::Props(Props::new(MyResponse {
         subtitle: "The react / rust fullstack framework",
     }))
 }

examples/tutorial/README.md

@@ -1,3 +1,9 @@
 # Tuono tutorial
 
 This project is the outcome of the [tuono tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md)
+
+If you want to directly install it you can run:
+
+```bash
+$ tuono new my-project -t tutorial
+```

examples/tutorial/src/routes/index.rs

@@ -1,6 +1,7 @@
 // src/routes/index.rs
+use reqwest::StatusCode;
 use serde::{Deserialize, Serialize};
-use tuono_lib::{Request, Response};
+use tuono_lib::{Props, Request, Response};
 
 const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151";
 
@@ -20,8 +21,11 @@ async fn get_all_pokemons(_req: Request<'_>, fetch: reqwest::Client) -> Response
     return match fetch.get(ALL_POKEMON).send().await {
         Ok(res) => {
             let data = res.json::<Pokemons>().await.unwrap();
-            Response::Props(Box::new(data))
+            Response::Props(Props::new(data))
         }
-        Err(_err) => Response::Props(Box::new(Pokemons { results: vec![] })),
+        Err(_err) => Response::Props(Props::new_with_status(
+            "{}", // Return empty JSON
+            StatusCode::INTERNAL_SERVER_ERROR,
+        )),
     };
 }

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

@@ -1,5 +1,7 @@
+// src/routes/pokemons/[pokemon].rs
+use reqwest::StatusCode;
 use serde::{Deserialize, Serialize};
-use tuono_lib::{Request, Response};
+use tuono_lib::{Props, Request, Response};
 
 const POKEMON_API: &str = "https://pokeapi.co/api/v2/pokemon";
 
@@ -18,14 +20,15 @@ async fn get_pokemon(req: Request<'_>, fetch: reqwest::Client) -> Response {
 
     return match fetch.get(format!("{POKEMON_API}/{pokemon}")).send().await {
         Ok(res) => {
+            if res.status() == StatusCode::NOT_FOUND {
+                return Response::Props(Props::new_with_status("{}", StatusCode::NOT_FOUND));
+            }
             let data = res.json::<Pokemon>().await.unwrap();
-            Response::Props(Box::new(data))
+            Response::Props(Props::new(data))
         }
-        Err(_err) => Response::Props(Box::new(Pokemon {
-            name: "Nope".to_string(),
-            id: 0,
-            weight: 0,
-            height: 0,
-        })),
+        Err(_err) => Response::Props(Props::new_with_status(
+            "{}",
+            StatusCode::INTERNAL_SERVER_ERROR,
+        )),
     };
 }

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

@@ -1,6 +1,15 @@
-import { TuonoProps } from 'tuono'
+import type { TuonoProps } from 'tuono'
 import PokemonView from '../../components/PokemonView'
 
-export default function Pokemon({ data }: TuonoProps): JSX.Element {
+interface Pokemon {
+  name: string
+  id: string
+  weight: number
+  height: number
+}
+
+export default function PokemonPage({
+  data,
+}: TuonoProps<Pokemon>): JSX.Element {
   return <PokemonView pokemon={data} />
 }

package.json

@@ -1,19 +1,21 @@
 {
-  "name": "tuono",
-  "version": "0.1.2",
-  "description": "",
-  "main": "src/index.js",
+  "name": "workspace",
   "packageManager": "pnpm@9.1.1",
   "scripts": {
-    "dev": "turbo dev",
+    "dev": "turbo dev --filter tuono",
     "build": "turbo build",
     "lint": "turbo lint",
     "format": "turbo format",
-    "test": "turbo test"
+    "format:check": "turbo format:check",
+    "types": "turbo types",
+    "test": "turbo test",
+	"test:watch": "turbo test:watch"
   },
-  "keywords": [],
-  "type": "module",
-  "author": "",
+  "workspaces": [
+    "tuono",
+	"tuono-lazy-fn-vite-plugin"
+  ],
+  "author": "Valerio Ageno",
   "license": "MIT",
   "devDependencies": {
     "@tanstack/config": "^0.7.0",
@@ -34,6 +36,6 @@
     "vitest": "^1.5.2"
   },
   "dependencies": {
-    "turbo": "^2.0.3"
+    "turbo": "^2.0.4"
   }
 }

packages/lazy-fn-vite-plugin/.prettierignore

@@ -1,2 +1,2 @@
-dist/
+dist
 pnpm-lock.yaml

packages/lazy-fn-vite-plugin/README.md

@@ -0,0 +1,8 @@
+# tuono-lazy-fn-vite-plugin
+
+This is a vite plugin for [tuono](https://github.com/Valerioageno/tuono).
+
+This package specifically handles the transpiling of the `dynamic` function
+allowing custom componenents to be lazy loaded but also server side rendered.
+
+Check [tuono](https://github.com/Valerioageno/tuono) for more.

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

@@ -0,0 +1,51 @@
+{
+  "name": "tuono-lazy-fn-vite-plugin",
+  "version": "0.2.2",
+  "description": "Plugin for the tuono's lazy fn. Tuono is the react/rust fullstack framework",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "lint": "eslint --ext .ts,.tsx ./src -c ../../.eslintrc",
+    "format": "prettier -u --write --ignore-unknown '**/*'",
+    "format:check": "prettier --check --ignore-unknown '**/*'",
+    "types": "tsc --noEmit",
+    "test:watch": "vitest",
+    "test": "vitest run"
+  },
+  "keywords": [],
+  "author": "Valerio Ageno",
+  "license": "MIT",
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/types": "^7.24.0",
+    "vite": "^5.2.11"
+  },
+  "devDependencies": {
+    "@tanstack/config": "^0.7.11",
+    "@types/babel__core": "^7.20.5",
+    "prettier": "^3.2.4",
+    "vitest": "^1.5.2"
+  }
+}

packages/lazy-fn-vite-plugin/src/constants.ts

@@ -0,0 +1,3 @@
+export const TUONO_DYNAMIC_FN_ID = 'dynamic'
+export const REACT_LAZY_FN_ID = 'lazy'
+export const TUONO_MAIN_PACKAGE = 'tuono'

packages/lazy-fn-vite-plugin/src/index.ts

@@ -0,0 +1,139 @@
+import type { Plugin } from 'vite'
+import * as babel from '@babel/core'
+import type { PluginItem } from '@babel/core'
+
+import {
+  TUONO_MAIN_PACKAGE,
+  TUONO_DYNAMIC_FN_ID,
+  REACT_LAZY_FN_ID,
+} from './constants'
+
+import * as t from '@babel/types'
+
+import type {
+  Identifier,
+  ImportDeclaration,
+  CallExpression,
+  ArrowFunctionExpression,
+  StringLiteral,
+} from '@babel/types'
+
+/**
+ * This plugin just removes the `dynamic` imported function from any tuono import
+ */
+const RemoveTuonoLazyImport: PluginItem = {
+  name: 'remove-tuono-lazy-import-plugin',
+  visitor: {
+    ImportSpecifier: (path) => {
+      if ((path.node.imported as Identifier).name === TUONO_DYNAMIC_FN_ID) {
+        if (
+          (path.parentPath.node as ImportDeclaration).source.value ===
+          TUONO_MAIN_PACKAGE
+        ) {
+          path.remove()
+        }
+      }
+    },
+  },
+}
+
+/**
+ * This plugin adds: "Import { lazy } from 'react'"
+ * and translate dynamic call into a React.lazy call
+ */
+const ImportReactLazy: PluginItem = {
+  name: 'import-react-lazy-plugin',
+  visitor: {
+    // Add the import statement
+    Program: (path: any) => {
+      let isReactImported = false
+
+      path.node.body.forEach((val: any) => {
+        if (val.type === 'ImportDeclaration' && val.source.value === 'react') {
+          isReactImported = true
+          // TODO: Handle also here case of already imported react
+          // Right now works just for the main routes file
+        }
+      })
+
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!isReactImported) {
+        const importDeclaration = t.importDeclaration(
+          [
+            t.importSpecifier(
+              t.identifier(REACT_LAZY_FN_ID),
+              t.identifier(REACT_LAZY_FN_ID),
+            ),
+          ],
+          t.stringLiteral('react'),
+        )
+        path.unshiftContainer('body', importDeclaration)
+      }
+    },
+    // Update lazy function name from `dynamic` to `lazy`
+    CallExpression: (path: any) => {
+      if (path.node.callee?.name === TUONO_DYNAMIC_FN_ID) {
+        path.node.callee.name = REACT_LAZY_FN_ID
+      }
+    },
+  },
+}
+
+/**
+ * For the server side we need to statically import the lazy loaded components
+ */
+const TurnLazyIntoStaticImport: PluginItem = {
+  name: 'turn-lazy-into-static-import-plugin',
+  visitor: {
+    VariableDeclaration: (path) => {
+      path.node.declarations.forEach((el) => {
+        const init = el.init as CallExpression
+        if ((init.callee as Identifier).name === TUONO_DYNAMIC_FN_ID) {
+          const importName = (el.id as Identifier).name
+          const importPath = (
+            (
+              (init.arguments[0] as ArrowFunctionExpression)
+                .body as CallExpression
+            ).arguments[0] as StringLiteral
+          ).value
+
+          if (importName && importPath) {
+            const importDeclaration = t.importDeclaration(
+              [t.importDefaultSpecifier(t.identifier(importName))],
+              t.stringLiteral(importPath),
+            )
+
+            path.replaceWith(importDeclaration)
+          }
+        }
+      })
+    },
+  },
+}
+
+export function LazyLoadingPlugin(): Plugin {
+  return {
+    name: 'vite-plugin-tuono-lazy-loading',
+    enforce: 'pre',
+    transform(code, _id, opts): string | undefined | null {
+      if (
+        code.includes(TUONO_DYNAMIC_FN_ID) &&
+        code.includes(TUONO_MAIN_PACKAGE)
+      ) {
+        const res = babel.transformSync(code, {
+          plugins: [
+            ['@babel/plugin-syntax-jsx', {}],
+            ['@babel/plugin-syntax-typescript', { isTSX: true }],
+            [RemoveTuonoLazyImport],
+            [!opts?.ssr ? ImportReactLazy : []],
+            [opts?.ssr ? TurnLazyIntoStaticImport : []],
+          ],
+          sourceMaps: true,
+        })
+
+        return res?.code
+      }
+      return code
+    },
+  }
+}

packages/lazy-fn-vite-plugin/test/transpileSource.test.ts

@@ -0,0 +1,34 @@
+import { it, expect, describe } from 'vitest'
+import { LazyLoadingPlugin } from '../src'
+
+const SOURCE_CODE = `
+import { createRoute, dynamic } from 'tuono'
+
+const IndexImport = dynamic(() => import('./../src/routes/index'))
+const PokemonspokemonImport = dynamic(
+  () => import('./../src/routes/pokemons/[pokemon]'),
+)
+`
+
+const CLIENT_RESULT = `import { lazy } from "react";
+import { createRoute } from 'tuono';
+const IndexImport = lazy(() => import('./../src/routes/index'));
+const PokemonspokemonImport = lazy(() => import('./../src/routes/pokemons/[pokemon]'));`
+
+const SERVER_RESULT = `import { createRoute } from 'tuono';
+import IndexImport from "./../src/routes/index";
+import PokemonspokemonImport from "./../src/routes/pokemons/[pokemon]";`
+
+describe('Transpile tuono source', () => {
+  it('Into the client bundle', () => {
+    const bundle = LazyLoadingPlugin().transform?.(SOURCE_CODE, 'id')
+    expect(bundle).toBe(CLIENT_RESULT)
+  })
+
+  it('Into the server bundle', () => {
+    const bundle = LazyLoadingPlugin().transform?.(SOURCE_CODE, 'id', {
+      ssr: true,
+    })
+    expect(bundle).toBe(SERVER_RESULT)
+  })
+})

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

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "vite.config.ts"]
+}

packages/lazy-fn-vite-plugin/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackBuildConfig } from '@tanstack/config/build'
+
+const config = defineConfig({})
+
+export default mergeConfig(
+  config,
+  tanstackBuildConfig({
+    entry: './src/index.ts',
+    srcDir: './src',
+  }),
+)

packages/tuono/.prettierignore

@@ -0,0 +1,2 @@
+dist
+pnpm-lock.yaml

packages/tuono/package.json

@@ -1,14 +1,16 @@
 {
   "name": "tuono",
-  "version": "0.1.2",
+  "version": "0.2.2",
   "description": "The react/rust fullstack framework",
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
     "lint": "eslint --ext .ts,.tsx ./src -c ../../.eslintrc",
-    "format": "prettier -u --write '**/*'",
+    "format": "prettier -u --write --ignore-unknown '**/*'",
+    "format:check": "prettier --check --ignore-unknown '**/*'",
     "types": "tsc --noEmit",
-    "test": "vitest"
+    "test:watch": "vitest",
+    "test": "vitest run"
   },
   "type": "module",
   "types": "dist/esm/index.d.ts",
@@ -87,6 +89,7 @@
     "@vitejs/plugin-react-swc": "^3.7.0",
     "fast-text-encoding": "^1.0.6",
     "prettier": "^3.2.4",
+    "tuono-lazy-fn-vite-plugin": "workspace:*",
     "vite": "^5.2.11",
     "zustand": "4.4.7"
   },
@@ -94,11 +97,20 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/babel-traverse": "^6.25.10",
+    "@types/babel__traverse": "^7.20.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "jsdom": "^24.0.0",
     "vitest": "^1.5.2"
   },
   "sideEffects": false,
-  "keywords": [],
+  "keywords": [
+    "react",
+    "typescript",
+    "fullstack",
+    "framework",
+    "rust"
+  ],
   "author": "Valerio Ageno",
   "license": "MIT"
 }

packages/tuono/src/build/index.ts

@@ -1,6 +1,7 @@
 import { build, createServer, InlineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import { ViteFsRouter } from './tuono-vite-plugin'
+import { LazyLoadingPlugin } from 'tuono-lazy-fn-vite-plugin'
 
 const BASE_CONFIG: InlineConfig = {
   root: '.tuono',
@@ -8,7 +9,7 @@ const BASE_CONFIG: InlineConfig = {
   publicDir: '../public',
   cacheDir: 'cache',
   envDir: '../',
-  plugins: [react(), ViteFsRouter()],
+  plugins: [react(), ViteFsRouter(), LazyLoadingPlugin()],
 }
 
 export function developmentSSRBundle() {
@@ -62,13 +63,13 @@ export function buildProd() {
   ;(async () => {
     await build({
       ...BASE_CONFIG,
-      manifest: true,
       build: {
+        manifest: true,
+        emptyOutDir: true,
         outDir: '../out/client',
-      },
-      emptyOutDir: true,
-      rollupOptions: {
-        input: './.tuono/client-main.tsx',
+        rollupOptions: {
+          input: './.tuono/client-main.tsx',
+        },
       },
     })
 
@@ -76,7 +77,7 @@ export function buildProd() {
       ...BASE_CONFIG,
       build: {
         ssr: true,
-        minify: false,
+        minify: true,
         outDir: '../out/server',
         emptyOutDir: true,
         rollupOptions: {

packages/tuono/src/build/routes-generator/generator.ts

@@ -13,7 +13,6 @@ import {
   removeGroups,
   removeUnderscores,
   removeLayoutSegments,
-  removeTrailingUnderscores,
 } from './utils'
 
 import type { Config, RouteNode, RouteSubNode } from './types'
@@ -151,7 +150,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
   const taskId = latestTask + 1
   latestTask = taskId
 
-  const start = Date.now()
   const { routeNodes: beforeRouteNodes, rustHandlersNodes } =
     await getRouteNodes(config)
 
@@ -232,7 +230,9 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
   const imports = [
     ...sortedRouteNodes.map((node) => {
-      return `import ${node.variableName}Import from './${replaceBackslash(
+      return `const ${
+        node.variableName
+      }Import = dynamic(() => import('./${replaceBackslash(
         removeExt(
           path.relative(
             path.dirname(config.generatedRouteTree),
@@ -240,7 +240,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
           ),
           false,
         ),
-      )}'`
+      )}'))`
     }),
   ].join('\n')
 
@@ -253,9 +253,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
   const createRouteUpdates = [
     sortedRouteNodes
       .map((node) => {
-        const loaderNode = routePiecesByPath[node.routePath]?.loader
-        const lazyComponentNode = routePiecesByPath[node.routePath]?.lazy
-
         return [
           `const ${node.variableName}Route = ${node.variableName}.update({
           ${[
@@ -267,30 +264,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
           ]
             .filter(Boolean)
             .join(',')}
-        } as any)`,
-          // Verify if needed
-          loaderNode
-            ? `.updateLoader({ loader: lazyFn(() => import('./${replaceBackslash(
-                removeExt(
-                  path.relative(
-                    path.dirname(config.generatedRouteTree),
-                    path.resolve(config.folderName, loaderNode.filePath),
-                  ),
-                  false,
-                ),
-              )}'), 'loader') })`
-            : '',
-          lazyComponentNode
-            ? `.lazy(() => import('./${replaceBackslash(
-                removeExt(
-                  path.relative(
-                    path.dirname(config.generatedRouteTree),
-                    path.resolve(config.folderName, lazyComponentNode.filePath),
-                  ),
-                  false,
-                ),
-              )}').then((d) => d.Route))`
-            : '',
+        })`,
         ].join('')
       })
       .join('\n\n'),
@@ -298,7 +272,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
   const routeImports = [
     '// This file is auto-generated by Tuono',
-    "import { createRoute } from 'tuono'",
+    "import { createRoute, dynamic } from 'tuono'",
     [
       `import RootImport from './${replaceBackslash(
         path.relative(

packages/tuono/src/build/tuono-vite-plugin/eliminateUnreferencedIdentifiers.ts

@@ -158,7 +158,7 @@ export const eliminateUnreferencedIdentifiers = (
     programPath.scope.crawl()
 
     programPath.traverse({
-      VariableDeclarator(path) {
+      VariableDeclarator(path: any) {
         if (path.node.id.type === 'Identifier') {
           const local = path.get('id') as NodePath<BabelTypes.Identifier>
           if (shouldBeRemoved(local)) {

packages/tuono/src/hydration/index.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { hydrateRoot } from 'react-dom/client'
 import { RouterProvider, createRouter } from '../router'
 
-export function hydrate(routeTree: any) {
+type RouteTree = any
+
+export function hydrate(routeTree: RouteTree): void {
   // Create a new router instance
   const router = createRouter({ routeTree })
 
-  // Render the app
+  // eslint-disable-next-line
   const rootElement = document.getElementById('__tuono')!
 
-  ReactDOM.hydrateRoot(
+  hydrateRoot(
     rootElement,
     <React.StrictMode>
       <RouterProvider router={router} />

packages/tuono/src/index.ts

@@ -4,8 +4,16 @@ import {
   createRouter,
   Link,
   RouterProvider,
+  dynamic,
 } from './router'
 
 export type { TuonoProps } from './types'
 
-export { createRoute, createRootRoute, createRouter, Link, RouterProvider }
+export {
+  createRoute,
+  createRootRoute,
+  createRouter,
+  Link,
+  RouterProvider,
+  dynamic,
+}

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

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { useRouterStore } from '../hooks/useRouterStore'
 import type { AnchorHTMLAttributes, MouseEvent } from 'react'
 
@@ -7,7 +8,16 @@ export default function Link(
   const handleTransition = (e: MouseEvent<HTMLAnchorElement>): void => {
     e.preventDefault()
     props.onClick?.(e)
-    useRouterStore.setState({ location: { pathname: props.href || '' } })
+    useRouterStore.setState({
+      // TODO: Refine store update
+      location: {
+        href: props.href || '',
+        pathname: props.href || '',
+        search: undefined,
+        searchStr: '',
+        hash: '',
+      },
+    })
     history.pushState(props.href, '', props.href)
   }
   return (

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

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { useRouter } from '../hooks/useRouter'
 import { useRouterStore } from '../hooks/useRouterStore'
 import type { Route } from '../route'
@@ -11,6 +12,14 @@ interface MatchesProps {
 
 const DYNAMIC_PATH_REGEX = /\[(.*?)\]/
 
+/*
+ * This function is also implemented on server side to match the bundle
+ * file to load at the first rendering.
+ *
+ * File: crates/tuono_lib/src/payload.rs
+ *
+ * Optimizations should occour on both
+ */
 export function getRouteByPathname(pathname: string): Route | undefined {
   const { routesById } = useRouter()
 

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

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { useRouter } from '../hooks/useRouter'
 import { RouteMatch } from './RouteMatch'
 import Link from './Link'
@@ -9,7 +10,7 @@ export default function NotFound(): JSX.Element {
 
   // Check if exists a custom 404 error page
   if (custom404Route) {
-    return <RouteMatch route={custom404Route} />
+    return <RouteMatch route={custom404Route} serverSideProps={{}} />
   }
 
   return (

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

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type { Route } from '../route'
 import { useServerSideProps } from '../hooks/useServerSideProps'
 
@@ -19,12 +20,19 @@ export const RouteMatch = ({
   const { data, isLoading } = useServerSideProps(route, serverSideProps)
 
   if (!route.isRoot) {
-    return route.options.getParentRoute().component({
-      children: route.options.component({ data, isLoading }),
-      data,
-      isLoading,
-    })
+    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>
+    )
   }
 
-  return route.options.component({ data, isLoading })
+  return (
+    <React.Suspense>
+      <route.options.component data={data} isLoading={isLoading} />
+    </React.Suspense>
+  )
 }

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import type { Router } from '../router'
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const routerContext = React.createContext<Router>(null!)
 
 const TUONO_CONTEXT = '__TUONO_CONTEXT__'

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

@@ -10,6 +10,16 @@ interface RouterContextProviderProps {
   children: ReactNode
 }
 
+interface RouterProviderProps {
+  router: Router
+  serverProps?: ServerProps
+}
+
+interface ServerProps {
+  router: Location
+  props: any
+}
+
 function RouterContextProvider({
   router,
   children,
@@ -21,7 +31,6 @@ function RouterContextProvider({
     ...rest,
     context: {
       ...router.options.context,
-      ...rest.context,
     },
   })
 
@@ -38,16 +47,6 @@ function RouterContextProvider({
   )
 }
 
-interface RouterProviderProps {
-  router: Router
-  serverProps?: ServerProps
-}
-
-interface ServerProps {
-  router: Location
-  props: any
-}
-
 const initRouterStore = (props?: ServerProps): void => {
   const updateLocation = useRouterStore((st) => st.updateLocation)
 

packages/tuono/src/router/dynamic.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+/**
+ * Helper function to lazy load any component.
+ *
+ * The function acts exactly like React.lazy function but also renders the component on the server.
+ * If you want to just load the component client side use directly the react's lazy function.
+ *
+ * It can be wrapped within a React.Suspense component in order to handle its loading state.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const dynamic = (importFn: () => JSX.Element): JSX.Element => {
+  /**
+   *
+   * This function is just a placeholder. The real work is done by the bundler.
+   * The custom babel plugin will create two different bundles for the client and the server.
+   *
+   * The client will import the React's lazy function while the server will statically
+   * import the file.
+   *
+   * Example:
+   *
+   * // User code
+   * import { dynamic } from 'tuono'
+   * const MyComponent = dynamic(() => import('./my-component'))
+   *
+   * // Client side generated code
+   * import { lazy } from 'react'
+   * const MyComponent = lazy(() => import('./my-component'))
+   *
+   * // Server side generated code
+   * import MyComponent from './my-component'
+   *
+   * Check the `lazy-fn-vite-plugin` package for more
+   */
+  return <></>
+}

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

@@ -9,16 +9,22 @@ interface UseServerSidePropsReturn {
   isLoading: boolean
 }
 
+declare global {
+  interface Window {
+    __TUONO_SSR_PROPS__: any
+  }
+}
+
 /*
  * Use the props provided by the SSR and dehydrate the
  * props for client side usage.
  *
  * In case is a client fetch the remote data API
  */
-export function useServerSideProps(
+export function useServerSideProps<T>(
   route: Route,
   // User defined props
-  serverSideProps: any,
+  serverSideProps: T,
 ): UseServerSidePropsReturn {
   const isFirstRendering = useRef<boolean>(true)
   const location = useRouterStore((st) => st.location)

packages/tuono/src/router/index.tsx

@@ -1,10 +1,5 @@
-declare global {
-  interface Window {
-    __TUONO_SSR__PROPS__: any
-  }
-}
-
 export { RouterProvider } from './components/RouterProvider'
 export { default as Link } from './components/Link'
 export { createRouter } from './router'
-export { createRoute, createRootRoute, getRouteApi } from './route'
+export { createRoute, createRootRoute } from './route'
+export { dynamic } from './dynamic'

packages/tuono/src/router/route.ts

@@ -16,15 +16,15 @@ export const rootRouteId = '__root__'
 
 export class Route {
   parentRoute!: any
-  id: number
+  id?: string
   fullPath!: string
-  path: string
+  path?: string
   options: any
 
   children?: Route[]
   router: RouterType
   isRoot: boolean
-  originalIndex: number
+  originalIndex?: number
   component: () => JSX.Element
 
   constructor(options: RouteOptions) {
@@ -40,7 +40,6 @@ export class Route {
 
     const isRoot = !this.options?.path && !this.options?.id
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     this.parentRoute = this.options?.getParentRoute?.()
 
     if (isRoot) {
@@ -75,11 +74,9 @@ export class Route {
     const fullPath =
       id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path])
 
-    this.path = path as TPath
-    this.id = id as TId
-    // this.customId = customId as TCustomId
-    this.fullPath = fullPath as TFullPath
-    this.to = fullPath as TrimPathRight<TFullPath>
+    this.path = path
+    this.id = id
+    this.fullPath = fullPath
   }
 
   addChildren(routes: Route[]): Route {
@@ -92,28 +89,8 @@ export class Route {
     this.isRoot = options.isRoot || !options.getParentRoute
     return this
   }
-
-  useRouteContext = () => {}
-
-  useParams = () => {}
 }
 
-export function createRootRoute(options?: RouteOptions): Route {
+export function createRootRoute(options: RouteOptions): Route {
   return new Route({ ...options, isRoot: true })
 }
-
-export function getRouteApi(id: string): RouteApi {
-  return new RouteApi(id)
-}
-
-class RouteApi {
-  id: string
-
-  constructor(id: string) {
-    this.id = id
-  }
-
-  useParams = () => {}
-
-  useRouteContext = () => {}
-}

packages/tuono/src/router/router.ts

@@ -6,7 +6,7 @@ type RouteTree = any
 interface CreateRouter {
   routeTree: RouteTree
   basePath?: string
-  options: RouteOptions
+  options?: RouteOptions
 }
 
 interface RouteOptions {
@@ -14,9 +14,10 @@ interface RouteOptions {
   hasHandler?: boolean
   routeTree?: RouteTree
 }
+
 export type RouterType = any
 
-export function createRouter(options: CreateRouterArgs): Router {
+export function createRouter(options: CreateRouter): Router {
   return new Router(options)
 }
 
@@ -49,32 +50,18 @@ export class Router {
 
     this.#updateBasePath(newOptions.basePath)
 
-    // NOTE: next iteration
-    this.#historyUpdate()
-
-    // NOTE: next iteration
-    this.#storeUpdate()
-
     if (this.options.routeTree !== this.routeTree) {
       this.routeTree = this.options.routeTree
       this.#buildRouteTree()
     }
   }
 
-  #historyUpdate = (): void => {
-    // TODO: update history
-  }
-
-  #storeUpdate = (): void => {
-    // TODO: update store
-  }
-
   #buildRouteTree = (): void => {
     const recurseRoutes = (childRoutes: Route[]): void => {
       childRoutes.forEach((route: Route, i: number) => {
         route.init(i)
 
-        this.routesById[route.id] = route
+        this.routesById[route.id || ''] = route
 
         if (!route.isRoot && route.options.path) {
           const trimmedFullPath = trimPathRight(route.fullPath)

packages/tuono/src/ssr/index.tsx

@@ -4,32 +4,53 @@ import { renderToString, renderToStaticMarkup } from 'react-dom/server'
 import { RouterProvider } from '../router'
 import { createRouter } from '../router'
 
-export function serverSideRendering(routeTree: any) {
+type RouteTree = any
+type Mode = 'Dev' | 'Prod'
+
+const VITE_DEV_AND_HMR = `<script type="module">
+import RefreshRuntime from 'http://localhost:3001/@react-refresh'
+RefreshRuntime.injectIntoGlobalHook(window)
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true
+</script>
+<script type="module" src="http://localhost:3001/@vite/client"></script>
+<script type="module" src="http://localhost:3001/client-main.tsx"></script>`
+
+function generateCssLinks(cssBundles: string[], mode: Mode): string {
+  if (mode === 'Dev') return ''
+  return cssBundles.reduce((acc, value) => {
+    return acc + `<link rel="stylesheet" type="text/css" href="/${value}" />\n`
+  }, '')
+}
+
+function generateJsScripts(jsBundles: string[], mode: Mode): string {
+  if (mode === 'Dev') return ''
+  return jsBundles.reduce((acc, value) => {
+    return acc + `<script type="module" src="/${value}"></script>\n`
+  }, '')
+}
+
+export function serverSideRendering(routeTree: RouteTree) {
   return function render(payload: string | undefined): string {
     const props = payload ? JSON.parse(payload) : {}
 
+    const mode = props.mode as Mode
+    const jsBundles = props.jsBundles as string[]
+    const cssBundles = props.cssBundles as string[]
     const router = createRouter({ routeTree }) // Render the app
 
     const app = renderToString(
       <RouterProvider router={router} serverProps={props} />,
     )
 
-    const developmentScript = `<script type="module">
-				import RefreshRuntime from 'http://localhost:3001/@react-refresh'
-				RefreshRuntime.injectIntoGlobalHook(window)
-				window.$RefreshReg$ = () => {}
-				window.$RefreshSig$ = () => (type) => type
-				window.__vite_plugin_react_preamble_installed__ = true
-		</script>
-      <script type="module" src="http://localhost:3001/@vite/client"></script>
-      <script type="module" src="http://localhost:3001/client-main.tsx"></script>`
-
     return `<!doctype html>
   <html>
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Playground</title>
+	  ${generateCssLinks(cssBundles, mode)}
     </head>
     <body>
       <div id="__tuono">${app}</div>
@@ -40,7 +61,8 @@ export function serverSideRendering(routeTree: any) {
           }}
         />,
       )}
-      ${developmentScript}
+	  ${generateJsScripts(jsBundles, mode)}
+      ${mode === 'Dev' ? VITE_DEV_AND_HMR : ''}
     </body>
   </html>
   `

packages/tuono/tsconfig.json

@@ -3,5 +3,6 @@
   "compilerOptions": {
     "jsx": "react"
   },
-  "include": ["src", "tests", "vite.config.ts"]
+  "include": ["src", "tests", "vite.config.ts"],
+  "exclude": ["vite.config.ts"]
 }

turbo.json

@@ -3,7 +3,14 @@
   "tasks": {
     "lint": {},
     "format": {},
+	"format:check": {},
+	"types": {
+	  "dependsOn": [
+		"^build"
+	  ]	
+	},
     "test": {},
+    "test:watch": {},
     "build": {
       "outputs": [
         "dist/**"