chore(repo): Rename TanStack Start SDK to @clerk/tanstack-react-start

.changeset/big-parents-relate.md

@@ -0,0 +1,12 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+The TanStack React Start SDK package name is now `@clerk/tanstack-react-start`, previously `@clerk/tanstack-start`. This change aligns our package naming with TanStack Start's conventions.
+
+Please update your imports as follows:
+
+```diff
+- import { ClerkProvider } from '@clerk/tanstack-start'
++ import { ClerkProvider } from '@clerk/tanstack-react-start'
+```

.changeset/config.json

@@ -19,6 +19,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true,
     "updateInternalDependents": "always"
-  },
-  "ignore": ["@clerk/tanstack-start"]
+  }
 }

.github/labeler.yml

@@ -43,7 +43,7 @@ remix:
   - packages/remix/**
 
 tanstack:
-  - packages/tanstack-start/**
+  - packages/tanstack-react-start/**
 
 testing:
   - packages/testing/**

.github/workflows/ci.yml

@@ -145,7 +145,7 @@ jobs:
         run: |
           if [ "${{ matrix.node-version }}" == "18" ]; then
             echo "Running tests on Node 18 only for packages with LTS support."
-            pnpm turbo test $TURBO_ARGS --filter="@clerk/astro" --filter="@clerk/backend" --filter="@clerk/express" --filter="@clerk/nextjs" --filter="@clerk/clerk-react" --filter="@clerk/shared" --filter="@clerk/remix" --filter="@clerk/tanstack-start" --filter="@clerk/elements" --filter="@clerk/vue" --filter="@clerk/nuxt" --filter="@clerk/clerk-expo"
+            pnpm turbo test $TURBO_ARGS --filter="@clerk/astro" --filter="@clerk/backend" --filter="@clerk/express" --filter="@clerk/nextjs" --filter="@clerk/clerk-react" --filter="@clerk/shared" --filter="@clerk/remix" --filter="@clerk/tanstack-react-start" --filter="@clerk/elements" --filter="@clerk/vue" --filter="@clerk/nuxt" --filter="@clerk/clerk-expo"
           else
             echo "Running tests for all packages on Node 22."
             pnpm turbo test $TURBO_ARGS
@@ -171,7 +171,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'localhost', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue', 'nuxt', 'react-router']
+        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'localhost', 'sessions', 'astro', 'expo-web', 'tanstack-react-start', 'tanstack-react-router', 'vue', 'nuxt', 'react-router']
         test-project: ['chrome']
         include:
           - test-name: 'nextjs'

integration/presets/longRunningApps.ts

@@ -47,8 +47,8 @@ export const createLongRunningApps = () => {
     { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
     { id: 'astro.static.withCustomRoles', config: astro.static, env: envs.withCustomRoles },
     { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
-    { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
-    { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
+    { id: 'tanstack.react-start', config: tanstack.reactStart, env: envs.withEmailCodes },
+    { id: 'tanstack.react-router', config: tanstack.reactRouter, env: envs.withEmailCodes },
     { id: 'vue.vite', config: vue.vite, env: envs.withCustomRoles },
     { id: 'nuxt.node', config: nuxt.node, env: envs.withCustomRoles },
     { id: 'react-router.node', config: reactRouter.reactRouterNode, env: envs.withEmailCodes },

integration/presets/tanstack.ts

@@ -2,27 +2,27 @@ import { applicationConfig } from '../models/applicationConfig';
 import { templates } from '../templates';
 import { linkPackage } from './utils';
 
-const router = applicationConfig()
-  .setName('tanstack-router')
-  .useTemplate(templates['tanstack-router'])
+const reactRouter = applicationConfig()
+  .setName('tanstack-react-router')
+  .useTemplate(templates['tanstack-react-router'])
   .setEnvFormatter('public', key => `VITE_${key}`)
   .addScript('setup', 'pnpm install')
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm start')
-  .addDependency('@clerk/tanstack-start', linkPackage('tanstack-start'));
+  .addDependency('@clerk/tanstack-react-start', linkPackage('tanstack-react-start'));
 
-const start = applicationConfig()
-  .setName('tanstack-start')
-  .useTemplate(templates['tanstack-start'])
+const reactStart = applicationConfig()
+  .setName('tanstack-react-start')
+  .useTemplate(templates['tanstack-react-start'])
   .setEnvFormatter('public', key => `VITE_${key}`)
   .addScript('setup', 'pnpm install')
   .addScript('dev', 'pnpm dev')
   .addScript('build', 'pnpm build')
   .addScript('serve', 'pnpm start')
-  .addDependency('@clerk/tanstack-start', linkPackage('tanstack-start'));
+  .addDependency('@clerk/tanstack-react-start', linkPackage('tanstack-react-start'));
 
 export const tanstack = {
-  start,
-  router,
+  reactStart,
+  reactRouter,
 } as const;

integration/templates/index.ts

@@ -13,8 +13,8 @@ export const templates = {
   'astro-node': resolve(__dirname, './astro-node'),
   'astro-hybrid': resolve(__dirname, './astro-hybrid'),
   'expo-web': resolve(__dirname, './expo-web'),
-  'tanstack-start': resolve(__dirname, './tanstack-start'),
-  'tanstack-router': resolve(__dirname, './tanstack-router'),
+  'tanstack-react-start': resolve(__dirname, './tanstack-react-start'),
+  'tanstack-react-router': resolve(__dirname, './tanstack-react-router'),
   'vue-vite': resolve(__dirname, './vue-vite'),
   'nuxt-node': resolve(__dirname, './nuxt-node'),
   'react-router-node': resolve(__dirname, './react-router-node'),

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

@@ -9,9 +9,9 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.111.7",
-    "@tanstack/router-devtools": "^1.111.7",
-    "@tanstack/router-plugin": "^1.111.7",
+    "@tanstack/react-router": "^1.114.6",
+    "@tanstack/react-router-devtools": "^1.114.6",
+    "@tanstack/router-plugin": "^1.114.6",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link, Outlet, createRootRoute } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-import { ClerkProvider } from '@clerk/tanstack-start';
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+import { ClerkProvider } from '@clerk/tanstack-react-start';
 
 export const Route = createRootRoute({
   component: RootComponent,

integration/templates/tanstack-router/src/routes/index.tsx → integration/templates/tanstack-react-router/src/routes/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createFileRoute } from '@tanstack/react-router';
-import { SignedIn, SignedOut, SignIn, SignOutButton, UserButton } from '@clerk/tanstack-start';
+import { SignedIn, SignedOut, SignIn, SignOutButton, UserButton } from '@clerk/tanstack-react-start';
 
 export const Route = createFileRoute('/')({
   component: Home,

integration/templates/tanstack-router/src/routes/sign-in.tsx → integration/templates/tanstack-react-router/src/routes/sign-in.tsx

@@ -1,4 +1,4 @@
-import { SignIn } from '@clerk/tanstack-start';
+import { SignIn } from '@clerk/tanstack-react-start';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/sign-in')({

integration/templates/tanstack-start/README.md → integration/templates/tanstack-react-start/README.md

@@ -32,7 +32,7 @@ Clerk is a developer-first authentication and user management solution. It provi
 After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
 
 - Create a new TanStack Start application
-- Install `@clerk/tanstack-start`
+- Install `@clerk/tanstack-react-start`
 - Set up your environment keys
 - Wrap your Root Component with `<ClerkProvider />`
 - Configure `clerkHandler()` in the SSR entrypoint

integration/templates/tanstack-start/app/router.tsx → integration/templates/tanstack-react-start/app/router.tsx

@@ -9,6 +9,7 @@ export function createRouter() {
     defaultPreload: 'intent',
     defaultErrorComponent: DefaultCatchBoundary,
     defaultNotFoundComponent: () => <NotFound />,
+    scrollRestoration: true,
   })
 
   return router

integration/templates/tanstack-start/app/routes/__root.tsx → integration/templates/tanstack-react-start/app/routes/__root.tsx

@@ -1,15 +1,14 @@
 import {
   Outlet,
-  ScrollRestoration,
   createRootRoute,
   Scripts,
   HeadContent,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
-import { ClerkProvider } from '@clerk/tanstack-start'
+import { ClerkProvider } from '@clerk/tanstack-react-start'
 import appCss from '~/styles/app.css?url'
 
 export const Route = createRootRoute({
@@ -40,7 +39,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         </head>
         <body>
           {children}
-          <ScrollRestoration />
           <TanStackRouterDevtools position="bottom-right" />
           <Scripts />
         </body>

integration/templates/tanstack-start/app/routes/index.tsx → integration/templates/tanstack-react-start/app/routes/index.tsx

@@ -6,7 +6,7 @@ import {
   SignInButton,
   SignUpButton,
   SignIn,
-} from '@clerk/tanstack-start'
+} from '@clerk/tanstack-react-start'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({

integration/templates/tanstack-start/app/routes/sign-in.tsx → integration/templates/tanstack-react-start/app/routes/sign-in.tsx

@@ -1,4 +1,4 @@
-import { SignIn } from '@clerk/tanstack-start'
+import { SignIn } from '@clerk/tanstack-react-start'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/sign-in')({

integration/templates/tanstack-start/app/ssr.tsx → integration/templates/tanstack-react-start/app/ssr.tsx

@@ -4,7 +4,7 @@ import {
 } from '@tanstack/react-start/server'
 import { getRouterManifest } from '@tanstack/react-start/router-manifest'
 import { createRouter } from './router'
-import { createClerkHandler } from '@clerk/tanstack-start/server'
+import { createClerkHandler } from '@clerk/tanstack-react-start/server'
 
 const handler = createStartHandler({
   createRouter,

integration/templates/tanstack-start/package.json → integration/templates/tanstack-react-start/package.json

@@ -8,16 +8,15 @@
     "start": "vinxi start --port=$PORT"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.111.7",
-    "@tanstack/router-devtools": "^1.111.7",
-    "@tanstack/router-plugin": "^1.111.7",
-    "@tanstack/react-start": "^1.111.10",
+    "@tanstack/react-router": "^1.114.6",
+    "@tanstack/react-router-devtools": "^1.114.6",
+    "@tanstack/react-start": "1.114.6",
     "@typescript-eslint/parser": "^7.18.0",
     "isbot": "^5.1.17",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tailwind-merge": "^2.5.4",
-    "vinxi": "0.5.1"
+    "vinxi": "0.5.3"
   },
   "devDependencies": {
     "@types/node": "^20.12.11",

integration/tests/tanstack-router/basic.test.ts

@@ -5,7 +5,7 @@ import type { FakeUser } from '../../testUtils';
 import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
-  'basic tests for TanStack Router @tanstack-router',
+  'basic tests for TanStack Router @tanstack-react-router',
   ({ app }) => {
     test.describe.configure({ mode: 'parallel' });
 

integration/tests/tanstack-start/basic.test.ts

@@ -11,7 +11,7 @@ declare global {
 }
 
 testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
-  'basic tests for TanStack Start @tanstack-start',
+  'basic tests for TanStack Start @tanstack-react-start',
   ({ app }) => {
     test.describe.configure({ mode: 'parallel' });
 

package.json

@@ -10,7 +10,7 @@
     "changeset": "changeset",
     "changeset:empty": "pnpm changeset --empty",
     "clean": "turbo clean",
-    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/clerk-expo --filter=!@clerk/tanstack-start --filter=!@clerk/elements --filter=!@clerk/remix --filter=!@clerk/chrome-extension",
+    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/clerk-expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/elements --filter=!@clerk/remix --filter=!@clerk/chrome-extension",
     "dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
     "format": "prettier --write .",
     "format:check": "prettier --cache --check .",
@@ -44,8 +44,8 @@
     "test:integration:quickstart": "E2E_APP_ID=quickstart.* pnpm test:integration:base --grep @quickstart",
     "test:integration:react-router": "E2E_APP_ID=react-router.* npm run test:integration:base -- --grep @react-router",
     "test:integration:sessions": "DISABLE_WEB_SECURITY=true pnpm test:integration:base --grep @sessions",
-    "test:integration:tanstack-router": "E2E_APP_ID=tanstack.router pnpm test:integration:base --grep @tanstack-router",
-    "test:integration:tanstack-start": "E2E_APP_ID=tanstack.start pnpm test:integration:base --grep @tanstack-start",
+    "test:integration:tanstack-react-router": "E2E_APP_ID=tanstack.react-router pnpm test:integration:base --grep @tanstack-react-router",
+    "test:integration:tanstack-react-start": "E2E_APP_ID=tanstack.react-start pnpm test:integration:base --grep @tanstack-react-start",
     "test:integration:vue": "E2E_APP_ID=vue.vite pnpm test:integration:base --grep @vue",
     "turbo:clean": "turbo daemon clean",
     "typedoc:generate": "pnpm build:declarations && typedoc --tsconfig tsconfig.typedoc.json",

packages/tanstack-start/CHANGELOG.md → packages/tanstack-react-start/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @clerk/tanstack-start
+# @clerk/tanstack-react-start
 
 ## 0.11.5
 
@@ -1023,4 +1023,4 @@
 - Updated dependencies [[`4ec3f63e2`](https://github.com/clerk/javascript/commit/4ec3f63e26d8d3725a7ba9bbf988a7776fe893ff)]:
   - @clerk/shared@2.3.0
   - @clerk/backend@1.2.3
-  - @clerk/clerk-react@5.2.4
+  - @clerk/clerk-react@5.2.4

packages/tanstack-start/README.md → packages/tanstack-react-start/README.md

@@ -1,48 +1,48 @@
 <p align="center">
-  <a href="https://clerk.com?utm_source=github&utm_medium=clerk_tanstack_start" target="_blank" rel="noopener noreferrer">
+  <a href="https://clerk.com?utm_source=github&utm_medium=clerk_tanstack_react_start" target="_blank" rel="noopener noreferrer">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://images.clerk.com/static/logo-dark-mode-400x400.png">
       <img src="https://images.clerk.com/static/logo-light-mode-400x400.png" height="64">
     </picture>
   </a>
   <br />
-  <h1 align="center">@clerk/tanstack-start</h1>
+  <h1 align="center">@clerk/tanstack-react-start</h1>
 </p>
 
 <div align="center">
 
 [![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord)
-[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_tanstack_start)
+[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_tanstack_react_start)
 [![Follow on Twitter](https://img.shields.io/twitter/follow/ClerkDev?style=social)](https://twitter.com/intent/follow?screen_name=ClerkDev)
 
-[Changelog](https://github.com/clerk/javascript/blob/main/packages/tanstack-start/CHANGELOG.md)
+[Changelog](https://github.com/clerk/javascript/blob/main/packages/tanstack-react-start/CHANGELOG.md)
 ·
 [Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)
 ·
 [Request a Feature](https://feedback.clerk.com/roadmap)
 ·
-[Get help](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_tanstack_start)
+[Get help](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_tanstack_react_start)
 
 </div>
 
 ## Getting Started
 
-[Clerk](https://clerk.com/?utm_source=github&utm_medium=clerk_tanstack_start) is the easiest way to add authentication and user management to your Tanstack Start application. Add sign up, sign in, and profile management to your application in minutes.
+[Clerk](https://clerk.com/?utm_source=github&utm_medium=clerk_tanstack_react_start) is the easiest way to add authentication and user management to your Tanstack Start application. Add sign up, sign in, and profile management to your application in minutes.
 
-> [!WARNING] > `@clerk/tanstack-start` is currently in beta. It's not recommended to use it in production just yet, but it would be much appreciated if you give it a try.
+> [!WARNING] > `@clerk/tanstack-react-start` is currently in beta. It's not recommended to use it in production just yet, but it would be much appreciated if you give it a try.
 
 ### Prerequisites
 
 - Tanstack Start `^1.49.1` or later
 - Tanstack Router `^1.49.1` or later
 - React 18 or later
 - Node.js `>=18.17.0` or later
-- An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_tanstack_start).
+- An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_tanstack_react_start).
 
 ### Installation
 
 ```sh
-npm install @clerk/tanstack-start
+npm install @clerk/tanstack-react-start
 ```
 
 ## Usage
@@ -59,9 +59,9 @@ You can get these from the [API Keys](https://dashboard.clerk.com/last-active?pa
 To initialize Clerk with your TanStack Start application, you will need to make one modification to `app/routes/_root.tsx`. Wrap the children of the `RootComponent` with `<ClerkProvider/>`
 
 ```tsx
-import { ClerkProvider } from '@clerk/tanstack-start'
+import { ClerkProvider } from '@clerk/tanstack-react-start'
 import { createRootRoute } from '@tanstack/react-router'
-import { Link, Outlet, ScrollRestoration } from '@tanstack/react-router'
+import { Link, Outlet } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { Body, Head, Html, Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
@@ -112,7 +112,7 @@ You will also need to make on more modification to you SSR entrypoint (default:
 import { createStartHandler, defaultStreamHandler } from '@tanstack/start/server';
 import { getRouterManifest } from '@tanstack/start/router-manifest';
 import { createRouter } from './router';
-import { createClerkHandler } from '@clerk/tanstack-start/server';
+import { createClerkHandler } from '@clerk/tanstack-react-start/server';
 
 const handler = createStartHandler({
   createRouter,
@@ -136,7 +136,7 @@ After those changes are made, you can use Clerk components in your routes.
 For example, in `app/routes/index.tsx`:
 
 ```tsx
-import { SignIn, SignedIn, SignedOut, UserButton } from '@clerk/tanstack-start';
+import { SignIn, SignedIn, SignedOut, UserButton } from '@clerk/tanstack-react-start';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/')({
@@ -163,22 +163,22 @@ function Home() {
 You can get in touch with us in any of the following ways:
 
 - Join our official community [Discord server](https://clerk.com/discord)
-- On [our support page](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_tanstack_start)
+- On [our support page](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_tanstack_react_start)
 
 ## Contributing
 
 We're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md) and [code of conduct](https://github.com/clerk/javascript/blob/main/docs/CODE_OF_CONDUCT.md).
 
 ## Security
 
-`@clerk/tanstack-start` follows good practices of security, but 100% security cannot be assured.
+`@clerk/tanstack-react-start` follows good practices of security, but 100% security cannot be assured.
 
-`@clerk/tanstack-start` is provided **"as is"** without any **warranty**. Use at your own risk.
+`@clerk/tanstack-react-start` is provided **"as is"** without any **warranty**. Use at your own risk.
 
 _For more information and to report security issues, please refer to our [security documentation](https://github.com/clerk/javascript/blob/main/docs/SECURITY.md)._
 
 ## License
 
 This project is licensed under the **MIT license**.
 
-See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/tanstack-start/LICENSE) for more information.
+See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/tanstack-react-start/LICENSE) for more information.