TSDX React Component Library

Zero-config React component library development powered by modern tools.

Quick Start

# Install dependencies
bun install

# Start development mode
bun run dev

# Build for production
bun run build

# Run tests
bun run test

# Lint code
bun run lint

# Format code
bun run format

Project Structure

/src
  index.tsx       # Your component entry point
/test
  index.test.tsx  # Tests using Vitest + Testing Library
/example
  index.tsx       # Demo app using Vite
.gitignore
package.json
README.md
tsconfig.json
vitest.config.ts

Scripts

| Script | Description | |--------|-------------| | bun run dev | Start development mode with watch | | bun run build | Build for production | | bun run test | Run tests | | bun run test:watch | Run tests in watch mode | | bun run lint | Lint code | | bun run format | Format code | | bun run format:check | Check if code is formatted | | bun run typecheck | Run TypeScript type checking |

Tools

TSDX wraps these modern, high-performance tools:

• Bunchee - Zero-config bundler for npm packages
• Vitest - Next-generation testing framework
• Testing Library - React testing utilities
• Oxlint - Rust-powered linter (50-100x faster than ESLint)
• Oxfmt - Rust-powered formatter (35x faster than Prettier)
• TypeScript - Type safety

Development with Example

To test your component in a real React app:

# In one terminal, start the library in watch mode
bun run dev

# In another terminal, run the example app
cd example
bun install
bun run dev

Module Formats

This library exports both ESM and CommonJS formats, with full TypeScript support:

• dist/index.js - ESM
• dist/index.cjs - CommonJS
• dist/index.d.ts - TypeScript declarations

Publishing

# Build the package
bun run build

# Publish to npm
npm publish

We recommend using np for publishing.

License

MIT