feat: enable layout element

packages/tuono-router/src/components/Matches.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useRouter } from '../hooks/useRouter'
 import { useRouterStore } from '../hooks/useRouterStore'
+import { RouteMatch } from './RouteMatch'
 import NotFound from './NotFound'
 
 export const Matches = React.memo(function () {
@@ -13,9 +14,5 @@ export const Matches = React.memo(function () {
     return <NotFound />
   }
 
-  if (route.options.hasHandler) {
-    console.log('Has rust handler')
-  }
-
-  return route.options.component()
+  return <RouteMatch route={route} />
 })

packages/tuono-router/src/components/NotFound.tsx

@@ -1,12 +1,15 @@
 import { useRouter } from '../hooks/useRouter'
+import { RouteMatch } from './RouteMatch'
 import Link from './Link'
 
 export default function NotFound(): JSX.Element {
   const router = useRouter()
 
+  const custom404Route = router.routesById['/404']
+
   // Check if exists a custom 404 error page
-  if (router.routesById['/404']) {
-    return router.routesById['/404'].options.component()
+  if (custom404Route) {
+    return <RouteMatch route={custom404Route} />
   }
 
   return (

packages/tuono-router/src/components/Outlet.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react'
-
-const Outlet = React.memo(function Outlet() {
-  return <h1>Outlet</h1>
-})
-
-export default Outlet

packages/tuono-router/src/components/RouteMatch.tsx

@@ -0,0 +1,23 @@
+import type { Route } from '../route'
+
+interface MatchProps {
+  route: Route
+}
+
+/**
+ * Returns the route match with the root element if exists
+ */
+export const RouteMatch = ({ route }: MatchProps): JSX.Element => {
+  if (route.options.hasHandler) {
+    console.log('Has rust handler')
+  }
+
+  if (!route.isRoot) {
+    console.log(route.options)
+    return route.options.getParentRoute().component({
+      children: route.options.component(),
+    })
+  }
+
+  return route.options.component()
+}

packages/tuono-router/src/components/RouterProvider.tsx

@@ -44,7 +44,6 @@ interface RouterProviderProps {
 
 const initRouterStore = (): void => {
   const updateLocation = useRouterStore((st) => st.updateLocation)
-  console.log(window.location)
   useLayoutEffect(() => {
     const { pathname, hash, href, search } = window.location
     updateLocation({

packages/tuono-router/src/route.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react'
 import type { RouterType } from './router'
 import { trimPathLeft, joinPaths } from './utils'
 
@@ -6,7 +5,7 @@ interface RouteOptions {
   isRoot?: boolean
   getParentRoute?: () => Route
   path?: string
-  component: ReactNode
+  component: () => JSX.Element
 }
 
 export function createRoute(options: RouteOptions): Route {
@@ -26,10 +25,10 @@ export class Route {
   router: RouterType
   isRoot: boolean
   originalIndex: number
-  component: ReactNode
+  component: () => JSX.Element
 
   constructor(options: RouteOptions) {
-    this.isRoot = options.isRoot || !options.getParentRoute
+    this.isRoot = options.isRoot ?? typeof options.getParentRoute !== 'function'
     this.options = options
     ;(this as any).$$typeof = Symbol.for('react.memo')
 
@@ -45,7 +44,7 @@ export class Route {
     this.parentRoute = this.options?.getParentRoute?.()
 
     if (isRoot) {
-      this.path = rootRouteId as TPath
+      this.path = rootRouteId
     }
 
     let path: undefined | string = isRoot ? rootRouteId : this.options.path
@@ -90,6 +89,7 @@ export class Route {
 
   update = (options: RouteOptions): this => {
     Object.assign(this.options, options)
+    this.isRoot = options.isRoot || !options.getParentRoute
     return this
   }
 

packages/tuono-router/src/router.ts

@@ -1,6 +1,5 @@
 import { trimPath, trimPathRight } from './utils'
 import type { Route } from './route'
-import type { ReactNode } from 'react'
 
 type RouteTree = any
 
@@ -11,7 +10,7 @@ interface CreateRouter {
 }
 
 interface RouteOptions {
-  component?: () => ReactNode
+  component?: () => JSX.Element
   hasHandler?: boolean
   routeTree?: RouteTree
 }