@dschz/bun-plugin-solid

@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 = {
  /**
   * 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

🔧 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, // recommended for production
    }),
  ],
});