Socket
Book a DemoInstallSign in
Socket

@dschz/bun-plugin-solid

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dschz/bun-plugin-solid

A Bun plugin for transforming SolidJS TSX/JSX files at runtime or build time using Babel. Supports SSR and DOM output.

1.0.4
latest
npmnpm
Version published
Weekly downloads
2
-80%
Maintainers
1
Weekly downloads
 
Created
Source

bun-plugin-solid

@dschz/bun-plugin-solid

License npm version Bundle Size JSR CI

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

Keywords

bun

FAQs

Package last updated on 05 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.