Convert Figma logo to code with AI

jaredpalmer logotsdx

Zero-config CLI for TypeScript package development

11,372
506
11,372
241

Top Related Projects

11,372

Zero-config CLI for TypeScript package development

10,926

The simplest and fastest way to bundle your TypeScript libraries.

📦 Zero-configuration bundler for tiny modules.

9,719

Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.

32,904

Rust-based platform for the Web

Quick Overview

TSDX is a zero-config CLI tool that helps you develop, test, and publish modern TypeScript packages with ease. It provides a streamlined development experience by handling the complex configuration of tools like Rollup, Jest, and TypeScript, allowing developers to focus on writing code rather than managing build processes.

Pros

  • Zero-config setup for TypeScript package development
  • Optimized build process with Rollup for multiple output formats (CJS, ESM, UMD)
  • Integrated testing setup with Jest and code coverage reporting
  • Automatic generation of TypeScript declaration files

Cons

  • Limited customization options for advanced use cases
  • May not be suitable for projects with very specific build requirements
  • Learning curve for developers unfamiliar with the TSDX ecosystem
  • Potential over-abstraction for simple projects

Code Examples

  1. Creating a new TSDX project:
npx tsdx create my-library
  1. Developing with TSDX:
# Run the project in development mode
npm start

# Build the project
npm run build

# Run tests
npm test
  1. Example of a simple TypeScript function in a TSDX project:
// src/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Getting Started

  1. Install TSDX globally:

    npm install -g tsdx
    
  2. Create a new project:

    tsdx create my-library
    cd my-library
    
  3. Start development:

    npm start
    
  4. Write your code in the src directory and tests in the test directory.

  5. Build your project:

    npm run build
    
  6. Publish your package:

    npm publish
    

Competitor Comparisons

11,372

Zero-config CLI for TypeScript package development

Pros of tsdx

  • Zero-config CLI for TypeScript package development
  • Optimized build process with rollup
  • Includes Jest setup for testing

Cons of tsdx

  • Limited customization options
  • May not be suitable for complex project structures
  • Potential for outdated dependencies

Code Comparison

tsdx:

import { sum } from './';

describe('sum', () => {
  it('adds two numbers', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

Both repositories are identical, as they are the same project. The code example above demonstrates a typical test file structure in a tsdx project.

Summary

tsdx is a popular tool for TypeScript package development, offering a streamlined setup process and optimized builds. However, its one-size-fits-all approach may not be suitable for all projects, especially those requiring more complex configurations. The project aims to simplify the development process for TypeScript libraries, but users should be aware of potential limitations in customization and the need to keep dependencies up-to-date.

10,926

The simplest and fastest way to bundle your TypeScript libraries.

Pros of tsup

  • Faster build times due to esbuild integration
  • Supports multiple output formats (ESM, CJS, IIFE) out of the box
  • Simpler configuration with fewer dependencies

Cons of tsup

  • Less comprehensive testing setup compared to tsdx
  • Fewer built-in optimizations for different environments
  • May require additional configuration for advanced use cases

Code Comparison

tsup configuration:

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
})

tsdx configuration:

// No explicit configuration needed for basic setup
// tsdx.config.js (optional)
module.exports = {
  rollup(config, options) {
    return config
  },
}

Both tsup and tsdx aim to simplify TypeScript project setup and building, but they take different approaches. tsup leverages esbuild for faster compilation and offers more flexibility in output formats, while tsdx provides a more opinionated and comprehensive development environment with additional features like automatic testing setup and optimizations for different target environments.

The choice between tsup and tsdx depends on project requirements, with tsup being more suitable for simpler projects or those prioritizing build speed, and tsdx offering a more robust solution for complex TypeScript libraries.

📦 Zero-configuration bundler for tiny modules.

Pros of microbundle

  • Smaller bundle size and faster build times
  • Supports a wider range of module formats (UMD, CJS, ESM)
  • More flexible configuration options

Cons of microbundle

  • Less opinionated, requiring more setup and configuration
  • Fewer built-in development tools and testing features
  • Less comprehensive TypeScript support out of the box

Code Comparison

microbundle configuration:

{
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
  }
}

TSDX configuration:

{
  "scripts": {
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test"
  }
}

microbundle offers more flexibility in configuration, while TSDX provides a more opinionated and streamlined setup. TSDX includes built-in testing and development tools, making it easier to get started with TypeScript projects. However, microbundle's smaller bundle size and support for various module formats make it a strong choice for projects with specific build requirements.

Both tools aim to simplify the process of building and bundling TypeScript libraries, but they cater to different needs and preferences in terms of configuration, features, and project structure.

9,719

Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.

Pros of ncc

  • Simpler setup and usage, requiring fewer configuration steps
  • Produces a single file output, making deployment easier
  • Supports compilation of non-TypeScript projects

Cons of ncc

  • Less flexibility in output formats and configurations
  • Limited built-in development tools and testing support
  • May not optimize as aggressively for TypeScript-specific features

Code Comparison

ncc:

ncc build input.js -o dist

tsdx:

{
  "scripts": {
    "build": "tsdx build",
    "test": "tsdx test",
    "lint": "tsdx lint"
  }
}

Key Differences

  • ncc focuses on simplicity and single-file output, while tsdx provides a more comprehensive development environment for TypeScript projects
  • tsdx offers built-in testing, linting, and development tools, whereas ncc primarily handles compilation and bundling
  • ncc can be used for various JavaScript projects, while tsdx is specifically tailored for TypeScript library development

Use Cases

  • Choose ncc for quick, simple bundling of Node.js projects or when a single-file output is desired
  • Opt for tsdx when developing TypeScript libraries that require a full development toolkit, including testing and linting

Community and Maintenance

Both projects are actively maintained and have strong community support. ncc is backed by Vercel, while tsdx has a dedicated community of contributors.

32,904

Rust-based platform for the Web

Pros of SWC

  • Significantly faster compilation and bundling compared to TSDX
  • Supports a wider range of JavaScript and TypeScript features
  • Actively maintained with frequent updates and improvements

Cons of SWC

  • Steeper learning curve and more complex configuration
  • Less opinionated, requiring more setup for specific use cases
  • May have occasional compatibility issues with certain JavaScript/TypeScript features

Code Comparison

TSDX configuration (tsconfig.json):

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "importHelpers": true,
    "declaration": true,
    "sourceMap": true
  }
}

SWC configuration (.swcrc):

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es5"
  },
  "module": {
    "type": "es6"
  }
}

While TSDX provides a more streamlined setup for TypeScript projects, SWC offers greater flexibility and performance at the cost of increased complexity. TSDX is better suited for quick TypeScript library development, while SWC is more powerful for larger projects requiring fine-tuned control over compilation and bundling.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TSDX

Zero-config CLI for TypeScript package development.

CI npm License: MIT

Modern TypeScript library development, simplified. TSDX provides a zero-config CLI that helps you develop, test, and publish TypeScript packages with ease.

TSDX 2.0 is a complete rewrite using modern, high-performance Rust-based tooling. See the Migration Guide if upgrading from v0.x

Features

  • Zero config - Sensible defaults, just start coding
  • Modern tooling - Built on bunchee, vitest, oxlint, and oxfmt
  • Dual ESM/CJS - Automatic dual module builds with proper exports
  • TypeScript first - Full TypeScript support with declaration generation
  • Lightning fast - Rust-powered linting (50-100x faster than ESLint) and formatting (35x faster than Prettier)
  • Bun-native - Uses bun for package management
  • Modern Node.js - Supports Node.js 20+ (LTS)

Quick Start

# Create a new package
bunx tsdx create mylib

# Navigate to the project
cd mylib

# Start development
bun run dev

That's it! Start editing src/index.ts and build your library.

Installation

Global Installation (recommended for creating projects)

bun add -g tsdx

Per-Project Installation

bun add -D tsdx

Commands

tsdx create <name>

Create a new TypeScript package from a template.

# Interactive template selection
bunx tsdx create mylib

# Specify template directly
bunx tsdx create mylib --template react

Available Templates:

TemplateDescription
basicA basic TypeScript library with vitest
reactA React component library with Testing Library

tsdx build

Build the package for production using bunchee.

tsdx build

# Skip cleaning dist folder
tsdx build --no-clean

Outputs ESM and CommonJS formats with TypeScript declarations.

tsdx dev / tsdx watch

Start development mode with file watching.

tsdx dev

Rebuilds automatically when files change.

tsdx test

Run tests using vitest.

# Run tests once
tsdx test

# Watch mode
tsdx test --watch

# With coverage
tsdx test --coverage

# Update snapshots
tsdx test --update

tsdx lint

Lint the codebase using oxlint.

# Lint src and test directories (default)
tsdx lint

# Lint specific paths
tsdx lint src lib

# Auto-fix issues
tsdx lint --fix

# Use custom config
tsdx lint --config .oxlintrc.json

tsdx format

Format the codebase using oxfmt.

# Format all files
tsdx format

# Check formatting without changes
tsdx format --check

# Format specific paths
tsdx format src test

tsdx typecheck

Run TypeScript type checking.

tsdx typecheck

# Watch mode
tsdx typecheck --watch

tsdx init

Initialize tsdx configuration in an existing project.

bunx tsdx init

This adds the necessary configuration to your package.json, creates tsconfig.json and vitest.config.ts if they don't exist.

Project Structure

Projects created with tsdx follow this structure:

mylib/
├── src/
│   └── index.ts          # Library entry point
├── test/
│   └── index.test.ts     # Tests (vitest)
├── dist/                  # Build output (generated)
│   ├── index.js          # ESM
│   ├── index.cjs         # CommonJS
│   └── index.d.ts        # TypeScript declarations
├── .github/
│   └── workflows/        # CI/CD workflows
├── package.json
├── tsconfig.json
├── vitest.config.ts
├── LICENSE
└── README.md

React Template Additional Structure

mylib/
├── src/
│   └── index.tsx         # React component entry
├── test/
│   └── index.test.tsx    # Tests with Testing Library
├── example/              # Demo app (Vite-powered)
│   ├── index.tsx
│   ├── index.html
│   ├── package.json
│   └── vite.config.ts
└── ...

Module Formats

TSDX outputs both ESM and CommonJS formats:

FileFormatUsage
dist/index.jsESMModern bundlers, Node.js with type: "module"
dist/index.cjsCommonJSLegacy Node.js, older bundlers
dist/index.d.tsTypeScriptType definitions
dist/index.d.ctsTypeScriptCJS type definitions

The package.json exports field is configured automatically:

{
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    },
    "./package.json": "./package.json"
  }
}

Tool Stack

TSDX 2.0 uses modern, high-performance tools:

ToolPurposePerformance
buncheeBundlingZero-config, built on Rollup + SWC
vitestTestingVite-native, Jest-compatible API
oxlintLinting50-100x faster than ESLint
oxfmtFormatting35x faster than Prettier
bunPackage ManagementNative speed, npm-compatible

Configuration

TypeScript (tsconfig.json)

TSDX creates a modern TypeScript configuration:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "declaration": true,
    "declarationMap": true
  }
}

Vitest (vitest.config.ts)

Default test configuration:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'node', // or 'jsdom' for React
  },
});

Linting (.oxlintrc.json)

Optional oxlint configuration:

{
  "rules": {
    "no-unused-vars": "warn"
  }
}

Formatting (.oxfmtrc.json)

Optional oxfmt configuration:

{
  "indentWidth": 2,
  "lineWidth": 100
}

Requirements

  • Node.js: 20+ (LTS)
  • Bun: Latest version

Installing Bun

# macOS/Linux
curl -fsSL https://bun.sh/install | bash

# Windows
powershell -c "irm bun.sh/install.ps1 | iex"

# npm (alternative)
npm install -g bun

Migrating from TSDX v0.x

See the Migration Guide for detailed instructions on upgrading from the original TSDX.

Quick summary:

  1. Install bun
  2. Update package.json scripts to use tsdx commands
  3. Replace Jest with vitest
  4. Replace ESLint with oxlint (optional)
  5. Replace Prettier with oxfmt (optional)
  6. Run bun install

Publishing

# Build the package
bun run build

# Publish to npm
npm publish

We recommend using np or changesets for publishing.

FAQ

Why bun?

Bun provides significantly faster package installation and script execution. It's compatible with npm packages and the Node.js ecosystem.

Can I still use npm/yarn/pnpm?

The generated projects use bun for package management, but the built packages are compatible with any package manager. Your library consumers can use npm, yarn, pnpm, or bun.

Why oxlint instead of ESLint?

oxlint is 50-100x faster than ESLint while catching the most important issues. For comprehensive linting, you can still use ESLint alongside oxlint.

Is this compatible with the old TSDX?

The build output format is fully compatible. Your library consumers won't notice any difference. However, the development workflow and configuration are different.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

Acknowledgments

TSDX 2.0 is built on the shoulders of giants:

Author

License

MIT

NPM DownloadsLast 30 Days