chore(tanstack-react-start): WIP WIP 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 (Devinxi), which removes the need for Vinxi.
+
+See full migration guide: https://github.com/TanStack/router/discussions/2863#discussioncomment-13104960

integration/presets/tanstack.ts

@@ -23,6 +23,6 @@ const reactStart = applicationConfig()
   .addDependency('@clerk/tanstack-react-start', linkPackage('tanstack-react-start'));
 
 export const tanstack = {
-  reactStart,
   reactRouter,
+  reactStart,
 } as const;

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.2",
+    "@tanstack/react-router-devtools": "^1.121.5",
+    "@tanstack/router-plugin": "^1.121.7",
     "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