Create use router hook (#13)

* refactor: useRouter to useInternalRouter

* feat: create useRouter hook

* feat: optimized payload sent to client

* feat: add support for query and pathname value in useRouter

* feat: update version to v0.4.6

.gitattributes

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,28 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -0,0 +1,25 @@
+## Description
+
+<!--
+Thank you for your Pull Request. Please provide a description above and review
+the requirements below.
+
+Bug fixes and new features should include tests.
+
+Contributors guide: https://github.com/Valerioageno/tuono/blob/main/CONTRIBUTING.md
+-->
+
+## Context
+
+<!--
+Explain the context and why you're making that change. What is the problem
+you're trying to solve? If a new feature is being added, describe the intended
+use case that feature fulfills.
+-->
+
+## Solution
+
+<!--
+Summarize the solution and provide any necessary context needed to understand
+the code change.
+-->

.github/workflows/release.yml

@@ -25,14 +25,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install 
 
-      - name: Install turbo
-        run: pnpm install turbo --global
-
       - name: Build
         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 }}
 
@@ -76,14 +73,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install 
 
-      - name: Install turbo
-        run: pnpm install turbo --global
-
       - name: Build
         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

Cargo.toml

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

README.md

@@ -3,54 +3,97 @@
 </p>
 <h1 align="center">Tuono<br>The react/rust fullstack framework</h1>
 <p align="center">
-⚠️ This project is under heavy development. API might drastically change ⚠️
+⚠️ This project is under heavy development ⚠️
 </p>
+<div align="center">
+    <img src="https://github.com/Valerioageno/tuono/actions/workflows/rust.yml/badge.svg" />
+    <img src="https://github.com/Valerioageno/tuono/actions/workflows/typescript.yml/badge.svg" />
+</div>
+
+<br>
+<br>
 
 
 Tuono (Italian word for "thunder", pronounced /2 Oh No/). 
 Why Tuono? Just a badass name.
 
-## Installation
+> Check out the [tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md) to get started.
 
-```
-cargo install tuono
-```
+## Introduction
 
-## Create a new project
+**NodeJs/Deno/Bun are the only runtimes that allow a React app to be fullstack right? (no)**
 
-```
-tuono new 
-```
+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.
 
-## Development
+**Rust is an hard language then writing server side code is hard as well right? (no again)**
 
-```
-tuono dev
-```
+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
-- Rust based server side rendering
-- FS routing
-- CSS modules
-- Hot Module Reload
-- Multi thread backend
+
+- 🟦  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
+
+- rust
+- cargo
+- node
+- npm/pnpm/yarn*
+
+> yarn [pnp](https://yarnpkg.com/features/pnp) is not supported yet
 
 ## Folder structure
 
 ```
-- .tuono
-- public/
-- src/
-| - routes/
-| | - api/
+├── package.json
+├── public
+├── src
+│   ├── routes
+│   └── styles
+├── Cargo.toml
+├── README.md
+└── tsconfig.json
 ```
 
-```tsx
-// Data is passed by the loading function
-const IndexPage = ({data, isLoading, isError}) => <h1>Index Page</h1>
+## Contributing
+Any help or suggestion will be appreciated and encouraged.
 
-export const Route = createFileRoute({
-    loader: (params) => fetchApi(params),
-    component: IndexPage
-})
-```
+## License
+
+This project is licensed under the MIT License.

crates/tuono/Cargo.toml

@@ -1,10 +1,11 @@
 [package]
 name = "tuono"
-version = "0.0.11"
+version = "0.4.6"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
-homepage = "https://github.com/Valerioageno/tuono"
+keywords = [ "react", "typescript", "fullstack", "web", "ssr"]
+repository = "https://github.com/Valerioageno/tuono"
 readme = "../../README.md"
 license-file = "../../LICENSE.md"
 categories = ["web-programming"]

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();
@@ -120,7 +127,7 @@ fn update_package_json_version(folder_path: &Path) -> io::Result<()> {
     let v = crate_version!();
     let package_json_path = folder_path.join(PathBuf::from("package.json"));
     let package_json = fs::read_to_string(&package_json_path)?;
-    let package_json = package_json.replace("workspace:*", v);
+    let package_json = package_json.replace("link:../../packages/tuono", v);
 
     let mut file = OpenOptions::new()
         .write(true)
@@ -158,7 +165,7 @@ fn outro(folder_name: String) {
     }
 
     println!("\nInstall the dependencies:");
-    println!("pnpm install");
+    println!("npm install");
 
     println!("\nRun the local environment:");
     println!("tuono dev");

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'
@@ -32,60 +47,25 @@ pub const AXUM_ENTRY_POINT: &str = r##"
 // File automatically generated
 // Do not manually change it
 
-use axum::extract::{Path, Request};
-use axum::response::Html;
-use axum::{routing::get, Router};
-use tower_http::services::ServeDir;
-use std::collections::HashMap;
-use tuono_lib::{ssr, Ssr};
-use reqwest::Client;
+use tuono_lib::{tokio, Mode, Server, axum::Router, axum::routing::get};
+
+const MODE: Mode = /*MODE*/;
 
 // MODULE_IMPORTS
 
 #[tokio::main]
 async fn main() {
-    Ssr::create_platform();
-
-    let fetch = Client::new();
-
-    let app = Router::new()
+    let router = Router::new()
         // ROUTE_BUILDER
-        .fallback_service(ServeDir::new("public").fallback(get(catch_all)))
-        .with_state(fetch);
+        ;
 
-    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
-    axum::serve(listener, app).await.unwrap();
-}
-
-async fn catch_all(Path(params): Path<HashMap<String, String>>, request: Request) -> Html<String> {
-    let pathname = &request.uri();
-    let headers = &request.headers();
-
-    let req = tuono_lib::Request::new(pathname, headers, params);
-
-
-    // TODO: remove unwrap
-    let payload = tuono_lib::Payload::new(&req, Box::new(""))
-        .client_payload()
-        .unwrap();
-
-    let result = ssr::Js::SSR.with(|ssr| ssr.borrow_mut().render_to_string(Some(&payload)));
-
-    match result {
-        Ok(html) => Html(html),
-        _ => Html("500 internal server error".to_string()),
-    }
+    Server::init(router, MODE).start().await
 }
 "##;
 
 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 /
@@ -127,7 +107,7 @@ impl Route {
         }
 
         Route {
-            module_import: module.as_str().to_string().replace('/', "_"),
+            module_import: module.as_str().to_string().replace('/', "_").to_lowercase(),
             axum_route,
         }
     }
@@ -135,17 +115,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,16 +193,22 @@ mod {module_name};
     route_declarations
 }
 
-pub fn bundle_axum_source() -> io::Result<()> {
-    println!("Axum project bundling");
-
+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),
@@ -232,17 +216,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)?;
     }
 
@@ -267,7 +247,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),
@@ -287,8 +267,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 = [
@@ -296,6 +276,7 @@ mod tests {
             "/home/user/Documents/tuono/src/routes/index.rs",
             "/home/user/Documents/tuono/src/routes/posts/index.rs",
             "/home/user/Documents/tuono/src/routes/posts/[post].rs",
+            "/home/user/Documents/tuono/src/routes/posts/UPPERCASE.rs",
         ];
 
         routes
@@ -307,6 +288,7 @@ mod tests {
             ("/about.rs", "about"),
             ("/posts/index.rs", "posts_index"),
             ("/posts/[post].rs", "posts_dyn_post"),
+            ("/posts/UPPERCASE.rs", "posts_uppercase"),
         ];
 
         results.into_iter().for_each(|(path, module_import)| {
@@ -322,8 +304,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 = [
@@ -357,4 +339,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

@@ -4,69 +4,87 @@ use watchexec_supervisor::command::{Command, Program};
 use miette::{IntoDiagnostic, Result};
 use watchexec::Watchexec;
 use watchexec_signals::Signal;
-use watchexec_supervisor::job::start_job;
+use watchexec_supervisor::job::{start_job, Job};
 
-use crate::source_builder::bundle_axum_source;
+use crate::source_builder::{bundle_axum_source, Mode};
 
-// What is the development pipeline?
-//
-// 1. Any file gets updates (rs/js/ts)
-// 2. Client side vite works separately
-// 3. Stop the dev server
-// 4. Build the ssr client bundle
-// 5. Restart the server
-//
-//
-// The current solution is not optimized
-// - We should avoid to bundle static lib (i.e. react) in the main bundle
-
-#[tokio::main]
-pub async fn watch() -> Result<()> {
-    let (watch_client, _) = start_job(Arc::new(Command {
+fn watch_react_src() -> Job {
+    start_job(Arc::new(Command {
         program: Program::Exec {
             prog: "node_modules/.bin/tuono-dev-watch".into(),
             args: vec![],
         },
         options: Default::default(),
-    }));
+    }))
+    .0
+}
 
-    watch_client.start().await;
-
-    let (run_server, _) = start_job(Arc::new(Command {
+fn build_rust_src() -> Job {
+    start_job(Arc::new(Command {
         program: Program::Exec {
             prog: "cargo".into(),
-            args: vec!["run".to_string()],
+            args: vec!["run".to_string(), "-q".to_string()],
         },
         options: Default::default(),
-    }));
+    }))
+    .0
+}
 
-    let (build_ssr_bundle, _) = start_job(Arc::new(Command {
+fn build_react_ssr_src() -> Job {
+    start_job(Arc::new(Command {
         program: Program::Exec {
             prog: "node_modules/.bin/tuono-dev-ssr".into(),
             args: vec![],
         },
         options: Default::default(),
-    }));
+    }))
+    .0
+}
+
+#[tokio::main]
+pub async fn watch() -> Result<()> {
+    println!("Starting development environment...");
+    watch_react_src().start().await;
+
+    let run_server = build_rust_src();
+
+    let build_ssr_bundle = build_react_ssr_src();
 
     build_ssr_bundle.start().await;
+
     run_server.start().await;
 
+    build_ssr_bundle.to_wait().await;
+
     let wx = Watchexec::new(move |mut action| {
+        let mut should_reload_ssr_bundle = false;
+        let mut should_reload_rust_server = false;
+
         for event in action.events.iter() {
             for path in event.paths() {
-                if path.0.to_string_lossy().ends_with(".rs")
-                    || path.0.to_string_lossy().ends_with("sx")
-                {
-                    run_server.stop();
-                    println!("Reloading server...");
-                    build_ssr_bundle.stop();
-                    build_ssr_bundle.start();
-                    bundle_axum_source();
-                    run_server.start();
+                if path.0.to_string_lossy().ends_with(".rs") {
+                    should_reload_rust_server = true
+                }
+
+                // Either tsx and jsx
+                if path.0.to_string_lossy().ends_with("sx") {
+                    should_reload_ssr_bundle = true
                 }
             }
         }
 
+        if should_reload_rust_server {
+            println!("Reloading...");
+            run_server.stop();
+            bundle_axum_source(Mode::Dev).expect("Failed to bunlde rust source");
+            run_server.start();
+        }
+
+        if should_reload_ssr_bundle {
+            build_ssr_bundle.stop();
+            build_ssr_bundle.start();
+        }
+
         // if Ctrl-C is received, quit
         if action.signals().any(|sig| sig == Signal::Interrupt) {
             action.quit();

crates/tuono_lib/Cargo.toml

@@ -1,10 +1,11 @@
 [package]
 name = "tuono_lib"
-version = "0.0.11"
+version = "0.4.6"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
-homepage = "https://github.com/Valerioageno/tuono"
+keywords = [ "react", "typescript", "fullstack", "web", "ssr"]
+repository = "https://github.com/Valerioageno/tuono"
 readme = "../../README.md"
 license-file = "../../LICENSE.md"
 categories = ["web-programming"]
@@ -18,10 +19,22 @@ name = "tuono_lib"
 path = "src/lib.rs"
 
 [dependencies]
-ssr_rs = "0.5.2"
-axum = "0.7.5"
+ssr_rs = "0.5.5"
+axum = {version = "0.7.5", features = ["json", "ws"]}
+tokio = { version = "1.37.0", features = ["full"] }
 serde = { version = "1.0.202", features = ["derive"] }
 erased-serde = "0.4.5"
 serde_json = "1.0"
+serde_urlencoded = "0.7.1"
+reqwest = {version = "0.12.4", features = ["json", "stream"]}
+once_cell = "1.19.0"
+regex = "1.10.5"
+either = "1.13.0"
+tower-http = {version = "0.5.2", features = ["fs"]}
+
+tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.4.6"}
+# Match the same version used by axum
+tokio-tungstenite = "0.21.0"
+futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] }
+tungstenite = "0.23.0"
 
-tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.0.11"}

crates/tuono_lib/src/catch_all.rs

@@ -0,0 +1,24 @@
+use crate::{ssr::Js, Payload};
+use axum::extract::{Path, Request};
+use axum::response::Html;
+use std::collections::HashMap;
+
+pub async fn catch_all(
+    Path(params): Path<HashMap<String, String>>,
+    request: Request,
+) -> Html<String> {
+    let pathname = request.uri();
+    let headers = request.headers();
+
+    let req = crate::Request::new(pathname.to_owned(), headers.to_owned(), params);
+
+    // TODO: remove unwrap
+    let payload = Payload::new(&req, &"").client_payload().unwrap();
+
+    let result = Js::render_to_string(Some(&payload));
+
+    match result {
+        Ok(html) => Html(html),
+        _ => Html("500 internal server error".to_string()),
+    }
+}

crates/tuono_lib/src/lib.rs

@@ -1,11 +1,22 @@
+mod catch_all;
+mod manifest;
+mod mode;
 mod payload;
 mod request;
 mod response;
+mod server;
+mod ssr;
+mod vite_reverse_proxy;
+mod vite_websocket_proxy;
 
-pub mod ssr;
-
+pub use mode::Mode;
 pub use payload::Payload;
 pub use request::Request;
-pub use response::Response;
-pub use ssr_rs::Ssr;
+pub use response::{Props, Response};
+pub use server::Server;
 pub use tuono_lib_macros::handler;
+
+// Re-exports
+pub use axum;
+pub use reqwest;
+pub use tokio;

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,296 @@
+use crate::manifest::MANIFEST;
+use crate::mode::{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: &'a Request, 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<'a>(uri: Option<&'a str>, mode: Mode) -> Payload<'a> {
+        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 uri = uri
+            .unwrap_or("http://localhost:3000/")
+            .parse::<Uri>()
+            .unwrap();
+
+        let location = Location::from(uri);
+
+        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,30 +3,44 @@ 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,
+    #[serde(rename(serialize = "searchStr"))]
+    search_str: String,
+    search: HashMap<String, String>,
+}
+
+impl Location {
+    pub fn pathname(&self) -> &String {
+        &self.pathname
+    }
+}
+
+impl From<Uri> for Location {
+    fn from(uri: Uri) -> Self {
+        let query = uri.query().unwrap_or("");
+        Location {
+            // TODO: build correct href
+            href: uri.to_string(),
+            pathname: uri.path().to_string(),
+            search_str: query.to_string(),
+            search: serde_urlencoded::from_str(query).unwrap_or(HashMap::new()),
+        }
+    }
+}
+
 #[derive(Debug, Clone)]
-pub struct Request<'a> {
-    uri: &'a Uri,
-    headers: &'a HeaderMap,
+pub struct Request {
+    uri: Uri,
+    pub headers: HeaderMap,
     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,
-        headers: &'a HeaderMap,
-        params: HashMap<String, String>,
-    ) -> Request<'a> {
+impl Request {
+    pub fn new(uri: Uri, headers: HeaderMap, params: HashMap<String, String>) -> Request {
         Request {
             uri,
             headers,
@@ -34,14 +48,7 @@ impl<'a> Request<'a> {
         }
     }
 
-    pub fn location(&self) -> Location<'a> {
-        Location {
-            href: self.uri.to_string(),
-            pathname: &self.uri.path(),
-            // TODO: hanler search map
-            search: HashMap::new(),
-            search_str: &self.uri.query().unwrap_or(""),
-            hash: "",
-        }
+    pub fn location(&self) -> Location {
+        Location::from(self.uri.to_owned())
     }
 }

crates/tuono_lib/src/response.rs

@@ -1,6 +1,98 @@
+use crate::Request;
+use crate::{ssr::Js, Payload};
+use axum::http::StatusCode;
+use axum::response::{Html, IntoResponse, Redirect, Response as AxumResponse};
+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),
+}
+
+#[derive(serde::Serialize)]
+struct JsonResponseInfo {
+    redirect_destination: Option<String>,
+}
+
+impl JsonResponseInfo {
+    fn new(redirect_destination: Option<String>) -> JsonResponseInfo {
+        JsonResponseInfo {
+            redirect_destination,
+        }
+    }
+}
+
+#[derive(serde::Serialize)]
+struct JsonResponse<'a> {
+    data: Option<&'a dyn Serialize>,
+    info: JsonResponseInfo,
+}
+
+impl<'a> JsonResponse<'a> {
+    fn new(props: &'a dyn Serialize) -> Self {
+        JsonResponse {
+            data: Some(props),
+            info: JsonResponseInfo::new(None),
+        }
+    }
+
+    fn new_redirect(destination: String) -> Self {
+        JsonResponse {
+            data: None,
+            info: JsonResponseInfo::new(Some(destination)),
+        }
+    }
+}
+
+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) -> AxumResponse {
+        match self {
+            Self::Props(Props { data, http_code }) => {
+                let payload = Payload::new(&req, data).client_payload().unwrap();
+
+                match Js::render_to_string(Some(&payload)) {
+                    Ok(html) => (*http_code, Html(html)).into_response(),
+                    Err(_) => {
+                        (*http_code, Html("500 Internal server error".to_string())).into_response()
+                    }
+                }
+            }
+            Self::Redirect(to) => Redirect::permanent(to).into_response(),
+        }
+    }
+
+    pub fn json(&self) -> impl IntoResponse {
+        match self {
+            Self::Props(Props { data, http_code }) => {
+                (*http_code, Json(JsonResponse::new(data))).into_response()
+            }
+            Self::Redirect(destination) => (
+                StatusCode::PERMANENT_REDIRECT,
+                Json(JsonResponse::new_redirect(destination.to_string())),
+            )
+                .into_response(),
+        }
+    }
 }

crates/tuono_lib/src/server.rs

@@ -0,0 +1,65 @@
+use crate::mode::{Mode, GLOBAL_MODE};
+
+use crate::manifest::load_manifest;
+use axum::routing::{get, Router};
+use ssr_rs::Ssr;
+use tower_http::services::ServeDir;
+
+use crate::{
+    catch_all::catch_all, vite_reverse_proxy::vite_reverse_proxy,
+    vite_websocket_proxy::vite_websocket_proxy,
+};
+
+const DEV_PUBLIC_DIR: &str = "public";
+const PROD_PUBLIC_DIR: &str = "out/client";
+
+pub struct Server {
+    router: Router<reqwest::Client>,
+    mode: Mode,
+}
+
+impl Server {
+    pub fn init(router: Router<reqwest::Client>, mode: Mode) -> Server {
+        Ssr::create_platform();
+
+        GLOBAL_MODE.set(mode).unwrap();
+
+        if mode == Mode::Prod {
+            load_manifest()
+        }
+
+        Server { router, mode }
+    }
+
+    pub async fn start(&self) {
+        let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
+
+        let fetch = reqwest::Client::new();
+
+        if self.mode == Mode::Dev {
+            println!("\nDevelopment app ready at http://localhost:3000/");
+            let router = self
+                .router
+                .to_owned()
+                .route("/vite-server/", get(vite_websocket_proxy))
+                .route("/vite-server/*path", get(vite_reverse_proxy))
+                .fallback_service(ServeDir::new(DEV_PUBLIC_DIR).fallback(get(catch_all)))
+                .with_state(fetch);
+
+            axum::serve(listener, router)
+                .await
+                .expect("Failed to serve development server");
+        } else {
+            println!("\nProduction app ready at http://localhost:3000/");
+            let router = self
+                .router
+                .to_owned()
+                .fallback_service(ServeDir::new(PROD_PUBLIC_DIR).fallback(get(catch_all)))
+                .with_state(fetch);
+
+            axum::serve(listener, router)
+                .await
+                .expect("Failed to serve production server");
+        }
+    }
+}

crates/tuono_lib/src/ssr.rs

@@ -1,17 +1,48 @@
+use crate::mode::{Mode, GLOBAL_MODE};
 use ssr_rs::Ssr;
 use std::cell::RefCell;
 use std::fs::read_to_string;
+use std::path::PathBuf;
 
+/// For the server side rendering we need to split the implementation between dev and prod.
+/// This completely remove the multi-thread optimization on dev but allow the dev server to
+/// update the SSR result without reloading the whole server.
 pub struct Js;
 
 impl Js {
+    pub fn render_to_string(payload: Option<&str>) -> Result<String, &'static str> {
+        let mode = GLOBAL_MODE.get().expect("Failed to get GLOBAL_MODE");
+
+        if *mode == Mode::Dev {
+            DevJs::render_to_string(payload)
+        } else {
+            ProdJs::SSR.with(|ssr| ssr.borrow_mut().render_to_string(payload))
+        }
+    }
+}
+
+struct ProdJs;
+
+impl ProdJs {
     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("./out/server/prod-server.js")).expect("Server bundle not found"), ""
                     ).unwrap()
                 )
     }
 }
+
+struct DevJs;
+
+impl DevJs {
+    pub fn render_to_string(params: Option<&str>) -> Result<String, &'static str> {
+        Ssr::from(
+            read_to_string(PathBuf::from("./.tuono/server/dev-server.js"))
+                .expect("Server bundle not found"),
+            "",
+        )
+        .unwrap()
+        .render_to_string(params)
+    }
+}

crates/tuono_lib/src/vite_reverse_proxy.rs

@@ -0,0 +1,33 @@
+use axum::body::Body;
+use axum::extract::{Path, State};
+
+use axum::http::{HeaderName, HeaderValue};
+use axum::response::{IntoResponse, Response};
+use reqwest::Client;
+
+const VITE_URL: &str = "http://localhost:3001/vite-server";
+
+pub async fn vite_reverse_proxy(
+    State(client): State<Client>,
+    Path(path): Path<String>,
+) -> impl IntoResponse {
+    match client.get(format!("{VITE_URL}/{path}")).send().await {
+        Ok(res) => {
+            let mut response_builder = Response::builder().status(res.status().as_u16());
+
+            {
+                let headers = response_builder.headers_mut().unwrap();
+                res.headers().into_iter().for_each(|(name, value)| {
+                    let name = HeaderName::from_bytes(name.as_ref()).unwrap();
+                    let value = HeaderValue::from_bytes(value.as_ref()).unwrap();
+                    headers.insert(name, value);
+                });
+            }
+
+            response_builder
+                .body(Body::from_stream(res.bytes_stream()))
+                .unwrap()
+        }
+        Err(_) => todo!(),
+    }
+}

crates/tuono_lib/src/vite_websocket_proxy.rs

@@ -0,0 +1,104 @@
+use axum::extract::ws::{self, WebSocket, WebSocketUpgrade};
+use axum::response::IntoResponse;
+use futures_util::{SinkExt, StreamExt};
+use tokio_tungstenite::connect_async;
+use tokio_tungstenite::tungstenite::{Error, Message};
+use tungstenite::client::IntoClientRequest;
+use tungstenite::ClientRequestBuilder;
+
+const VITE_WS: &str = "ws://localhost:3001/vite-server/";
+const VITE_WS_PROTOCOL: &str = "vite-hmr";
+
+/// This is the entry point to proxy the vite's WebSocket.
+/// The proxy is needed for allowing all the development requests to point
+/// to localhost:3000/*. This enabled the framework to be developed in a Docker
+/// environment with just the 3000 port exposed.
+pub async fn vite_websocket_proxy(ws: WebSocketUpgrade) -> impl IntoResponse {
+    ws.protocols([VITE_WS_PROTOCOL]).on_upgrade(handle_socket)
+}
+
+async fn handle_socket(mut tuono_socket: WebSocket) {
+    // Send back a message to confirm connection
+    if tuono_socket
+        .send(ws::Message::Ping("tuono connected".into()))
+        .await
+        .is_err()
+    {
+        // If is error close the connection
+        return;
+    }
+
+    let vite_ws_request = ClientRequestBuilder::new(VITE_WS.parse().unwrap())
+        .with_sub_protocol(VITE_WS_PROTOCOL)
+        .into_client_request()
+        .expect("Failed to create vite WS request");
+
+    let vite_socket = match connect_async(vite_ws_request).await {
+        Ok((stream, _)) => {
+            // Connected to vite's WebSocket
+            stream
+        }
+        Err(e) => {
+            eprintln!("Failed to connect to vite's WebSocket. Error: {e}");
+            // As fallback vite automatically connect to port 3001.
+            return;
+        }
+    };
+
+    let (mut vite_sender, mut vite_receiver) = vite_socket.split();
+    let (mut tuono_sender, mut tuono_receiver) = tuono_socket.split();
+
+    // Handle browser messages.
+    // Every message gets forwarded to the vite WebSocket
+    tokio::spawn(async move {
+        while let Some(msg) = tuono_receiver.next().await {
+            if let Ok(msg) = msg {
+                let msg_to_vite = match msg.clone() {
+                    ws::Message::Text(str) => Message::Text(str),
+                    ws::Message::Pong(payload) => Message::Pong(payload),
+                    ws::Message::Ping(payload) => Message::Ping(payload),
+                    ws::Message::Binary(payload) => Message::Binary(payload),
+                    // Hard to match axum and tungstenite close payload.
+                    // Not a priority
+                    ws::Message::Close(_) => Message::Close(None),
+                };
+
+                vite_sender
+                    .send(msg_to_vite)
+                    .await
+                    .expect("Failed to tunnel msg to vite's WebSocket");
+
+                msg
+            } else {
+                // Close browser's WebSocket connection.
+                return;
+            };
+        }
+    });
+
+    // Handle vite messages.
+    // Every message gets forwarded to the browser.
+    tokio::spawn(async move {
+        while let Some(Ok(msg)) = vite_receiver.next().await {
+            let msg_to_browser = match msg {
+                Message::Text(str) => ws::Message::Text(str),
+                Message::Ping(payload) => ws::Message::Ping(payload),
+                Message::Pong(payload) => ws::Message::Pong(payload),
+                Message::Binary(payload) => ws::Message::Binary(payload),
+                // Hard to match axum and tungstenite close payload.
+                // Not a priority
+                Message::Close(_) => ws::Message::Close(None),
+                _ => {
+                    eprintln!("Unexpected message from the vite WebSocket to the browser: {msg:?}");
+                    ws::Message::Text("Unhandled".to_string())
+                }
+            };
+
+            if let Err(err) = tuono_sender.send(msg_to_browser).await {
+                if err.to_string() != Error::AlreadyClosed.to_string() {
+                    eprintln!("Failed to send back message from vite to browser: {err}")
+                }
+            }
+        }
+    });
+}

crates/tuono_lib_macros/Cargo.toml

@@ -1,9 +1,10 @@
 [package]
 name = "tuono_lib_macros"
-version = "0.0.11"
+version = "0.4.6"
 edition = "2021"
 description = "The react/rust fullstack framework"
-homepage = "https://github.com/Valerioageno/tuono"
+keywords = [ "react", "typescript", "fullstack", "web", "ssr"]
+repository = "https://github.com/Valerioageno/tuono"
 readme = "../../README.md"
 license-file = "../../LICENSE.md"
 categories = ["web-programming"]

crates/tuono_lib_macros/src/handler.rs

@@ -8,59 +8,36 @@ pub fn handler_core(_args: TokenStream, item: TokenStream) -> TokenStream {
     let fn_name = item.clone().sig.ident;
 
     quote! {
-        use axum::response::{Html, IntoResponse};
+        use tuono_lib::axum::response::IntoResponse;
         use std::collections::HashMap;
-        use axum::extract::{State, Path};
-        use reqwest::Client;
+        use tuono_lib::axum::extract::{State, Path};
 
         #item
 
         pub async fn route(
-            Path(params): Path<HashMap<String, String>>, 
-            State(client): State<Client>, 
-            request: axum::extract::Request
-        ) -> Html<String> {
-           let pathname = &request.uri();
-           let headers = &request.headers();
+            Path(params): Path<HashMap<String, String>>,
+            State(client): State<tuono_lib::reqwest::Client>,
+            request: tuono_lib::axum::extract::Request
+        ) -> impl IntoResponse {
+           let pathname = request.uri();
+           let headers = request.headers();
 
-           let req = tuono_lib::Request::new(pathname, headers, params);
+           let req = tuono_lib::Request::new(pathname.to_owned(), headers.to_owned(), 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>, 
-            request: axum::extract::Request
-        ) -> axum::response::Response {
-            let pathname = &request.uri();
-           let headers = &request.headers();
+            Path(params): Path<HashMap<String, String>>,
+            State(client): State<tuono_lib::reqwest::Client>,
+            request: tuono_lib::axum::extract::Request
+        ) -> impl IntoResponse{
+           let pathname = request.uri();
+           let headers = request.headers();
 
-           let req = tuono_lib::Request::new(pathname, headers, params);
+           let req = tuono_lib::Request::new(pathname.to_owned(), headers.to_owned(), 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/README.md

@@ -0,0 +1,12 @@
+# Documentation
+
+This folder contains the documentation related to the `tuono` framework.
+
+The framework expects to enable SSG and MDX support in the next months. 
+At that time a standalone website will be built with tuono to hold the whole documentation.
+
+The following docs are currently actively maintained:
+- [tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md)
+
+## Contributions
+Any help or suggestion will be strongly appreciated.

docs/tutorial.md

@@ -0,0 +1,614 @@
+# Tuono tutorial
+
+This tutorial is meant for giving you a sneak peek of the framework and is intended to evolve along the development - be sure to have installed the latest version.
+
+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).
+
+> 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)
+
+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)
+* [Handle redirections](#handle-redirections)
+* [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:
+
+```bash
+$ cargo install tuono
+```
+
+To check that is correctly installed run:
+
+```bash
+$ tuono --version
+```
+
+Run `tuono -h` to see all the available commands.
+
+## Project scaffold
+
+To setup a new fresh project you just need to run the following command:
+
+```bash
+$ tuono new tuono-tutorial
+```
+
+Get into the project folder and install the dependencies with:
+
+```bash
+$ npm install
+```
+
+Open it with your favourite code editor.
+
+The project will have the following structure:
+
+```
+├── package.json
+├── public
+├── src
+│   ├── routes
+│   └── styles
+├── Cargo.toml
+├── README.md
+└── tsconfig.json
+```
+
+**public/**: put here all the files you want to be public
+
+**src/routes/**: All the files in this folder are considered routes. All the routes are server side rendered out of the box. To add server side capabilities just create a rust file with the same name as the route (i.e. `about.tsx` → `about.rs`).
+
+**src/styles/**: In this folder there is the `global.css` file that stores all the global styles. For the rest of the project you can use CSS modules (⚠️ CSS modules on routes are forbidden). 
+
+## Start the dev environment
+
+To start the development environment you just need to run the following command within the project folder:
+
+```bash
+$ tuono dev
+```
+The first time might take a little bit because it will install all the rust’s dependencies. All the other execution will be pretty quick!
+
+> 💡 The `tuono dev` development script is currently under strong optimization improvements. In case you face any error delete the cache `.tuono` folder and run it again!
+
+Then open [`http://localhost:3000/`](http://localhost:3000/) on the browser.
+
+## The “/” route
+
+All the `index.tsx` files represent the folder root page (i.e. `src/routes/posts/index.tsx` is [`http://localhost:3000/posts`](http://localhost:3000/posts) as well as `src/routes/posts.tsx`).
+
+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
+- Redirecting to a different route
+
+## Tutorial introduction
+
+Now that we have some knowledge about the project structure let’s start the real tutorial. 
+
+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.
+
+Clear the `index.rs` file and paste:
+
+```rust
+// src/routes/index.rs
+use serde::{Deserialize, Serialize};
+use tuono_lib::reqwest::Client;
+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: 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("{}")),
+    };
+}
+```
+
+Now the pokemons are correctly fetched and hydrated on the client side so we can actually use them. Clear the `index.tsx` file and paste:
+
+```tsx
+// src/routes/index.tsx
+import type { TuonoProps } from "tuono";
+
+interface Pokemon {
+  name: string
+}
+
+interface IndexProps {
+  results: Pokemon[]
+}
+
+export default function IndexPage({
+  data,
+}: TuonoProps<IndexProps>): JSX.Element {
+  if (!data?.results) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <header className="header">
+        <a href="https://crates.io/crates/tuono" target="_blank">
+          Crates
+        </a>
+        <a href="https://www.npmjs.com/package/tuono" target="_blank">
+          Npm
+        </a>
+      </header>
+      <div className="title-wrap">
+        <h1 className="title">
+          TU<span>O</span>NO
+        </h1>
+        <div className="logo">
+          <img src="rust.svg" className="rust" />
+          <img src="react.svg" className="react" />
+        </div>
+      </div>
+      <ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
+        {data.results.map((pokemon) => {
+          return pokemon.name;
+        })}
+      </ul>
+    </>
+  );
+}
+```
+
+Refresh now the browser! A bit ugly but all the pokemons are finally printed on screen!
+
+## Create a stand-alone component
+
+Let’s then create the button needed for displaying the list of pokemons.
+
+Create the following file `src/components/PokemonLink.tsx` and fill the content with:
+
+```tsx
+// src/components/PokemonLink.tsx
+import { Link } from "tuono";
+
+interface Pokemon {
+  name: string
+}
+
+export default function PokemonLink({
+  pokemon,
+  id,
+}: {
+  pokemon: Pokemon;
+  id: number;
+}): JSX.Element {
+  return (
+    <Link href={`/pokemons/${pokemon.name}`}>
+      {pokemon.name}
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+      />
+    </Link>
+  );
+}
+```
+
+Now that the link is done let’s import it in the `index.tsx` file
+
+```diff
+// src/routes/index.tsx
+
+++  import PokemonLink from '../components/PokemonLink'
+
+// ...
+	<ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
+--      {pokemons.map((pokemon) => {
+--        return pokemon.name;
+++      {pokemons.map((pokemon, i) => {
+++        return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />;
+      })}
+	</ul>
+// ...
+```
+
+Now the links work. Clicking on any of them we get redirected to the 404 page because we haven’t yet implemented the `pokemons/[pokemon]` page. 
+As previously said CSS modules are enabled out of the box so let’s make those links a little bit nicer.
+
+Create alongside the `PokemonLink.tsx` component the CSS module `PokemonLink.module.css` and copy the following content into it:
+
+```css
+/* src/components/PokemonLink.module.css */
+
+.link {
+  width: 100%;
+  max-width: 216px;
+  position: relative;
+  background: white;
+  margin-bottom: 10px;
+  border: solid #f0f0f0 1px;
+  text-decoration: none;
+  color: black;
+  padding: 5px 5px 5px 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  transition: 0.2s;
+  align-items: center;
+}
+
+.link:hover {
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+.link img {
+  width: 70px;
+  background: white;
+  border-radius: 50%;
+}
+```
+
+> 💡 SASS is supported out of the box. Just install the processor in the devDependencies `npm i -D sass` and run again `tuono dev`
+
+Then import the styles into the `PokemonLink` component as following:
+
+```diff
+// src/components/PokemonLink.tsx
+import { Link } from "tuono";
+import type { Pokemon } from "./../types/pokemon";
+++ import styles from './PokemonLink.module.css'
+
+export default function PokemonLink({
+  pokemon,
+  id,
+}: {
+  pokemon: Pokemon;
+  id: number;
+}): JSX.Element {
+  return (
+--    <Link href={`/pokemons/${pokemon.name}`}>
+++    <Link className={styles.link} href={`/pokemons/${pokemon.name}`}>
+      {pokemon.name}
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+      />
+    </Link>
+  );
+}
+```
+
+## Create the `/pokemons/[pokemon]` route
+
+The homepage is ready. We have the full list of pokemons and they are all links. Great!
+
+Now we want to make those links actually pointing to a real page. Let’s create the dynamic route.
+
+Create the folder `routes/pokemons` and then create the two files `[pokemon].tsx` and `[pokemon].rs`.
+
+These two will handle every requests that points to `http://localhost:3000/pokemons/bulbasaur..mew`.
+
+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::reqwest::Client;
+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: 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) => {
+            let data = res.json::<Pokemon>().await.unwrap();
+            Response::Props(Props::new(data))
+        }
+        Err(_err) => Response::Props(Props::new("{}"))
+    };
+}
+```
+
+Then let’s work on the frontend. Paste into the `[pokemon].tsx` file the following code:
+
+```tsx
+import { TuonoProps } from "tuono";
+import PokemonView from "../../components/PokemonView";
+
+export default function Pokemon({ data }: TuonoProps): JSX.Element {
+  return <PokemonView pokemon={data} />;
+}
+```
+
+The browser should complain that the component `PokemonView` does not exist. Let’s create it then!
+
+```tsx
+// components/PokemonView.tsx
+import { Link } from "tuono";
+import styles from "./PokemonView.module.css";
+
+interface Pokemon {
+  name: string
+  id: string
+  weight: number
+  height: number
+}
+
+export default function PokemonView({
+  pokemon,
+}: {
+  pokemon?: Pokemon;
+}): JSX.Element {
+  return (
+    <div>
+      <Link className={styles["back-btn"]} href="/">
+        Back
+      </Link>
+      {pokemon?.name && (
+        <div className={styles.pokemon}>
+          <div>
+            <h1 className={styles.name}>
+              {pokemon.name}
+            </h1>
+            <dl className={styles.spec}>
+              <dt className={styles.label}>Weight:</dt>
+              <dd>{pokemon.weight}lbs</dd>
+            </dl>
+            <dl className={styles.spec}>
+              <dt className={styles.label}>Height:</dt>
+              <dd>{pokemon.height}ft</dd>
+            </dl>
+          </div>
+          <img
+            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+```css
+/* components/PokemonView.module.css */
+.back-btn {
+  background-color: white;
+  border-radius: 10px;
+  padding: 7px 15px;
+  color: black;
+  text-decoration: none;
+  border: solid #f0f0f0 1px;
+  font-size: 20px;
+}
+
+.back-btn:hover {
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+.pokemon {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.name {
+  font-size: 50px;
+  font-weight: 700;
+}
+
+.pokemon img {
+  width: 400px;
+}
+
+.spec {
+  display: flex;
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+.label {
+  font-weight: 700;
+}
+```
+
+## 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 serde::{Deserialize, Serialize};
+-- use tuono_lib::reqwest::Client;
+++ use tuono_lib::reqwest::{Client, StatusCode};
+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: 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 serde::{Deserialize, Serialize};
+-- use tuono_lib::reqwest::Client;
+++ use tuono_lib::reqwest::{Client, StatusCode};
+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: 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.
+
+## Handle redirections
+
+What if there is a pokemon among all of them that should be considered the GOAT? What
+we are going to do right now is creating a new route `/pokemons/GOAT` that points to the best
+pokemon of the first generation.
+
+First let's create a new route by just creating an new file `/pokemons/GOAT.rs` and pasting the following code:
+
+```rs
+// src/routes/pokemons/GOAT.rs
+use tuono_lib::{reqwest::Client, Request, Response};
+
+#[tuono_lib::handler]
+async fn redirect_to_goat(_: Request, _: Client) -> Response {
+    // Of course the GOAT is mewtwo - feel free to select your favourite 😉
+    Response::Redirect("/pokemons/mewtwo".to_string()) 
+}
+```
+
+Now let's create the button in the home page to actually point to it!
+
+```diff
+// src/routes/index.tsx
+
+<ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
+++      <PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
+        {data.results.map((pokemon, i) => {
+          return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
+        })}
+</ul>
+```
+
+Now at [http://localhost:3000/](http:/localhost:3000/) you will find a new link at the beginning of the list.
+Click on it and see the application automatically redirecting you to your favourite pokemon's route!
+
+## 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 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

@@ -0,0 +1,19 @@
+# Tuono examples
+
+This folder includes all the official tuono starters.
+
+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/Cargo.toml

@@ -8,11 +8,6 @@ name = "tuono"
 path = ".tuono/main.rs"
 
 [dependencies]
-axum = {version = "0.7.5", features = ["json"]}
-tokio = { version = "1.37.0", features = ["full"] }
-tower-http = {version = "0.5.2", features = ["fs"]}
-serde = { version = "1.0.202", features = ["derive"] }
 tuono_lib = { path = "../../crates/tuono_lib/"}
-serde_json = "1.0"
-reqwest = {version = "0.12.4", features = ["json"]}
+serde = { version = "1.0.202", features = ["derive"] }
 

examples/tuono/README.md

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

examples/tuono/package.json

@@ -1,10 +1,11 @@
 {
   "name": "tuono",
+  "description": "The react/rust fullstack framework",
   "version": "0.0.1",
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tuono": "workspace:*"
+    "tuono": "link:../../packages/tuono"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

examples/tuono/src/components/Button.tsx

@@ -1,3 +0,0 @@
-export default function Button(): JSX.Element {
-  return <button>Button</button>
-}

examples/tuono/src/routes/__root.tsx

@@ -3,10 +3,7 @@ import type { ReactNode } from 'react'
 interface RootRouteProps {
   children: ReactNode
 }
+
 export default function RootRoute({ children }: RootRouteProps): JSX.Element {
-  return (
-    <>
-      <main className="main">{children}</main>
-    </>
-  )
+  return <main className="main">{children}</main>
 }

examples/tuono/src/routes/index.rs

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

examples/tuono/src/routes/index.tsx

@@ -1,8 +1,9 @@
 import type { TuonoProps } from 'tuono'
 
-type IndexProps = {
+interface IndexProps {
   subtitle: string
 }
+
 export default function IndexPage({
   data,
   isLoading,
@@ -32,7 +33,12 @@ export default function IndexPage({
       </div>
       <div className="subtitle-wrap">
         <p className="subtitle">{data?.subtitle}</p>
-        <a href="https://github.com/Valerioageno/tuono" target="_blank">
+        <a
+          href="https://github.com/Valerioageno/tuono"
+          target="_blank"
+          className="button"
+          type="button"
+        >
           Github
         </a>
       </div>

examples/tuono/src/styles/global.css

@@ -51,12 +51,32 @@ main {
   z-index: 0;
   letter-spacing: -2px;
   margin-left: -8px;
+  user-select: none;
+  pointer-events: none;
 }
 
 .title span {
   opacity: 0;
 }
 
+.button {
+  width: 140px;
+  height: 30px;
+  border: solid 3px black;
+  border-radius: 10px;
+  color: black;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.2s;
+}
+
+.button:hover {
+  color: white;
+  background: black;
+}
+
 .logo {
   margin-left: 240px;
   position: relative;

examples/tutorial/.gitignore

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

examples/tutorial/Cargo.toml

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

examples/tutorial/README.md

@@ -0,0 +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/package.json

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

examples/tutorial/public/react.svg

@@ -0,0 +1,5 @@
+<svg width="82" height="73" viewBox="0 0 82 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.337 36.6169C81.337 31.245 74.5945 26.1541 64.2571 22.9971C66.6426 12.4847 65.5824 4.1211 60.9107 1.44343C59.8339 0.815331 58.5748 0.517811 57.1998 0.517811V4.20375C57.9619 4.20375 58.5748 4.35251 59.0884 4.6335C61.3414 5.92275 62.3188 10.8318 61.5568 17.1458C61.3745 18.6996 61.0763 20.3359 60.7119 22.0053C57.4649 21.212 53.9197 20.6004 50.1923 20.2037C47.9558 17.1459 45.6365 14.369 43.3007 11.9393C48.7013 6.93101 53.7706 4.18722 57.2164 4.18722V0.501282C52.6607 0.501282 46.6967 3.74094 40.6666 9.36076C34.6364 3.774 28.6726 0.567398 24.1168 0.567398V4.25333C27.5461 4.25333 32.6319 6.9806 38.0326 11.9558C35.7133 14.3855 33.394 17.1459 31.1907 20.2037C27.4467 20.6004 23.9015 21.212 20.6545 22.0219C20.2735 20.369 19.9918 18.7657 19.793 17.2285C19.0144 10.9145 19.9752 6.0054 22.2117 4.69962C22.7087 4.4021 23.3548 4.26987 24.1168 4.26987V0.583927C22.7252 0.583927 21.4662 0.881447 20.3728 1.50954C15.7177 4.18722 14.674 12.5343 17.0761 23.0136C6.77188 26.1871 0.0625 31.2615 0.0625 36.6169C0.0625 41.9887 6.805 47.0796 17.1424 50.2366C14.7568 60.749 15.8171 69.1126 20.4888 71.7903C21.5656 72.4184 22.8246 72.7159 24.2162 72.7159C28.772 72.7159 34.7359 69.4762 40.766 63.8564C46.7962 69.4432 52.76 72.6498 57.3158 72.6498C58.7073 72.6498 59.9664 72.3523 61.0598 71.7242C65.7149 69.0465 66.7586 60.6994 64.3565 50.2201C74.6276 47.0631 81.337 41.9722 81.337 36.6169ZM59.7676 25.5921C59.1547 27.7243 58.3926 29.9227 57.5311 32.121C56.8519 30.7987 56.1396 29.4764 55.361 28.1541C54.5989 26.8318 53.7872 25.5425 52.9754 24.2863C55.3278 24.6334 57.5974 25.0632 59.7676 25.5921ZM52.1802 43.1953C50.888 45.4267 49.5628 47.5424 48.1877 49.5094C45.7194 49.7243 43.2178 49.84 40.6997 49.84C38.1982 49.84 35.6967 49.7242 33.2449 49.5259C31.8699 47.559 30.528 45.4598 29.2358 43.2449C27.9768 41.0797 26.8337 38.8813 25.79 36.6664C26.8172 34.4516 27.9768 32.2367 29.2193 30.0714C30.5114 27.84 31.8368 25.7243 33.2118 23.7574C35.6801 23.5425 38.1817 23.4268 40.6997 23.4268C43.2013 23.4268 45.7028 23.5425 48.1546 23.7409C49.5296 25.7078 50.8715 27.807 52.1637 30.0218C53.4227 32.1871 54.5658 34.3855 55.6094 36.6003C54.5658 38.8152 53.4227 41.0301 52.1802 43.1953ZM57.5311 41.0466C58.4257 43.2615 59.1878 45.4763 59.8173 47.6251C57.6471 48.154 55.361 48.6003 52.992 48.9474C53.8037 47.6747 54.6155 46.3689 55.3775 45.0301C56.1396 43.7077 56.8519 42.3689 57.5311 41.0466ZM40.7329 58.6829C39.1922 57.0961 37.6515 55.3275 36.1274 53.3937C37.6184 53.4598 39.1425 53.5094 40.6832 53.5094C42.2404 53.5094 43.7811 53.4763 45.2886 53.3937C43.7976 55.3275 42.257 57.0961 40.7329 58.6829ZM28.4075 48.9474C26.0551 48.6003 23.7855 48.1705 21.6153 47.6416C22.2283 45.5094 22.9903 43.311 23.8518 41.1127C24.531 42.435 25.2434 43.7573 26.022 45.0796C26.8006 46.402 27.5958 47.6912 28.4075 48.9474ZM40.6501 14.5508C42.1907 16.1376 43.7314 17.9062 45.2555 19.8401C43.7645 19.7739 42.2404 19.7244 40.6997 19.7244C39.1425 19.7244 37.6018 19.7574 36.0943 19.8401C37.5853 17.9062 39.126 16.1376 40.6501 14.5508ZM28.391 24.2863C27.5792 25.559 26.7675 26.8648 26.0054 28.2037C25.2433 29.526 24.531 30.8483 23.8518 32.1706C22.9572 29.9557 22.1951 27.7409 21.5656 25.5921C23.7358 25.0797 26.022 24.6334 28.391 24.2863ZM13.3984 44.9805C7.53392 42.4846 3.74023 39.2119 3.74023 36.6169C3.74023 34.0218 7.53392 30.7326 13.3984 28.2533C14.8231 27.6417 16.3803 27.0962 17.9873 26.5838C18.9316 29.8235 20.1741 33.1954 21.7147 36.6499C20.1906 40.0879 18.9647 43.4433 18.037 46.6664C16.3969 46.154 14.8397 45.592 13.3984 44.9805ZM22.3111 68.6002C20.0581 67.311 19.0807 62.4019 19.8427 56.0879C20.0249 54.5341 20.3231 52.8978 20.6876 51.2284C23.9346 52.0218 27.4798 52.6333 31.2072 53.03C33.4437 56.0879 35.763 58.8647 38.0988 61.2945C32.6982 66.3027 27.6289 69.0465 24.1831 69.0465C23.4376 69.03 22.8081 68.8812 22.3111 68.6002ZM61.6065 56.0052C62.3851 62.3192 61.4242 67.2283 59.1878 68.5341C58.6908 68.8316 58.0447 68.9639 57.2827 68.9639C53.8534 68.9639 48.7675 66.2366 43.3669 61.2614C45.6862 58.8317 48.0055 56.0713 50.2088 53.0135C53.9528 52.6168 57.498 52.0052 60.745 51.1953C61.1261 52.8647 61.4242 54.468 61.6065 56.0052ZM67.9845 44.9805C66.5598 45.592 65.0026 46.1375 63.3956 46.6499C62.4513 43.4102 61.2089 40.0383 59.6682 36.5838C61.1923 33.1458 62.4182 29.7904 63.3459 26.5673C64.986 27.0797 66.5432 27.6417 68.0011 28.2533C73.8656 30.7491 77.6592 34.0218 77.6592 36.6169C77.6427 39.2119 73.849 42.5011 67.9845 44.9805Z" fill="#61DAFB"/>
+<path d="M40.6832 44.1706C44.8644 44.1706 48.254 40.7886 48.254 36.6169C48.254 32.4451 44.8644 29.0632 40.6832 29.0632C36.502 29.0632 33.1124 32.4451 33.1124 36.6169C33.1124 40.7886 36.502 44.1706 40.6832 44.1706Z" fill="#61DAFB"/>
+</svg>
+

examples/tutorial/src/components/PokemonLink.module.css

@@ -0,0 +1,26 @@
+.link {
+  width: 100%;
+  max-width: 216px;
+  position: relative;
+  background: white;
+  margin-bottom: 10px;
+  border: solid #f0f0f0 1px;
+  text-decoration: none;
+  color: black;
+  padding: 5px 5px 5px 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  transition: 0.2s;
+  align-items: center;
+}
+
+.link:hover {
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+.link img {
+  width: 70px;
+  background: white;
+  border-radius: 50%;
+}

examples/tutorial/src/components/PokemonLink.tsx

@@ -0,0 +1,27 @@
+import { Link } from 'tuono'
+import styles from './PokemonLink.module.css'
+
+interface Pokemon {
+  name: string
+}
+
+export default function PokemonLink({
+  pokemon,
+  id,
+}: {
+  pokemon: Pokemon
+  id: number
+}): JSX.Element {
+  return (
+    <Link
+      className={styles.link}
+      href={`/pokemons/${pokemon.name}`}
+      id={pokemon.name}
+    >
+      {pokemon.name}
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+      />
+    </Link>
+  )
+}

examples/tutorial/src/components/PokemonView.module.css

@@ -0,0 +1,38 @@
+.back-btn {
+  background-color: white;
+  border-radius: 10px;
+  padding: 7px 15px;
+  color: black;
+  text-decoration: none;
+  border: solid #f0f0f0 1px;
+  font-size: 20px;
+}
+
+.back-btn:hover {
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+.pokemon {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.name {
+  font-size: 50px;
+  font-weight: 700;
+}
+
+.pokemon img {
+  width: 400px;
+}
+
+.spec {
+  display: flex;
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+.label {
+  font-weight: 700;
+}

examples/tutorial/src/components/PokemonView.tsx

@@ -0,0 +1,41 @@
+import { Link } from 'tuono'
+import styles from './PokemonView.module.css'
+
+interface Pokemon {
+  name: string
+  id: string
+  weight: number
+  height: number
+}
+
+export default function PokemonView({
+  pokemon,
+}: {
+  pokemon?: Pokemon
+}): JSX.Element {
+  return (
+    <div>
+      <Link className={styles['back-btn']} href="/">
+        Back
+      </Link>
+      {pokemon?.name && (
+        <div className={styles.pokemon}>
+          <div>
+            <h1 className={styles.name}>{pokemon.name}</h1>
+            <dl className={styles.spec}>
+              <dt className={styles.label}>Weight:</dt>
+              <dd>{pokemon.weight}lbs</dd>
+            </dl>
+            <dl className={styles.spec}>
+              <dt className={styles.label}>Height:</dt>
+              <dd>{pokemon.height}ft</dd>
+            </dl>
+          </div>
+          <img
+            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

examples/tutorial/src/routes/__root.tsx

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

examples/tutorial/src/routes/index.rs

@@ -0,0 +1,31 @@
+// src/routes/index.rs
+use serde::{Deserialize, Serialize};
+use tuono_lib::reqwest::{Client, StatusCode};
+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: Client) -> Response {
+    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_with_status(
+            "{}", // Return empty JSON
+            StatusCode::INTERNAL_SERVER_ERROR,
+        )),
+    }
+}

examples/tutorial/src/routes/index.tsx

@@ -0,0 +1,47 @@
+// src/routes/index.tsx
+import type { TuonoProps } from 'tuono'
+import PokemonLink from '../components/PokemonLink'
+
+interface Pokemon {
+  name: string
+}
+
+interface IndexProps {
+  results: Pokemon[]
+}
+
+export default function IndexPage({
+  data,
+}: TuonoProps<IndexProps>): JSX.Element {
+  if (!data?.results) {
+    return <></>
+  }
+
+  return (
+    <>
+      <header className="header">
+        <a href="https://crates.io/crates/tuono" target="_blank">
+          Crates
+        </a>
+        <a href="https://www.npmjs.com/package/tuono" target="_blank">
+          Npm
+        </a>
+      </header>
+      <div className="title-wrap">
+        <h1 className="title">
+          TU<span>O</span>NO
+        </h1>
+        <div className="logo">
+          <img src="rust.svg" className="rust" />
+          <img src="react.svg" className="react" />
+        </div>
+      </div>
+      <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
+        <PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
+        {data.results.map((pokemon, i) => {
+          return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
+        })}
+      </ul>
+    </>
+  )
+}

examples/tutorial/src/routes/pokemons/GOAT.rs

@@ -0,0 +1,7 @@
+// src/routes/pokemons/GOAT.rs
+use tuono_lib::{reqwest::Client, Request, Response};
+
+#[tuono_lib::handler]
+async fn redirect_to_goat(_: Request, _: Client) -> Response {
+    Response::Redirect("/pokemons/mewtwo".to_string())
+}

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

@@ -0,0 +1,34 @@
+// src/routes/pokemons/[pokemon].rs
+use serde::{Deserialize, Serialize};
+use tuono_lib::reqwest::{Client, StatusCode};
+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: Client) -> Response {
+    // The param `pokemon` is defined in the route filename [pokemon].rs
+    let pokemon = req.params.get("pokemon").unwrap();
+
+    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_with_status(
+            "{}",
+            StatusCode::INTERNAL_SERVER_ERROR,
+        )),
+    }
+}

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

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

examples/tutorial/src/styles/global.css

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

examples/tutorial/tsconfig.json

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

examples/tutorial/tsconfig.node.json

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

package.json

@@ -1,19 +1,22 @@
 {
-  "name": "tuono",
-  "version": "0.1.0",
-  "description": "",
-  "main": "src/index.js",
-  "packageManager": "pnpm@8.12.0",
+  "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",
+	"tuono-fs-router-vite-plugin"
+  ],
+  "author": "Valerio Ageno",
   "license": "MIT",
   "devDependencies": {
     "@tanstack/config": "^0.7.0",
@@ -32,5 +35,8 @@
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vitest": "^1.5.2"
+  },
+  "dependencies": {
+    "turbo": "^2.0.4"
   }
 }

packages/fs-router-vite-plugin/README.md

@@ -0,0 +1,12 @@
+# tuono-fs-router-vite-plugin
+
+This is a vite plugin for [tuono](https://github.com/Valerioageno/tuono).
+
+This package specifically handles the file system based routing.
+
+Check [tuono](https://github.com/Valerioageno/tuono) for more.
+
+## Credits
+
+This plugin is strongly inspired by the [@tanstack/router](https://tanstack.com/router/latest)
+route generator plugin.

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

@@ -0,0 +1,51 @@
+{
+  "name": "tuono-fs-router-vite-plugin",
+  "version": "0.4.6",
+  "description": "Plugin for the tuono's file system router. 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",
+    "prettier": "^3.2.4",
+    "vite": "^5.2.11"
+  },
+  "devDependencies": {
+    "@tanstack/config": "^0.7.11",
+    "@types/babel__core": "^7.20.5",
+    "vitest": "^1.5.2"
+  }
+}

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

@@ -0,0 +1,3 @@
+export const ROUTES_FOLDER = './src/routes/'
+export const ROOT_PATH_ID = '__root'
+export const GENERATED_ROUTE_TREE = './.tuono/routeTree.gen.ts'

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

@@ -1,4 +1,3 @@
-import * as fs from 'fs'
 import * as fsp from 'fs/promises'
 import path from 'path'
 
@@ -13,17 +12,13 @@ import {
   removeGroups,
   removeUnderscores,
   removeLayoutSegments,
-  removeTrailingUnderscores,
 } from './utils'
 
-import type { Config, RouteNode, RouteSubNode } from './types'
+import type { Config, RouteNode } from './types'
+import { ROUTES_FOLDER, ROOT_PATH_ID, GENERATED_ROUTE_TREE } from './constants'
 
 import { format } from 'prettier'
 
-const ROUTES_FOLDER = './src/routes/'
-const ROOT_PATH_ID = '__root'
-const GENERATED_ROUTE_TREE = './.tuono/routeTree.gen.ts'
-
 let latestTask = 0
 
 const defaultConfig: Config = {
@@ -134,12 +129,9 @@ export function hasParentRoute(
 
 export async function routeGenerator(config = defaultConfig): Promise<void> {
   if (!isFirst) {
-    console.log('Generating routes...')
     isFirst = true
   } else if (skipMessage) {
     skipMessage = false
-  } else {
-    console.log('Regenerating routes')
   }
 
   const checkLatest = (): boolean => {
@@ -154,7 +146,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)
 
@@ -173,8 +164,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
     (d): string => d.routePath,
   ]).filter((d) => ![`/${ROOT_PATH_ID}`].includes(d.routePath || ''))
 
-  const routePiecesByPath: Record<string, RouteSubNode> = {}
-
   // Loop over the flat list of routeNodes and
   // build up a tree based on the routeNodes' routePath
   const routeNodes: RouteNode[] = []
@@ -194,7 +183,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
       node.parent.children = node.parent.children ?? []
       node.parent.children.push(node)
     }
-    console.log('pushed')
     routeNodes.push(node)
   }
 
@@ -208,10 +196,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
         return
       }
 
-      if (node.isLayout && !node.children?.length) {
-        return
-      }
-
       const route = `${node.variableName}Route`
 
       if (node.children?.length) {
@@ -236,7 +220,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),
@@ -244,7 +230,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
           ),
           false,
         ),
-      )}'`
+      )}'))`
     }),
   ].join('\n')
 
@@ -257,9 +243,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({
           ${[
@@ -271,30 +254,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'),
@@ -302,7 +262,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(
@@ -349,10 +309,4 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
       routeConfigFileContent,
     )
   }
-
-  console.log(
-    `[emoticon] Processed ${routeNodes.length === 1 ? 'route' : 'routes'} in ${
-      Date.now() - start
-    }ms`,
-  )
 }

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

@@ -0,0 +1,47 @@
+import { routeGenerator } from './generator'
+
+import { normalize } from 'path'
+
+import type { Plugin } from 'vite'
+
+const ROUTES_DIRECTORY_PATH = './src/routes'
+
+let lock = false
+
+export default function RouterGenerator(): Plugin {
+  const generate = async (): Promise<void> => {
+    if (lock) return
+    lock = true
+
+    try {
+      await routeGenerator()
+    } catch (err) {
+      console.error(err)
+    } finally {
+      lock = false
+    }
+  }
+
+  const handleFile = async (file: string): Promise<void> => {
+    const filePath = normalize(file)
+
+    if (filePath.startsWith(ROUTES_DIRECTORY_PATH)) {
+      await generate()
+    }
+  }
+
+  return {
+    name: 'vite-plugin-tuono-fs-router',
+    configResolved: async (): Promise<void> => {
+      await generate()
+    },
+    watchChange: async (
+      file: string,
+      context: { event: string },
+    ): Promise<void> => {
+      if (['create', 'update', 'delete'].includes(context.event)) {
+        await handleFile(file)
+      }
+    },
+  }
+}

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

@@ -11,17 +11,6 @@ export interface RouteNode {
   variableName?: string
 }
 
-/**
- * @deprecated
- */
-export interface RouteSubNode {
-  component?: RouteNode
-  errorComponent?: RouteNode
-  pendingComponent?: RouteNode
-  loader?: RouteNode
-  lazy?: RouteNode
-}
-
 export interface Config {
   folderName: string
   generatedRouteTree: string

packages/fs-router-vite-plugin/tests/generator.spec.ts

@@ -0,0 +1,41 @@
+import fs from 'fs/promises'
+import { describe, it, expect } from 'vitest'
+import { routeGenerator } from '../src/generator'
+
+function makeFolderDir(folder: string) {
+  return process.cwd() + `/tests/generator/${folder}`
+}
+
+async function getRouteTreeFileText(folder: string) {
+  const dir = makeFolderDir(folder)
+  return await fs.readFile(dir + '/routeTree.gen.ts', 'utf-8')
+}
+
+async function getExpectedRouteTreeFileText(folder: string) {
+  const dir = makeFolderDir(folder)
+  const location = dir + '/routeTree.expected.ts'
+  return await fs.readFile(location, 'utf-8')
+}
+
+describe('generator works', async () => {
+  const folderNames = await fs.readdir(process.cwd() + '/tests/generator')
+
+  it.each(folderNames.map((folder) => [folder]))(
+    'should wire-up the routes for a "%s" tree',
+    async (folderName) => {
+      const currentFolder = `${process.cwd()}/tests/generator/${folderName}`
+
+      await routeGenerator({
+        folderName: `${currentFolder}/routes`,
+        generatedRouteTree: `${currentFolder}/routeTree.gen.ts`,
+      })
+
+      const [expectedRouteTree, generatedRouteTree] = await Promise.all([
+        getExpectedRouteTreeFileText(folderName),
+        getRouteTreeFileText(folderName),
+      ])
+
+      expect(generatedRouteTree).equal(expectedRouteTree)
+    },
+  )
+})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/fs-router-vite-plugin/tests/generator/single-level/routes/about.tsx

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

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

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

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

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

packages/fs-router-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/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.4.6",
+  "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.0.11",
+  "version": "0.4.6",
   "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",
@@ -86,7 +88,8 @@
     "@types/node": "^20.12.7",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "fast-text-encoding": "^1.0.6",
-    "prettier": "^3.2.4",
+    "tuono-fs-router-vite-plugin": "workspace:*",
+    "tuono-lazy-fn-vite-plugin": "workspace:*",
     "vite": "^5.2.11",
     "zustand": "4.4.7"
   },
@@ -94,11 +97,21 @@
     "@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",
+    "prettier": "^3.2.4",
     "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,19 +1,21 @@
-import { build, createServer } from 'vite'
+import { build, createServer, InlineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
-import { ViteFsRouter } from './tuono-vite-plugin'
+import ViteFsRouter from 'tuono-fs-router-vite-plugin'
+import { LazyLoadingPlugin } from 'tuono-lazy-fn-vite-plugin'
 
-const BASE_CONFIG = {
-  silent: true,
+const BASE_CONFIG: InlineConfig = {
   root: '.tuono',
+  logLevel: 'silent',
   publicDir: '../public',
   cacheDir: 'cache',
   envDir: '../',
-  plugins: [react(), ViteFsRouter()],
+  plugins: [react(), ViteFsRouter(), LazyLoadingPlugin()],
 }
 
+const VITE_PORT = 3001
+
 export function developmentSSRBundle() {
   ;(async () => {
-    console.log('Build SSR')
     await build({
       ...BASE_CONFIG,
       build: {
@@ -23,6 +25,8 @@ export function developmentSSRBundle() {
         emptyOutDir: true,
         rollupOptions: {
           input: './.tuono/server-main.tsx',
+          // Silent all logs
+          onLog() {},
           output: {
             entryFileNames: 'dev-server.js',
             format: 'iife',
@@ -39,11 +43,12 @@ export function developmentSSRBundle() {
 
 export function developmentCSRWatch() {
   ;(async () => {
-    console.log('Watch files')
     const server = await createServer({
       ...BASE_CONFIG,
+      // Entry point for the development vite proxy
+      base: '/vite-server/',
       server: {
-        port: 3001,
+        port: VITE_PORT,
         strictPort: true,
       },
       build: {
@@ -62,13 +67,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 +81,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/index.ts

@@ -1,21 +0,0 @@
-/**
- * Overview:
- *
- * src/routes							=	Routes entry point
- * src/routes/layout.tsx				=	Shared layout
- * src/routes/index.tsx					=	xyz.com
- * src/routes/about.tsx					=	xyz.com/about
- * src/routes/about-loading.tsx			=	xyz.com/about - while loading data
- * src/routes/about/index.tsx			=	xyz.com/about
- * src/routes/posts/[slug].tsx			=	xyz.com/posts/my-lovely-post
- * src/routes/posts/[...params].tsx		=	xyz.com/posts/my-lovely-post/commend-id-304
- * src/routes/404.tsx					=	Not found
- *
- * public/								=	Public files
- *
- * All the routes are lazy loaded!
- */
-
-import { routeGenerator } from './generator'
-
-export { routeGenerator }

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

@@ -1,284 +0,0 @@
-import * as babel from '@babel/core'
-import * as t from '@babel/types'
-import { eliminateUnreferencedIdentifiers } from './eliminateUnreferencedIdentifiers'
-import { SPLIT_PREFIX } from './constants'
-import type { BabelFileResult } from '@babel/core'
-
-type SplitModulesById = Record<
-  string,
-  { id: string; node: t.FunctionExpression }
->
-
-interface State {
-  filename: string
-  opts: {
-    minify: boolean
-    root: string
-  }
-  imported: Record<string, boolean>
-  refs: Set<any>
-  serverIndex: number
-  splitIndex: number
-  splitModulesById: SplitModulesById
-}
-
-interface MakeCompileFnArgs {
-  root: string
-}
-
-interface MakeCompileFnReturnArgs {
-  code: string
-  filename: string
-  getBabelConfig: () => { plugins: any[] }
-}
-
-interface CompileOutput {
-  code: string
-  map: BabelFileResult['map']
-}
-
-type SplitNodeType = (typeof splitNodeTypes)[number]
-
-export const makeCompile = ({
-  root,
-}: MakeCompileFnArgs): ((args: MakeCompileFnReturnArgs) => CompileOutput) => {
-  return ({ code, getBabelConfig, filename }) => {
-    const res = babel.transformSync(code, {
-      plugins: [
-        ['@babel/plugin-syntax-jsx', {}],
-        ['@babel/plugin-syntax-typescript', { isTSX: true }],
-        ...getBabelConfig().plugins,
-      ],
-      root,
-      filename,
-      sourceMaps: true,
-    })
-
-    if (res?.code) {
-      return {
-        code: res.code,
-        map: res.map,
-      }
-    }
-
-    return {
-      code,
-      map: null,
-    }
-  }
-}
-
-interface SplitFileFnArgs {
-  code: string
-  compile: (args: MakeCompileFnReturnArgs) => CompileOutput
-  filename: string
-}
-
-// NOTE: We don't need the loader
-const splitNodeTypes = ['component', 'loader'] as const
-
-// Reusable function to get literal value or resolve variable to literal
-function resolveIdentifier(path: any, node: any) {
-  if (t.isIdentifier(node)) {
-    const binding = path.scope.getBinding(node.name)
-    if (binding) {
-      const declarator = binding.path.node
-      if (t.isObjectExpression(declarator.init)) {
-        return declarator.init
-      } else if (t.isFunctionDeclaration(declarator.init)) {
-        return declarator.init
-      }
-    }
-    return undefined
-  }
-
-  return node
-}
-
-export const splitFile = async ({
-  code,
-  compile,
-  filename,
-}: SplitFileFnArgs): Promise<CompileOutput> => {
-  console.log('Split file [splitFile fn]', code)
-  return compile({
-    code,
-    filename,
-    getBabelConfig: () => ({
-      plugins: [
-        [
-          {
-            visitor: {
-              Program: {
-                enter(
-                  programPath: babel.NodePath<t.Program>,
-                  state: State,
-                ): void {
-                  const splitNodesByType: Record<
-                    SplitNodeType,
-                    t.Node | undefined
-                  > = {
-                    component: undefined,
-                    loader: undefined,
-                  }
-
-                  // Find the node
-                  // NOTE: I'd use a more NextJS approach.
-                  // All the "default exported" fns are the page.
-                  programPath.traverse(
-                    {
-                      CallExpression: (path) => {
-                        if (path.node.callee.type === 'Identifier') {
-                          // TODO: Update this to support just "default exported" fns
-                          if (path.node.callee.name === 'createFileRoute') {
-                            if (
-                              path.parentPath.node.type === 'CallExpression'
-                            ) {
-                              const options = resolveIdentifier(
-                                path,
-                                path.parentPath.node.arguments[0],
-                              )
-
-                              if (t.isObjectExpression(options)) {
-                                options.properties.forEach((prop) => {
-                                  if (t.isObjectProperty(prop)) {
-                                    splitNodeTypes.forEach((type) => {
-                                      if (t.isIdentifier(prop.key)) {
-                                        if (prop.key.name === 'type') {
-                                          splitNodesByType[type] = prop.value
-                                        }
-                                      }
-                                    })
-                                  }
-                                })
-
-                                // Remove all of the options
-                                options.properties = []
-                              }
-                            }
-                          }
-                        }
-                      },
-                    },
-                    state,
-                  )
-
-                  // TODO: We don't need to iterate since we don't support the loader
-                  splitNodeTypes.forEach((splitType) => {
-                    let splitNode = splitNodesByType[splitType]
-
-                    if (!splitNode) {
-                      return
-                    }
-
-                    while (t.isIdentifier(splitNode)) {
-                      const binding = programPath.scope.getBinding(
-                        splitNode.name,
-                      )
-                      splitNode = binding?.path.node
-                    }
-
-                    // Add the node to the program
-                    if (splitNode) {
-                      if (t.isFunctionDeclaration(splitNode)) {
-                        programPath.pushContainer(
-                          'body',
-                          t.variableDeclaration('const', [
-                            t.variableDeclarator(
-                              t.identifier(splitType),
-                              t.functionExpression(
-                                splitNode.id || null,
-                                splitNode.params,
-                                splitNode.body,
-                                splitNode.generator,
-                                splitNode.async,
-                              ),
-                            ),
-                          ]),
-                        )
-                      } else if (
-                        t.isFunctionExpression(splitNode) ||
-                        t.isArrowFunctionExpression(splitNode)
-                      ) {
-                        programPath.pushContainer(
-                          'body',
-                          t.variableDeclaration('const', [
-                            t.variableDeclarator(
-                              t.identifier(splitType),
-                              splitType as any,
-                            ),
-                          ]),
-                        )
-                      } else if (t.isImportSpecifier(splitNode)) {
-                        programPath.pushContainer(
-                          'body',
-                          t.variableDeclaration('const', [
-                            t.variableDeclarator(
-                              t.identifier(splitType),
-                              splitNode.local,
-                            ),
-                          ]),
-                        )
-                      } else {
-                        console.log(splitNode)
-                        throw new Error(
-                          `Unexpected splitNode type ${splitNode.type}`,
-                        )
-                      }
-                    }
-
-                    // If the splitNode exists at the top of the program
-                    // then we need to remove that copy
-                    programPath.node.body = programPath.node.body.filter(
-                      (node) => {
-                        return node !== splitNode
-                      },
-                    )
-
-                    // Export the node
-                    programPath.pushContainer('body', [
-                      t.exportNamedDeclaration(null, [
-                        t.exportSpecifier(
-                          t.identifier(splitType),
-                          t.identifier(splitType),
-                        ),
-                      ]),
-                    ])
-                  })
-
-                  // Convert exports to imports from the original file
-                  programPath.traverse({
-                    ExportNamedDeclaration(path) {
-                      // e.g. export const x = 1 or export { x }
-                      // becomes
-                      // import { x } from '${opts.id}'
-                      if (path.node.declaration) {
-                        if (t.isVariableDeclaration(path.node.declaration)) {
-                          path.replaceWith(
-                            t.importDeclaration(
-                              path.node.declaration.declarations.map((decl) =>
-                                t.importSpecifier(
-                                  t.identifier((decl.id as any).name),
-                                  t.identifier((decl.id as any).name),
-                                ),
-                              ),
-                              t.stringLiteral(
-                                filename.split(`?${SPLIT_PREFIX}`)[0] as string,
-                              ),
-                            ),
-                          )
-                        }
-                      }
-                    },
-                  })
-
-                  eliminateUnreferencedIdentifiers(programPath)
-                },
-              },
-            },
-          },
-        ],
-      ],
-    }),
-  })
-}

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

@@ -1 +0,0 @@
-export const SPLIT_PREFIX = 'sp-'

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

@@ -1,298 +0,0 @@
-// Copied from https://github.com/pcattori/vite-env-only/blob/main/src/dce.ts
-// Adapted with some minor changes for the purpose of this project
-
-import * as t from '@babel/types'
-import type { types as BabelTypes } from '@babel/core'
-import type { NodePath } from '@babel/traverse'
-
-type IdentifierPath = NodePath<BabelTypes.Identifier>
-
-// export function findReferencedIdentifiers(
-//   programPath: NodePath<BabelTypes.Program>,
-// ): Set<IdentifierPath> {
-//   const refs = new Set<IdentifierPath>()
-
-//   function markFunction(
-//     path: NodePath<
-//       | BabelTypes.FunctionDeclaration
-//       | BabelTypes.FunctionExpression
-//       | BabelTypes.ArrowFunctionExpression
-//     >,
-//   ) {
-//     const ident = getIdentifier(path)
-//     if (ident?.node && isIdentifierReferenced(ident)) {
-//       refs.add(ident)
-//     }
-//   }
-
-//   function markImport(
-//     path: NodePath<
-//       | BabelTypes.ImportSpecifier
-//       | BabelTypes.ImportDefaultSpecifier
-//       | BabelTypes.ImportNamespaceSpecifier
-//     >,
-//   ) {
-//     const local = path.get('local')
-//     if (isIdentifierReferenced(local)) {
-//       refs.add(local)
-//     }
-//   }
-
-//   programPath.traverse({
-//     VariableDeclarator(path) {
-//       if (path.node.id.type === 'Identifier') {
-//         const local = path.get('id') as NodePath<BabelTypes.Identifier>
-//         if (isIdentifierReferenced(local)) {
-//           refs.add(local)
-//         }
-//       } else if (path.node.id.type === 'ObjectPattern') {
-//         const pattern = path.get('id') as NodePath<BabelTypes.ObjectPattern>
-
-//         const properties = pattern.get('properties')
-//         properties.forEach((p) => {
-//           const local = p.get(
-//             p.node.type === 'ObjectProperty'
-//               ? 'value'
-//               : p.node.type === 'RestElement'
-//                 ? 'argument'
-//                 : (function () {
-//                     throw new Error('invariant')
-//                   })(),
-//           ) as NodePath<BabelTypes.Identifier>
-//           if (isIdentifierReferenced(local)) {
-//             refs.add(local)
-//           }
-//         })
-//       } else if (path.node.id.type === 'ArrayPattern') {
-//         const pattern = path.get('id') as NodePath<BabelTypes.ArrayPattern>
-
-//         const elements = pattern.get('elements')
-//         elements.forEach((e) => {
-//           let local: NodePath<BabelTypes.Identifier>
-//           if (e.node?.type === 'Identifier') {
-//             local = e as NodePath<BabelTypes.Identifier>
-//           } else if (e.node?.type === 'RestElement') {
-//             local = e.get('argument') as NodePath<BabelTypes.Identifier>
-//           } else {
-//             return
-//           }
-
-//           if (isIdentifierReferenced(local)) {
-//             refs.add(local)
-//           }
-//         })
-//       }
-//     },
-
-//     FunctionDeclaration: markFunction,
-//     FunctionExpression: markFunction,
-//     ArrowFunctionExpression: markFunction,
-//     ImportSpecifier: markImport,
-//     ImportDefaultSpecifier: markImport,
-//     ImportNamespaceSpecifier: markImport,
-//   })
-//   return refs
-// }
-
-/**
- * @param refs - If provided, only these identifiers will be considered for removal.
- */
-export const eliminateUnreferencedIdentifiers = (
-  programPath: NodePath<BabelTypes.Program>,
-  refs?: Set<IdentifierPath>,
-): void => {
-  let referencesRemovedInThisPass: number
-
-  const shouldBeRemoved = (ident: IdentifierPath): boolean => {
-    if (isIdentifierReferenced(ident)) return false
-    if (!refs) return true
-    return refs.has(ident)
-  }
-
-  const sweepFunction = (
-    path: NodePath<
-      | BabelTypes.FunctionDeclaration
-      | BabelTypes.FunctionExpression
-      | BabelTypes.ArrowFunctionExpression
-    >,
-  ): void => {
-    const identifier = getIdentifier(path)
-    if (identifier?.node && shouldBeRemoved(identifier)) {
-      ++referencesRemovedInThisPass
-
-      if (
-        t.isAssignmentExpression(path.parentPath.node) ||
-        t.isVariableDeclarator(path.parentPath.node)
-      ) {
-        path.parentPath.remove()
-      } else {
-        path.remove()
-      }
-    }
-  }
-
-  const sweepImport = (
-    path: NodePath<
-      | BabelTypes.ImportSpecifier
-      | BabelTypes.ImportDefaultSpecifier
-      | BabelTypes.ImportNamespaceSpecifier
-    >,
-  ): void => {
-    const local = path.get('local')
-    if (shouldBeRemoved(local)) {
-      ++referencesRemovedInThisPass
-      path.remove()
-      if (
-        (path.parent as BabelTypes.ImportDeclaration).specifiers.length === 0
-      ) {
-        path.parentPath.remove()
-      }
-    }
-  }
-
-  // Traverse again to remove unused references. This happens at least once,
-  // then repeats until no more references are removed.
-  do {
-    referencesRemovedInThisPass = 0
-
-    programPath.scope.crawl()
-
-    programPath.traverse({
-      VariableDeclarator(path) {
-        if (path.node.id.type === 'Identifier') {
-          const local = path.get('id') as NodePath<BabelTypes.Identifier>
-          if (shouldBeRemoved(local)) {
-            ++referencesRemovedInThisPass
-            path.remove()
-          }
-        } else if (path.node.id.type === 'ObjectPattern') {
-          const pattern = path.get('id') as NodePath<BabelTypes.ObjectPattern>
-
-          const beforeCount = referencesRemovedInThisPass
-          const properties = pattern.get('properties')
-          properties.forEach((property) => {
-            const local = property.get(
-              property.node.type === 'ObjectProperty'
-                ? 'value'
-                : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                  property.node.type === 'RestElement'
-                  ? 'argument'
-                  : (function () {
-                      throw new Error('invariant')
-                    })(),
-            ) as NodePath<BabelTypes.Identifier>
-
-            if (shouldBeRemoved(local)) {
-              ++referencesRemovedInThisPass
-              property.remove()
-            }
-          })
-
-          if (
-            beforeCount !== referencesRemovedInThisPass &&
-            pattern.get('properties').length < 1
-          ) {
-            path.remove()
-          }
-        } else if (path.node.id.type === 'ArrayPattern') {
-          const pattern = path.get('id') as NodePath<BabelTypes.ArrayPattern>
-
-          let hasRemoved = false as boolean
-
-          pattern.get('elements').forEach((element, index) => {
-            // if (!element) return // Skip holes in the pattern
-
-            let identifierPath: NodePath<BabelTypes.Identifier>
-
-            if (t.isIdentifier(element.node)) {
-              identifierPath = element as NodePath<BabelTypes.Identifier>
-            } else if (t.isRestElement(element.node)) {
-              identifierPath = element.get(
-                'argument',
-              ) as NodePath<BabelTypes.Identifier>
-            } else {
-              // For now, ignore other types like AssignmentPattern
-              return
-            }
-
-            if (shouldBeRemoved(identifierPath)) {
-              hasRemoved = true
-              pattern.node.elements[index] = null // Remove the element by setting it to null
-            }
-          })
-
-          // If any elements were removed and no elements are left, remove the entire declaration
-          if (
-            hasRemoved &&
-            pattern.node.elements.every((element) => element === null)
-          ) {
-            path.remove()
-            ++referencesRemovedInThisPass
-          }
-        }
-      },
-      FunctionDeclaration: sweepFunction,
-      FunctionExpression: sweepFunction,
-      ArrowFunctionExpression: sweepFunction,
-      ImportSpecifier: sweepImport,
-      ImportDefaultSpecifier: sweepImport,
-      ImportNamespaceSpecifier: sweepImport,
-    })
-  } while (referencesRemovedInThisPass)
-}
-
-function getIdentifier(
-  path: NodePath<
-    | BabelTypes.FunctionDeclaration
-    | BabelTypes.FunctionExpression
-    | BabelTypes.ArrowFunctionExpression
-  >,
-): NodePath<BabelTypes.Identifier> | null {
-  const parentPath = path.parentPath
-  if (parentPath.type === 'VariableDeclarator') {
-    const variablePath = parentPath as NodePath<BabelTypes.VariableDeclarator>
-    const name = variablePath.get('id')
-    return name.node.type === 'Identifier'
-      ? (name as NodePath<BabelTypes.Identifier>)
-      : null
-  }
-
-  if (parentPath.type === 'AssignmentExpression') {
-    const variablePath = parentPath as NodePath<BabelTypes.AssignmentExpression>
-    const name = variablePath.get('left')
-    return name.node.type === 'Identifier'
-      ? (name as NodePath<BabelTypes.Identifier>)
-      : null
-  }
-
-  if (path.node.type === 'ArrowFunctionExpression') {
-    return null
-  }
-
-  if (path.node.type === 'FunctionExpression') {
-    return null
-  }
-
-  return path.node.id && path.node.id.type === 'Identifier'
-    ? (path.get('id') as NodePath<BabelTypes.Identifier>)
-    : null
-}
-
-function isIdentifierReferenced(
-  ident: NodePath<BabelTypes.Identifier>,
-): boolean {
-  const binding = ident.scope.getBinding(ident.node.name)
-  if (binding?.referenced) {
-    // Functions can reference themselves, so we need to check if there's a
-    // binding outside the function scope or not.
-    if (binding.path.type === 'FunctionDeclaration') {
-      return !binding.constantViolations
-        .concat(binding.referencePaths)
-        // Check that every reference is contained within the function:
-        .every((ref) => ref.findParent((parent) => parent === binding.path))
-    }
-
-    return true
-  }
-  return false
-}

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

@@ -1,117 +0,0 @@
-import { fileURLToPath, pathToFileURL } from 'url'
-import { routeGenerator } from '../routes-generator'
-
-import { normalize } from 'path'
-// eslint-disable-next-line sort-imports
-import { makeCompile, splitFile } from './compiler'
-import { SPLIT_PREFIX } from './constants'
-
-import type { Plugin } from 'vite'
-
-const ROUTES_DIRECTORY_PATH = './src/routes'
-const DEBUG = true
-
-let lock = false
-
-export function RouterGenerator(): Plugin {
-  const generate = async (): Promise<void> => {
-    if (lock) return
-    lock = true
-
-    try {
-      // TODO: generator function
-      console.log('Generating [generate fn]')
-      await routeGenerator()
-    } catch (err) {
-      console.log(err)
-    } finally {
-      lock = false
-    }
-  }
-
-  const handleFile = async (file: string): Promise<void> => {
-    const filePath = normalize(file)
-
-    if (filePath.startsWith(ROUTES_DIRECTORY_PATH)) {
-      // TODO: generator function
-      console.log('Generating [handleFile fn]')
-      await generate()
-    }
-  }
-
-  return {
-    name: 'vite-plugin-tuono-fs-router-generator',
-    configResolved: async (): Promise<void> => {
-      await generate()
-    },
-    watchChange: async (
-      file: string,
-      context: { event: string },
-    ): Promise<void> => {
-      if (['create', 'update', 'delete'].includes(context.event)) {
-        await handleFile(file)
-      }
-    },
-  }
-}
-
-export function RouterCodeSplitter(): Plugin {
-  const ROOT: string = process.cwd()
-  console.log('ROOT', ROOT)
-
-  return {
-    name: 'vite-plugin-tuono-fs-router-code-splitter',
-    enforce: 'pre',
-    resolveId(source): string | null {
-      if (source.startsWith(SPLIT_PREFIX + ':')) {
-        return source.replace(SPLIT_PREFIX + ':', '')
-      }
-      return null
-    },
-    async transform(code, id): Promise<any> {
-      const url = pathToFileURL(id)
-      url.searchParams.delete('v')
-      id = fileURLToPath(url).replace(/\\/g, '/')
-
-      const compile = makeCompile({ root: ROOT })
-
-      if (DEBUG) console.info('Route: ', id)
-
-      if (id.includes(SPLIT_PREFIX)) {
-        console.log('Split')
-        if (DEBUG) console.info('Splitting route: ', id)
-
-        const compiled = await splitFile({
-          code,
-          compile,
-          filename: id,
-        })
-
-        if (DEBUG) {
-          console.info('')
-          console.info('Split Output')
-          console.info('')
-          //console.info(compiled.code)
-          console.info('')
-          console.info('')
-          console.info('')
-          console.info('')
-          console.info('')
-          console.info('')
-          console.info('')
-          console.info('')
-        }
-
-        return compiled
-      } else {
-        console.log('Non split')
-      }
-
-      return null
-    },
-  }
-}
-
-export function ViteFsRouter(): Plugin[] {
-  return [RouterGenerator(), RouterCodeSplitter()]
-}

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,18 @@ import {
   createRouter,
   Link,
   RouterProvider,
+  dynamic,
+  useRouter,
 } from './router'
 
 export type { TuonoProps } from './types'
 
-export { createRoute, createRootRoute, createRouter, Link, RouterProvider }
+export {
+  createRoute,
+  createRootRoute,
+  createRouter,
+  Link,
+  RouterProvider,
+  dynamic,
+  useRouter,
+}