chore(tanstack-start): Update deps & integration tests (#4575)

clerk · Nov 15, 2024 · e5b9b85 · e5b9b85
1 parent b28c5e8
commit e5b9b85
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 132 deletions.
diff --git a/.changeset/beige-parrots-yawn.md b/.changeset/beige-parrots-yawn.md
@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-start': minor
+---
+
+**Breaking change:** Update `@tanstack/react-router` peer dependency from `>=1.49.1` to `>=1.81.9`. Also update `@tanstack/start` peer dependency from `>=1.49.1` to `>=1.81.9`. This update coincides with the [changed server function syntax & server middleware](https://github.com/TanStack/router/pull/2513) that will allow the SDK more functionality in the future.
+
+When updating your `@clerk/tanstack-start` version you'll need to change various pieces in your code, Clerk's documentation ([quickstart](https://clerk.com/docs/quickstarts/tanstack-start), [reference](https://clerk.com/docs/references/tanstack-start/overview)) has been updated to account for that.
diff --git a/integration/templates/tanstack-start/app/client.tsx b/integration/templates/tanstack-start/app/client.tsx
@@ -4,4 +4,4 @@ import { createRouter } from './router'
 
 const router = createRouter()
 
-hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)
+hydrateRoot(document!, <StartClient router={router} />)
diff --git a/integration/templates/tanstack-start/app/routeTree.gen.ts b/integration/templates/tanstack-start/app/routeTree.gen.ts
@@ -1,49 +1,39 @@
-/* prettier-ignore-start */
-
 /* eslint-disable */
 
 // @ts-nocheck
 
 // noinspection JSUnusedGlobalSymbols
 
-// This file is auto-generated by TanStack Router
+// 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 Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as SignInImport } from './routes/sign-in'
 import { Route as LayoutImport } from './routes/_layout'
 import { Route as IndexImport } from './routes/index'
-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'
 
 // Create/Update Routes
 
+const SignInRoute = SignInImport.update({
+  id: '/sign-in',
+  path: '/sign-in',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const LayoutRoute = LayoutImport.update({
   id: '/_layout',
   getParentRoute: () => rootRoute,
 } as any)
 
 const IndexRoute = IndexImport.update({
+  id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
 } 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
 
 declare module '@tanstack/react-router' {
@@ -62,43 +52,61 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutImport
       parentRoute: typeof rootRoute
     }
-    '/_layout/_layout-2': {
-      id: '/_layout/_layout-2'
-      path: ''
-      fullPath: ''
-      preLoaderRoute: typeof LayoutLayout2Import
-      parentRoute: typeof LayoutImport
-    }
-    '/_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
+    '/sign-in': {
+      id: '/sign-in'
+      path: '/sign-in'
+      fullPath: '/sign-in'
+      preLoaderRoute: typeof SignInImport
+      parentRoute: typeof rootRoute
     }
   }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren({
-  IndexRoute,
-  LayoutRoute: LayoutRoute.addChildren({
-    LayoutLayout2Route: LayoutLayout2Route.addChildren({
-      LayoutLayout2LayoutARoute,
-      LayoutLayout2LayoutBRoute,
-    }),
-  }),
-})
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '': typeof LayoutRoute
+  '/sign-in': typeof SignInRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '': typeof LayoutRoute
+  '/sign-in': typeof SignInRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/_layout': typeof LayoutRoute
+  '/sign-in': typeof SignInRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '' | '/sign-in'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '' | '/sign-in'
+  id: '__root__' | '/' | '/_layout' | '/sign-in'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  LayoutRoute: typeof LayoutRoute
+  SignInRoute: typeof SignInRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  LayoutRoute: LayoutRoute,
+  SignInRoute: SignInRoute,
+}
 
-/* prettier-ignore-end */
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
 
 /* ROUTE_MANIFEST_START
 {
@@ -107,33 +115,18 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/_layout"
+        "/_layout",
+        "/sign-in"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
     "/_layout": {
-      "filePath": "_layout.tsx",
-      "children": [
-        "/_layout/_layout-2"
-      ]
-    },
-    "/_layout/_layout-2": {
-      "filePath": "_layout/_layout-2.tsx",
-      "parent": "/_layout",
-      "children": [
-        "/_layout/_layout-2/layout-a",
-        "/_layout/_layout-2/layout-b"
-      ]
-    },
-    "/_layout/_layout-2/layout-a": {
-      "filePath": "_layout/_layout-2/layout-a.tsx",
-      "parent": "/_layout/_layout-2"
+      "filePath": "_layout.tsx"
     },
-    "/_layout/_layout-2/layout-b": {
-      "filePath": "_layout/_layout-2/layout-b.tsx",
-      "parent": "/_layout/_layout-2"
+    "/sign-in": {
+      "filePath": "sign-in.tsx"
     }
   }
 }

diff --git a/integration/templates/tanstack-start/app/routes/__root.tsx b/integration/templates/tanstack-start/app/routes/__root.tsx
@@ -4,7 +4,7 @@ import {
   createRootRoute,
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Body, Head, Html, Meta, Scripts } from '@tanstack/start'
+import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -33,17 +33,17 @@ export const Route = createRootRoute({
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <ClerkProvider>
-      <Html>
-        <Head>
+      <html>
+        <head>
           <Meta />
-        </Head>
-        <Body>
+        </head>
+        <body>
           {children}
           <ScrollRestoration />
           <TanStackRouterDevtools position="bottom-right" />
           <Scripts />
-        </Body>
-      </Html>
+        </body>
+      </html>
     </ClerkProvider>
   )
 }
diff --git a/integration/templates/tanstack-start/package.json b/integration/templates/tanstack-start/package.json
@@ -8,23 +8,22 @@
     "start": "vinxi start --port=$PORT"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.46.4",
-    "@tanstack/router-devtools": "^1.46.5",
-    "@tanstack/router-plugin": "^1.45.13",
-    "@tanstack/start": "^1.46.4",
+    "@tanstack/react-router": "^1.81.9",
+    "@tanstack/router-devtools": "^1.81.9",
+    "@tanstack/router-plugin": "^1.81.9",
+    "@tanstack/start": "^1.81.9",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "isbot": "^5.1.14",
+    "isbot": "^5.1.17",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tailwind-merge": "^2.4.0",
-    "vinxi": "0.4.1"
+    "tailwind-merge": "^2.5.4",
+    "vinxi": "0.4.3"
   },
   "devDependencies": {
     "@types/node": "^20.12.11",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",

diff --git a/packages/tanstack-start/package.json b/packages/tanstack-start/package.json
@@ -62,8 +62,8 @@
   },
   "devDependencies": {
     "@clerk/eslint-config-custom": "workspace:*",
-    "@tanstack/react-router": "^1.49.1",
-    "@tanstack/start": "^1.49.1",
+    "@tanstack/react-router": "^1.81.9",
+    "@tanstack/start": "^1.81.9",
     "@types/node": "^18.19.43",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
@@ -72,8 +72,8 @@
     "vinxi": "^0.4.1"
   },
   "peerDependencies": {
-    "@tanstack/react-router": ">=1.49.1",
-    "@tanstack/start": ">=1.49.1",
+    "@tanstack/react-router": ">=1.81.9",
+    "@tanstack/start": ">=1.81.9",
     "react": ">=18 || >=19.0.0-beta",
     "react-dom": ">=18 || >=19.0.0-beta"
   },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ import { createRouter } from './router'

		const router = createRouter()

		hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)
		hydrateRoot(document!, <StartClient router={router} />)