diff --git a/packages/tuono-router/src/index.ts b/packages/tuono-router/src/index.ts index c152b7e7..d71d3c9c 100644 --- a/packages/tuono-router/src/index.ts +++ b/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' diff --git a/packages/tuono-router/src/router.ts b/packages/tuono-router/src/router.ts index 34653326..1033622f 100644 --- a/packages/tuono-router/src/router.ts +++ b/packages/tuono-router/src/router.ts @@ -21,6 +21,7 @@ export function createRouter(options: CreateRouterOptions): Router { return new Router(options) } +export type RouterType = InstanceType export class Router { options?: RouterOptions basePath = '/' diff --git a/packages/tuono/src/hydration/index.tsx b/packages/tuono/src/hydration/index.tsx index d13e6482..d0a0bdeb 100644 --- a/packages/tuono/src/hydration/index.tsx +++ b/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 export function hydrate(routeTree: RouteTree): void { // Create a new router instance const router = createRouter({ routeTree }) - hydrateRoot( - document, - - - , - ) + hydrateRoot(document, ) } diff --git a/packages/tuono/src/shared/TuonoEntryPoint.tsx b/packages/tuono/src/shared/TuonoEntryPoint.tsx new file mode 100644 index 00000000..401f8050 --- /dev/null +++ b/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 ( + + + + ) +} diff --git a/packages/tuono/src/ssr/server.tsx b/packages/tuono/src/ssr/server.tsx index fb087d05..e771d66f 100644 --- a/packages/tuono/src/ssr/server.tsx +++ b/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 export function serverSideRendering(routeTree: RouteTree) { return async function render(payload: string | undefined): Promise { - 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( - - - , + , ) await stream.allReady