A Bun plugin for transforming SolidJS TSX/JSX files at runtime or build time using Babel. Supports SSR and DOM output.
npm install @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.
- ✅ 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
``bash`
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 generate and hydratable are directly derived from babel-preset-solid and will be passed to it under the hood.
`ts
type SolidPluginOptions = {
/**
* Whether to generate DOM or SSR-compatible output.
* Defaults to "dom".
*/
generate?: "dom" | "ssr";
/**
* Enables hydration code generation for SSR.
* Defaults to true.
*/
hydratable?: boolean;
/**
* Controls source map generation:
* - false: no source maps
* - true: external .map file
* - "inline": base64-encoded inline source maps
*
* Defaults to "inline".
*/
sourceMaps?: boolean | "inline";
/**
* Enable verbose debug logs during transform.
* Defaults to false.
*/
debug?: boolean;
};
`
Use this for runtime-based workflows like server-side rendering (SSR) with Elysia, Bun, or other Bun-native frameworks.
#### bunPreload.ts:
`ts
import { SolidPlugin } from "@dschz/bun-plugin-solid";
await Bun.plugin(
SolidPlugin({
generate: "ssr",
hydratable: true,
debug: true,
}),
);
`
#### bunfig.toml:
`toml`
jsx = "solid"
jsxFactory = "solid-js"
preload = ["./bunPreload.ts"]
#### Run:
`bash`
bun run server.ts
---
Use this in production workflows to pre-compile .tsx or .jsx files to JavaScript.
#### build.ts:
`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, // recommended for production
}),
],
});
``