chore(tanstack-react-start): Remove Vinxi dependency

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack

.changeset/curly-dots-stand.md

@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Updated minimum required version of `@tanstack/react-start` to 1.121.0, which removes the need for Vinxi.
+
+See [full migration guide](https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960).

integration/templates/tanstack-react-router/package.json

@@ -9,10 +9,9 @@
  "start": "vite"
  },
  "dependencies": {
- "@tanstack/react-router": "1.120.17",
- "@tanstack/react-router-devtools": "1.120.17",
- "@tanstack/router-generator": "1.120.17",
- "@tanstack/router-plugin": "1.120.17",
+ "@tanstack/react-router": "1.121.21",
+ "@tanstack/react-router-devtools": "1.121.21",
+ "@tanstack/router-plugin": "1.121.21",
  "react": "18.3.1",
  "react-dom": "18.3.1"
  },

integration/templates/tanstack-react-router/src/main.tsx

@@ -8,6 +8,7 @@ const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultStaleTime: 5000,
+ scrollRestoration: true,
 });
 
 // Register things for typesafety

integration/templates/tanstack-react-router/src/routeTree.gen.ts

@@ -1,196 +1,75 @@
-/* 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 PostsImport } from './routes/posts';
-import { Route as LayoutImport } from './routes/_layout';
-import { Route as IndexImport } from './routes/index';
-import { Route as PostsIndexImport } from './routes/posts.index';
-import { Route as PostsPostIdImport } from './routes/posts.$postId';
-import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2';
-import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b';
-import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a';
+// 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.
 
-// Create/Update Routes
-
-const PostsRoute = PostsImport.update({
- path: '/posts',
- getParentRoute: () => rootRoute,
-} as any);
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as SignInRouteImport } from './routes/sign-in';
+import { Route as IndexRouteImport } from './routes/index';
 
-const LayoutRoute = LayoutImport.update({
- id: '/_layout',
- getParentRoute: () => rootRoute,
+const SignInRoute = SignInRouteImport.update({
+ id: '/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
 } as any);
-
-const IndexRoute = IndexImport.update({
- path: '/',
- getParentRoute: () => rootRoute,
-} as any);
-
-const PostsIndexRoute = PostsIndexImport.update({
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
  path: '/',
- getParentRoute: () => PostsRoute,
+ getParentRoute: () => rootRouteImport,
 } as any);
 
-const PostsPostIdRoute = PostsPostIdImport.update({
- path: '/$postId',
- getParentRoute: () => PostsRoute,
-} as any);
-
-const LayoutLayout2Route = LayoutLayout2Import.update({
- id: '/_layout-2',
- getParentRoute: () => LayoutRoute,
-} as any);
-
-const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
- path: '/layout-b',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
- path: '/layout-a',
- getParentRoute: () => LayoutLayout2Route,
-} as any);
-
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport;
+ '/': typeof IndexRoute;
+ '/sign-in': typeof SignInRoute;
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath;
+ fullPaths: '/' | '/sign-in';
+ fileRoutesByTo: FileRoutesByTo;
+ to: '/' | '/sign-in';
+ id: '__root__' | '/' | '/sign-in';
+ fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute;
+ SignInRoute: typeof SignInRoute;
+}
 
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+ '/sign-in': {
+ id: '/sign-in';
+ path: '/sign-in';
+ fullPath: '/sign-in';
+ preLoaderRoute: typeof SignInRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
  '/': {
  id: '/';
  path: '/';
  fullPath: '/';
- preLoaderRoute: typeof IndexImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout': {
- id: '/_layout';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutImport;
- parentRoute: typeof rootRoute;
- };
- '/posts': {
- id: '/posts';
- path: '/posts';
- fullPath: '/posts';
- preLoaderRoute: typeof PostsImport;
- parentRoute: typeof rootRoute;
- };
- '/_layout/_layout-2': {
- id: '/_layout/_layout-2';
- path: '';
- fullPath: '';
- preLoaderRoute: typeof LayoutLayout2Import;
- parentRoute: typeof LayoutImport;
- };
- '/posts/$postId': {
- id: '/posts/$postId';
- path: '/$postId';
- fullPath: '/posts/$postId';
- preLoaderRoute: typeof PostsPostIdImport;
- parentRoute: typeof PostsImport;
- };
- '/posts/': {
- id: '/posts/';
- path: '/';
- fullPath: '/posts/';
- preLoaderRoute: typeof PostsIndexImport;
- parentRoute: typeof PostsImport;
- };
- '/_layout/_layout-2/layout-a': {
- id: '/_layout/_layout-2/layout-a';
- path: '/layout-a';
- fullPath: '/layout-a';
- preLoaderRoute: typeof LayoutLayout2LayoutAImport;
- parentRoute: typeof LayoutLayout2Import;
- };
- '/_layout/_layout-2/layout-b': {
- id: '/_layout/_layout-2/layout-b';
- path: '/layout-b';
- fullPath: '/layout-b';
- preLoaderRoute: typeof LayoutLayout2LayoutBImport;
- parentRoute: typeof LayoutLayout2Import;
+ preLoaderRoute: typeof IndexRouteImport;
+ parentRoute: typeof rootRouteImport;
  };
  }
 }
 
-// Create and export the route tree
-
-export const routeTree = rootRoute.addChildren({
- IndexRoute,
- LayoutRoute: LayoutRoute.addChildren({
- LayoutLayout2Route: LayoutLayout2Route.addChildren({
- LayoutLayout2LayoutARoute,
- LayoutLayout2LayoutBRoute,
- }),
- }),
- PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
-});
-
-/* prettier-ignore-end */
-
-/* ROUTE_MANIFEST_START
-{
- "routes": {
- "__root__": {
- "filePath": "__root.tsx",
- "children": [
- "/",
- "/_layout",
- "/posts"
- ]
- },
- "/": {
- "filePath": "index.tsx"
- },
- "/_layout": {
- "filePath": "_layout.tsx",
- "children": [
- "/_layout/_layout-2"
- ]
- },
- "/posts": {
- "filePath": "posts.tsx",
- "children": [
- "/posts/$postId",
- "/posts/"
- ]
- },
- "/_layout/_layout-2": {
- "filePath": "_layout/_layout-2.tsx",
- "parent": "/_layout",
- "children": [
- "/_layout/_layout-2/layout-a",
- "/_layout/_layout-2/layout-b"
- ]
- },
- "/posts/$postId": {
- "filePath": "posts.$postId.tsx",
- "parent": "/posts"
- },
- "/posts/": {
- "filePath": "posts.index.tsx",
- "parent": "/posts"
- },
- "/_layout/_layout-2/layout-a": {
- "filePath": "_layout/_layout-2/layout-a.tsx",
- "parent": "/_layout/_layout-2"
- },
- "/_layout/_layout-2/layout-b": {
- "filePath": "_layout/_layout-2/layout-b.tsx",
- "parent": "/_layout/_layout-2"
- }
- }
-}
-ROUTE_MANIFEST_END */
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SignInRoute: SignInRoute,
+};
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>();

integration/templates/tanstack-react-router/src/routes/__root.tsx

@@ -18,7 +18,12 @@ export const Route = createRootRoute({
 function RootComponent() {
  return (
  <ClerkProvider>
- <Outlet />
+ <div className='p-2'>
+ <div className='border-b'>I'm a layout</div>
+ <div>
+ <Outlet />
+ </div>
+ </div>
  <TanStackRouterDevtools position='bottom-right' />
  </ClerkProvider>
  );

integration/templates/tanstack-react-router/tsconfig.json

@@ -2,6 +2,8 @@
  "compilerOptions": {
  "strict": true,
  "esModuleInterop": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "skipLibCheck": true
  }
 }

integration/templates/tanstack-react-router/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [TanStackRouterVite(), react()],
+ plugins: [
+ tanstackRouter({
+ target: 'react',
+ autoCodeSplitting: true,
+ }),
+ react(),
+ ],
 });

integration/templates/tanstack-react-start/.gitignore

@@ -7,14 +7,14 @@ yarn.lock
 .env
 .vercel
 .output
-.vinxi
-
+.nitro
 /build/
 /api/
 /server/build
-/public/build
-.vinxi
-# Sentry Config File
+/public/build # Sentry Config File
 .env.sentry-build-plugin
 /test-results/
+/playwright-report/
 /blob-report/
+/playwright/.cache/
+.tanstack