Solid Support

tsdown streamlines the development of Solid component libraries by integrating with rolldown-plugin-solid or unplugin-solid. This integration allows you to bundle Solid components and automatically generate type declarations using modern TypeScript tools.

Quick Start

For the fastest way to get started, use the Solid component starter template. This starter project comes pre-configured for Solid library development, so you can focus on building components right away.

npx create-tsdown@latest -t solid

Minimal Example

To configure tsdown for a Solid library, use the following setup in your tsdown.config.ts:

tsdown.config.ts

import solid from 'rolldown-plugin-solid' // or use 'unplugin-solid/rolldown'
import { defineConfig } from 'tsdown'

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

Create your typical Solid component:

MyButton.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
      {type}
    </button>
  )
}

And export it in your entry file:

index.ts

export { MyButton } from './MyButton'

Install the required dependencies:

npm

npm install -D rolldown-plugin-solid

pnpm

pnpm add -D rolldown-plugin-solid

yarn

yarn add -D rolldown-plugin-solid

bun

bun add -D rolldown-plugin-solid

or, if you prefer to use unplugin-solid:

npm

npm install -D unplugin-solid

pnpm

pnpm add -D unplugin-solid

yarn

yarn add -D unplugin-solid

bun

bun add -D unplugin-solid