🧩 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) andbun build(build-time) contexts - 🎯 Supports SSR (
generate: "ssr") and DOM (generate: "dom") output - 💧 Hydratable output toggle for SSR
- 🧱 Designed to be invoked via
preloador build plugins - 🪄 Minimal and explicit configuration surface
bun add -d @dschz/bun-plugin-solid @babel/core @babel/preset-typescript babel-preset-solidThese are peer dependencies, so they must be installed manually:
@babel/core@babel/preset-typescriptbabel-preset-solid
Plugin options
generateandhydratableare directly derived frombabel-preset-solidand will be passed to it under the hood.
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.
import { SolidPlugin } from "@dschz/bun-plugin-solid";
await Bun.plugin(
SolidPlugin({
generate: "ssr",
hydratable: true,
debug: true,
}),
);jsx = "solid"
jsxFactory = "solid-js"
preload = ["./bunPreload.ts"]bun run server.tsUse this in production workflows to pre-compile .tsx or .jsx files to JavaScript.
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
}),
],
});