fix: Router CLI can now handle "virtual" code split routes with no an…

…chor route file

examples/react/basic-file-based-codesplitting/src/routeTree.gen.ts

@@ -1,24 +1,28 @@
-import { lazyFn, lazyRouteComponent } from "@tanstack/react-router"
+import { FileRoute, lazyFn, lazyRouteComponent } from "@tanstack/react-router"
 
 import { Route as rootRoute } from "./routes/__root"
-import { Route as PostsImport } from "./routes/posts"
 import { Route as LayoutImport } from "./routes/_layout"
 import { Route as IndexImport } from "./routes/index"
 import { Route as PostsPostIdRouteImport } from "./routes/posts.$postId/route"
 import { Route as LayoutLayoutBImport } from "./routes/_layout/layout-b"
 import { Route as LayoutLayoutAImport } from "./routes/_layout/layout-a"
-import { Route as PostsIndexImport } from "./routes/posts.index"
 import { Route as PostsPostIdDeepImport } from "./routes/posts_.$postId.deep"
 
-const PostsRoute = PostsImport.update({
+const PostsComponentImport = new FileRoute("/posts").createRoute()
+
+const PostsComponentRoute = PostsComponentImport.update({
   path: "/posts",
   getParentRoute: () => rootRoute,
-} as any).update({
-  component: lazyRouteComponent(
-    () => import("./routes/posts.component"),
-    "component",
-  ),
-})
+} as any)
+  .updateLoader({
+    loader: lazyFn(() => import("./routes/posts.loader"), "loader"),
+  })
+  .update({
+    component: lazyRouteComponent(
+      () => import("./routes/posts.component"),
+      "component",
+    ),
+  })
 
 const LayoutRoute = LayoutImport.update({
   id: "/_layout",
@@ -31,8 +35,8 @@ const IndexRoute = IndexImport.update({
 } as any)
 
 const PostsPostIdRouteRoute = PostsPostIdRouteImport.update({
-  path: "/$postId",
-  getParentRoute: () => PostsRoute,
+  path: "/posts/$postId",
+  getParentRoute: () => rootRoute,
 } as any)
   .updateLoader({
     loader: lazyFn(() => import("./routes/posts.$postId/loader"), "loader"),
@@ -54,11 +58,6 @@ const LayoutLayoutARoute = LayoutLayoutAImport.update({
   getParentRoute: () => LayoutRoute,
 } as any)
 
-const PostsIndexRoute = PostsIndexImport.update({
-  path: "/",
-  getParentRoute: () => PostsRoute,
-} as any)
-
 const PostsPostIdDeepRoute = PostsPostIdDeepImport.update({
   path: "/posts/$postId/deep",
   getParentRoute: () => rootRoute,
@@ -74,14 +73,6 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof LayoutImport
       parentRoute: typeof rootRoute
     }
-    "/posts": {
-      preLoaderRoute: typeof PostsImport
-      parentRoute: typeof rootRoute
-    }
-    "/posts/": {
-      preLoaderRoute: typeof PostsIndexImport
-      parentRoute: typeof PostsRoute
-    }
     "/_layout/layout-a": {
       preLoaderRoute: typeof LayoutLayoutAImport
       parentRoute: typeof LayoutRoute
@@ -92,18 +83,23 @@ declare module "@tanstack/react-router" {
     }
     "/posts/$postId": {
       preLoaderRoute: typeof PostsPostIdRouteImport
-      parentRoute: typeof PostsRoute
+      parentRoute: typeof rootRoute
     }
     "/posts_/$postId/deep": {
       preLoaderRoute: typeof PostsPostIdDeepImport
       parentRoute: typeof rootRoute
     }
+    "/posts": {
+      preLoaderRoute: typeof PostsComponentImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
 export const routeTree = rootRoute.addChildren([
   IndexRoute,
   LayoutRoute.addChildren([LayoutLayoutARoute, LayoutLayoutBRoute]),
-  PostsRoute.addChildren([PostsIndexRoute, PostsPostIdRouteRoute]),
+  PostsPostIdRouteRoute,
   PostsPostIdDeepRoute,
+  PostsComponentRoute,
 ])

examples/react/basic-file-based-codesplitting/src/routes/posts.loader.tsx

@@ -0,0 +1,4 @@
+import { FileRouteLoader } from '@tanstack/react-router'
+import { fetchPosts } from '../posts'
+
+export const loader = FileRouteLoader('/posts')(fetchPosts)

packages/router-cli/src/generator.ts

@@ -20,6 +20,7 @@ export type RouteNode = {
   isRoute?: boolean
   isLoader?: boolean
   isComponent?: boolean
+  isVirtual?: boolean
   isRoot?: boolean
   children?: RouteNode[]
   parent?: RouteNode
@@ -127,21 +128,27 @@ export async function generator(config: Config) {
   const start = Date.now()
   const routePathIdPrefix = config.routeFilePrefix ?? ''
 
-  let routeNodes = await getRouteNodes(config)
+  let preRouteNodes = await getRouteNodes(config)
 
-  routeNodes = multiSortBy(routeNodes, [
-    (d) => (d.routePath === '/' ? -1 : 1),
-    (d) => d.routePath?.split('/').length,
-    (d) => (d.routePath?.endsWith('/') ? -1 : 1),
-    (d) => d.routePath,
-  ]).filter((d) => d.routePath !== `/${routePathIdPrefix + rootPathId}`)
+  const sortRouteNodes = (nodes: RouteNode[]): RouteNode[] => {
+    return multiSortBy(nodes, [
+      (d) => (d.routePath === '/' ? -1 : 1),
+      (d) => d.routePath?.split('/').length,
+      (d) => (d.routePath?.endsWith('/') ? -1 : 1),
+      (d) => d.routePath,
+    ]).filter((d) => d.routePath !== `/${routePathIdPrefix + rootPathId}`)
+  }
+
+  preRouteNodes = sortRouteNodes(preRouteNodes)
 
   const routeTree: RouteNode[] = []
   const routePiecesByPath: Record<string, RouteSubNode> = {}
 
   // Loop over the flat list of routeNodes and
   // build up a tree based on the routeNodes' routePath
-  routeNodes = routeNodes.filter((node) => {
+  let routeNodes: RouteNode[] = []
+
+  const handleNode = (node: RouteNode) => {
     if (config.future?.unstable_codeSplitting) {
       node.isRoute = node.routePath?.endsWith('/route')
       node.isComponent = node.routePath?.endsWith('/component')
@@ -180,7 +187,8 @@ export async function generator(config: Config) {
         routePiecesByPath[node.routePath!]![
           node.isLoader ? 'loader' : 'component'
         ] = node
-        return false
+
+        return
       }
     }
 
@@ -191,8 +199,25 @@ export async function generator(config: Config) {
       routeTree.push(node)
     }
 
-    return true
-  })
+    routeNodes.push(node)
+  }
+
+  preRouteNodes.forEach((node) => handleNode(node))
+
+  if (config.future?.unstable_codeSplitting) {
+    Object.keys(routePiecesByPath).forEach((routePath) => {
+      const found = routeNodes.find((d) => d.routePath === routePath)
+
+      if (!found) {
+        const pieces = routePiecesByPath[routePath]!
+        const componentOrLoader = pieces.component || pieces.loader
+        if (componentOrLoader) {
+          componentOrLoader.isVirtual = true
+          handleNode(componentOrLoader)
+        }
+      }
+    })
+  }
 
   async function buildRouteConfig(
     nodes: RouteNode[],
@@ -246,24 +271,35 @@ export async function generator(config: Config) {
   ])
 
   const routeImports = [
-    `import { lazyFn, lazyRouteComponent } from '@tanstack/react-router'`,
+    `import { FileRoute, lazyFn, lazyRouteComponent } from '@tanstack/react-router'`,
     '\n',
     `import { Route as rootRoute } from './${sanitize(
       path.relative(
         path.dirname(config.generatedRouteTree),
         path.resolve(config.routesDirectory, routePathIdPrefix + rootPathId),
       ),
     )}'`,
-    ...sortedRouteNodes.map((node) => {
-      return `import { Route as ${node.variableName}Import } from './${sanitize(
-        removeExt(
-          path.relative(
-            path.dirname(config.generatedRouteTree),
-            path.resolve(config.routesDirectory, node.filePath),
+    ...sortedRouteNodes
+      .filter((d) => !d.isVirtual)
+      .map((node) => {
+        return `import { Route as ${
+          node.variableName
+        }Import } from './${sanitize(
+          removeExt(
+            path.relative(
+              path.dirname(config.generatedRouteTree),
+              path.resolve(config.routesDirectory, node.filePath),
+            ),
           ),
-        ),
-      )}'`
-    }),
+        )}'`
+      }),
+    '\n',
+    sortedRouteNodes
+      .filter((d) => d.isVirtual)
+      .map((node) => {
+        return `const ${node.variableName}Import = new FileRoute('${node.routePath}').createRoute()`
+      })
+      .join('\n'),
     '\n',
     sortedRouteNodes
       .map((node) => {
@@ -450,7 +486,7 @@ export function hasParentRoute(
   }
   const segments = routePathToCheck.split('/')
   segments.pop() // Remove the last segment
-  const parentRoute = segments.join('/')
+  const parentRoutePath = segments.join('/')
 
-  return hasParentRoute(routes, parentRoute)
+  return hasParentRoute(routes, parentRoutePath)
 }