docs(examples): update the vinxi-basic-ssr-streaming example to reflect the TanStack website

.gitignore

@@ -60,3 +60,4 @@ gpt/db.json
 
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.idea

examples/react/vinxi-basic-ssr-streaming/.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 .vinxi
 .output
+.idea

examples/react/vinxi-basic-ssr-streaming/app.config.js

@@ -7,27 +7,38 @@ export default createApp({
   routers: [
     {
       name: 'public',
-      mode: 'static',
+      type: 'static',
       dir: './public',
       base: '/',
     },
     {
       name: 'ssr',
-      mode: 'handler',
+      type: 'http',
       middleware: './app/middleware.tsx',
       handler: './app/server.tsx',
       target: 'server',
-      plugins: () => [reactRefresh(), TanStackRouterVite()],
+      plugins: () => [
+        TanStackRouterVite({
+          experimental: {
+            enableCodeSplitting: true,
+          },
+        }),
+        reactRefresh(),
+      ],
     },
     {
       name: 'client',
-      mode: 'build',
+      type: 'client',
       handler: './app/client.tsx',
       target: 'browser',
       plugins: () => [
         serverFunctions.client(),
+        TanStackRouterVite({
+          experimental: {
+            enableCodeSplitting: true,
+          },
+        }),
         reactRefresh(),
-        TanStackRouterVite(),
       ],
       base: '/_build',
     },

examples/react/vinxi-basic-ssr-streaming/app/client.tsx

@@ -1,35 +1,13 @@
 /// <reference types="vinxi/types/client" />
-import React from 'react'
-import { Root, hydrateRoot } from 'react-dom/client'
+import { hydrateRoot } from 'react-dom/client'
 import 'vinxi/client'
 
 import { createRouter } from './router'
-import { StartClient } from '@tanstack/react-router-server/client'
+import { StartClient } from '@tanstack/react-router-server'
 
-render()
+const router = createRouter()
 
-function render(mod?: any) {
-  const router = createRouter()
+const app = <StartClient router={router} />
 
-  const app = <StartClient router={router} />
-
-  if (!mod) {
-    window.$root = hydrateRoot(document, app)
-  } else {
-    window.$root?.render(app)
-  }
-}
-
-if (import.meta.hot) {
-  import.meta.hot.accept((mod) => {
-    if (mod) {
-      render(mod)
-    }
-  })
-}
-
-declare global {
-  interface Window {
-    $root?: Root
-  }
-}
+router.hydrate()
+hydrateRoot(document, app)

examples/react/vinxi-basic-ssr-streaming/app/routeTree.gen.ts

@@ -8,35 +8,30 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router'
-
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as TestImport } from './routes/test'
+import { Route as NoTitleImport } from './routes/no-title'
 import { Route as HelloImport } from './routes/hello'
 import { Route as IndexImport } from './routes/index'
 
-// Create Virtual Routes
-
-const NoTitleLazyImport = createFileRoute('/no-title')()
-
 // Create/Update Routes
 
-const NoTitleLazyRoute = NoTitleLazyImport.update({
-  path: '/no-title',
-  getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/no-title.lazy').then((d) => d.Route))
-
 const TestRoute = TestImport.update({
   path: '/test',
   getParentRoute: () => rootRoute,
 } as any)
 
+const NoTitleRoute = NoTitleImport.update({
+  path: '/no-title',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const HelloRoute = HelloImport.update({
   path: '/hello',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/hello.lazy').then((d) => d.Route))
+} as any)
 
 const IndexRoute = IndexImport.update({
   path: '/',
@@ -55,12 +50,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof HelloImport
       parentRoute: typeof rootRoute
     }
-    '/test': {
-      preLoaderRoute: typeof TestImport
+    '/no-title': {
+      preLoaderRoute: typeof NoTitleImport
       parentRoute: typeof rootRoute
     }
-    '/no-title': {
-      preLoaderRoute: typeof NoTitleLazyImport
+    '/test': {
+      preLoaderRoute: typeof TestImport
       parentRoute: typeof rootRoute
     }
   }
@@ -71,8 +66,8 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren([
   IndexRoute,
   HelloRoute,
+  NoTitleRoute,
   TestRoute,
-  NoTitleLazyRoute,
 ])
 
 /* prettier-ignore-end */

examples/react/vinxi-basic-ssr-streaming/app/router.tsx

@@ -1,18 +1,35 @@
-import { createRouter as createReactRouter } from '@tanstack/react-router'
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
 export function createRouter() {
-  return createReactRouter({
+  const router = createTanStackRouter({
     routeTree,
     defaultPreload: 'intent',
+    defaultStaleTime: 1,
     context: {
-      assets: null as any, // We'll fulfill this later
+      assets: [],
+    },
+    dehydrate: (() => {
+      return {
+        assets: router.options.context.assets,
+      }
+    }) as any,
+    hydrate: (data) => {
+      router.options.context.assets = data.assets
     },
   })
+  return router
 }
 
 declare module '@tanstack/react-router' {
   interface Register {
     router: ReturnType<typeof createRouter>
   }
+  interface StaticDataRouteOption {
+    baseParent?: boolean
+  }
+
+  interface RouterState {
+    statusCode: number
+  }
 }

examples/react/vinxi-basic-ssr-streaming/app/routes/__root.tsx

@@ -1,15 +1,12 @@
 import * as React from 'react'
 import {
+  createRootRouteWithContext,
   Link,
   Outlet,
-  createRootRouteWithContext,
-  useRouter,
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { Meta, Scripts } from '@tanstack/react-router-server/client'
 
-import '../style.css'
-
 export const Route = createRootRouteWithContext<{
   assets: React.ReactNode
 }>()({
@@ -34,8 +31,6 @@ export const Route = createRootRouteWithContext<{
 })
 
 function RootComponent() {
-  const router = useRouter()
-
   return (
     <html lang="en">
       <head>

examples/react/vinxi-basic-ssr-streaming/app/routes/hello.tsx

@@ -1,4 +1,5 @@
-import { createFileRoute, defer } from '@tanstack/react-router'
+import * as React from 'react'
+import { createFileRoute, defer, Await } from '@tanstack/react-router'
 
 async function getData() {
   'use server'
@@ -36,4 +37,19 @@ export const Route = createFileRoute('/hello')({
       content: `Hello ${ctx.loaderData.data}`,
     },
   ],
+  component: Hello,
 })
+
+function Hello() {
+  const { data, slowData } = Route.useLoaderData()
+
+  return (
+    <div className="p-2">
+      <p>Hello from the client!</p>
+      <p>{data}</p>
+      <React.Suspense fallback={<p>Loading...</p>}>
+        <Await promise={slowData}>{(slowData) => <p>{slowData}</p>}</Await>
+      </React.Suspense>
+    </div>
+  )
+}

examples/react/vinxi-basic-ssr-streaming/app/routes/no-title.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+async function action() {
+  'use server'
+  console.log('hola from the server')
+  return new Promise<string>((r) => {
+    setTimeout(() => r('Server says hello, too!'), 500)
+  })
+}
+
+export const Route = createFileRoute('/no-title')({
+  component: NoTitle,
+})
+
+function NoTitle() {
+  const [hola, setHola] = React.useState('')
+  React.useEffect(() => {
+    action().then((h) => {
+      setHola(h)
+    })
+  }, [])
+  return (
+    <div>
+      {hola}
+      <h1>Hello!</h1>
+      <p>This page has no title.</p>
+    </div>
+  )
+}