Improve route preloading (#80)

* feat: improve route preloading

* feat: update version to v0.11.2

---------

Co-authored-by: Valerio Ageno <valerio.ageno@qonto.com>

crates/tuono/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono"
-version = "0.11.1"
+version = "0.11.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"

crates/tuono_lib/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono_lib"
-version = "0.11.1"
+version = "0.11.2"
 edition = "2021"
 authors = ["V. Ageno <valerioageno@yahoo.it>"]
 description = "The react/rust fullstack framework"
@@ -33,7 +33,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.11.1"}
+tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.11.2"}
 # 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_macros/Cargo.toml

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

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

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

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

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

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono-router",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "React routing component for the framework tuono. Tuono is the react/rust fullstack framework",
   "scripts": {
     "dev": "vite build --watch",

packages/router/src/dynamic.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import type { ReactElement, ComponentType } from 'react'
 import type { RouteComponent } from './types'
 
 type ImportFn = () => Promise<{ default: React.ComponentType<any> }>
@@ -40,7 +41,18 @@ export const dynamic = (importFn: ImportFn): JSX.Element => {
 }
 
 export const lazyLoadComponent = (factory: ImportFn): RouteComponent => {
-  const Component = React.lazy(factory) as unknown as RouteComponent
-  Component.preload = factory
+  let LoadedComponent: ComponentType<any> | undefined
+  const LazyComponent = React.lazy(factory) as unknown as RouteComponent
+
+  const loadComponent = (): Promise<void> =>
+    factory().then((module) => {
+      LoadedComponent = module.default
+    })
+
+  const Component = (props: any): ReactElement =>
+    React.createElement(LoadedComponent || LazyComponent, props)
+
+  Component.preload = loadComponent
+
   return Component
 }

packages/tuono/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuono",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "The react/rust fullstack framework",
   "scripts": {
     "dev": "vite build --watch",