Repository: TanStack/router
Pull request #2100 (2024-08-07 07:46:11)

feat(router-generate): add option to skip generating route manifest
Add an option to the generator config to skip generating route manifest, as it's currently only being used in tanstack start. I added it as a non-breaking change so it stays enabled by default.

It's just a comment, but it can grow to thousands of lines of code that need to be processed and removed when we can just not generate it.

nx-cloud[bot]: # ☁️ Nx Cloud Report

CI is running for commit 780493c444779a92f71c3ca3feaf2d0c9928480c.

[📂 Click to track the progress, see the status, the terminal output, and the build insights.](https://cloud.nx.app/cipes/66b32668fead966c5789519d?utm_source=pull-request&utm_medium=comment)


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)
pkg-pr-new[bot]: 
_commit: <a href="https://github.com/TanStack/router/runs/28447264286"><code>780493c</code></a>_


<details><summary><b>@tanstack/history</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/history@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/react-cross-context</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-router@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router-with-query</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/router-cli</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-cli@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/router-devtools</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-devtools@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/router-generator</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-generator@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/router-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-plugin@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/router-vite-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/start</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/start@2100
```

</p></details>
      
    

<details><summary><b>@tanstack/start-vite-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2100
```

</p></details>
      
    

[Open in Stackblitz](https://pkg.pr.new/template/fdb46b10-d94a-4601-9fa2-4ba550db2b33)
<details><summary><b>More templates</b></summary><p>

- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/4189135f-255f-4169-9942-bdf7d86d811c)
- [tanstack-router-react-example-basic](https://pkg.pr.new/template/d8ad5fd1-0a2e-436c-a445-ecd9459bc128)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/6f869b5b-dd5f-48b0-a242-af2f5fc27c58)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/72f62453-0425-4fa1-881d-03458255266c)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/bd9cbc36-6c65-4c58-9e09-417dda4f4828)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/c9150b40-414a-4357-95aa-1d832f67d22c)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/793460df-bb6a-44fd-a6e7-ad532b40f2e3)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/4198e4de-e68e-4b6d-a6fe-54133069d1f4)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/4fc875d0-acd3-4005-bdb6-b2ff522e635c)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/6b09a368-ebef-4da6-ab3b-7b1a6dca58e7)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/c34d050c-5f08-496e-9e4c-2c2f0fe9e0da)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/43563efa-f4e5-4805-9ebf-557c3f0428ce)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/4cb95313-ad70-4026-81d1-c04f9f111c74)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/6acf0a0b-04cd-4875-9b05-dd0377dd470f)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/184a3757-c90f-4c8a-b7d1-f8ef046b8993)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/cb0c24d5-8a36-442f-a9e3-31285ea97a8b)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/792e2862-620e-4eaf-b4a2-f28e46c13154)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/5f2097f9-3273-4e81-a2a1-e6a3155f9a84)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/cf632709-5fcd-450a-b235-a5dd77edc026)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/c052ff7b-6607-4d51-b31c-c765226fb281)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/a191435b-01b4-43ff-b8f4-a6370988b917)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/79ab0d8c-d8ed-45bd-8f53-c604d118dd02)
- [tanstack-router-example-react-start-basic](https://pkg.pr.new/template/b924f1a6-9ace-4b36-a5e2-d136919357a6)
- [tanstack-router-example-react-start-basic-counter](https://pkg.pr.new/template/61b7978d-f751-4481-8638-9d0f9fac1e7a)
- [tanstack-router-example-react-start-basic-react-query](https://pkg.pr.new/template/cde27a43-7610-47e6-aa98-a69fa441c013)
- [tanstack-router-example-react-start-basic-rsc](https://pkg.pr.new/template/5b67ef29-7ddb-4cc2-a84c-822190d75c4d)
- [tanstack-router-example-react-start-trello-trellaux](https://pkg.pr.new/template/c3e6aa48-2059-4460-aded-d61934cec807)
- [tanstack-router-example-react-start-basic-trellaux](https://pkg.pr.new/template/02434c01-8b72-4a28-9f97-cd63c226719f)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/15834dcb-8992-4aab-8192-60060bffe542)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/ba179a13-75c2-40db-8579-320799675f9a)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/5b4ebe82-5f3c-4ba5-bec2-6e626e46d3a1)

</p></details>
      
    


Patch:
diff --git a/docs/framework/react/guide/file-based-routing.md b/docs/framework/react/guide/file-based-routing.md
index 4d01c6f62..55ca5f58b 100644
--- a/docs/framework/react/guide/file-based-routing.md
+++ b/docs/framework/react/guide/file-based-routing.md
@@ -213,6 +213,8 @@ The following options are available for configuration via the `tsr.config.json`
   - (Optional, **Defaults to `false`**) add file extensions to the route names in the generated route tree
 - **`disableLogging`**
   - (Optional, **Defaults to `false`**) disables logging for the route generation process
+- **`disableManifestGeneration**
+  - (Optional, **Defaults to `false`**) disables generating the route tree manifest
 - **`routeTreeFileHeader`**
 
   - (Optional) An array of strings to prepend to the generated route tree file content.
diff --git a/packages/router-generator/src/config.ts b/packages/router-generator/src/config.ts
index e9b2d9e55..ca7858462 100644
--- a/packages/router-generator/src/config.ts
+++ b/packages/router-generator/src/config.ts
@@ -13,6 +13,7 @@ export const configSchema = z.object({
   disableTypes: z.boolean().optional().default(false),
   addExtensions: z.boolean().optional().default(false),
   disableLogging: z.boolean().optional().default(false),
+  disableManifestGeneration: z.boolean().optional().default(false),
   routeTreeFileHeader: z
     .array(z.string())
     .optional()
diff --git a/packages/router-generator/src/generator.ts b/packages/router-generator/src/generator.ts
index 2b68e76ef..e4038be0a 100644
--- a/packages/router-generator/src/generator.ts
+++ b/packages/router-generator/src/generator.ts
@@ -626,50 +626,53 @@ export async function generator(config: Config) {
     .filter(Boolean)
     .join('\n\n')
 
-  const routeManifest = JSON.stringify(
-    {
-      routes: {
-        __root__: {
-          filePath: rootRouteNode?.filePath,
-          children: routeTree.map(
-            (d) => getFilePathIdAndRouteIdFromPath(d.routePath!)[1],
+  const createRouteManifest = () =>
+    JSON.stringify(
+      {
+        routes: {
+          __root__: {
+            filePath: rootRouteNode?.filePath,
+            children: routeTree.map(
+              (d) => getFilePathIdAndRouteIdFromPath(d.routePath!)[1],
+            ),
+          },
+          ...Object.fromEntries(
+            routeNodes.map((d) => {
+              const [filePathId, routeId] = getFilePathIdAndRouteIdFromPath(
+                d.routePath!,
+              )
+
+              return [
+                routeId,
+                {
+                  filePath: d.filePath,
+                  parent: d.parent?.routePath
+                    ? getFilePathIdAndRouteIdFromPath(d.parent.routePath)[1]
+                    : undefined,
+                  children: d.children?.map(
+                    (childRoute) =>
+                      getFilePathIdAndRouteIdFromPath(childRoute.routePath!)[1],
+                  ),
+                },
+              ]
+            }),
           ),
         },
-        ...Object.fromEntries(
-          routeNodes.map((d) => {
-            const [filePathId, routeId] = getFilePathIdAndRouteIdFromPath(
-              d.routePath!,
-            )
-
-            return [
-              routeId,
-              {
-                filePath: d.filePath,
-                parent: d.parent?.routePath
-                  ? getFilePathIdAndRouteIdFromPath(d.parent.routePath)[1]
-                  : undefined,
-                children: d.children?.map(
-                  (childRoute) =>
-                    getFilePathIdAndRouteIdFromPath(childRoute.routePath!)[1],
-                ),
-              },
-            ]
-          }),
-        ),
       },
-    },
-    null,
-    2,
-  )
+      null,
+      2,
+    )
 
   const routeConfigFileContent = await prettier.format(
-    [
-      routeImports,
-      '\n',
-      '/* ROUTE_MANIFEST_START',
-      routeManifest,
-      'ROUTE_MANIFEST_END */',
-    ].join('\n'),
+    config.disableManifestGeneration
+      ? routeImports
+      : [
+          routeImports,
+          '\n',
+          '/* ROUTE_MANIFEST_START',
+          createRouteManifest(),
+          'ROUTE_MANIFEST_END */',
+        ].join('\n'),
     {
       semi: config.semicolons,
       singleQuote: config.quoteStyle === 'single',


Test patch:
diff --git a/packages/router-generator/tests/generator.test.ts b/packages/router-generator/tests/generator.test.ts
index c4bb0c5e5..218c1bda3 100644
--- a/packages/router-generator/tests/generator.test.ts
+++ b/packages/router-generator/tests/generator.test.ts
@@ -44,6 +44,9 @@ function rewriteConfigByFolderName(folderName: string, config: Config) {
       config.routeTreeFileHeader = ['// prepend1', '// prepend2']
       config.routeTreeFileFooter = ['// append1', '// append2']
       break
+    case 'no-manifest':
+      config.disableManifestGeneration = true
+      break
     default:
       break
   }
diff --git a/packages/router-generator/tests/generator/no-manifest/routeTree.snapshot.ts b/packages/router-generator/tests/generator/no-manifest/routeTree.snapshot.ts
new file mode 100644
index 000000000..042241cd8
--- /dev/null
+++ b/packages/router-generator/tests/generator/no-manifest/routeTree.snapshot.ts
@@ -0,0 +1,41 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren({ IndexRoute })
+
+/* prettier-ignore-end */
diff --git a/packages/router-generator/tests/generator/no-manifest/routes/__root.tsx b/packages/router-generator/tests/generator/no-manifest/routes/__root.tsx
new file mode 100644
index 000000000..ab504e42e
--- /dev/null
+++ b/packages/router-generator/tests/generator/no-manifest/routes/__root.tsx
@@ -0,0 +1,1 @@
+/** */
diff --git a/packages/router-generator/tests/generator/no-manifest/routes/index.tsx b/packages/router-generator/tests/generator/no-manifest/routes/index.tsx
new file mode 100644
index 000000000..ab504e42e
--- /dev/null
+++ b/packages/router-generator/tests/generator/no-manifest/routes/index.tsx
@@ -0,0 +1,1 @@
+/** */