fix: fix jiti usage for tsconfig paths

.changeset/quiet-rivers-serve.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/router-generator': patch
+---
+
+Resolve tsconfig path aliases when loading virtual route config files.

packages/router-generator/src/filesystem/virtual/loadConfigFile.ts

@@ -1,7 +1,10 @@
 import { createJiti } from 'jiti'
 
 export async function loadConfigFile(filePath: string) {
-  const jiti = createJiti(filePath, { interopDefault: false })
+  const jiti = createJiti(filePath, {
+    interopDefault: false,
+    tsconfigPaths: true,
+  })
   const loaded = await jiti.import<any>(filePath)
   return loaded
 }

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/aliased/virtual-routes.ts

@@ -0,0 +1,3 @@
+import { physical } from '@tanstack/virtual-file-routes'
+
+export const helloSubtree = physical('/hello', 'subtree')

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routeTree.snapshot.ts

@@ -0,0 +1,292 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/root'
+import { Route as layoutRouteImport } from './routes/layout'
+import { Route as indexRouteImport } from './routes/index'
+import { Route as dbDashboardRouteImport } from './routes/db/dashboard'
+import { Route as pagesRouteImport } from './routes/pages'
+import { Route as HelloIndexRouteImport } from './routes/subtree/index'
+import { Route as dbDashboardInvoicesRouteImport } from './routes/db/dashboard-invoices'
+import { Route as dbDashboardIndexRouteImport } from './routes/db/dashboard-index'
+import { Route as HelloFooIndexRouteImport } from './routes/subtree/foo/index'
+import { Route as HelloFooIdRouteImport } from './routes/subtree/foo/$id'
+import { Route as dbInvoiceDetailRouteImport } from './routes/db/invoice-detail'
+import { Route as dbInvoicesIndexRouteImport } from './routes/db/invoices-index'
+
+const layoutRoute = layoutRouteImport.update({
+  id: '/_layout',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const indexRoute = indexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const dbDashboardRoute = dbDashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => layoutRoute,
+} as any)
+const pagesRoute = pagesRouteImport.update({
+  id: '/$lang/',
+  path: '/$lang/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const HelloIndexRoute = HelloIndexRouteImport.update({
+  id: '/hello/',
+  path: '/hello/',
+  getParentRoute: () => layoutRoute,
+} as any)
+const dbDashboardInvoicesRoute = dbDashboardInvoicesRouteImport.update({
+  id: '/invoices',
+  path: '/invoices',
+  getParentRoute: () => dbDashboardRoute,
+} as any)
+const dbDashboardIndexRoute = dbDashboardIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => dbDashboardRoute,
+} as any)
+const HelloFooIndexRoute = HelloFooIndexRouteImport.update({
+  id: '/hello/foo/',
+  path: '/hello/foo/',
+  getParentRoute: () => layoutRoute,
+} as any)
+const HelloFooIdRoute = HelloFooIdRouteImport.update({
+  id: '/hello/foo/$id',
+  path: '/hello/foo/$id',
+  getParentRoute: () => layoutRoute,
+} as any)
+const dbInvoiceDetailRoute = dbInvoiceDetailRouteImport.update({
+  id: '/$id',
+  path: '/$id',
+  getParentRoute: () => dbDashboardInvoicesRoute,
+} as any)
+const dbInvoicesIndexRoute = dbInvoicesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => dbDashboardInvoicesRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof indexRoute
+  '/$lang/': typeof pagesRoute
+  '/dashboard': typeof dbDashboardRouteWithChildren
+  '/dashboard/': typeof dbDashboardIndexRoute
+  '/dashboard/invoices': typeof dbDashboardInvoicesRouteWithChildren
+  '/hello/': typeof HelloIndexRoute
+  '/dashboard/invoices/': typeof dbInvoicesIndexRoute
+  '/dashboard/invoices/$id': typeof dbInvoiceDetailRoute
+  '/hello/foo/$id': typeof HelloFooIdRoute
+  '/hello/foo/': typeof HelloFooIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof indexRoute
+  '/$lang': typeof pagesRoute
+  '/dashboard': typeof dbDashboardIndexRoute
+  '/hello': typeof HelloIndexRoute
+  '/dashboard/invoices': typeof dbInvoicesIndexRoute
+  '/dashboard/invoices/$id': typeof dbInvoiceDetailRoute
+  '/hello/foo/$id': typeof HelloFooIdRoute
+  '/hello/foo': typeof HelloFooIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof indexRoute
+  '/_layout': typeof layoutRouteWithChildren
+  '/$lang/': typeof pagesRoute
+  '/_layout/dashboard': typeof dbDashboardRouteWithChildren
+  '/_layout/dashboard/': typeof dbDashboardIndexRoute
+  '/_layout/dashboard/invoices': typeof dbDashboardInvoicesRouteWithChildren
+  '/_layout/hello/': typeof HelloIndexRoute
+  '/_layout/dashboard/invoices/': typeof dbInvoicesIndexRoute
+  '/_layout/dashboard/invoices/$id': typeof dbInvoiceDetailRoute
+  '/_layout/hello/foo/$id': typeof HelloFooIdRoute
+  '/_layout/hello/foo/': typeof HelloFooIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/$lang/'
+    | '/dashboard'
+    | '/dashboard/'
+    | '/dashboard/invoices'
+    | '/hello/'
+    | '/dashboard/invoices/'
+    | '/dashboard/invoices/$id'
+    | '/hello/foo/$id'
+    | '/hello/foo/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/$lang'
+    | '/dashboard'
+    | '/hello'
+    | '/dashboard/invoices'
+    | '/dashboard/invoices/$id'
+    | '/hello/foo/$id'
+    | '/hello/foo'
+  id:
+    | '__root__'
+    | '/'
+    | '/_layout'
+    | '/$lang/'
+    | '/_layout/dashboard'
+    | '/_layout/dashboard/'
+    | '/_layout/dashboard/invoices'
+    | '/_layout/hello/'
+    | '/_layout/dashboard/invoices/'
+    | '/_layout/dashboard/invoices/$id'
+    | '/_layout/hello/foo/$id'
+    | '/_layout/hello/foo/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  indexRoute: typeof indexRoute
+  layoutRoute: typeof layoutRouteWithChildren
+  pagesRoute: typeof pagesRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/_layout': {
+      id: '/_layout'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof layoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof indexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_layout/dashboard': {
+      id: '/_layout/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof dbDashboardRouteImport
+      parentRoute: typeof layoutRoute
+    }
+    '/$lang/': {
+      id: '/$lang/'
+      path: '/$lang'
+      fullPath: '/$lang/'
+      preLoaderRoute: typeof pagesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_layout/hello/': {
+      id: '/_layout/hello/'
+      path: '/hello'
+      fullPath: '/hello/'
+      preLoaderRoute: typeof HelloIndexRouteImport
+      parentRoute: typeof layoutRoute
+    }
+    '/_layout/dashboard/invoices': {
+      id: '/_layout/dashboard/invoices'
+      path: '/invoices'
+      fullPath: '/dashboard/invoices'
+      preLoaderRoute: typeof dbDashboardInvoicesRouteImport
+      parentRoute: typeof dbDashboardRoute
+    }
+    '/_layout/dashboard/': {
+      id: '/_layout/dashboard/'
+      path: '/'
+      fullPath: '/dashboard/'
+      preLoaderRoute: typeof dbDashboardIndexRouteImport
+      parentRoute: typeof dbDashboardRoute
+    }
+    '/_layout/hello/foo/': {
+      id: '/_layout/hello/foo/'
+      path: '/hello/foo'
+      fullPath: '/hello/foo/'
+      preLoaderRoute: typeof HelloFooIndexRouteImport
+      parentRoute: typeof layoutRoute
+    }
+    '/_layout/hello/foo/$id': {
+      id: '/_layout/hello/foo/$id'
+      path: '/hello/foo/$id'
+      fullPath: '/hello/foo/$id'
+      preLoaderRoute: typeof HelloFooIdRouteImport
+      parentRoute: typeof layoutRoute
+    }
+    '/_layout/dashboard/invoices/$id': {
+      id: '/_layout/dashboard/invoices/$id'
+      path: '/$id'
+      fullPath: '/dashboard/invoices/$id'
+      preLoaderRoute: typeof dbInvoiceDetailRouteImport
+      parentRoute: typeof dbDashboardInvoicesRoute
+    }
+    '/_layout/dashboard/invoices/': {
+      id: '/_layout/dashboard/invoices/'
+      path: '/'
+      fullPath: '/dashboard/invoices/'
+      preLoaderRoute: typeof dbInvoicesIndexRouteImport
+      parentRoute: typeof dbDashboardInvoicesRoute
+    }
+  }
+}
+
+interface dbDashboardInvoicesRouteChildren {
+  dbInvoicesIndexRoute: typeof dbInvoicesIndexRoute
+  dbInvoiceDetailRoute: typeof dbInvoiceDetailRoute
+}
+
+const dbDashboardInvoicesRouteChildren: dbDashboardInvoicesRouteChildren = {
+  dbInvoicesIndexRoute: dbInvoicesIndexRoute,
+  dbInvoiceDetailRoute: dbInvoiceDetailRoute,
+}
+
+const dbDashboardInvoicesRouteWithChildren =
+  dbDashboardInvoicesRoute._addFileChildren(dbDashboardInvoicesRouteChildren)
+
+interface dbDashboardRouteChildren {
+  dbDashboardIndexRoute: typeof dbDashboardIndexRoute
+  dbDashboardInvoicesRoute: typeof dbDashboardInvoicesRouteWithChildren
+}
+
+const dbDashboardRouteChildren: dbDashboardRouteChildren = {
+  dbDashboardIndexRoute: dbDashboardIndexRoute,
+  dbDashboardInvoicesRoute: dbDashboardInvoicesRouteWithChildren,
+}
+
+const dbDashboardRouteWithChildren = dbDashboardRoute._addFileChildren(
+  dbDashboardRouteChildren,
+)
+
+interface layoutRouteChildren {
+  dbDashboardRoute: typeof dbDashboardRouteWithChildren
+  HelloIndexRoute: typeof HelloIndexRoute
+  HelloFooIdRoute: typeof HelloFooIdRoute
+  HelloFooIndexRoute: typeof HelloFooIndexRoute
+}
+
+const layoutRouteChildren: layoutRouteChildren = {
+  dbDashboardRoute: dbDashboardRouteWithChildren,
+  HelloIndexRoute: HelloIndexRoute,
+  HelloFooIdRoute: HelloFooIdRoute,
+  HelloFooIndexRoute: HelloFooIndexRoute,
+}
+
+const layoutRouteWithChildren =
+  layoutRoute._addFileChildren(layoutRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  indexRoute: indexRoute,
+  layoutRoute: layoutRouteWithChildren,
+  pagesRoute: pagesRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+import { index, layout, rootRoute, route } from '@tanstack/virtual-file-routes'
+import { helloSubtree } from '@/virtual-routes'
+
+export default rootRoute('root.tsx', [
+  index('index.tsx'),
+  route('$lang', [index('pages.tsx')]),
+  layout('layout.tsx', [
+    route('/dashboard', 'db/dashboard.tsx', [
+      index('db/dashboard-index.tsx'),
+      route('/invoices', 'db/dashboard-invoices.tsx', [
+        index('db/invoices-index.tsx'),
+        route('$id', 'db/invoice-detail.tsx'),
+      ]),
+    ]),
+    helloSubtree,
+  ]),
+])

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard-index.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/dashboard/')({
+  component: () => <div>Hello !</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard-invoices.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/dashboard/invoices')({
+  component: () => <div>Hello !</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/dashboard')({
+  component: () => <div>Hello !</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/invoice-detail.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/dashboard/invoices/$id')({
+  component: () => <div>Hello /_layout/dashboard/invoices/$id!</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/invoices-index.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/dashboard/invoices/')({
+  component: () => <div>Hello /_layout/dashboard/invoices/!</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/index.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/')({
+  component: () => <div>Hello !</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/layout.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout')({
+  component: () => <div>Hello !</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/pages.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+
+export const Route = createFileRoute('/$lang/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/$lang/"!</div>
+}

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/root.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: () => <div>Hello !</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/foo/$id.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/hello/foo/$id')({
+  component: () => <div>Hello /foo/$id!</div>,
+})

packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/foo/index.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_layout/hello/foo/')({
+  component: () => <div>Hello /foo/!</div>,
+})