chore(rsc): simplify react-router example (#763)

Author: hi-ogawa

.github/renovate.json5

@@ -41,9 +41,5 @@
     "kill-port", // `kill-port:^2.0.0 has perf issues (#8392)
 
     "prettier", // waiting for stable choice on ternaries
-
-    // plugin-rsc
-    "react-router",
-    "@react-router/dev",
   ],
 }

packages/plugin-rsc/examples/react-router/app/root.tsx

@@ -1,6 +1,5 @@
 import './styles.css'
 import { Link, Outlet } from 'react-router'
-import { ServerHmr } from '../react-router-vite/server-hmr'
 import { TestClientState, TestHydrated } from './routes/client'
 import { DumpError, GlobalNavigationLoadingBar } from './routes/root.client'
 
@@ -35,7 +34,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
           </nav>
         </header>
         <GlobalNavigationLoadingBar />
-        <ServerHmr />
         {children}
       </body>
     </html>

packages/plugin-rsc/examples/react-router/app/routes.ts

@@ -1,6 +1,21 @@
-import { type RouteConfig, index, route } from '@react-router/dev/routes'
+import type { unstable_RSCRouteConfigEntry } from 'react-router'
 
-export default [
-  index('routes/home.tsx'),
-  route('about', 'routes/about.tsx'),
-] satisfies RouteConfig
+export const routes: unstable_RSCRouteConfigEntry[] = [
+  {
+    id: 'root',
+    path: '',
+    lazy: () => import('./root'),
+    children: [
+      {
+        id: 'home',
+        index: true,
+        lazy: () => import('./routes/home'),
+      },
+      {
+        id: 'about',
+        path: 'about',
+        lazy: () => import('./routes/about'),
+      },
+    ],
+  },
+]

packages/plugin-rsc/examples/react-router/cf/vite.config.ts

@@ -4,7 +4,6 @@ import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 // import inspect from 'vite-plugin-inspect'
-import { reactRouter } from '../react-router-vite/plugin'
 
 export default defineConfig({
   clearScreen: false,
@@ -15,7 +14,6 @@ export default defineConfig({
     // inspect(),
     tailwindcss(),
     react(),
-    reactRouter(),
     rsc({
       entries: {
         client: './react-router-vite/entry.browser.tsx',

packages/plugin-rsc/examples/react-router/package.json

@@ -19,7 +19,6 @@
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.11.5",
-    "@react-router/dev": "7.7.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.12",
     "@types/react": "^19.1.10",

packages/plugin-rsc/examples/react-router/react-router-vite/entry.browser.tsx

@@ -10,6 +10,7 @@ import {
   unstable_createCallServer as createCallServer,
   unstable_getRSCStream as getRSCStream,
   unstable_RSCHydratedRouter as RSCHydratedRouter,
+  type DataRouter,
   type unstable_RSCPayload as RSCServerPayload,
 } from 'react-router'
 
@@ -43,3 +44,9 @@ createFromReadableStream<RSCServerPayload>(getRSCStream()).then((payload) => {
     )
   })
 })
+
+if (import.meta.hot) {
+  import.meta.hot.on('rsc:update', () => {
+    ;(window as unknown as { __router: DataRouter }).__router.revalidate()
+  })
+}

packages/plugin-rsc/examples/react-router/react-router-vite/entry.rsc.tsx

@@ -7,8 +7,7 @@ import {
   renderToReadableStream,
 } from '@vitejs/plugin-rsc/rsc'
 import { unstable_matchRSCServerRequest as matchRSCServerRequest } from 'react-router'
-
-import routes from 'virtual:react-router-routes'
+import { routes } from '../app/routes'
 
 export function fetchServer(request: Request) {
   return matchRSCServerRequest({

packages/plugin-rsc/examples/react-router/react-router-vite/plugin.ts

@@ -1,7 +1,2 @@
 /// <reference types="vite/client" />
 /// <reference types="@vitejs/plugin-rsc/types" />
-
-declare module 'virtual:react-router-routes' {
-  const routes: any
-  export default routes
-}