update tanstack router to latest version

Signed-off-by: Marc MacLeod <[email protected]>

examples/react-router-kitchen-sink/src/server.tsx

@@ -1,6 +1,7 @@
 import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { Hono } from 'hono';
+import type { RedirectStatusCode } from 'hono/utils/http-status';
 
 import { type ReqCtx, reqCtxMiddleware } from '~/api/middleware/context.ts';
 import { trpcServer } from '~/api/middleware/trpc.ts';
@@ -70,7 +71,7 @@ server
        * Handle react-router redirects
        */
       if (err instanceof Response && err.status >= 300 && err.status <= 399) {
-        return c.redirect(err.headers.get('Location') || '/', err.status);
+        return c.redirect(err.headers.get('Location') || '/', err.status as RedirectStatusCode);
       }
 
       /**

examples/react-router-records/src/server.ts

@@ -2,6 +2,7 @@ import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { Hono } from 'hono';
 import { compress } from 'hono/compress';
+import type { RedirectStatusCode } from 'hono/utils/http-status';
 
 import { serverHandler } from './app.tsx';
 import { routes } from './routes.tsx';
@@ -41,7 +42,7 @@ server.get('*', async c => {
      * Handle react-router redirects
      */
     if (err instanceof Response && err.status >= 300 && err.status <= 399) {
-      return c.redirect(err.headers.get('Location') || '/', err.status);
+      return c.redirect(err.headers.get('Location') || '/', err.status as RedirectStatusCode);
     }
 
     /**

examples/react-router-simple/src/server.ts

@@ -1,6 +1,7 @@
 import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { Hono } from 'hono';
+import type { RedirectStatusCode } from 'hono/utils/http-status';
 import { renderToString } from 'react-dom/server';
 
 import * as entry from '~/entry.server.tsx';
@@ -25,7 +26,7 @@ const server = new Hono()
        * Handle react-router redirects
        */
       if (err instanceof Response && err.status >= 300 && err.status <= 399) {
-        return c.redirect(err.headers.get('Location') || '/', err.status);
+        return c.redirect(err.headers.get('Location') || '/', err.status as RedirectStatusCode);
       }
 
       /**

examples/solid-router-simple/src/server.ts

@@ -2,6 +2,7 @@ import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { renderToStream } from '@ssrx/solid/server';
 import { Hono } from 'hono';
+import type { RedirectStatusCode } from 'hono/utils/http-status';
 
 import * as entry from '~/entry.server.tsx';
 
@@ -25,7 +26,7 @@ const server = new Hono()
        * Handle redirects
        */
       if (err instanceof Response && err.status >= 300 && err.status <= 399) {
-        return c.redirect(err.headers.get('Location') || '/', err.status);
+        return c.redirect(err.headers.get('Location') || '/', err.status as RedirectStatusCode);
       }
 
       /**

examples/tanstack-router-simple/src/app.tsx

@@ -0,0 +1,13 @@
+// import './globals.css';
+
+import { tanstackRouterPlugin } from '@ssrx/plugin-tanstack-router';
+import { createApp } from '@ssrx/react';
+import { assetsPlugin } from '@ssrx/renderer/assets';
+
+export const { clientHandler, serverHandler, ctx } = createApp({
+  plugins: [assetsPlugin(), tanstackRouterPlugin()],
+
+  // tanstack-router handles the entire root layout, so
+  // override the default layout to just pass the children through
+  RootLayout: ({ children }) => <>{children}</>,
+});

examples/tanstack-router-simple/src/entry.client.tsx

@@ -1,12 +1,14 @@
-import { StartClient } from '@tanstack/start';
 import { hydrateRoot } from 'react-dom/client';
 
+import { clientHandler } from '~/app.tsx';
 import { createRouter } from '~/router.tsx';
 
-void render();
+void hydrate();
 
-async function render() {
-  const router = createRouter();
+async function hydrate() {
+  const renderApp = await clientHandler({
+    renderProps: { router: createRouter() },
+  });
 
-  hydrateRoot(document, <StartClient router={router} />);
+  hydrateRoot(document, renderApp());
 }

examples/tanstack-router-simple/src/router.tsx

@@ -2,7 +2,9 @@ import { createRouter as baseCreateRouter } from '@tanstack/react-router';
 
 import { routeTree } from './routeTree.gen';
 
-export type RootRouterContext = { headTags?: () => React.ReactNode; bodyTags?: () => React.ReactNode };
+export type RootRouterContext = {
+  // ...
+};
 
 export const createRouter = (opts: { context?: RootRouterContext } = {}) => {
   return baseCreateRouter({ routeTree, defaultPreload: 'intent', ...opts });

examples/tanstack-router-simple/src/routes/__root.tsx

@@ -1,16 +1,9 @@
 import './__root.css';
 
 import type { ErrorComponentProps } from '@tanstack/react-router';
-import {
-  createRootRouteWithContext,
-  ErrorComponent,
-  Link,
-  Outlet,
-  ScrollRestoration,
-  useRouter,
-} from '@tanstack/react-router';
+import { createRootRouteWithContext, ErrorComponent, Link, Outlet, ScrollRestoration } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-import { Meta } from '@tanstack/start';
+import { Meta } from '@tanstack/start/client';
 
 import type { RootRouterContext } from '~/router.ts';
 
@@ -20,17 +13,12 @@ export const Route = createRootRouteWithContext<RootRouterContext>()({
 });
 
 function RootComponent() {
-  const router = useRouter();
-  const { bodyTags, headTags } = router.options.context;
-
   return (
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-        {headTags?.()}
-
         <Meta />
       </head>
 
@@ -62,8 +50,6 @@ function RootComponent() {
         <ScrollRestoration />
 
         <TanStackRouterDevtools position="bottom-right" />
-
-        {bodyTags?.()}
       </body>
     </html>
   );

examples/tanstack-router-simple/src/server.ts

@@ -1,9 +1,10 @@
 import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
-import { renderToStream } from '@ssrx/react/server';
 import { Hono } from 'hono';
+import type { RedirectStatusCode } from 'hono/utils/http-status';
 
-import * as entry from '~/entry.server.tsx';
+import { serverHandler } from './app.tsx';
+import { createRouter } from './router.tsx';
 
 const server = new Hono()
   /**
@@ -15,33 +16,18 @@ const server = new Hono()
 
   .get('*', async c => {
     try {
-      const { app, router } = await entry.render(c.req.raw);
+      const router = createRouter();
+
+      const { stream, statusCode } = await serverHandler({
+        req: c.req.raw,
+        renderProps: { router },
+      });
 
       // Handle redirects
       if (router.state.redirect) {
-        return c.redirect(router.state.redirect.href);
+        return c.redirect(router.state.redirect.href, router.state.redirect.code as RedirectStatusCode);
       }
 
-      const { stream, statusCode } = await renderToStream({
-        app: () => app,
-        req: c.req.raw,
-        injectToStream: [
-          /**
-           * Automatically inject assets into the stream if preferred, vs manually adding them to the head/body through route context
-           * import { injectAssetsToStream } from @ssrx/react/server;
-           */
-          // await injectAssetsToStream({ req: c.req.raw }),
-          {
-            async emitBeforeStreamChunk() {
-              const injectorPromises = router.injectedHtml.map(d => (typeof d === 'function' ? d() : d));
-              const injectors = await Promise.all(injectorPromises);
-              router.injectedHtml = [];
-              return injectors.join('');
-            },
-          },
-        ],
-      });
-
       let status = statusCode();
 
       // Handle 404 errors

examples/tanstack-router-simple/vite.config.ts

@@ -12,6 +12,8 @@ export default defineConfig(({ isSsrBuild, command }) => ({
     react(),
     TanStackRouterVite(),
     ssrx({
+      serverFile: 'src/server.ts',
+      clientEntry: 'src/entry.client.tsx',
       routesFile: 'src/routeTree.gen.ts',
       routerAdapter: tanstackRouterAdapter(),
     }),