diff --git a/.changeset/quiet-rivers-serve.md b/.changeset/quiet-rivers-serve.md new file mode 100644 index 0000000000..0a465846b2 --- /dev/null +++ b/.changeset/quiet-rivers-serve.md @@ -0,0 +1,5 @@ +--- +'@tanstack/router-generator': patch +--- + +Resolve tsconfig path aliases when loading virtual route config files. diff --git a/packages/router-generator/src/filesystem/virtual/loadConfigFile.ts b/packages/router-generator/src/filesystem/virtual/loadConfigFile.ts index 477226eb70..a4606e4e19 100644 --- a/packages/router-generator/src/filesystem/virtual/loadConfigFile.ts +++ b/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(filePath) return loaded } diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/aliased/virtual-routes.ts b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/aliased/virtual-routes.ts new file mode 100644 index 0000000000..ed71a051e8 --- /dev/null +++ b/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') diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routeTree.snapshot.ts b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routeTree.snapshot.ts new file mode 100644 index 0000000000..3d3c2de9d5 --- /dev/null +++ b/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() diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes.ts b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes.ts new file mode 100644 index 0000000000..149e6ae4c1 --- /dev/null +++ b/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, + ]), +]) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard-index.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard-index.tsx new file mode 100644 index 0000000000..ecd8cce943 --- /dev/null +++ b/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: () =>
Hello !
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard-invoices.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard-invoices.tsx new file mode 100644 index 0000000000..0997d6d9f5 --- /dev/null +++ b/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: () =>
Hello !
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/dashboard.tsx new file mode 100644 index 0000000000..5963d884c6 --- /dev/null +++ b/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: () =>
Hello !
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/invoice-detail.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/invoice-detail.tsx new file mode 100644 index 0000000000..5226e399a4 --- /dev/null +++ b/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: () =>
Hello /_layout/dashboard/invoices/$id!
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/invoices-index.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/db/invoices-index.tsx new file mode 100644 index 0000000000..c2024685a8 --- /dev/null +++ b/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: () =>
Hello /_layout/dashboard/invoices/!
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/index.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/index.tsx new file mode 100644 index 0000000000..2f80221276 --- /dev/null +++ b/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: () =>
Hello !
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/layout.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/layout.tsx new file mode 100644 index 0000000000..268d6c5c7d --- /dev/null +++ b/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: () =>
Hello !
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/pages.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/pages.tsx new file mode 100644 index 0000000000..5e4d543b3e --- /dev/null +++ b/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
Hello "/$lang/"!
+} diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/root.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/root.tsx new file mode 100644 index 0000000000..a294139860 --- /dev/null +++ b/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: () =>
Hello !
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/foo/$id.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/foo/$id.tsx new file mode 100644 index 0000000000..62bf75cc7f --- /dev/null +++ b/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: () =>
Hello /foo/$id!
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/foo/index.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/foo/index.tsx new file mode 100644 index 0000000000..b2355f12fd --- /dev/null +++ b/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: () =>
Hello /foo/!
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/index.tsx b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/index.tsx new file mode 100644 index 0000000000..c85f0fb295 --- /dev/null +++ b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/routes/subtree/index.tsx @@ -0,0 +1,4 @@ +import { createFileRoute } from '@tanstack/react-router' +export const Route = createFileRoute('/_layout/hello/')({ + component: () =>
Hello /!
, +}) diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/tsconfig.json b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/tsconfig.json new file mode 100644 index 0000000000..7426947cc5 --- /dev/null +++ b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./aliased/*"] + } + } +} diff --git a/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/tsr.config.json b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/tsr.config.json new file mode 100644 index 0000000000..4d587108e3 --- /dev/null +++ b/packages/router-generator/tests/generator/virtual-config-file-tsconfig-paths/tsr.config.json @@ -0,0 +1,5 @@ +{ + "routesDirectory": "./routes", + "generatedRouteTree": "./routeTree.gen.ts", + "virtualRouteConfig": "./routes.ts" +}