tsdown

https://tsdown.dev
Admin
tsdown is a blazing-fast, elegant bundler for JavaScript/TypeScript libraries. Powered by Rolldown...
Tokens:21,586
Snippets:428
Trust Score:7.4
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install tsdown with bun

Source: https://tsdown.dev/guide/getting-started

Install tsdown as a development dependency using bun.

```sh
bun add -D tsdown
```

--------------------------------

### Source File Examples

Source: https://tsdown.dev/options/unbundle

Example source files demonstrating an import relationship between index.ts and mod.ts.

```ts
import { foo } from './mod'

foo()
```

```ts
export function foo() {
  console.log('Hello from mod!')
}
```

--------------------------------

### Install Lightning CSS

Source: https://tsdown.dev/options/css

Install the lightningcss package using your preferred package manager.

```sh
npm install -D lightningcss
```

```sh
pnpm add -D lightningcss
```

```sh
yarn add -D lightningcss
```

```sh
bun add -D lightningcss
```

--------------------------------

### Bundle for specific platforms

Source: https://tsdown.dev/options/platform

Examples of CLI commands for targeting different runtime environments.

```bash
# Bundle for Node.js (default)
tsdown --platform node

# Bundle for browsers
tsdown --platform browser

# Bundle for a neutral platform
tsdown --platform neutral
```

--------------------------------

### Install PostCSS Dependencies

Source: https://tsdown.dev/options/css

Install the necessary packages when using the PostCSS transformer.

```bash
npm install -D postcss postcss-import
```

--------------------------------

### Watch Mode Examples

Source: https://tsdown.dev/options/watch-mode

Demonstrates different ways to use watch mode, including watching all project files (default), a specific directory, or a single file.

```bash
# Watch all files in the project (default behavior)
tsdown --watch
```

```bash
# Watch a specific directory
tsdown --watch ./src
```

```bash
# Watch a specific file
tsdown --watch ./src/index.ts
```

--------------------------------

### View tsdown CLI help

Source: https://tsdown.dev/guide/getting-started

Explore available CLI options and examples for tsdown.

```sh
./node_modules/.bin/tsdown --help
```

--------------------------------

### Install tsdown with pnpm

Source: https://tsdown.dev/guide/getting-started

Install tsdown as a development dependency using pnpm.

```sh
pnpm add -D tsdown
```

--------------------------------

### Install Svelte dependencies

Source: https://tsdown.dev/recipes/svelte-support

Install the necessary Svelte plugins and preprocessors using your preferred package manager.

```sh
npm install -D rollup-plugin-svelte svelte svelte-preprocess
```

```sh
pnpm add -D rollup-plugin-svelte svelte svelte-preprocess
```

```sh
yarn add -D rollup-plugin-svelte svelte svelte-preprocess
```

```sh
bun add -D rollup-plugin-svelte svelte svelte-preprocess
```

--------------------------------

### Install unplugin-solid Dependency

Source: https://tsdown.dev/recipes/solid-support

Install the unplugin-solid package as a development dependency using your preferred package manager.

```sh
npm install -D unplugin-solid
```

```sh
pnpm add -D unplugin-solid
```

```sh
yarn add -D unplugin-solid
```

```sh
bun add -D unplugin-solid
```

--------------------------------

### Install TypeScript with bun

Source: https://tsdown.dev/guide/getting-started

Install TypeScript as a development dependency using bun, required if not using isolatedDeclarations.

```sh
bun add -D typescript
```

--------------------------------

### Install Babel and Vite React Plugins

Source: https://tsdown.dev/recipes/react-support

Install the necessary packages for integrating React Compiler, which currently relies on Babel and Vite's React plugin.

```bash
pnpm add -D @rolldown/plugin-babel @vitejs/plugin-react
```

--------------------------------

### Install tsdown with yarn

Source: https://tsdown.dev/guide/getting-started

Install tsdown as a development dependency using yarn.

```sh
yarn add -D tsdown
```

--------------------------------

### Install rolldown-plugin-wasm dependency

Source: https://tsdown.dev/recipes/wasm-support

Install the required plugin using your preferred package manager.

```sh
npm install -D rolldown-plugin-wasm
```

```sh
pnpm add -D rolldown-plugin-wasm
```

```sh
yarn add -D rolldown-plugin-wasm
```

```sh
bun add -D rolldown-plugin-wasm
```

--------------------------------

### Install Vue library dependencies

Source: https://tsdown.dev/recipes/vue-support

Install the necessary plugins and type-checking tools required for Vue component development.

```sh
npm install -D unplugin-vue vue-tsc
```

```sh
pnpm add -D unplugin-vue vue-tsc
```

```sh
yarn add -D unplugin-vue vue-tsc
```

```sh
bun add -D unplugin-vue vue-tsc
```

--------------------------------

### Install tsdown with npm

Source: https://tsdown.dev/guide/getting-started

Install tsdown as a development dependency using npm.

```sh
npm install -D tsdown
```

--------------------------------

### Install PostCSS modules dependency

Source: https://tsdown.dev/options/css

Installs the necessary packages for using PostCSS with CSS modules.

```bash
npm install -D postcss postcss-modules
```

--------------------------------

### Solid Component Example

Source: https://tsdown.dev/recipes/solid-support

A basic Solid component demonstrating props and JSX structure. Ensure it's exported from your entry file.

```tsx
import type { Component } from 'solid-js'

interface MyButtonProps {
  type?: 'primary'
}

export const MyButton: Component<MyButtonProps> = ({ type }) => {
  return (
    <button class="my-button">
      my button:
      {type}
    </button>
  )
}
```

--------------------------------

### Verify tsdown installation

Source: https://tsdown.dev/guide/getting-started

Run this command in your project directory to check if tsdown is installed correctly.

```sh
./node_modules/.bin/tsdown --version
```

--------------------------------

### Install TypeScript with pnpm

Source: https://tsdown.dev/guide/getting-started

Install TypeScript as a development dependency using pnpm, required if not using isolatedDeclarations.

```sh
pnpm add -D typescript
```

--------------------------------

### Install PostCSS peer dependencies

Source: https://tsdown.dev/options/css

Installs core PostCSS and common plugins required for CSS processing features.

```bash
npm install -D postcss postcss-import postcss-modules
```

--------------------------------

### Install TypeScript with npm

Source: https://tsdown.dev/guide/getting-started

Install TypeScript as a development dependency using npm, required if not using isolatedDeclarations.

```sh
npm install -D typescript
```

--------------------------------

### Install TypeScript with yarn

Source: https://tsdown.dev/guide/getting-started

Install TypeScript as a development dependency using yarn, required if not using isolatedDeclarations.

```sh
yarn add -D typescript
```

--------------------------------

### Install tsdown Migration Skill

Source: https://tsdown.dev/guide/skills

Install only the tsdown migration skill for AI agents. This skill specifically helps with migrating projects from tsup to tsdown.

```bash
npx skills add rolldown/tsdown --skill tsdown-migrate
```

--------------------------------

### Install All tsdown Skills

Source: https://tsdown.dev/guide/skills

Install all official tsdown skills to your AI coding agent. This provides comprehensive knowledge for various tsdown tasks.

```bash
npx skills add rolldown/tsdown
```

--------------------------------

### Define Basic tsdown Configuration

Source: https://tsdown.dev/options/config-file

Use this snippet to define a single entry point for your tsdown build. Ensure 'tsdown' is installed as a dependency.

```typescript
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: 'src/index.ts',
})
```

--------------------------------

### Set Target to ES2020

Source: https://tsdown.dev/options/target

An example of setting the target to a specific ECMAScript version using the CLI.

```bash
tsdown --target es2020
```

--------------------------------

### Lightning CSS Syntax Lowering Example

Source: https://tsdown.dev/options/css

Demonstrates how CSS nesting is flattened based on the target browser.

```css
/* Input */
.foo {
  & .bar {
    color: red;
  }
}

/* Output (chrome108) */
.foo .bar {
  color: red;
}
```

--------------------------------

### CSS Injection Output Example

Source: https://tsdown.dev/options/css

Shows how the JS output looks when CSS injection is enabled.

```js
// dist/index.mjs
import './style.css'

export function greet() {
  return 'Hello'
}
```

--------------------------------

### Prompt AI Agent to Set Up Monorepo Build

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent to configure tsdown for a monorepo setup, leveraging workspace support.

```plaintext
Set up a monorepo build with tsdown workspace support
```

--------------------------------

### Install Specific tsdown Skill

Source: https://tsdown.dev/guide/skills

Install only the core tsdown skill for AI agents. This is useful if you only need assistance with general tsdown configuration and features.

```bash
npx skills add rolldown/tsdown --skill tsdown
```

--------------------------------

### Configure environment variable prefixes

Source: https://tsdown.dev/reference/cli

Restricts loaded environment variables to those starting with the specified prefixes.

```bash
tsdown --env-file .env --env-prefix APP_ --env-prefix TSDOWN_
```

--------------------------------

### Input source code for minification

Source: https://tsdown.dev/options/minification

Example TypeScript source file used to demonstrate minification effects.

```ts
const x = 1

function hello(x: number) {
  console.log('Hello World')
  console.log(x)
}

hello(x)
```

--------------------------------

### Input Code for Tree Shaking Example

Source: https://tsdown.dev/options/tree-shaking

This TypeScript code demonstrates a scenario with an exported function that is not used.

```typescript
import { hello } from './util'

const x = 1

hello(x)
```

```typescript
export function unused() {
  console.log("I'm unused.")
}

export function hello(x: number) {
  console.log('Hello World')
  console.log(x)
}
```

--------------------------------

### Build Project Programmatically with tsdown

Source: https://tsdown.dev/advanced/programmatic-usage

Use the `build` function to configure and execute a tsdown build process. Ensure `tsdown` is installed and imported. All CLI options are available in the configuration object.

```typescript
import { build } from 'tsdown'

await build({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  outDir: 'dist',
  dts: true,
  // ...any other options
})
```

--------------------------------

### Create Solid Component Library Starter

Source: https://tsdown.dev/recipes/solid-support

Use this command to quickly set up a new project pre-configured for Solid library development with tsdown.

```bash
npx create-tsdown@latest -t solid
```

--------------------------------

### Initialize Vue project with tsdown

Source: https://tsdown.dev/recipes/vue-support

Use the starter template to quickly scaffold a pre-configured Vue library project.

```bash
npx create-tsdown@latest -t vue
```

--------------------------------

### Run the migration command

Source: https://tsdown.dev/guide/migrate-from-tsup

Execute the migration tool in the current directory to begin the transition process.

```bash
npx tsdown-migrate
```

--------------------------------

### Create React Component Library Project

Source: https://tsdown.dev/recipes/react-support

Use this command to quickly scaffold a new project pre-configured for React library development.

```bash
npx create-tsdown@latest -t react
```

--------------------------------

### Explicit root configuration

Source: https://tsdown.dev/options/root

Demonstrates how setting root to the project directory preserves the src prefix in the output.

```ts
export default defineConfig({
  entry: ['src/index.ts', 'src/utils/helper.ts'],
  root: '.',
})
```

--------------------------------

### Create React Compiler Project

Source: https://tsdown.dev/recipes/react-support

Scaffold a project specifically configured for React Compiler integration.

```bash
npx create-tsdown@latest -t react-compiler
```

--------------------------------

### tsdown configuration file

Source: https://tsdown.dev/guide/getting-started

Initialize the tsdown configuration file with entry points.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['./src/index.ts'],
})
```

--------------------------------

### Create tsdown project with bun

Source: https://tsdown.dev/guide/getting-started

Use the create-tsdown CLI with bun to scaffold a new project with starter templates.

```sh
bun create tsdown@latest
```

--------------------------------

### Configure platform via CLI

Source: https://tsdown.dev/options/platform

Set the target runtime environment using the --platform flag in the command line.

```bash
tsdown --platform node    # default
tsdown --platform browser
tsdown --platform neutral
```

--------------------------------

### Initialize Svelte project with tsdown

Source: https://tsdown.dev/recipes/svelte-support

Use the create-tsdown CLI to scaffold a new Svelte library project.

```bash
npx create-tsdown@latest -t svelte
```

--------------------------------

### Run bundled output

Source: https://tsdown.dev/guide/getting-started

Execute the generated bundled output file using Node.js.

```sh
node dist/index.mjs
```

--------------------------------

### Run build script with npm

Source: https://tsdown.dev/guide/getting-started

Execute the 'build' script defined in package.json using npm.

```sh
npm run build
```

--------------------------------

### Create tsdown project with pnpm

Source: https://tsdown.dev/guide/getting-started

Use the create-tsdown CLI with pnpm to scaffold a new project with starter templates.

```sh
pnpm create tsdown@latest
```

--------------------------------

### Create tsdown project with npm

Source: https://tsdown.dev/guide/getting-started

Use the create-tsdown CLI with npm to scaffold a new project with starter templates.

```sh
npm create tsdown@latest
```

--------------------------------

### Initialize WASM modules synchronously

Source: https://tsdown.dev/recipes/wasm-support

Use the ?init&sync query for synchronous module initialization.

```ts
import initSync from './add.wasm?init&sync'

const instance = initSync(
  imports, // optional
)

instance.exports.add(1, 2)
```

--------------------------------

### Copy static assets to output directory

Source: https://tsdown.dev/reference/cli

Copies all files from a source directory into the build output directory.

```bash
tsdown --copy public
```

--------------------------------

### Configure root via CLI

Source: https://tsdown.dev/options/root

Set the root directory using the command line interface.

```bash
tsdown --root src
```

--------------------------------

### Example of Logical Assignment Downgrade

Source: https://tsdown.dev/options/target

A logical assignment like `a ||= b` is transformed into `a || (a = b)` if the target is `es2015`.

```javascript
a ||= b
```

--------------------------------

### Define entry files in configuration

Source: https://tsdown.dev/options/entry

Configure entry points using the defineConfig function in tsdown.config.ts.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: 'src/index.ts',
})
```

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['src/entry1.ts', 'src/entry2.ts'],
})
```

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: {
    main: 'src/index.ts',
    utils: 'src/utils.ts',
  },
})
```

--------------------------------

### Run tsdown build command

Source: https://tsdown.dev/guide/getting-started

Execute the tsdown build command to bundle your code.

```sh
./node_modules/.bin/tsdown
```

--------------------------------

### Basic React Component

Source: https://tsdown.dev/recipes/react-support

A simple React functional component with basic props. This serves as an example of a component you might build within a tsdown-managed library.

```tsx
import React from 'react'

interface MyButtonProps {
  type?: 'primary'
}

export const MyButton: React.FC<MyButtonProps> = ({ type }) => {
  return <button className="my-button">my button: type {type}</button>
}
```

--------------------------------

### Enable minification via CLI

Source: https://tsdown.dev/options/minification

Use the --minify flag in the command line to compress the output code.

```bash
tsdown --minify
```

--------------------------------

### Initialize WASM modules asynchronously

Source: https://tsdown.dev/recipes/wasm-support

Use the ?init query to obtain an asynchronous initialization function.

```ts
import init from './add.wasm?init'

const instance = await init(
  imports, // optional
)

instance.exports.add(1, 2)
```

--------------------------------

### Enable Watch Mode

Source: https://tsdown.dev/guide/getting-started

Use the `--watch` option to automatically rebuild your project when files change. This is useful during development.

```bash
tsdown --watch
```

--------------------------------

### Enable Source Maps via CLI

Source: https://tsdown.dev/options/sourcemap

Use the `--sourcemap` flag in the tsdown CLI to generate source maps.

```bash
tsdown --sourcemap
```

--------------------------------

### Create tsdown project with yarn

Source: https://tsdown.dev/guide/getting-started

Use the create-tsdown CLI with yarn to scaffold a new project with starter templates.

```sh
yarn create tsdown@latest
```

--------------------------------

### Specify Output Format

Source: https://tsdown.dev/options/output-format

Use the --format option to set the desired output module format. Defaults to 'esm'.

```bash
tsdown --format esm # default
```

--------------------------------

### Migrate multiple specific directories

Source: https://tsdown.dev/guide/migrate-from-tsup

Explicitly list multiple directories to be processed by the migration tool.

```bash
npx tsdown-migrate packages/foo packages/bar
```

--------------------------------

### Configure Output Root

Source: https://tsdown.dev/options/unbundle

Use the root option to override the default base directory for output files.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['src/index.ts'],
  unbundle: true,
  root: '.', // Preserve `src/` prefix in output
})
```

--------------------------------

### Configure Dev-Time Source Linking

Source: https://tsdown.dev/options/package-exports

Use devExports to point exports to source files during development, with build outputs written to publishConfig.

```ts
export default defineConfig({
  exports: {
    devExports: true,
  },
})
```

```ts
export default defineConfig({
  exports: {
    devExports: '@my-org/source',
  },
})
```

--------------------------------

### Configure tsdown for Solid Library

Source: https://tsdown.dev/recipes/solid-support

Set up your tsdown.config.ts file to include the unplugin-solid plugin for Solid component bundling and type generation.

```typescript
import { defineConfig } from 'tsdown'
import solid from 'unplugin-solid/rolldown'

export default defineConfig({
  entry: ['./src/index.ts'],
  platform: 'neutral',
  dts: true,
  plugins: [solid()],
})
```

--------------------------------

### Load environment variables from a file

Source: https://tsdown.dev/reference/cli

Loads variables from a specified file, with --env flags taking precedence.

```bash
tsdown --env-file .env.production
```

--------------------------------

### Use wasm-bindgen with web target

Source: https://tsdown.dev/recipes/wasm-support

Configure initialization for Node.js or browser environments when using the web target.

```ts
import { readFile } from 'node:fs/promises'
import init, { add } from 'some-pkg'
import wasmUrl from 'some-pkg/add_bg.wasm?url'

await init({
  module_or_path: readFile(new URL(wasmUrl, import.meta.url)),
})

add(1, 2)
```

```ts
import init, { add } from 'some-pkg/add.js'
import wasmUrl from 'some-pkg/add_bg.wasm?url'

await init({
  module_or_path: wasmUrl,
})

add(1, 2)
```

--------------------------------

### Enable Experimental Decorators

Source: https://tsdown.dev/options/target

If using Stage 2 (Legacy) decorators, enable the `experimentalDecorators` option in your `tsconfig.json`.

```json
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
```

--------------------------------

### Export All Files

Source: https://tsdown.dev/options/package-exports

Enable exports.all to include files not explicitly listed as entry points in the generated exports field.

```ts
export default defineConfig({
  exports: {
    all: true,
  },
})
```

--------------------------------

### Execute command on successful build

Source: https://tsdown.dev/reference/cli

Runs a specified command automatically after a successful build process.

```bash
tsdown --on-success "echo Build finished!"
```

--------------------------------

### Multiple Targets for Broader Compatibility

Source: https://tsdown.dev/options/target

Pass an array of targets to the `--target` option to ensure compatibility across multiple environments.

```bash
tsdown --target chrome100 --target node20.18
```

--------------------------------

### Default output structure without explicit root

Source: https://tsdown.dev/options/root

Demonstrates the default behavior where the common base directory is used as the root.

```ts
export default defineConfig({
  entry: ['src/index.ts', 'src/utils/helper.ts'],
})
```

--------------------------------

### Watch Specific Paths

Source: https://tsdown.dev/options/watch-mode

Specify a custom path to watch for changes instead of the default project files. This allows for more granular control over what triggers a re-bundle.

```bash
tsdown --watch <path>
```

--------------------------------

### Configure IIFE Output Filenames

Source: https://tsdown.dev/guide/migrate-from-tsup

Use Rolldown output options to maintain specific filename patterns like .global.js for IIFE builds.

```ts
export default {
  format: 'iife',
  outputOptions: {
    entryFileNames: '[name].global.js',
  },
}
```

--------------------------------

### Access the package version

Source: https://tsdown.dev/reference/api/Variable.version

Retrieves the version string defined in the package configuration.

```ts
const version: string = pkg.version
```

--------------------------------

### Enabling shims via CLI

Source: https://tsdown.dev/options/shims

Use the --shims flag to enable compatibility shims for ESM output.

```bash
tsdown --shims
```

--------------------------------

### Use glob patterns for entry files

Source: https://tsdown.dev/options/entry

Match multiple files dynamically using glob patterns, including support for negation.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: 'src/**/*.ts',
})
```

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['src/*.ts', '!src/*.test.ts'],
})
```

--------------------------------

### Generate Multiple Output Formats

Source: https://tsdown.dev/options/output-format

You can specify multiple formats in a single command to generate outputs for different environments, ensuring broad compatibility.

```bash
# Generate ESM output (default)
tsdown --format esm

# Generate both ESM and CJS outputs
tsdown --format esm --format cjs

# Generate IIFE output for browser usage
tsdown --format iife
```

--------------------------------

### Define compile-time environment variables

Source: https://tsdown.dev/reference/cli

Sets environment variables accessible via import.meta.env or process.env.

```bash
tsdown --env.NODE_ENV=production
```

--------------------------------

### Use glob patterns in object entries

Source: https://tsdown.dev/options/entry

Map file paths to output names using glob wildcards in object keys and values.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: {
    // Maps src/foo.ts → dist/lib/foo.js, src/bar.ts → dist/lib/bar.js
    'lib/*': 'src/*.ts',
  },
})
```

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: {
    // Include all hooks except the index file
    'hooks/*': ['src/hooks/*.ts', '!src/hooks/index.ts'],
  },
})
```

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: {
    'utils/*': [
      'src/utils/*.ts',
      'src/utils/*.tsx',
      '!src/utils/index.ts',
      '!src/utils/internal.ts',
    ],
  },
})
```

--------------------------------

### Enable workspace mode

Source: https://tsdown.dev/guide/faq

Use the workspace flag to enable monorepo support and filter specific packages.

```bash
tsdown -W -F my-package
```

--------------------------------

### tsdown configuration with plugins

Source: https://tsdown.dev/guide/getting-started

Configure tsdown to use plugins by adding them to the 'plugins' array in the configuration file.

```ts
import SomePlugin from 'some-plugin'
import { defineConfig } from 'tsdown'

export default defineConfig({
  plugins: [SomePlugin()],
})
```

--------------------------------

### Specify entry files via CLI

Source: https://tsdown.dev/options/entry

Pass entry files as command arguments to the tsdown CLI.

```bash
tsdown src/entry1.ts src/entry2.ts
```

--------------------------------

### Export Component in Entry File

Source: https://tsdown.dev/recipes/solid-support

Export your Solid components from the main entry file (e.g., index.ts) to make them available for bundling.

```typescript
export { MyButton } from './MyButton'
```

--------------------------------

### Define Workspace include property

Source: https://tsdown.dev/reference/api/Interface.Workspace

Configures workspace directories using glob patterns or the 'auto' keyword for automatic detection.

```ts
optional include?: string[] | string & object | "auto";
```

```ts
'auto'
```

--------------------------------

### tsdown source index.ts

Source: https://tsdown.dev/guide/getting-started

Entry point for your tsdown project, imports and calls the hello function.

```ts
import { hello } from './hello.ts'

hello()
```

--------------------------------

### Configure plugin options

Source: https://tsdown.dev/recipes/wasm-support

Customize the plugin behavior using the options object.

```ts
wasm({
  maxFileSize: 14 * 1024, // Max file size for inline (default: 14KB)
  fileName: '[hash][extname]', // Output file name pattern
  targetEnv: 'auto', // 'auto' | 'auto-inline' | 'browser' | 'node'
})
```

--------------------------------

### Add tsdown build script to package.json

Source: https://tsdown.dev/guide/getting-started

Simplify the build process by adding a 'build' script to your package.json.

```json
{
  "name": "my-tsdown-project",
  "type": "module",
  "scripts": {
    "build": "tsdown"
  },
  "devDependencies": {
    "tsdown": "^0.9.0"
  }
}
```

--------------------------------

### Enable Unbundle Mode

Source: https://tsdown.dev/options/unbundle

Set the unbundle option to true in the tsdown configuration file.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['src/index.ts'],
  unbundle: true,
})
```

--------------------------------

### Compare minified and non-minified output

Source: https://tsdown.dev/options/minification

Comparison of the generated JavaScript output with and without the --minify option.

```js
//#region src/index.ts
const x = 1
function hello(x$1) {
  console.log('Hello World')
  console.log(x$1)
}
hello(x)

//#endregion
```

```js
const e=1;function t(e){console.log(`Hello World`),console.log(e)}t(e);
```

--------------------------------

### Use wasm-bindgen with bundler target

Source: https://tsdown.dev/recipes/wasm-support

The default and recommended target for wasm-bindgen integration.

```ts
import { add } from 'some-pkg'

add(1, 2)
```

--------------------------------

### Configure Lightning CSS Options

Source: https://tsdown.dev/options/css

Pass custom targets and feature flags to Lightning CSS.

```ts
import { Features } from 'lightningcss'

export default defineConfig({
  css: {
    lightningcss: {
      // Override browser targets directly (instead of using `target`)
      targets: { chrome: 100 << 16 },
      // Include/exclude specific features
      include: Features.Nesting,
    },
  },
})
```

--------------------------------

### Specify PostCSS Config Directory

Source: https://tsdown.dev/options/css

Point to a directory containing a PostCSS configuration file.

```ts
export default defineConfig({
  css: {
    transformer: 'postcss',
    postcss: './config', // Search for postcss.config.js in ./config/
  },
})
```

--------------------------------

### Configure PostCSS Plugins

Source: https://tsdown.dev/options/css

Define PostCSS plugins inline within the configuration object.

```ts
export default defineConfig({
  css: {
    transformer: 'postcss',
    postcss: {
      plugins: [require('autoprefixer')],
    },
  },
})
```

--------------------------------

### Override Configuration by Format

Source: https://tsdown.dev/options/output-format

Configure format-specific settings like 'target' by providing an object for each format in the tsdown configuration file.

```typescript
export default defineConfig({
  entry: ['./src/index.js'],
  format: {
    esm: {
      target: ['es2015'],
    },
    cjs: {
      target: ['node20'],
    },
  },
})
```

--------------------------------

### Migrate monorepo packages with glob patterns

Source: https://tsdown.dev/guide/migrate-from-tsup

Use glob patterns to target specific directories within a monorepo structure.

```bash
npx tsdown-migrate packages/*
```

--------------------------------

### Set Target via CLI

Source: https://tsdown.dev/options/target

Specify the target environment using the `--target` option in the command line.

```bash
tsdown --target <target>
```

--------------------------------

### Configure CI-aware options in tsdown.config.ts

Source: https://tsdown.dev/advanced/ci

Use 'ci-only' or 'local-only' strings to conditionally enable features based on the build environment.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  // Only generate declaration files locally (skip in CI for faster builds)
  dts: 'local-only',
  // Only run publint in CI
  publint: 'ci-only',
  // Fail on warnings in CI only
  failOnWarn: 'ci-only',
})
```

--------------------------------

### Prompt AI Agent for tsup vs tsdown Option Differences

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent about the differences in options between tsup and tsdown, including default values and unsupported features.

```plaintext
What are the differences between tsup and tsdown options?
```

--------------------------------

### Configure root via defineConfig

Source: https://tsdown.dev/options/root

Set the root directory explicitly within the tsdown configuration file.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['src/index.ts', 'src/utils/helper.ts'],
  root: 'src',
})
```

--------------------------------

### Configure CSS Modules

Source: https://tsdown.dev/options/css

Customize scoping behavior and naming patterns for CSS modules.

```ts
export default defineConfig({
  css: {
    modules: {
      // Scoping behavior: 'local' (default) or 'global'
      scopeBehaviour: 'local',

      // Pattern for scoped class names (Lightning CSS pattern syntax)
      generateScopedName: '[hash]_[local]',

      // Transform class name convention in JS exports
      localsConvention: 'camelCase',
    },
  },
})
```

--------------------------------

### Load tsdown Config from Vite

Source: https://tsdown.dev/options/config-file

Experimentally load tsdown configuration from Vite config files using the --from-vite flag. This can reuse settings like 'resolve' and 'plugins'.

```bash
tsdown --from-vite
```

--------------------------------

### Configure Plugins in tsdown

Source: https://tsdown.dev/advanced/plugins

Add plugins to the plugins array within the tsdown configuration file.

```ts
import SomePlugin from 'some-plugin'
import { defineConfig } from 'tsdown'

export default defineConfig({
  plugins: [SomePlugin()],
})
```

--------------------------------

### Enable Auto Exports

Source: https://tsdown.dev/options/package-exports

Set exports to true in the configuration to automatically analyze entry points and update package.json.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  exports: true,
})
```

--------------------------------

### Load tsdown Config from Vitest

Source: https://tsdown.dev/options/config-file

Experimentally load tsdown configuration from Vitest config files using the --from-vite vitest flags. This can reuse settings like 'resolve' and 'plugins'.

```bash
tsdown --from-vite vitest
```

--------------------------------

### Prompt AI Agent to Set Up tsdown for TypeScript Library

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent to configure tsdown for building a TypeScript library with both ESM and CJS output formats.

```plaintext
Set up tsdown to build my TypeScript library with ESM and CJS formats
```

--------------------------------

### Prompt AI Agent to Add React Support with Fast Refresh

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent to add React support to your tsdown configuration, including Fast Refresh for development.

```plaintext
Add React support to my tsdown config with Fast Refresh
```

--------------------------------

### Prompt AI Agent to Convert tsup Configuration to tsdown

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent to convert your existing tsup.config.ts file to the tsdown configuration format.

```plaintext
Convert my tsup.config.ts to tsdown format
```

--------------------------------

### Enable Declaration Maps in tsconfig.json

Source: https://tsdown.dev/options/dts

Enable the `declarationMap` option in your tsconfig.json to allow .d.ts files to map back to their original .ts sources.

```json
{
  "compilerOptions": {
    "declarationMap": true
  }
}
```

--------------------------------

### Define a CI-optimized configuration

Source: https://tsdown.dev/advanced/ci

A standard configuration pattern for CI pipelines that enables validation and warning enforcement only in CI environments.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
  dts: true,
  // Fail on warnings in CI (opt-in)
  failOnWarn: 'ci-only',
  // Run package validators in CI
  publint: 'ci-only',
  attw: 'ci-only',
})
```

--------------------------------

### Define Workspace config property

Source: https://tsdown.dev/reference/api/Interface.Workspace

Specifies the path to the workspace configuration file.

```ts
optional config?: string | boolean;
```

--------------------------------

### Prompt AI Agent to Migrate from tsup to tsdown

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent to assist in migrating your project from tsup to tsdown.

```plaintext
Migrate my tsup project to tsdown
```

--------------------------------

### Specify Custom tsdown Config File

Source: https://tsdown.dev/options/config-file

Use the --config or -c flag to point tsdown to a custom configuration file path when it's not in the default location.

```bash
tsdown --config ./path/to/config
```

--------------------------------

### Configure tsdown for WASM support

Source: https://tsdown.dev/recipes/wasm-support

Add the plugin to your tsdown.config.ts file to enable WASM bundling.

```ts
import { wasm } from 'rolldown-plugin-wasm'
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['./src/index.ts'],
  plugins: [wasm()],
})
```

--------------------------------

### Prompt AI Agent to Configure tsdown for Browser Bundling and Types

Source: https://tsdown.dev/guide/skills

Use this prompt to ask an AI agent to configure tsdown for generating type declarations and bundling the output for browser environments.

```plaintext
Configure tsdown to generate type declarations and bundle for browsers
```

--------------------------------

### Define Multiple tsdown Outputs

Source: https://tsdown.dev/options/config-file

Configure tsdown to build multiple outputs by returning an array of configurations. This allows for different settings per output, such as platform targets.

```typescript
import { defineConfig } from 'tsdown'

export default defineConfig([
  {
    entry: 'src/entry1.ts',
    platform: 'node',
  },
  {
    entry: 'src/entry2.ts',
    platform: 'browser',
  },
])
```

--------------------------------

### Set Log Level via CLI

Source: https://tsdown.dev/options/log-level

Use the --log-level flag to control the verbosity of the build process output.

```bash
tsdown --log-level silent
```

```bash
tsdown --log-level error
```

--------------------------------

### Specify Custom Output Directory with tsdown

Source: https://tsdown.dev/options/output-directory

Use the --out-dir or -d flag to direct tsdown build outputs to a custom folder. The directory is created if it doesn't exist.

```bash
tsdown -d ./custom-output
```

```bash
# Default behavior: outputs to ./dist
tsdown

# Custom output directory: outputs to ./build
tsdown -d ./build
```

--------------------------------

### Enabling shims in configuration

Source: https://tsdown.dev/options/shims

Set shims to true in the tsdown configuration file.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  shims: true,
})
```

--------------------------------

### Configure mainFields for neutral platform

Source: https://tsdown.dev/options/platform

Explicitly define mainFields in inputOptions when using the neutral platform to resolve package entry points.

```ts
export default defineConfig({
  platform: 'neutral',
  inputOptions: {
    resolve: {
      mainFields: ['module', 'main'],
    },
  },
})
```

--------------------------------

### Minimal tsdown Configuration for React

Source: https://tsdown.dev/recipes/react-support

A basic tsdown configuration file for building a React library. Ensure 'platform' is set to 'neutral' for library compatibility and 'dts' is enabled for type definitions.

```typescript
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['./src/index.ts'],
  platform: 'neutral',
  dts: true,
})
```

--------------------------------

### Import WASM modules

Source: https://tsdown.dev/recipes/wasm-support

Directly import and use WASM modules in your code.

```ts
import { add } from './add.wasm'

add(1, 2)
```

--------------------------------

### Update Unplugin Import Paths

Source: https://tsdown.dev/guide/migrate-from-tsup

Switch from esbuild-specific imports to rolldown-specific imports when using unplugin.

```ts
// Before (tsup)
import plugin from 'unplugin-example/esbuild'
// After (tsdown)
import plugin from 'unplugin-example/rolldown'
```

--------------------------------

### Combine neverBundle and alwaysBundle

Source: https://tsdown.dev/options/dependencies

Externalize all dependencies while forcing specific packages to be bundled.

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  deps: {
    neverBundle: true,
    alwaysBundle: ['some-package'],
  },
})
```

--------------------------------

### Enable Source Maps in Config File

Source: https://tsdown.dev/options/sourcemap

Set `sourcemap: true` in your tsdown.config.ts file to enable source maps.

```typescript
import {
  defineConfig
} from 'tsdown'

export default defineConfig({
  sourcemap: true,
})
```

--------------------------------

### tsdown source hello.ts

Source: https://tsdown.dev/guide/getting-started

Defines the 'hello' function that logs a message to the console.

```ts
export function hello() {
  console.log('Hello tsdown!')
}
```

--------------------------------

### Generated declaration file

Source: https://tsdown.dev/options/cjs-default

The resulting declaration file using the export = syntax.

```ts
// dist/index.d.cts
declare function greet(): void
export = greet
```

--------------------------------

### Enable dts Generation via CLI

Source: https://tsdown.dev/options/dts

Use the --dts flag in the tsdown CLI to explicitly enable declaration file generation.

```bash
tsdown --dts
```
Tokens:
Raw