@dschz/bun-plugin-solid

🧩 A Bun plugin for transforming SolidJS JSX/TSX files at runtime or build time using Babel. Supports SSR and DOM output.
🟢 Works seamlessly with Bun and Elysia servers for both runtime and build-time JSX/TSX transformation.
⚠️ Note: This plugin is designed specifically for use with the Bun runtime. It will not work in Node.js, Deno, or other JavaScript environments.
Features
- ✅ Works in both
bun run
(runtime) and bun build
(build-time) contexts
- 🎯 Supports SSR (
generate: "ssr"
) and DOM (generate: "dom"
) output
- 💧 Hydratable output toggle for SSR
- 🧱 Designed to be invoked via
preload
or build plugins
- 🪄 Minimal and explicit configuration surface
Installation
bun add -d @dschz/bun-plugin-solid @babel/core @babel/preset-typescript babel-preset-solid
These are peer dependencies, so they must be installed manually:
@babel/core
@babel/preset-typescript
babel-preset-solid
Plugin Options
Plugin options generate
and hydratable
are directly derived from babel-preset-solid
and will be passed to it under the hood.
type SolidPluginOptions = {
generate?: "dom" | "ssr";
hydratable?: boolean;
sourceMaps?: boolean | "inline";
debug?: boolean;
};
Usage
🔧 Runtime (Development) via Preload Script
Use this for runtime-based workflows like server-side rendering (SSR) with Elysia, Bun, or other Bun-native frameworks.
bunPreload.ts
:
import { SolidPlugin } from "@dschz/bun-plugin-solid";
await Bun.plugin(
SolidPlugin({
generate: "ssr",
hydratable: true,
debug: true,
}),
);
bunfig.toml
:
jsx = "solid"
jsxFactory = "solid-js"
preload = ["./bunPreload.ts"]
Run:
bun run server.ts
📦 Build-Time Compilation with Bun.build()
Use this in production workflows to pre-compile .tsx
or .jsx
files to JavaScript.
build.ts
:
import { SolidPlugin } from "@dschz/bun-plugin-solid";
await Bun.build({
entrypoints: ["./src/index.ts"],
outdir: "./dist",
target: "bun",
format: "esm",
plugins: [
SolidPlugin({
generate: "ssr",
hydratable: true,
sourceMaps: false,
}),
],
});