fix: route switch wrappers re-rendering (#23)

* fix: route switch wrappers re-rendering

* feat: update version to v0.8.4

crates/tuono/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "tuono"
-version = "0.8.3"
+version = "0.8.4"
 edition = "2021"
 authors = ["V. Ageno <[email protected]>"]
 description = "The react/rust fullstack framework"

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 <[email protected]>"]
 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"] }

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"]

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",

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",

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",

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 (
-    <TraverseRootComponents routes={routes} data={data} isLoading={isLoading} />
+    <TraverseRootComponents routes={routes} data={data} isLoading={isLoading}>
+      <route.component data={data} isLoading={isLoading} />
+    </TraverseRootComponents>
   )
 }
 
@@ -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 (
-    <Parent data={data} isLoading={isLoading}>
-      {Boolean(routes.length > index) && (
-        <TraverseRootComponents
-          routes={routes}
-          data={data}
-          isLoading={isLoading}
-          index={index + 1}
-        />
-      )}
-    </Parent>
-  )
-}
+      return (
+        <Parent data={data} isLoading={isLoading}>
+          <TraverseRootComponents
+            routes={routes}
+            data={data}
+            isLoading={isLoading}
+            index={index + 1}
+          >
+            {children}
+          </TraverseRootComponents>
+        </Parent>
+      )
+    }
+
+    return <>{children}</>
+  },
+)
 
 const loadParentComponents = (route: Route, loader: Route[] = []): Route[] => {
   const parentComponent = route.options?.getParentRoute?.()

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'

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

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",