@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

``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

> 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;
};
`

Usage

$3

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
`

---

$3

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
}),
],
});
``