From 9835a4c0d109bd0360384c1afb95cfd125ad9ae0 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:26:52 +0200 Subject: [PATCH] fix: route switch wrappers re-rendering (#23) * fix: route switch wrappers re-rendering * feat: update version to v0.8.4 --- crates/tuono/Cargo.toml | 2 +- crates/tuono_lib/Cargo.toml | 4 +- crates/tuono_lib_macros/Cargo.toml | 2 +- packages/fs-router-vite-plugin/package.json | 2 +- packages/lazy-fn-vite-plugin/package.json | 2 +- packages/router/package.json | 2 +- packages/router/src/components/RouteMatch.tsx | 71 +++++++++++-------- packages/router/src/route.ts | 3 +- packages/router/src/types.ts | 7 ++ packages/tuono/package.json | 2 +- 10 files changed, 60 insertions(+), 37 deletions(-) diff --git a/crates/tuono/Cargo.toml b/crates/tuono/Cargo.toml index 6e3334fa..f9be796c 100644 --- a/crates/tuono/Cargo.toml +++ b/crates/tuono/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "tuono" -version = "0.8.3" +version = "0.8.4" edition = "2021" authors = ["V. Ageno "] description = "The react/rust fullstack framework" diff --git a/crates/tuono_lib/Cargo.toml b/crates/tuono_lib/Cargo.toml index 146b2e5a..80a46049 100644 --- a/crates/tuono_lib/Cargo.toml +++ b/crates/tuono_lib/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "tuono_lib" -version = "0.8.3" +version = "0.8.4" edition = "2021" authors = ["V. Ageno "] description = "The react/rust fullstack framework" @@ -32,7 +32,7 @@ regex = "1.10.5" either = "1.13.0" tower-http = {version = "0.5.2", features = ["fs"]} -tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.8.3"} +tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.8.4"} # Match the same version used by axum tokio-tungstenite = "0.21.0" futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] } diff --git a/crates/tuono_lib_macros/Cargo.toml b/crates/tuono_lib_macros/Cargo.toml index a50a4bab..8d1b9e46 100644 --- a/crates/tuono_lib_macros/Cargo.toml +++ b/crates/tuono_lib_macros/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "tuono_lib_macros" -version = "0.8.3" +version = "0.8.4" edition = "2021" description = "The react/rust fullstack framework" keywords = [ "react", "typescript", "fullstack", "web", "ssr"] diff --git a/packages/fs-router-vite-plugin/package.json b/packages/fs-router-vite-plugin/package.json index 84fd02cd..ace1d93c 100644 --- a/packages/fs-router-vite-plugin/package.json +++ b/packages/fs-router-vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "tuono-fs-router-vite-plugin", - "version": "0.8.3", + "version": "0.8.4", "description": "Plugin for the tuono's file system router. Tuono is the react/rust fullstack framework", "scripts": { "dev": "vite build --watch", diff --git a/packages/lazy-fn-vite-plugin/package.json b/packages/lazy-fn-vite-plugin/package.json index ff700374..3e5ad0a1 100644 --- a/packages/lazy-fn-vite-plugin/package.json +++ b/packages/lazy-fn-vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "tuono-lazy-fn-vite-plugin", - "version": "0.8.3", + "version": "0.8.4", "description": "Plugin for the tuono's lazy fn. Tuono is the react/rust fullstack framework", "scripts": { "dev": "vite build --watch", diff --git a/packages/router/package.json b/packages/router/package.json index ccb1f291..44196ee1 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -1,6 +1,6 @@ { "name": "tuono-router", - "version": "0.8.3", + "version": "0.8.4", "description": "React routing component for the framework tuono. Tuono is the react/rust fullstack framework", "scripts": { "dev": "vite build --watch", diff --git a/packages/router/src/components/RouteMatch.tsx b/packages/router/src/components/RouteMatch.tsx index 5545c68e..77f6590c 100644 --- a/packages/router/src/components/RouteMatch.tsx +++ b/packages/router/src/components/RouteMatch.tsx @@ -19,14 +19,12 @@ export const RouteMatch = ({ }: MatchProps): JSX.Element => { const { data, isLoading } = useServerSideProps(route, serverSideProps) - const routes = React.useMemo(() => { - const components = loadParentComponents(route) - components.push(route) - return components - }, [route.id]) + const routes = React.useMemo(() => loadParentComponents(route), [route.id]) return ( - + + + ) } @@ -44,29 +42,46 @@ interface ParentProps { isLoading: boolean } -const TraverseRootComponents = ({ - routes, - data, - isLoading, - index = 0, -}: TraverseRootComponentsProps): JSX.Element => { - const Parent = React.memo( - routes[index]?.component as unknown as (props: ParentProps) => JSX.Element, - ) +/* + * This component traverses and renders + * all the components that wraps the selected route (__root). + * The parents components need to be memoized in order to avoid + * re-rendering bugs when changing route. + */ +const TraverseRootComponents = React.memo( + ({ + routes, + data, + isLoading, + index = 0, + children, + }: TraverseRootComponentsProps): JSX.Element => { + if (routes.length > index) { + const Parent = React.useMemo( + () => + routes[index]?.component as unknown as ( + props: ParentProps, + ) => JSX.Element, + [], + ) - return ( - - {Boolean(routes.length > index) && ( - - )} - - ) -} + return ( + + + {children} + + + ) + } + + return <>{children} + }, +) const loadParentComponents = (route: Route, loader: Route[] = []): Route[] => { const parentComponent = route.options?.getParentRoute?.() diff --git a/packages/router/src/route.ts b/packages/router/src/route.ts index 00559cf3..159e9c57 100644 --- a/packages/router/src/route.ts +++ b/packages/router/src/route.ts @@ -1,4 +1,5 @@ import type { RouterType } from './router' +import type { RouteComponent } from './types' import { trimPathLeft, joinPaths } from './utils' interface RouteOptions { @@ -25,7 +26,7 @@ export class Route { router: RouterType isRoot: boolean originalIndex?: number - component: () => JSX.Element + component: RouteComponent constructor(options: RouteOptions) { this.isRoot = options.isRoot ?? typeof options.getParentRoute !== 'function' diff --git a/packages/router/src/types.ts b/packages/router/src/types.ts index c4cc8612..285241f1 100644 --- a/packages/router/src/types.ts +++ b/packages/router/src/types.ts @@ -11,3 +11,10 @@ export interface ServerProps { } props: any } + +export interface RouteProps { + data: any + isLoading: boolean +} + +export type RouteComponent = (props: RouteProps) => JSX.Element diff --git a/packages/tuono/package.json b/packages/tuono/package.json index 774fc5e0..3768569c 100644 --- a/packages/tuono/package.json +++ b/packages/tuono/package.json @@ -1,6 +1,6 @@ { "name": "tuono", - "version": "0.8.3", + "version": "0.8.4", "description": "The react/rust fullstack framework", "scripts": { "dev": "vite build --watch",