refactor: add TuonoEntryPoint (#374)

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

packages/tuono-router/src/index.ts

@@ -1,7 +1,7 @@
 export { RouterProvider } from './components/RouterProvider'
 export { useRouterContext } from './components/RouterContext'
 export { default as Link } from './components/Link'
-export { createRouter } from './router'
+export { createRouter, type RouterType } from './router'
 export { createRoute, createRootRoute } from './route'
 export { useRouter } from './hooks/useRouter'
-export type { RouteProps, RouteComponent } from './types'
+export type { RouteProps, RouteComponent, ServerProps } from './types'

packages/tuono-router/src/router.ts

@@ -21,6 +21,7 @@ export function createRouter(options: CreateRouterOptions): Router {
   return new Router(options)
 }
 
+export type RouterType = InstanceType<typeof Router>
 export class Router {
   options?: RouterOptions
   basePath = '/'

packages/tuono/src/hydration/index.tsx

@@ -1,18 +1,14 @@
-import { StrictMode } from 'react'
 import { hydrateRoot } from 'react-dom/client'
-import { RouterProvider, createRouter } from 'tuono-router'
+import { createRouter } from 'tuono-router'
 import type { createRoute } from 'tuono-router'
 
+import { TuonoEntryPoint } from '../shared/TuonoEntryPoint'
+
 type RouteTree = ReturnType<typeof createRoute>
 
 export function hydrate(routeTree: RouteTree): void {
   // Create a new router instance
   const router = createRouter({ routeTree })
 
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RouterProvider router={router} />
-    </StrictMode>,
-  )
+  hydrateRoot(document, <TuonoEntryPoint router={router} />)
 }

packages/tuono/src/shared/TuonoEntryPoint.tsx

@@ -0,0 +1,18 @@
+import { type JSX, StrictMode } from 'react'
+import { type RouterType, type ServerProps, RouterProvider } from 'tuono-router'
+
+interface TuonoEntryPointProps {
+  router: RouterType
+  serverProps?: ServerProps
+}
+
+export function TuonoEntryPoint({
+  router,
+  serverProps,
+}: TuonoEntryPointProps): JSX.Element {
+  return (
+    <StrictMode>
+      <RouterProvider router={router} serverProps={serverProps} />
+    </StrictMode>
+  )
+}

packages/tuono/src/ssr/server.tsx

@@ -40,10 +40,11 @@ import { MessageChannelPolyfill } from './polyfills/MessageChannel'
 
 import type { ReadableStream } from 'node:stream/web'
 
-import { StrictMode } from 'react'
 import { renderToReadableStream } from 'react-dom/server'
-import { RouterProvider, createRouter } from 'tuono-router'
-import type { createRoute } from 'tuono-router'
+import { createRouter } from 'tuono-router'
+import type { createRoute, ServerProps } from 'tuono-router'
+
+import { TuonoEntryPoint } from '../shared/TuonoEntryPoint'
 
 import { streamToString } from './utils'
 
@@ -51,17 +52,12 @@ type RouteTree = ReturnType<typeof createRoute>
 
 export function serverSideRendering(routeTree: RouteTree) {
   return async function render(payload: string | undefined): Promise<string> {
-    const serverProps = (payload ? JSON.parse(payload) : {}) as Record<
-      string,
-      unknown
-    >
+    const serverProps = (payload ? JSON.parse(payload) : {}) as ServerProps
 
     const router = createRouter({ routeTree }) // Render the app
 
     const stream = await renderToReadableStream(
-      <StrictMode>
-        <RouterProvider router={router} serverProps={serverProps as never} />
-      </StrictMode>,
+      <TuonoEntryPoint router={router} serverProps={serverProps} />,
     )
 
     await stream.allReady