feat(tanstack-start): Path based routing and Router support (#3932)

Co-authored-by: Joe Bell <[email protected]>
Co-authored-by: Stefanos Anagnostou <[email protected]>
Co-authored-by: Lennart <[email protected]>

.changeset/hip-spiders-behave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": minor
+---
+
+Add support for path based routing and TanStack Router only apps

.github/labeler.yml

@@ -56,3 +56,6 @@ actions:
 
 integration:
   - integration/**
+
+tanstack:
+  - packages/tanstack-start/**

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
     strategy:
       matrix:
-        test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
+        test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router']
         test-project: ['chrome']
         include:
           - test-name: 'nextjs'

integration/presets/index.ts

@@ -7,6 +7,7 @@ import { createLongRunningApps } from './longRunningApps';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 export const appConfigs = {
   envs,
@@ -18,6 +19,7 @@ export const appConfigs = {
   elements,
   expo,
   astro,
+  tanstack,
   secrets: {
     instanceKeys,
   },

integration/presets/longRunningApps.ts

@@ -8,6 +8,7 @@ import { express } from './express';
 import { next } from './next';
 import { react } from './react';
 import { remix } from './remix';
+import { tanstack } from './tanstack';
 
 /**
  * A list of long-running applications that can be used in tests.
@@ -27,6 +28,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 },
   ] as const;
 
   const apps = configs.map(longRunningApplication);

integration/presets/tanstack.ts

@@ -0,0 +1,33 @@
+import { applicationConfig } from '../models/applicationConfig.js';
+import { templates } from '../templates/index.js';
+
+const clerkTanStackLocal = `file:${process.cwd()}/packages/tanstack-start`;
+
+const router = applicationConfig()
+  .setName('tanstack-router')
+  .useTemplate(templates['tanstack-router'])
+  .setEnvFormatter('public', key => `VITE_${key}`)
+  // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+  // please do not remove this flag as it's going to break the setup
+  .addScript('setup', 'npm i --install-links')
+  .addScript('dev', 'npm run dev')
+  .addScript('build', 'npm run build')
+  .addScript('serve', 'npm run start')
+  .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+const start = applicationConfig()
+  .setName('tanstack-start')
+  .useTemplate(templates['tanstack-start'])
+  .setEnvFormatter('public', key => `VITE_${key}`)
+  // `--install-links` ensures that the @clerk/tanstack-start is installed as a regular dependancie instead of creating symlink
+  // please do not remove this flag as it's going to break the setup
+  .addScript('setup', 'npm i --install-links')
+  .addScript('dev', 'npm run dev')
+  .addScript('build', 'npm run build')
+  .addScript('serve', 'npm run start')
+  .addDependency('@clerk/tanstack-start', clerkTanStackLocal);
+
+export const tanstack = {
+  start,
+  router,
+} as const;

integration/templates/index.ts

@@ -14,6 +14,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'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {

integration/templates/tanstack-router/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

integration/templates/tanstack-router/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

integration/templates/tanstack-router/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Vite App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style type="text/tailwindcss">
+      html {
+        color-scheme: light dark;
+      }
+      * {
+        @apply border-gray-200 dark:border-gray-800;
+      }
+      body {
+        @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
+  </body>
+</html>

integration/templates/tanstack-router/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tanstack-router-react-example-basic-file-based",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=$PORT",
+    "build": "vite build",
+    "serve": "vite preview --port=$PORT",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.47.1",
+    "@tanstack/router-devtools": "^1.47.1",
+    "@tanstack/router-plugin": "^1.47.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.5"
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultStaleTime: 5000,
+});
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+}

integration/templates/tanstack-router/src/posts.tsx

@@ -0,0 +1,30 @@
+import { notFound } from '@tanstack/react-router';
+import axios from 'redaxios';
+
+export type PostType = {
+  id: string;
+  title: string;
+  body: string;
+};
+
+export const fetchPost = async (postId: string) => {
+  console.info(`Fetching post with id ${postId}...`);
+  await new Promise(r => setTimeout(r, 500));
+  const post = await axios
+    .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+    .then(r => r.data)
+    .catch(err => {
+      if (err.status === 404) {
+        throw notFound();
+      }
+      throw err;
+    });
+
+  return post;
+};
+
+export const fetchPosts = async () => {
+  console.info('Fetching posts...');
+  await new Promise(r => setTimeout(r, 500));
+  return axios.get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts').then(r => r.data.slice(0, 10));
+};