chore: update tanstack router example to latest

Signed-off-by: Marc MacLeod <[email protected]>
marbemac · May 11, 2024 · a7440f1 · a7440f1
1 parent 297b844
commit a7440f1
Show file tree

Hide file tree

Showing 10 changed files with 409 additions and 2,712 deletions.
diff --git a/examples/tanstack-router-simple/package.json b/examples/tanstack-router-simple/package.json
@@ -17,11 +17,11 @@
     "@ssrx/plugin-tanstack-router": "latest",
     "@ssrx/react": "latest",
     "@ssrx/vite": "latest",
-    "@tanstack/react-router": "1.15.10",
-    "@tanstack/react-router-server": "1.15.10",
-    "@tanstack/router-devtools": "1.15.10",
-    "@tanstack/router-vite-plugin": "1.15.11",
+    "@tanstack/react-router": "1.32.0",
+    "@tanstack/router-devtools": "1.32.0",
+    "@tanstack/router-vite-plugin": "1.31.18",
     "hono": "3.12.10",
+    "jsesc": "3.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

diff --git a/examples/tanstack-router-simple/src/entry.client.tsx b/examples/tanstack-router-simple/src/entry.client.tsx
@@ -1,5 +1,4 @@
 import { RouterProvider } from '@tanstack/react-router';
-// import { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
 import { createRouter } from '~/router.tsx';
@@ -9,8 +8,11 @@ void render();
 async function render() {
   const router = createRouter();
 
-  if (!router.state.lastUpdated) {
-    await router.load(); // needed until https://github.com/TanStack/router/issues/1115 is resolved
+  if (!router.state.matches.length) {
+    // needed until https://github.com/TanStack/router/issues/1115 is resolved
+    // do NOT need if not using lazy file routes
+    await router.load();
+
     void router.hydrate();
   }
 

diff --git a/examples/tanstack-router-simple/src/entry.server.tsx b/examples/tanstack-router-simple/src/entry.server.tsx
@@ -2,7 +2,6 @@ import { renderAssets } from '@ssrx/react/server';
 import { assetsForRequest } from '@ssrx/vite/runtime';
 import { createMemoryHistory, RouterProvider } from '@tanstack/react-router';
 
-// import { StrictMode } from 'react';
 import { createRouter } from '~/router.tsx';
 
 export async function render(req: Request) {

diff --git a/examples/tanstack-router-simple/src/routeTree.gen.ts b/examples/tanstack-router-simple/src/routeTree.gen.ts
@@ -1,3 +1,11 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
 // This file is auto-generated by TanStack Router
 
 import { createFileRoute } from '@tanstack/react-router'
@@ -114,3 +122,5 @@ export const routeTree = rootRoute.addChildren([
     AdminIndexRoute,
   ]),
 ])
+
+/* prettier-ignore-end */
diff --git a/examples/tanstack-router-simple/src/routes/__root.tsx b/examples/tanstack-router-simple/src/routes/__root.tsx
@@ -2,8 +2,9 @@ import './__root.css';
 
 import type { ErrorComponentProps } from '@tanstack/react-router';
 import { createRootRouteWithContext, ErrorComponent, Link, Outlet, useRouter } from '@tanstack/react-router';
-import { Meta } from '@tanstack/react-router-server/client';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+// @ts-expect-error no types
+import jsesc from 'jsesc';
 
 import type { RootRouterContext } from '~/router.ts';
 
@@ -22,8 +23,6 @@ function RootComponent() {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-        <Meta />
-
         {headTags?.()}
       </head>
 
@@ -78,14 +77,20 @@ export function DehydrateRouter() {
     payload: router.options.dehydrate?.(),
   };
 
+  // Use jsesc to escape the stringified JSON for use in a script tag
+  const stringified = jsesc(router.options.transformer.stringify(dehydrated), {
+    isScriptContext: true,
+    wrap: true,
+  });
+
   return (
     <script
       id="__TSR_DEHYDRATED__"
       suppressHydrationWarning
       dangerouslySetInnerHTML={{
         __html: `
           window.__TSR_DEHYDRATED__ = {
-            data: ${JSON.stringify(router.options.transformer.stringify(dehydrated))}
+            data: ${stringified}
           }
         `,
       }}

diff --git a/examples/tanstack-router-simple/src/routes/admin.members.$memberId.tsx b/examples/tanstack-router-simple/src/routes/admin.members.$memberId.tsx
@@ -4,6 +4,7 @@ import { getMember, sleep } from '~/utils.ts';
 
 export const Route = createFileRoute('/admin/members/$memberId')({
   loader: async ({ params: { memberId } }) => {
+    console.info('/admin/members/$memberId loader called with id:', memberId);
     await sleep();
 
     const member = getMember(Number(memberId));

diff --git a/examples/tanstack-router-simple/src/routes/admin.members.tsx b/examples/tanstack-router-simple/src/routes/admin.members.tsx
@@ -5,6 +5,7 @@ import { getMembers, sleep } from '~/utils.ts';
 export const Route = createFileRoute('/admin/members')({
   component: AdminMembers,
   loader: async () => {
+    console.info('/admin/members loader called');
     await sleep();
 
     return {

diff --git a/examples/tanstack-router-simple/src/routes/index.tsx b/examples/tanstack-router-simple/src/routes/index.tsx
@@ -5,6 +5,7 @@ import { rand, sleep } from '~/utils.ts';
 
 export const Route = createFileRoute('/')({
   loader: async () => {
+    console.log('home loader called');
     const deferred = loadData(1000, 'deferred');
     const critical = await loadData(100, 'critical');
 

diff --git a/packages/plugin-tanstack-router/package.json b/packages/plugin-tanstack-router/package.json
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@ssrx/vite": "^0.6.0",
-    "@tanstack/react-router": "1.15.10",
+    "@tanstack/react-router": "1.32.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }