From 3b6b8d0da92e505fb8a7475526594b3eef1efdd1 Mon Sep 17 00:00:00 2001
From: Manuel Schiller <manuel.schiller@caligano.de>
Date: Fri, 29 Dec 2023 16:43:11 +0100
Subject: [PATCH] fix(route-cli): make quote style configurable (#894)

* feat(router-cli): make quoteStyle configurable

* set `quoteStyle` to `double` in one example
---
 docs/api/router-cli.md                                         | 1 +
 .../src/routes/_auth.profile.tsx                               | 2 +-
 .../kitchen-sink-react-query-file-based/src/routes/_auth.tsx   | 2 +-
 .../src/routes/_layout.layout-a.tsx                            | 2 +-
 .../src/routes/_layout.layout-b.tsx                            | 2 +-
 .../kitchen-sink-react-query-file-based/src/routes/_layout.tsx | 2 +-
 .../src/routes/dashboard.index.tsx                             | 2 +-
 .../src/routes/dashboard.invoices.$invoiceId.tsx               | 2 +-
 .../src/routes/dashboard.invoices.index.tsx                    | 2 +-
 .../src/routes/dashboard.invoices.tsx                          | 2 +-
 .../src/routes/dashboard.tsx                                   | 2 +-
 .../src/routes/dashboard.users.index.tsx                       | 2 +-
 .../src/routes/dashboard.users.tsx                             | 2 +-
 .../src/routes/dashboard.users.user.tsx                        | 2 +-
 .../src/routes/expensive/index.tsx                             | 2 +-
 .../kitchen-sink-react-query-file-based/src/routes/index.tsx   | 2 +-
 .../kitchen-sink-react-query-file-based/src/routes/login.tsx   | 2 +-
 .../react/kitchen-sink-react-query-file-based/tsr.config.json  | 3 ++-
 packages/router-cli/src/config.ts                              | 1 +
 packages/router-cli/src/generator.ts                           | 3 ++-
 20 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/api/router-cli.md b/docs/api/router-cli.md
index b064f1d5e1..b74af0c006 100644
--- a/docs/api/router-cli.md
+++ b/docs/api/router-cli.md
@@ -21,6 +21,7 @@ The CLI can be configured via a `tsr.config.json` file in the project's root dir
 - **`routeFileIgnorePrefix`**: (Optional, **Defaults to `-`**) Route files and directories that start with this string will be ignored. By default this is set to `-` to allow for the use of directories to house related files that do not contain any route files.
 - **`routesDirectory`**: (Required) The directory containing the routes relative to the cwd.
 - **`generatedRouteTree`**: (Required) The path to the file where the generated route tree will be saved, relative to the cwd.
+- **`quoteStyle`**: (Optional, **Defaults to `single`**) whether to use `single` or `double` quotes when writing the route ids in `new FileRoute()`
 
 ## Example
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.profile.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.profile.tsx
index 47af9fd3a2..9d8d447592 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.profile.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.profile.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { FileRoute } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/_auth/profile').createRoute({
+export const Route = new FileRoute("/_auth/profile").createRoute({
   component: ProfileComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.tsx
index 5df01b38d5..5edde7080a 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/_auth.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { FileRoute, Link, redirect } from '@tanstack/react-router'
 import { auth } from '../utils/auth'
 
-export const Route = new FileRoute('/_auth').createRoute({
+export const Route = new FileRoute("/_auth").createRoute({
   // Before loading, authenticate the user via our auth context
   // This will also happen during prefetching (e.g. hovering over links, etc)
   beforeLoad: ({ context, location }) => {
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-a.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-a.tsx
index ce915536e0..f7b10d1fde 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-a.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-a.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { FileRoute } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/_layout/layout-a').createRoute({
+export const Route = new FileRoute("/_layout/layout-a").createRoute({
   component: LayoutAComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-b.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-b.tsx
index 079d49c467..79ab32d908 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-b.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.layout-b.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { FileRoute } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/_layout/layout-b').createRoute({
+export const Route = new FileRoute("/_layout/layout-b").createRoute({
   component: LayoutBComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.tsx
index 1461db9048..e1d753349c 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/_layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Link, Outlet, FileRoute } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/_layout').createRoute({
+export const Route = new FileRoute("/_layout").createRoute({
   component: LayoutComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.index.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.index.tsx
index c2def8dfca..9cac0d2803 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.index.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.index.tsx
@@ -3,7 +3,7 @@ import { FileRoute } from '@tanstack/react-router'
 import { invoicesQueryOptions } from '../utils/queryOptions'
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-export const Route = new FileRoute('/dashboard/').createRoute({
+export const Route = new FileRoute("/dashboard/").createRoute({
   loader: (opts) =>
     opts.context.queryClient.ensureQueryData(invoicesQueryOptions()),
   component: DashboardIndexComponent,
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.$invoiceId.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
index c75a0bfe65..a267752fcc 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.$invoiceId.tsx
@@ -8,7 +8,7 @@ import {
 } from '../utils/queryOptions'
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-export const Route = new FileRoute('/dashboard/invoices/$invoiceId').createRoute({
+export const Route = new FileRoute("/dashboard/invoices/$invoiceId").createRoute({
   parseParams: (params) => ({
     invoiceId: z.number().int().parse(Number(params.invoiceId)),
   }),
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.index.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.index.tsx
index 493d082f59..8a3ce13964 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.index.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.index.tsx
@@ -6,7 +6,7 @@ import { Spinner } from '../components/Spinner'
 import { useCreateInvoiceMutation } from '../utils/queryOptions'
 
 // @ts-ignore
-export const Route = new FileRoute('/dashboard/invoices/').createRoute({
+export const Route = new FileRoute("/dashboard/invoices/").createRoute({
   component: InvoicesIndexComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.tsx
index ec92584738..887b95f1c9 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.tsx
@@ -4,7 +4,7 @@ import { Spinner } from '../components/Spinner'
 import { invoicesQueryOptions } from '../utils/queryOptions'
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-export const Route = new FileRoute('/dashboard/invoices').createRoute({
+export const Route = new FileRoute("/dashboard/invoices").createRoute({
   loader: (opts) =>
     opts.context.queryClient.ensureQueryData(invoicesQueryOptions()),
   component: InvoicesComponent,
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.tsx
index 3e1dfa7d57..c87249c91c 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { FileRoute, Link, Outlet } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/dashboard').createRoute({
+export const Route = new FileRoute("/dashboard").createRoute({
   component: DashboardComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.index.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.index.tsx
index ec97dffc03..461446d09c 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.index.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { FileRoute } from '@tanstack/react-router'
 
 // @ts-ignore
-export const Route = new FileRoute('/dashboard/users/').createRoute({
+export const Route = new FileRoute("/dashboard/users/").createRoute({
   component: UsersIndexComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.tsx
index bd360e507e..a8873577e6 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.tsx
@@ -13,7 +13,7 @@ import { usersQueryOptions } from '../utils/queryOptions'
 
 type UsersViewSortBy = 'name' | 'id' | 'email'
 
-export const Route = new FileRoute('/dashboard/users').createRoute({
+export const Route = new FileRoute("/dashboard/users").createRoute({
   validateSearch: z.object({
     usersView: z
       .object({
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.user.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.user.tsx
index b119c30941..358b2d4dd9 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.user.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/dashboard.users.user.tsx
@@ -4,7 +4,7 @@ import { z } from 'zod'
 import { userQueryOptions } from '../utils/queryOptions'
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-export const Route = new FileRoute('/dashboard/users/user').createRoute({
+export const Route = new FileRoute("/dashboard/users/user").createRoute({
   validateSearch: z.object({
     userId: z.number(),
   }),
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/expensive/index.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/expensive/index.tsx
index 8ddfdc974d..7757d3719f 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/expensive/index.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/expensive/index.tsx
@@ -1,5 +1,5 @@
 import { FileRoute, lazyRouteComponent } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/expensive/').createRoute({
+export const Route = new FileRoute("/expensive/").createRoute({
   component: lazyRouteComponent(() => import('./-components/Expensive')),
 })
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/index.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/index.tsx
index 4ac25bd75d..e7c1889a9f 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/index.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { FileRoute, Link } from '@tanstack/react-router'
 
-export const Route = new FileRoute('/').createRoute({
+export const Route = new FileRoute("/").createRoute({
   component: IndexComponent,
 })
 
diff --git a/examples/react/kitchen-sink-react-query-file-based/src/routes/login.tsx b/examples/react/kitchen-sink-react-query-file-based/src/routes/login.tsx
index 2ce60a3cd5..9400378f09 100644
--- a/examples/react/kitchen-sink-react-query-file-based/src/routes/login.tsx
+++ b/examples/react/kitchen-sink-react-query-file-based/src/routes/login.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { FileRoute, useRouter } from '@tanstack/react-router'
 import { z } from 'zod'
 
-export const Route = new FileRoute('/login')
+export const Route = new FileRoute("/login")
   .createRoute({
     validateSearch: z.object({
       redirect: z.string().optional(),
diff --git a/examples/react/kitchen-sink-react-query-file-based/tsr.config.json b/examples/react/kitchen-sink-react-query-file-based/tsr.config.json
index 2be9cf2346..828cc67713 100644
--- a/examples/react/kitchen-sink-react-query-file-based/tsr.config.json
+++ b/examples/react/kitchen-sink-react-query-file-based/tsr.config.json
@@ -1,5 +1,6 @@
 {
   "rootDirectory": ".",
   "routesDirectory": "./src/routes",
-  "generatedRouteTree": "./src/routeTree.gen.ts"
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "quoteStyle": "double"
 }
diff --git a/packages/router-cli/src/config.ts b/packages/router-cli/src/config.ts
index 531469cd3f..3a286484c6 100644
--- a/packages/router-cli/src/config.ts
+++ b/packages/router-cli/src/config.ts
@@ -7,6 +7,7 @@ const configSchema = z.object({
   routeFileIgnorePrefix: z.string().optional(),
   routesDirectory: z.string(),
   generatedRouteTree: z.string(),
+  quoteStyle: z.enum(['single', 'double']).optional().default('single'),
 })
 
 export type Config = z.infer<typeof configSchema>
diff --git a/packages/router-cli/src/generator.ts b/packages/router-cli/src/generator.ts
index 10c2035f23..4d289a1b34 100644
--- a/packages/router-cli/src/generator.ts
+++ b/packages/router-cli/src/generator.ts
@@ -184,9 +184,10 @@ export async function generator(config: Config) {
       // we have to double escape it into $$$$. For more information, see
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_the_replacement
       const escapedRoutePath = node.routePath?.replaceAll('$', '$$$$') ?? ''
+      const quote = config.quoteStyle === 'single' ? `'` : `"`
       const replaced = routeCode.replace(
         fileRouteRegex,
-        `new FileRoute('${escapedRoutePath}')`,
+        `new FileRoute(${quote}${escapedRoutePath}${quote})`,
       )
 
       if (replaced !== routeCode) {