feat: update version to v0.16.7

Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -32,55 +32,24 @@ body:
       description: If applicable, add screenshots to help explain your problem.
     validations:
       required: false
-  - type: input
+  - type: textarea
-    id: tuono-version
+    id: system-info
     attributes:
-      label: Tuono version
+      label: System Info
-      placeholder: '[e.g. 0.4.0]'
+      description: Output of `npx envinfo --system --npmPackages 'tuono' --binaries --browsers`
+      render: shell
+      placeholder: System, Binaries, Browsers
     validations:
-      required: false
+      required: true
-  - type: input
+  - type: textarea
-    id: os-version
+    id: system-info-rust
     attributes:
-      label: OS
+      label: System info (Rust)
-      placeholder: '[e.g. MacOS, Windows]'
+      description: Output of `rustc --version && cargo --version && tuono --version`
+      render: shell
+      placeholder: 'rustc, cargo and tuono binary version'
     validations:
-      required: false
+      required: true
-  - type: input
-    id: browser-version
-    attributes:
-      label: Browser
-      placeholder: '[e.g. chrome, safari]'
-    validations:
-      required: false
-  - type: input
-    id: node-version
-    attributes:
-      label: Node version
-      placeholder: '[e.g. 20.0.0]'
-    validations:
-      required: false
-  - type: input
-    id: rust-version
-    attributes:
-      label: Rust version
-      placeholder: '[e.g. 1.79.0]'
-    validations:
-      required: false
-  - type: input
-    id: create-version
-    attributes:
-      label: Crate version
-      placeholder: '[e.g. 1.78.0]'
-    validations:
-      required: false
-  - type: input
-    id: node-package-manager-version
-    attributes:
-      label: Node Package Manger version
-      placeholder: '[e.g. pnpm: 9.5.0] '
-    validations:
-      required: false
   - type: textarea
     id: additional-context
     attributes:

.github/workflows/ci-documentation.yml

@@ -37,7 +37,7 @@ jobs:
         uses: actions-rust-lang/setup-rust-toolchain@v1
 
       - name: Install tuono
-        run: cargo install tuono@0.15.0
+        run: cargo install tuono@0.16.4
 
       - name: Build project
         working-directory: ./apps/documentation

.github/workflows/deploy-documentation.yml

@@ -27,7 +27,7 @@ jobs:
         uses: actions-rust-lang/setup-rust-toolchain@v1
 
       - name: Install tuono
-        run: cargo install tuono@0.16.0
+        run: cargo install tuono@0.16.4
 
       - name: Build project
         working-directory: ./apps/documentation

.gitignore

@@ -8,6 +8,8 @@ dist/
 
 examples/*/pnpm-lock.yaml
 
+vite.config.ts.timestamp*
+
 ## Rust related ignores
 
 # Generated by Cargo

.prettierignore

@@ -1 +1,6 @@
-pnpm-lock.yaml
+pnpm-lock.yaml
+
+dist
+.tuono
+
+packages/tuono-lazy-fn-vite-plugin/tests/sources/*

CODEOWNERS

@@ -0,0 +1,9 @@
+*          @Valerioageno @marcalexiei
+
+# Rust
+/crates/    @Valerioageno
+/Cargo.toml @Valerioageno
+
+# Misc
+/.github/   @marcalexiei
+

README.md

@@ -26,7 +26,7 @@ Some of its features are:
 
 ## 📖 Documentation
 
-The [documentation](https://tuono.dev/documentation) is available on
+The [documentation](https://tuono.dev/) is available on
 [tuono.dev](https://tuono.dev/).
 
 ## Introduction

apps/documentation/Cargo.toml

@@ -8,7 +8,7 @@ name = "tuono"
 path = ".tuono/main.rs"
 
 [dependencies]
-tuono_lib = "0.15.0"
+tuono_lib = "0.16.4"
 glob = "0.3.1"
 time = { version = "0.3", features = ["macros"] }
 serde = { version = "1.0.202", features = ["derive"] }

apps/documentation/package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "lint": "eslint .",
-    "format": "prettier -u --write --ignore-unknown .",
+    "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check --ignore-unknown .",
     "types": "tsc --noEmit"
   },
@@ -19,7 +19,7 @@
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tuono": "npm:tuono@0.16.0"
+    "tuono": "npm:tuono@0.16.4"
   },
   "devDependencies": {
     "@mdx-js/rollup": "3.1.0",

apps/documentation/src/components/mdx-provider/mdx-title/mdx-title.tsx

@@ -16,6 +16,12 @@ export default function MdxTitle(props: TitleProps): JSX.Element {
   )
 }
 
-export const h =
+export const h = (
-  (order: 1 | 2 | 3 | 4 | 5 | 6) =>
+  order: 1 | 2 | 3 | 4 | 5 | 6,
-  (props: TitleProps): JSX.Element => <MdxTitle order={order} {...props} />
+): React.ElementType<TitleProps> => {
+  function render(props: TitleProps): JSX.Element {
+    return <MdxTitle order={order} {...props} />
+  }
+  render.displayName = 'H'
+  return render
+}

apps/documentation/src/components/sidebar/config.ts

@@ -111,6 +111,11 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'Defining routes',
         href: '/documentation/routing/defining-routes',
       },
+      {
+        type: 'element',
+        label: 'Dynamic routes',
+        href: '/documentation/routing/dynamic-routes',
+      },
       {
         type: 'element',
         label: 'Link and navigation',
@@ -126,11 +131,6 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'Loading state',
         href: '/documentation/routing/loading-state',
       },
-      {
-        type: 'element',
-        label: 'Dynamic routes',
-        href: '/documentation/routing/dynamic-routes',
-      },
       {
         type: 'element',
         label: 'Layouts',

apps/documentation/src/components/sidebar/sidebar.tsx

@@ -50,26 +50,30 @@ function SidebarElements({ close }: SidebarProps): JSX.Element {
     <AppShell.Section component={ScrollArea}>
       {sidebarElements.map((el, i) => {
         if (el.type === 'divider') {
-          return <Divider my="md" mx={10} />
+          return <Divider key={`${el.type}-${i}`} my="md" mx={10} />
         }
+
         if (el.type === 'title') {
           return (
             <Text
+              key={`${el.type}-${i}`}
               size="xs"
               fw={700}
               fz={12}
               pl={12}
               py={5}
-              children={el.label}
+            >
-            />
+              {el.label}
+            </Text>
           )
         }
+
         if (el.children?.length) {
           return (
             <SidebarLink
+              key={`${el.type}-${i}`}
               href={el.href}
               label={el.label}
-              key={i}
               leftSection={el.leftIcon}
             >
               {el.children.map((child, index) => (
@@ -83,12 +87,13 @@ function SidebarElements({ close }: SidebarProps): JSX.Element {
             </SidebarLink>
           )
         }
+
         return (
           <SidebarLink
+            key={`${el.type}-${i}`}
             href={el.href}
             label={el.label}
             onClick={close}
-            key={i}
           />
         )
       })}

apps/documentation/src/components/table-of-content/table-of-content.tsx

@@ -64,7 +64,9 @@ export function TableOfContents({
       ),
     )
     window.addEventListener('scroll', handleScroll)
-    return (): void => window.removeEventListener('scroll', handleScroll)
+    return (): void => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [router.pathname])
 
   if (filteredHeadings.length === 0) {

apps/documentation/src/components/theme-btn/theme-btn.tsx

@@ -17,9 +17,9 @@ export default function ThemeBtn(): JSX.Element {
 
   return (
     <ActionIcon
-      onClick={() =>
+      onClick={() => {
         setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
-      }
+      }}
       variant="default"
       size="lg"
       aria-label="Toggle color scheme"

apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx

@@ -9,6 +9,53 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs'
 
 <Breadcrumbs breadcrumbs={[{ label: 'Dynamic routes' }]} />
 
-# Loading state
+# Dynamic routes
 
-Todo
+> 🚧 Only available for SSR apps. This feature will be soon available also for static generated apps.
+
+When the exact segment names are not known in advance and you need to generate routes from dynamic data,
+you can use dynamic segments, which are populated at request time.
+
+## Convention
+
+A dynamic segment can be created by wrapping a
+file or a folder name in square brackets: `[segmentName]`.
+
+The dynamic segment can be used in folders as well as file names:
+
+- `src/routes/blog/[slug].tsx`
+- `src/routes/blog/[slug]/index.tsx`
+
+A path can contain multiple dynamic segments, allowing for more flexible routing:
+
+- `src/routes/blog/[post]/[comment].tsx`
+
+### Example
+
+Assuming you're working on a blog with multiple posts,
+you can use a dynamic segment to define the post page: `src/routes/blog/[slug].tsx`.
+
+The `[slug]` is the dynamic segment which will be used to identify individual blog posts.
+
+```tsx
+import { useRouter } from 'tuono'
+
+export default function Page() {
+  const router = useRouter()
+  return <p>Post: {router.pathname}</p>
+}
+```
+
+## Catch all segments
+
+Dynamic Segments can be extended to catch-all subsequent segments by adding
+an ellipsis inside the brackets `[...segmentName]`.
+
+Given the following `src/routes/shop/[...slug].tsx`,
+the following paths will be matched:
+
+- `/shop/clothes`
+- `/shop/clothes/tops`
+- `/shop`
+- `/shop/clothes/tops/t-shirts`
+- and so on.

apps/documentation/tsconfig.json

@@ -32,6 +32,5 @@
     // Completeness
     "skipLibCheck": true
   },
-  "include": ["src", "tuono.config.ts", "postcss.config.js"],
+  "include": ["src", "tuono.config.ts", "postcss.config.js"]
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

apps/documentation/tsconfig.node.json

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

apps/documentation/tuono.config.ts

@@ -7,9 +7,6 @@ const config: TuonoConfig = {
       '@': 'src',
       '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
     },
-    optimizeDeps: {
-      exclude: ['@mdx-js/react'],
-    },
     plugins: [
       { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
     ],

crates/tuono/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono"
-version = "0.16.2"
+version = "0.16.7"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "Superfast React fullstack framework"

crates/tuono/src/lib.rs

@@ -1,3 +1,8 @@
+//! ## Tuono
+//! Tuono is a full-stack web framework for building React applications using Rust as the backend with a strong focus on usability and performance.
+//!
+//! You can find the full documentation at [tuono.dev](https://tuono.dev/)
+
 mod app;
 pub mod cli;
 mod mode;

crates/tuono/src/route.rs

@@ -52,7 +52,7 @@ impl AxumInfo {
                     .replace('/', "_")
                     .replace('-', "_hyphen_")
                     .replace('[', "dyn_")
-                    .replace("...", "_catch_all_")
+                    .replace("...", "catch_all_")
                     .replace(']', ""),
                 axum_route: axum_route
                     .replace("[...", "*")

crates/tuono/src/source_builder.rs

@@ -84,11 +84,11 @@ fn create_routes_declaration(routes: &HashMap<String, Route>) -> String {
 
             if !route.is_api() {
                 route_declarations.push_str(&format!(
-                    r#".route("{axum_route}", get({module_import}::route))"#
+                    r#".route("{axum_route}", get({module_import}::tuono__internal__route))"#
                 ));
 
                 route_declarations.push_str(&format!(
-                    r#".route("/__tuono/data{axum_route}", get({module_import}::api))"#
+                    r#".route("/__tuono/data{axum_route}", get({module_import}::tuono__internal__api))"#
                 ));
             } else {
                 for method in route.api_data.as_ref().unwrap().methods.clone() {

crates/tuono/tests/cli_tests.rs

@@ -30,7 +30,7 @@ fn it_successfully_create_the_index_route() {
     assert!(temp_main_rs_content.contains("mod index;"));
 
     assert!(temp_main_rs_content
-        .contains(r#".route("/", get(index::route)).route("/__tuono/data/", get(index::api))"#));
+        .contains(r#".route("/", get(index::tuono__internal__route)).route("/__tuono/data/", get(index::tuono__internal__api))"#));
 }
 
 #[test]
@@ -120,18 +120,23 @@ fn it_successfully_create_catch_all_routes() {
         fs::read_to_string(&temp_main_rs_path).expect("Failed to read '.tuono/main.rs' content.");
 
     assert!(temp_main_rs_content.contains(r#"#[path="../src/routes/api/[...all_apis].rs"]"#));
-    assert!(temp_main_rs_content.contains("mod api_dyn__catch_all_all_apis;"));
+    assert!(temp_main_rs_content.contains("mod api_dyn_catch_all_all_apis;"));
 
     assert!(temp_main_rs_content.contains(r#"#[path="../src/routes/[...all_routes].rs"]"#));
-    assert!(temp_main_rs_content.contains("mod dyn__catch_all_all_routes;"));
+    assert!(temp_main_rs_content.contains("mod dyn_catch_all_all_routes;"));
 
     assert!(temp_main_rs_content.contains(
-        r#".route("/api/*all_apis", post(api_dyn__catch_all_all_apis::post__tuono_internal_api))"#
+        r#".route("/api/*all_apis", post(api_dyn_catch_all_all_apis::post__tuono_internal_api))"#
+    ));
+
+    assert!(temp_main_rs_content.contains(
+        r#".route("/*all_routes", get(dyn_catch_all_all_routes::tuono__internal__route))"#
+    ));
+
+    assert!(temp_main_rs_content.contains(
+        r#".route("/*all_routes", get(dyn_catch_all_all_routes::tuono__internal__route))"#
     ));
 
     assert!(temp_main_rs_content
-        .contains(r#".route("/*all_routes", get(dyn__catch_all_all_routes::route))"#));
+        .contains(r#".route("/__tuono/data/*all_routes", get(dyn_catch_all_all_routes::tuono__internal__api))"#));
-
-    assert!(temp_main_rs_content
-        .contains(r#".route("/__tuono/data/*all_routes", get(dyn__catch_all_all_routes::api))"#));
 }

crates/tuono_lib/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib"
-version = "0.16.2"
+version = "0.16.7"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "Superfast React fullstack framework"
@@ -32,7 +32,7 @@ either = "1.13.0"
 tower-http = {version = "0.6.0", features = ["fs"]}
 colored = "2.1.0"
 
-tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.16.2"}
+tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.16.7"}
 # Match the same version used by axum
 tokio-tungstenite = "0.24.0"
 futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] }

crates/tuono_lib/src/lib.rs

@@ -1,3 +1,8 @@
+//! ## Tuono
+//! Tuono is a full-stack web framework for building React applications using Rust as the backend with a strong focus on usability and performance.
+//!
+//! You can find the full documentation at [tuono.dev](https://tuono.dev/)
+
 mod catch_all;
 mod logger;
 mod manifest;

crates/tuono_lib_macros/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib_macros"
-version = "0.16.2"
+version = "0.16.7"
 edition = "2021"
 description = "Superfast React fullstack framework"
 homepage = "https://tuono.dev"

crates/tuono_lib_macros/src/handler.rs

@@ -45,7 +45,7 @@ pub fn handler_core(_args: TokenStream, item: TokenStream) -> TokenStream {
 
         #item
 
-        pub async fn route(
+        pub async fn tuono__internal__route(
             #axum_arguments
         ) -> impl tuono_lib::axum::response::IntoResponse {
 
@@ -59,7 +59,7 @@ pub fn handler_core(_args: TokenStream, item: TokenStream) -> TokenStream {
            #fn_name(req.clone(), #argument_names).await.render_to_string(req)
         }
 
-        pub async fn api(
+        pub async fn tuono__internal__api(
             #axum_arguments
         ) -> impl tuono_lib::axum::response::IntoResponse {
 

crates/tuono_lib_macros/src/lib.rs

@@ -1,3 +1,8 @@
+//! ## Tuono
+//! Tuono is a full-stack web framework for building React applications using Rust as the backend with a strong focus on usability and performance.
+//!
+//! You can find the full documentation at [tuono.dev](https://tuono.dev/)
+
 extern crate proc_macro;
 use proc_macro::TokenStream;
 

eslint.config.js

@@ -2,6 +2,9 @@ import eslint from '@eslint/js'
 import tseslint from 'typescript-eslint'
 // @ts-expect-error no types are available for this plugin
 import eslintPluginImport from 'eslint-plugin-import'
+import eslintPluginReact from 'eslint-plugin-react'
+// @ts-expect-error no types are available for this plugin
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
 
 export default tseslint.config(
   {
@@ -13,7 +16,8 @@ export default tseslint.config(
       // #endregion shared
 
       // #region package-specific
-      'packages/fs-router-vite-plugin/tests/generator/**',
+      'packages/tuono-fs-router-vite-plugin/tests/generator/**',
+      'packages/tuono-lazy-fn-vite-plugin/tests/sources/**',
 
       'packages/tuono/bin/**',
       // #endregion package-specific
@@ -24,10 +28,34 @@ export default tseslint.config(
       reportUnusedDisableDirectives: 'error',
     },
   },
+
   eslint.configs.recommended,
+
+  /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access */
   eslintPluginImport.flatConfigs.recommended,
   eslintPluginImport.flatConfigs.typescript,
-  tseslint.configs.recommendedTypeChecked,
+  /* eslint-enable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access */
+
+  // eslint-disable-next-line import/no-named-as-default-member
+  tseslint.configs.strictTypeChecked,
+
+  // @ts-expect-error flat is optional but always defined on runtime
+  eslintPluginReact.configs.flat.recommended,
+  // @ts-expect-error flat is optional but always defined on runtime
+  eslintPluginReact.configs.flat['jsx-runtime'],
+
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    plugins: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      'react-hooks': eslintPluginReactHooks,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+    },
+  },
+
   {
     languageOptions: {
       parserOptions: {
@@ -49,16 +77,13 @@ export default tseslint.config(
     rules: {
       // #region @typescript-eslint
       '@typescript-eslint/array-type': ['error', { default: 'generic' }],
-      '@typescript-eslint/no-wrapper-object-types': 'error',
-      '@typescript-eslint/no-empty-object-type': 'error',
-      '@typescript-eslint/no-unsafe-function-type': 'error',
-      '@typescript-eslint/ban-ts-comment': 'error',
       '@typescript-eslint/consistent-type-definitions': 'error',
       '@typescript-eslint/consistent-type-imports': [
         'error',
         { prefer: 'type-imports' },
       ],
       '@typescript-eslint/explicit-module-boundary-types': 'error',
+      '@typescript-eslint/explicit-function-return-type': 'error',
       '@typescript-eslint/method-signature-style': ['error', 'property'],
       '@typescript-eslint/naming-convention': [
         'error',
@@ -73,19 +98,24 @@ export default tseslint.config(
           },
         },
       ],
-      '@typescript-eslint/no-deprecated': 'error',
       '@typescript-eslint/no-empty-function': 'error',
       '@typescript-eslint/no-empty-interface': 'error',
-      '@typescript-eslint/no-explicit-any': 'off',
+
-      '@typescript-eslint/no-non-null-assertion': 'error',
-      '@typescript-eslint/no-unnecessary-condition': 'error',
-      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
-      '@typescript-eslint/no-unused-vars': 'error',
-      '@typescript-eslint/explicit-function-return-type': 'error',
       '@typescript-eslint/no-inferrable-types': [
         'error',
         { ignoreParameters: true },
       ],
+      '@typescript-eslint/restrict-template-expressions': [
+        'error',
+        {
+          allowAny: false,
+          allowBoolean: false,
+          allowNever: false,
+          allowNullish: false,
+          allowNumber: true,
+          allowRegExp: false,
+        },
+      ],
       // #endregion @typescript-eslint
 
       // #region import
@@ -126,8 +156,10 @@ export default tseslint.config(
       'no-shadow': 'error',
       'no-undef': 'off',
       'sort-imports': 'off',
+      // #endregion misc
     },
   },
+
   {
     files: ['apps/documentation/**'],
     settings: {

examples/tuono-app/tsconfig.json

@@ -20,6 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "tuono.config.ts"],
+  "include": ["src", "tuono.config.ts"]
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

examples/tuono-app/tsconfig.node.json

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

examples/tuono-tutorial/tsconfig.json

@@ -23,6 +23,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "tuono.config.ts"],
+  "include": ["src", "tuono.config.ts"]
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

examples/tuono-tutorial/tsconfig.node.json

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

examples/with-mdx/tsconfig.json

@@ -20,6 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "tuono.config.ts"],
+  "include": ["src", "tuono.config.ts"]
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

examples/with-mdx/tsconfig.node.json

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

package.json

@@ -24,20 +24,15 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "9.15.0",
-    "@tanstack/config": "^0.7.0",
+    "@types/node": "22.10.0",
-    "@types/node": "^22.0.0",
+    "eslint": "9.15.0",
-    "@types/react": "^18.3.13",
+    "eslint-import-resolver-typescript": "3.6.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "eslint-plugin-import": "2.31.0",
-    "eslint": "^9.15.0",
+    "eslint-plugin-react": "7.37.2",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-import": "^2.31.0",
+    "prettier": "3.4.1",
-    "eslint-plugin-react": "^7.33.2",
+    "turbo": "2.2.3",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "prettier": "^3.2.4",
-    "turbo": "^2.2.3",
     "typescript": "5.6.3",
-    "typescript-eslint": "8.15.0",
+    "typescript-eslint": "8.15.0"
-    "vite": "^5.2.11",
-    "vitest": "^2.0.0"
   }
 }

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

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

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

@@ -1,119 +0,0 @@
-import * as babel from '@babel/core'
-import * as t from '@babel/types'
-import type { Plugin } from 'vite'
-import type { PluginItem } from '@babel/core'
-import type {
-  Identifier,
-  CallExpression,
-  ArrowFunctionExpression,
-  StringLiteral,
-} from '@babel/types'
-
-import {
-  TUONO_MAIN_PACKAGE,
-  TUONO_DYNAMIC_FN_ID,
-  TUONO_LAZY_FN_ID,
-} from './constants'
-import { isTuonoDynamicFnImported } from './utils'
-
-/**
- * [SERVER build]
- * 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 (isTuonoDynamicFnImported(path)) {
-        path.remove()
-      }
-    },
-  },
-}
-
-/**
- * [CLIENT build]
- * This plugin replace the `dynamic` function with the `lazyLoadComponent` one
- */
-const ReplaceTuonoLazyImport: PluginItem = {
-  name: 'remove-tuono-lazy-import-plugin',
-  visitor: {
-    ImportSpecifier: (path) => {
-      if (isTuonoDynamicFnImported(path)) {
-        ;(path.node.imported as Identifier).name = TUONO_LAZY_FN_ID
-      }
-    },
-  },
-}
-
-const turnLazyIntoStatic = {
-  VariableDeclaration: (path: babel.NodePath<t.VariableDeclaration>): void => {
-    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)
-        }
-      }
-    })
-  },
-}
-
-/**
- * [SERVER build]
- * This plugin statically imports the lazy loaded components
- */
-const TurnLazyIntoStaticImport: PluginItem = {
-  name: 'turn-lazy-into-static-import-plugin',
-  visitor: {
-    Program: (path) => {
-      path.traverse({
-        ImportSpecifier: (subPath) => {
-          if (isTuonoDynamicFnImported(subPath)) {
-            path.traverse(turnLazyIntoStatic)
-          }
-        },
-      })
-    },
-  },
-}
-
-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 }],
-            [!opts?.ssr ? ReplaceTuonoLazyImport : []],
-            [opts?.ssr ? RemoveTuonoLazyImport : []],
-            [opts?.ssr ? TurnLazyIntoStaticImport : []],
-          ],
-          sourceMaps: true,
-        })
-
-        return res?.code
-      }
-      return code
-    },
-  }
-}

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

@@ -1,22 +0,0 @@
-import type {
-  Identifier,
-  ImportDeclaration,
-  ImportSpecifier,
-} from '@babel/types'
-
-import { TUONO_MAIN_PACKAGE, TUONO_DYNAMIC_FN_ID } from './constants'
-
-export const isTuonoDynamicFnImported = (
-  path: babel.NodePath<ImportSpecifier>,
-): boolean => {
-  if ((path.node.imported as Identifier).name !== TUONO_DYNAMIC_FN_ID) {
-    return false
-  }
-  if (
-    (path.parentPath.node as ImportDeclaration).source.value !==
-    TUONO_MAIN_PACKAGE
-  ) {
-    return false
-  }
-  return true
-}

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

@@ -1,77 +0,0 @@
-import { it, expect, describe } from 'vitest'
-import type { Plugin } from 'vite'
-
-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 NON_DYNAMIC_SOURCE = `
-import { createRoute } from 'tuono'
-import {dynamic} from 'external-lib'
-
-const IndexImport = dynamic(() => import('./../src/routes/index'))
-const PokemonspokemonImport = dynamic(
-  () => import('./../src/routes/pokemons/[pokemon]'),
-)
-`
-
-type ViteTransformHandler = Exclude<
-  Plugin['transform'],
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-  Function | undefined
->['handler']
-
-// Create a type-safe transform method
-function getTransform(): (...args: Parameters<ViteTransformHandler>) => string {
-  return LazyLoadingPlugin().transform as never
-}
-
-describe('Transpile tuono source', () => {
-  it('Into the client bundle', () => {
-    const pluginTransform = getTransform()
-    const bundle = pluginTransform(SOURCE_CODE, 'id')
-    expect(bundle)
-      .toBe(`import { createRoute, lazyLoadComponent as dynamic } from 'tuono';
-const IndexImport = dynamic(() => import('./../src/routes/index'));
-const PokemonspokemonImport = dynamic(() => import('./../src/routes/pokemons/[pokemon]'));`)
-  })
-
-  it('Into the server bundle', () => {
-    const pluginTransform = getTransform()
-    const bundle = pluginTransform(SOURCE_CODE, 'id', {
-      ssr: true,
-    })
-    expect(bundle).toBe(`import { createRoute } from 'tuono';
-import IndexImport from "./../src/routes/index";
-import PokemonspokemonImport from "./../src/routes/pokemons/[pokemon]";`)
-  })
-})
-
-describe('Non tuono dynamic function', () => {
-  it('Into the client bundle', () => {
-    const pluginTransform = getTransform()
-    const bundle = pluginTransform(NON_DYNAMIC_SOURCE, 'id')
-    expect(bundle).toBe(`import { createRoute } from 'tuono';
-import { dynamic } from 'external-lib';
-const IndexImport = dynamic(() => import('./../src/routes/index'));
-const PokemonspokemonImport = dynamic(() => import('./../src/routes/pokemons/[pokemon]'));`)
-  })
-
-  it('Into the server bundle', () => {
-    const pluginTransform = getTransform()
-    const bundle = pluginTransform(NON_DYNAMIC_SOURCE, 'id', {
-      ssr: true,
-    })
-    expect(bundle).toBe(`import { createRoute } from 'tuono';
-import { dynamic } from 'external-lib';
-const IndexImport = dynamic(() => import('./../src/routes/index'));
-const PokemonspokemonImport = dynamic(() => import('./../src/routes/pokemons/[pokemon]'));`)
-  })
-})

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

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

packages/router/.prettierignore

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

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

@@ -1,6 +1,6 @@
 {
   "name": "tuono-fs-router-vite-plugin",
-  "version": "0.16.2",
+  "version": "0.16.7",
   "description": "Plugin for the tuono's file system router. Tuono is the react/rust fullstack framework",
   "homepage": "https://tuono.dev",
   "scripts": {
@@ -16,7 +16,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tuono-labs/tuono.git",
-    "directory": "packages/fs-router-vite-plugin"
+    "directory": "packages/tuono-fs-router-vite-plugin"
   },
   "keywords": [],
   "author": "Valerio Ageno",
@@ -50,7 +50,7 @@
     "vite": "^5.2.11"
   },
   "devDependencies": {
-    "@tanstack/config": "^0.7.11",
+    "@tanstack/config": "0.7.13",
     "@types/babel__core": "^7.20.5",
     "vitest": "^2.0.0"
   }

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

@@ -6,13 +6,13 @@ const routes = [
   {
     filePath: 'posts/my-post.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
     routePath: '/posts/my-post',
     variableName: 'PostsMyPost',
     parent: {
       filePath: 'posts/__root.tsx',
       fullPath:
-        '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+        '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
       routePath: '/posts/__root',
       variableName: 'Postsroot',
       path: '/posts/__root',
@@ -25,13 +25,13 @@ const routes = [
   {
     filePath: 'posts/index.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
     routePath: '/posts/',
     variableName: 'PostsIndex',
     parent: {
       filePath: 'posts/__root.tsx',
       fullPath:
-        '/home/valerio/Documents/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+        '/home/valerio/Documents/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
       routePath: '/posts/__root',
       variableName: 'Postsroot',
       path: '/posts/__root',
@@ -44,13 +44,13 @@ const routes = [
   {
     filePath: 'posts/[post].tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
     routePath: '/posts/',
     variableName: 'PostspostIndex',
     parent: {
       filePath: 'posts/__root.tsx',
       fullPath:
-        '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+        '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
       routePath: '/posts/__root',
       variableName: 'Postsroot',
       path: '/posts/__root',

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

@@ -3,7 +3,7 @@ import type { RouteNode } from './types'
 
 export function buildRouteConfig(nodes: Array<RouteNode>, depth = 1): string {
   const children = nodes.map((node) => {
-    const route = `${node.variableName}Route`
+    const route = `${node.variableName as string}Route`
 
     if (node.children?.length) {
       const childConfigs = buildRouteConfig(node.children, depth + 1)

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

@@ -157,14 +157,14 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
     (d): number => (d.routePath.includes(`/${ROOT_PATH_ID}`) ? -1 : 1),
     (d): number => d.routePath.split('/').length,
     (d): number => (d.routePath.endsWith("index'") ? -1 : 1),
-    (d): any => d,
+    (d): RouteNode => d,
   ])
 
   const imports = [
     ...sortedRouteNodes.map((node) => {
       const extension = node.filePath.endsWith('mdx') ? '.mdx' : ''
       return `const ${
-        node.variableName
+        node.variableName as string
       }Import = dynamic(() => import('./${replaceBackslash(
         removeExt(
           path.relative(
@@ -181,18 +181,21 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
     ...sortedRouteNodes.map((node) => {
       const isRoot = node.routePath.endsWith(ROOT_PATH_ID)
       const rootDeclaration = isRoot ? ', isRoot: true' : ''
+      const variableName = node.variableName as string
 
-      return `const ${node.variableName} = createRoute({ component: ${node.variableName}Import${rootDeclaration} })`
+      return `const ${variableName} = createRoute({ component: ${variableName}Import${rootDeclaration} })`
     }),
   ].join('\n')
 
   const createRouteUpdates = [
     sortedRouteNodes
       .map((node) => {
+        const variableName = node.variableName as string
+        const cleanedPath = node.cleanedPath as string
         return [
-          `const ${node.variableName}Route = ${node.variableName}.update({
+          `const ${variableName}Route = ${variableName}.update({
           ${[
-            !node.path?.endsWith(ROOT_PATH_ID) && `path: '${node.cleanedPath}'`,
+            !node.path?.endsWith(ROOT_PATH_ID) && `path: '${cleanedPath}'`,
             `getParentRoute: () => ${node.parent?.variableName ?? 'root'}Route`,
             rustHandlersNodes.includes(node.path || '')
               ? 'hasHandler: true'
@@ -236,7 +239,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
   const routeTreeContent = await fsp
     .readFile(path.resolve(config.generatedRouteTree), 'utf-8')
-    .catch((e) => {
+    .catch((e: unknown) => {
       const err = e as Error & { code?: string }
       if (err.code === 'ENOENT') {
         return undefined

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

@@ -6,7 +6,7 @@ const routes = [
   {
     filePath: 'posts/[post].tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
     routePath: '/posts/[post]',
     variableName: 'Postspost',
     path: '/posts/[post]',
@@ -15,7 +15,7 @@ const routes = [
   {
     filePath: 'posts/__root.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
     routePath: '/posts/__root',
     variableName: 'Postsroot',
     path: '/posts/__root',
@@ -24,7 +24,7 @@ const routes = [
   {
     filePath: 'index.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/index.tsx',
     routePath: '/',
     variableName: 'Index',
     path: '/',
@@ -33,7 +33,7 @@ const routes = [
   {
     filePath: 'posts/my-post.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
     routePath: '/posts/my-post',
     variableName: 'PostsMyPost',
     path: '/posts/my-post',
@@ -44,7 +44,7 @@ const routes = [
 const parent = {
   filePath: 'posts/__root.tsx',
   fullPath:
-    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
+    '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
   routePath: '/posts/__root',
   variableName: 'Postsroot',
   path: '/posts/__root',
@@ -54,7 +54,7 @@ const parent = {
 const myPost = {
   filePath: 'posts/my-post.tsx',
   fullPath:
-    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
+    '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
   routePath: '/posts/my-post',
   variableName: 'PostsMyPost',
   path: '/posts/my-post',
@@ -64,7 +64,7 @@ const myPost = {
 const dynamicRoute = {
   filePath: 'posts/[post].tsx',
   fullPath:
-    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
+    '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
   routePath: '/posts/[post]',
   variableName: 'Postspost',
   path: '/posts/[post]',

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

@@ -6,7 +6,7 @@ const routes = [
   {
     filePath: 'index.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
     routePath: '/',
     variableName: 'Index',
     path: '/',
@@ -15,7 +15,7 @@ const routes = [
   {
     filePath: 'about.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
     routePath: '/about',
     variableName: 'About',
     path: '/about',
@@ -24,35 +24,35 @@ const routes = [
   {
     filePath: '__root.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/__root.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/__root.tsx',
     routePath: '/__root',
     variableName: 'root',
   },
   {
     filePath: 'posts/[post].tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
     routePath: '/posts/[post]',
     variableName: 'Postspost',
   },
   {
     filePath: 'posts/my-post.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
     routePath: '/posts/my-post',
     variableName: 'PostsMyPost',
   },
   {
     filePath: 'posts/index.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
     routePath: '/posts/',
     variableName: 'PostsIndex',
   },
   {
     filePath: 'posts/__root.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
     routePath: '/posts/__root',
     variableName: 'Postsroot',
   },
@@ -62,7 +62,7 @@ const expectedSorting = [
   {
     filePath: 'index.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
     routePath: '/',
     variableName: 'Index',
     path: '/',
@@ -71,7 +71,7 @@ const expectedSorting = [
   {
     filePath: 'about.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
     routePath: '/about',
     variableName: 'About',
     path: '/about',
@@ -80,28 +80,28 @@ const expectedSorting = [
   {
     filePath: 'posts/__root.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
     routePath: '/posts/__root',
     variableName: 'Postsroot',
   },
   {
     filePath: 'posts/my-post.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
     routePath: '/posts/my-post',
     variableName: 'PostsMyPost',
   },
   {
     filePath: 'posts/index.tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
     routePath: '/posts/',
     variableName: 'PostsIndex',
   },
   {
     filePath: 'posts/[post].tsx',
     fullPath:
-      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
+      '/tuono/packages/tuono-fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
     routePath: '/posts/[post]',
     variableName: 'Postspost',
   },

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

@@ -5,7 +5,7 @@ import { describe, it, expect } from 'vitest'
 import { routeGenerator } from '../src/generator'
 
 describe('generator works', async () => {
-  const folderNames = await fs.readdir(process.cwd() + '/tests/generator')
+  const folderNames = await fs.readdir(`${process.cwd()}/tests/generator`)
 
   it.each(folderNames)(
     'should wire-up the routes for a "%s" tree',

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

@@ -1,14 +1,14 @@
 {
   "name": "tuono-lazy-fn-vite-plugin",
-  "version": "0.16.2",
+  "version": "0.16.7",
   "description": "Plugin for the tuono's lazy fn. Tuono is the react/rust fullstack framework",
   "homepage": "https://tuono.dev",
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
     "lint": "eslint .",
-    "format": "prettier -u --write --ignore-unknown '**/*'",
+    "format": "prettier --write --ignore-unknown --ignore-path ../../.prettierignore .",
-    "format:check": "prettier --check --ignore-unknown '**/*'",
+    "format:check": "prettier --check --ignore-unknown --ignore-path ../../.prettierignore .",
     "types": "tsc --noEmit",
     "test:watch": "vitest",
     "test": "vitest run"
@@ -16,7 +16,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tuono-labs/tuono.git",
-    "directory": "packages/lazy-fn-vite-plugin"
+    "directory": "packages/tuono-lazy-fn-vite-plugin"
   },
   "keywords": [],
   "author": "Valerio Ageno",
@@ -49,7 +49,7 @@
     "vite": "^5.2.11"
   },
   "devDependencies": {
-    "@tanstack/config": "^0.7.11",
+    "@tanstack/config": "0.7.13",
     "@types/babel__core": "^7.20.5",
     "prettier": "^3.2.4",
     "vitest": "^2.0.0"

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

@@ -1,3 +1,3 @@
 export const TUONO_DYNAMIC_FN_ID = 'dynamic'
-export const TUONO_LAZY_FN_ID = 'lazyLoadComponent'
+export const TUONO_LAZY_FN_ID = '__tuono__internal__lazyLoadComponent'
 export const TUONO_MAIN_PACKAGE = 'tuono'

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

@@ -0,0 +1,169 @@
+import { transformSync } from '@babel/core'
+import type { PluginItem as BabelPluginItem } from '@babel/core'
+import * as BabelTypes from '@babel/types'
+import { createFilter } from 'vite'
+import type { Plugin as VitePlugin, Rollup, FilterPattern } from 'vite'
+
+import {
+  TUONO_MAIN_PACKAGE,
+  TUONO_DYNAMIC_FN_ID,
+  TUONO_LAZY_FN_ID,
+} from './constants'
+import { isTuonoDynamicFnImported } from './utils'
+
+/**
+ * [SERVER build]
+ * This plugin just removes the `dynamic` imported function from any tuono import
+ */
+const RemoveTuonoLazyImport: BabelPluginItem = {
+  name: 'remove-tuono-lazy-import-plugin',
+  visitor: {
+    ImportDeclaration: (path) => {
+      const importNode = path.node
+      if (importNode.source.value !== TUONO_MAIN_PACKAGE) return
+
+      path.traverse({
+        ImportSpecifier: (importSpecifierPath) => {
+          if (isTuonoDynamicFnImported(importSpecifierPath)) {
+            importSpecifierPath.remove()
+          }
+        },
+      })
+
+      // If there are no specifiers left after traverse
+      // remove the import to avoid unwanted side effects
+      if (importNode.specifiers.length === 0) {
+        path.remove()
+      }
+    },
+  },
+}
+
+/**
+ * [CLIENT build]
+ * This plugin replace the `dynamic` function with the `__tuono__internal__lazyLoadComponent` one
+ */
+const ReplaceTuonoLazyImport: BabelPluginItem = {
+  name: 'replace-tuono-lazy-import-plugin',
+  visitor: {
+    ImportSpecifier: (path) => {
+      if (
+        BabelTypes.isIdentifier(path.node.imported) &&
+        isTuonoDynamicFnImported(path)
+      ) {
+        path.node.imported.name = TUONO_LAZY_FN_ID
+      }
+    },
+  },
+}
+
+const turnLazyIntoStatic = {
+  VariableDeclaration: (
+    path: babel.NodePath<BabelTypes.VariableDeclaration>,
+  ): void => {
+    path.node.declarations.forEach((variableDeclarationNode) => {
+      const init = variableDeclarationNode.init
+
+      if (
+        BabelTypes.isCallExpression(init) &&
+        // ensures that the method call is `TUONO_DYNAMIC_FN_ID`
+        BabelTypes.isIdentifier(init.callee, { name: TUONO_DYNAMIC_FN_ID }) &&
+        // import name must be an identifier
+        BabelTypes.isIdentifier(variableDeclarationNode.id) &&
+        // check that the first function parameter is an arrow function
+        BabelTypes.isArrowFunctionExpression(init.arguments[0])
+      ) {
+        const cmpImportFn = init.arguments[0]
+
+        // ensures that the first parameter is a call expression (may be a block statement)
+        if (!BabelTypes.isCallExpression(cmpImportFn.body)) return
+        // ensures that the first parameter is a string literal (the import path)
+        if (!BabelTypes.isStringLiteral(cmpImportFn.body.arguments[0])) return
+
+        const importName = variableDeclarationNode.id.name
+        const importPath = cmpImportFn.body.arguments[0].value
+
+        if (importName && importPath) {
+          const importDeclaration = BabelTypes.importDeclaration(
+            [
+              BabelTypes.importDefaultSpecifier(
+                BabelTypes.identifier(importName),
+              ),
+            ],
+            BabelTypes.stringLiteral(importPath),
+          )
+
+          path.replaceWith(importDeclaration)
+        }
+      }
+    })
+  },
+}
+
+/**
+ * [SERVER build]
+ * This plugin statically imports the lazy loaded components
+ */
+const TurnLazyIntoStaticImport: BabelPluginItem = {
+  name: 'turn-lazy-into-static-import-plugin',
+  visitor: {
+    Program: (path) => {
+      path.traverse({
+        ImportSpecifier: (subPath) => {
+          if (isTuonoDynamicFnImported(subPath)) {
+            path.traverse(turnLazyIntoStatic)
+          }
+        },
+      })
+    },
+  },
+}
+
+interface LazyLoadingPluginOptions {
+  include: FilterPattern
+}
+
+export function LazyLoadingPlugin(
+  options: LazyLoadingPluginOptions,
+): VitePlugin {
+  const { include } = options
+
+  const filter = createFilter(include)
+
+  return {
+    name: 'vite-plugin-tuono-lazy-loading',
+    enforce: 'pre',
+    transform(code, id, opts): Rollup.TransformResult {
+      if (!filter(id)) return
+
+      /**
+       * @todo we should exclude non tsx files from this transformation
+       *       this might benefit build time avoiding running `includes` on non-tsx files.
+       *       This can be executed using `_id` parameter
+       *       which is the filepath that is being processed
+       */
+
+      if (
+        code.includes(TUONO_DYNAMIC_FN_ID) &&
+        code.includes(TUONO_MAIN_PACKAGE)
+      ) {
+        const plugins: Array<BabelPluginItem> = [
+          ['@babel/plugin-syntax-jsx', {}],
+          ['@babel/plugin-syntax-typescript', { isTSX: true }],
+        ]
+
+        if (opts?.ssr) {
+          plugins.push(RemoveTuonoLazyImport, TurnLazyIntoStaticImport)
+        } else {
+          plugins.push(ReplaceTuonoLazyImport)
+        }
+
+        const res = transformSync(code, { plugins })
+
+        return res?.code
+      }
+
+      return code
+    },
+  }
+}

packages/tuono-lazy-fn-vite-plugin/src/utils.ts

@@ -0,0 +1,25 @@
+import {
+  isIdentifier,
+  isImportDeclaration,
+  isImportSpecifier,
+} from '@babel/types'
+
+import { TUONO_MAIN_PACKAGE, TUONO_DYNAMIC_FN_ID } from './constants'
+
+/**
+ * By a given AST Node path returns true if the path involves an import specifier
+ * importing {@link TUONO_DYNAMIC_FN_ID}
+ */
+export const isTuonoDynamicFnImported = (path: babel.NodePath): boolean => {
+  // If the node isn't an import declaration there is no need to process it
+  if (!isImportDeclaration(path.parentPath?.node)) return false
+
+  // if the import doesn't import from 'tuono' we don't need to process it
+  if (path.parentPath.node.source.value !== TUONO_MAIN_PACKAGE) return false
+
+  // ensure that we are processing an import specifier
+  if (!isImportSpecifier(path.node)) return false
+
+  // finally check if the imported item is `TUONO_DYNAMIC_FN_ID`
+  return isIdentifier(path.node.imported, { name: TUONO_DYNAMIC_FN_ID })
+}

packages/tuono-lazy-fn-vite-plugin/tests/sources/dynamic-only/client.expected.tsx

@@ -0,0 +1,9 @@
+import React, { Suspense, type JSX } from "react";
+import { __tuono__internal__lazyLoadComponent as dynamic } from "tuono";
+const DynamicComponent = dynamic(() => import("../components/DynamicComponent"));
+const Loading = (): JSX.Element => <>Loading</>;
+export default function IndexPage(): JSX.Element {
+  return <Suspense fallback={<Loading />}>
+			<DynamicComponent />
+		</Suspense>;
+}

packages/tuono-lazy-fn-vite-plugin/tests/sources/dynamic-only/server.expected.tsx

@@ -0,0 +1,8 @@
+import React, { Suspense, type JSX } from "react";
+import DynamicComponent from "../components/DynamicComponent";
+const Loading = (): JSX.Element => <>Loading</>;
+export default function IndexPage(): JSX.Element {
+  return <Suspense fallback={<Loading />}>
+			<DynamicComponent />
+		</Suspense>;
+}

packages/tuono-lazy-fn-vite-plugin/tests/sources/dynamic-only/source.tsx

@@ -0,0 +1,14 @@
+import React, { Suspense, type JSX } from "react";
+import { dynamic } from "tuono";
+
+const DynamicComponent = dynamic(() => import("../components/DynamicComponent"))
+
+const Loading = (): JSX.Element => <>Loading</>
+
+export default function IndexPage(): JSX.Element {
+	return (
+		<Suspense fallback={<Loading />}>
+			<DynamicComponent />
+		</Suspense>
+	);
+}

packages/tuono-lazy-fn-vite-plugin/tests/sources/external-dynamic/client.expected.tsx

@@ -0,0 +1,4 @@
+import { createRoute } from 'tuono';
+import { dynamic } from 'external-lib';
+const IndexImport = dynamic(() => import('./../src/routes/index'));
+const PokemonspokemonImport = dynamic(() => import('./../src/routes/pokemons/[pokemon]'));

packages/tuono-lazy-fn-vite-plugin/tests/sources/external-dynamic/server.expected.tsx

@@ -0,0 +1,4 @@
+import { createRoute } from 'tuono';
+import { dynamic } from 'external-lib';
+const IndexImport = dynamic(() => import('./../src/routes/index'));
+const PokemonspokemonImport = dynamic(() => import('./../src/routes/pokemons/[pokemon]'));

packages/tuono-lazy-fn-vite-plugin/tests/sources/external-dynamic/source.tsx

@@ -0,0 +1,7 @@
+import { createRoute } from 'tuono'
+import { dynamic } from 'external-lib'
+
+const IndexImport = dynamic(() => import('./../src/routes/index'))
+const PokemonspokemonImport = dynamic(
+	() => import('./../src/routes/pokemons/[pokemon]'),
+)

packages/tuono-lazy-fn-vite-plugin/tests/sources/vanilla/client.expected.tsx

@@ -0,0 +1,3 @@
+import { createRoute, __tuono__internal__lazyLoadComponent as dynamic } from 'tuono';
+const IndexImport = dynamic(() => import('./../src/routes/index'));
+const PokemonspokemonImport = dynamic(() => import('./../src/routes/pokemons/[pokemon]'));

packages/tuono-lazy-fn-vite-plugin/tests/sources/vanilla/server.expected.tsx

@@ -0,0 +1,3 @@
+import { createRoute } from 'tuono';
+import IndexImport from "./../src/routes/index";
+import PokemonspokemonImport from "./../src/routes/pokemons/[pokemon]";

packages/tuono-lazy-fn-vite-plugin/tests/sources/vanilla/source.tsx

@@ -0,0 +1,6 @@
+import { createRoute, dynamic } from 'tuono'
+
+const IndexImport = dynamic(() => import('./../src/routes/index'))
+const PokemonspokemonImport = dynamic(
+	() => import('./../src/routes/pokemons/[pokemon]'),
+)

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

@@ -0,0 +1,94 @@
+import fs from 'node:fs/promises'
+import os from 'node:os'
+
+import { it, expect, describe } from 'vitest'
+import type { Plugin } from 'vite'
+
+import { LazyLoadingPlugin } from '../src'
+
+type ViteTransformHandler = Exclude<
+  Plugin['transform'],
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  Function | undefined
+>['handler']
+
+// Create a type-safe transform method
+function getTransform(): (...args: Parameters<ViteTransformHandler>) => string {
+  /** @warning Keep in sync with {@link createBaseViteConfigFromTuonoConfig} */
+  const pluginFilesInclude = /\.(jsx|js|mdx|md|tsx|ts)$/
+
+  return LazyLoadingPlugin({ include: pluginFilesInclude }).transform as never
+}
+
+describe('"dynamic" sources', async () => {
+  const folderNames = await fs.readdir(`${process.cwd()}/tests/sources`)
+
+  describe.each(folderNames)('%s', async (folderName) => {
+    const testDirPath = `${process.cwd()}/tests/sources/${folderName}`
+
+    const sourceFilePath = `${testDirPath}/source.tsx`
+
+    const sourceRaw = await fs.readFile(sourceFilePath, 'utf-8')
+    /**
+     * When adding `packages/lazy-fn-vite-plugin/tests/sources/dynamic-only` only
+     * the test involving that fixture were broken on Windows... but not the one in the other fixtures:
+     * - packages/lazy-fn-vite-plugin/tests/sources/vanilla
+     * - packages/lazy-fn-vite-plugin/tests/sources/external-dynamic
+     *
+     * Awkwardly this doesn't happen on  `packages/fs-router-vite-plugin/tests/generator.spec.ts`
+     *
+     * Too much pain and sadness to investigate this right now.
+     * Might worth creating an utility function in the future if this happens again
+     */
+    const source = sourceRaw.replace(new RegExp(os.EOL, 'g'), '\n')
+
+    it('should generate file for client', async () => {
+      const pluginTransform = getTransform()
+      const clientBundle = pluginTransform(source, sourceFilePath)
+
+      const expectedClientSrc = `${testDirPath}/client.expected.tsx`
+
+      await expect(clientBundle).toMatchFileSnapshot(
+        expectedClientSrc,
+        `${testDirPath} client build should be equal to ${expectedClientSrc}`,
+      )
+    })
+
+    it('should generate file for server', async () => {
+      const pluginTransform = getTransform()
+      const serverBundle = pluginTransform(source, sourceFilePath, {
+        ssr: true,
+      })
+
+      const expectedServerSrc = `${testDirPath}/server.expected.tsx`
+
+      await expect(serverBundle).toMatchFileSnapshot(
+        expectedServerSrc,
+        `${testDirPath} server build should be equal to ${expectedServerSrc}`,
+      )
+    })
+  })
+})
+
+describe('not valid file should not be processed', () => {
+  const notValidFiles: Array<string> = [
+    'src/styles/module.css',
+    'src/pages/file-without-ext',
+    'src/pages/file-with-invalid-ext',
+    'src/components/fileWithInvalidExt',
+    'src/components/sidebar/sidebar-link.module.css',
+  ]
+
+  it.each(notValidFiles)('"%s"', (fileName) => {
+    const pluginTransform = getTransform()
+
+    const code = [
+      "import { createRoute, dynamic } from 'tuono'",
+      "const IndexImport = dynamic(() => import('./../src/routes/index'))",
+    ].join('\n')
+
+    const result = pluginTransform(code, fileName)
+
+    expect(result).toBeUndefined()
+  })
+})