feat(router-plugin): configurable key-based code splitting (#3355)

TanStack · Feb 9, 2025 · cf693e7 · cf693e7
1 parent 026ea55
commit cf693e7
Show file tree

Hide file tree

Showing 520 changed files with 10,296 additions and 230 deletions.
diff --git a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx
@@ -10,6 +10,10 @@ export const Route = createFileRoute('/posts/$postId')({
     return <p>Post not found</p>
   },
   component: PostComponent,
+  codeSplitGroupings: [
+    ['component'],
+    ['pendingComponent', 'errorComponent', 'notFoundComponent'],
+  ],
 })
 
 export function PostErrorComponent({ error }: ErrorComponentProps) {

diff --git a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts
@@ -4,5 +4,21 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [TanStackRouterVite({ autoCodeSplitting: true }), react()],
+  plugins: [
+    TanStackRouterVite({
+      autoCodeSplitting: true,
+      codeSplittingOptions: {
+        splitBehavior: ({ routeId }) => {
+          if (routeId === '/posts') {
+            return [
+              ['loader'],
+              ['component'],
+              ['pendingComponent', 'notFoundComponent', 'errorComponent'],
+            ]
+          }
+        },
+      },
+    }),
+    react(),
+  ],
 })
diff --git a/packages/react-router/src/route.ts b/packages/react-router/src/route.ts
@@ -466,6 +466,15 @@ export interface UpdatableRouteOptions<
     meta?: AnyRouteMatch['meta']
   }
   ssr?: boolean
+  codeSplitGroupings?: Array<
+    Array<
+      | 'loader'
+      | 'component'
+      | 'pendingComponent'
+      | 'notFoundComponent'
+      | 'errorComponent'
+    >
+  >
 }
 
 export type RouteLoaderFn<