ESBuild Plugin API

ESBuild Plugin

ESBuild plugin for TanStack Router with route generation.

Installation

npm install @tanstack/router-plugin

Basic Usage

// build.js
import { build } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

await build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [
    TanStackRouterEsbuild()
  ]
})

Configuration Options

Same options as the Vite plugin:

routesDirectory · string

Directory containing route files.

Default: './src/routes'

generatedRouteTree · string

Output path for generated route tree.

Default: './src/routeTree.gen.ts'

routeFileIgnorePrefix · string

Prefix to ignore when generating routes.

Default: '-'

autoCodeSplitting · boolean

Enable automatic code splitting.

Default: false

Examples

Basic Setup

import { build } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

await build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  plugins: [
    TanStackRouterEsbuild()
  ]
})

With Code Splitting

import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

await build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  plugins: [
    TanStackRouterEsbuild({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        defaultBehavior: [
          ['component'],
          ['loader']
        ]
      }
    })
  ]
})

Watch Mode

import { context } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

const ctx = await context({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    TanStackRouterEsbuild()
  ]
})

await ctx.watch()
console.log('Watching for changes...')

Development Server

import { context } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

const ctx = await context({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    TanStackRouterEsbuild()
  ]
})

const { host, port } = await ctx.serve({
  servedir: 'dist'
})

console.log(`Server running at http://${host}:${port}`)