fix(route-cli): make quote style configurable (#894)

* feat(router-cli): make quoteStyle configurable * set `quoteStyle` to `double` in one example
TanStack · Dec 29, 2023 · 3b6b8d0 · 3b6b8d0
1 parent c96a623
commit 3b6b8d0
Show file tree

Hide file tree

Showing 20 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...es/react/kitchen-sink-react-query-file-based/src/routes/dashboard.invoices.$invoiceId.tsx b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {