feat: framework detection for tanstack router and tanstack start (#5857)

* feat: framework detection for tanstack router and tanstack start

* feat: remove TanStack logos for now

* feat: add TanStack logos as PNGs for now

* feat: add tanstack to main framework list

* feat: ensure vite doesn't match when using tanstack

* fix: use vite dev to avoid mismatching npm scripts

Co-authored-by: Philippe Serhal <[email protected]>

* test(build-info): add TanStack detection tests

---------

Co-authored-by: Philippe Serhal <[email protected]>

Author: orinokai

packages/build-info/assets/logos/tanstack-router/default.png

@@ -39,6 +39,8 @@ import { Solid } from './solid.js'
 import { Stencil } from './stencil.js'
 import { SvelteKit } from './svelte-kit.js'
 import { Svelte } from './svelte.js'
+import { TanStackRouter } from './tanstack-router.js'
+import { TanStackStart } from './tanstack-start.js'
 import { Vite } from './vite.js'
 import { Vue } from './vue.js'
 import { VuePress } from './vuepress.js'
@@ -69,6 +71,8 @@ export const frameworks = [
   Solid,
   SolidStart,
   Stencil,
+  TanStackRouter,
+  TanStackStart,
   VuePress,
   Assemble,
   DocPad,

packages/build-info/assets/logos/tanstack-start/default.png

@@ -0,0 +1,44 @@
+import { beforeEach, expect, test } from 'vitest'
+
+import { mockFileSystem } from '../../tests/mock-file-system.js'
+import { NodeFS } from '../node/file-system.js'
+import { Project } from '../project.js'
+
+beforeEach((ctx) => {
+  ctx.fs = new NodeFS()
+})
+
+test('detects a TanStack Router site', async ({ fs }) => {
+  const cwd = mockFileSystem({
+    'package.json': JSON.stringify({
+      scripts: {
+        dev: 'vite --port=3001',
+        build: 'vite build && tsc --noEmit',
+        serve: 'vite preview',
+        start: 'vite',
+      },
+      dependencies: {
+        '@tanstack/react-router': '^1.58.15',
+        '@tanstack/router-devtools': '^1.58.15',
+        '@tanstack/router-plugin': '^1.58.12',
+        react: '^18.2.0',
+        'react-dom': '^18.2.0',
+      },
+      devDependencies: {
+        vite: '^5.4.5',
+      },
+    }),
+  })
+  const detected = await new Project(fs, cwd).detectFrameworks()
+
+  const detectedFrameworks = (detected ?? []).map((framework) => framework.id)
+  expect(detectedFrameworks).not.toContain('vinxi')
+  expect(detectedFrameworks).not.toContain('vite')
+  expect(detectedFrameworks).not.toContain('tanstack-start')
+
+  expect(detected?.[0]?.id).toBe('tanstack-router')
+  expect(detected?.[0]?.build?.command).toBe('vite build')
+  expect(detected?.[0]?.build?.directory).toBe('dist')
+  expect(detected?.[0]?.dev?.command).toBe('vite dev')
+  expect(detected?.[0]?.dev?.port).toBe(3000)
+})

packages/build-info/src/frameworks/index.ts

@@ -0,0 +1,26 @@
+import { BaseFramework, Category, Framework } from './framework.js'
+
+export class TanStackRouter extends BaseFramework implements Framework {
+  readonly id = 'tanstack-router'
+  name = 'TanStack Router'
+  npmDependencies = ['@tanstack/react-router']
+  excludedNpmDependencies = ['@tanstack/start']
+  category = Category.SSG
+
+  dev = {
+    command: 'vite dev',
+    port: 3000,
+    pollingStrategies: [{ name: 'TCP' }],
+  }
+
+  build = {
+    command: 'vite build',
+    directory: 'dist',
+  }
+
+  logo = {
+    default: '/logos/tanstack-router/default.png',
+    light: '/logos/tanstack-router/default.png',
+    dark: '/logos/tanstack-router/default.png',
+  }
+}

packages/build-info/src/frameworks/tanstack-router.test.ts

@@ -0,0 +1,43 @@
+import { beforeEach, expect, test } from 'vitest'
+
+import { mockFileSystem } from '../../tests/mock-file-system.js'
+import { NodeFS } from '../node/file-system.js'
+import { Project } from '../project.js'
+
+beforeEach((ctx) => {
+  ctx.fs = new NodeFS()
+})
+
+test('detects a TanStack Start site', async ({ fs }) => {
+  const cwd = mockFileSystem({
+    'package.json': JSON.stringify({
+      scripts: {
+        dev: 'vinxi dev',
+        build: 'vinxi build',
+        start: 'vinxi start',
+      },
+      dependencies: {
+        '@tanstack/react-router': '^1.58.15',
+        '@tanstack/router-devtools': '^1.58.15',
+        '@tanstack/start': '^1.58.15',
+        react: '^18.3.1',
+        'react-dom': '^18.3.1',
+      },
+      devDependencies: {
+        vinxi: '0.4.3',
+      },
+    }),
+  })
+  const detected = await new Project(fs, cwd).detectFrameworks()
+
+  const detectedFrameworks = (detected ?? []).map((framework) => framework.id)
+  expect(detectedFrameworks).not.toContain('vinxi')
+  expect(detectedFrameworks).not.toContain('vite')
+  expect(detectedFrameworks).not.toContain('tanstack-router')
+
+  expect(detected?.[0]?.id).toBe('tanstack-start')
+  expect(detected?.[0]?.build?.command).toBe('vinxi build')
+  expect(detected?.[0]?.build?.directory).toBe('dist')
+  expect(detected?.[0]?.dev?.command).toBe('vinxi dev')
+  expect(detected?.[0]?.dev?.port).toBe(3000)
+})

packages/build-info/src/frameworks/tanstack-router.ts

@@ -0,0 +1,25 @@
+import { BaseFramework, Category, Framework } from './framework.js'
+
+export class TanStackStart extends BaseFramework implements Framework {
+  readonly id = 'tanstack-start'
+  name = 'TanStack Start'
+  npmDependencies = ['@tanstack/start']
+  category = Category.SSG
+
+  dev = {
+    command: 'vinxi dev',
+    port: 3000,
+    pollingStrategies: [{ name: 'TCP' }],
+  }
+
+  build = {
+    command: 'vinxi build',
+    directory: 'dist',
+  }
+
+  logo = {
+    default: '/logos/tanstack-start/default.png',
+    light: '/logos/tanstack-start/default.png',
+    dark: '/logos/tanstack-start/default.png',
+  }
+}

packages/build-info/src/frameworks/tanstack-start.test.ts

@@ -12,6 +12,8 @@ export class Vite extends BaseFramework implements Framework {
     '@builder.io/qwik',
     'solid-start',
     'solid-js',
+    '@tanstack/react-router',
+    '@tanstack/start',
     '@sveltejs/kit',
     '@analogjs/platform',
   ]