bun-plugin-svelte

bun-plugin-svelte

The official Svelte plugin for Bun.

Installation

$ bun add -D bun-plugin-svelte

Dev Server Usage

bun-plugin-svelte integrates with Bun's Fullstack Dev Server, giving you HMR when developing your Svelte app.

Start by registering it in your bunfig.toml:

[serve.static]
plugins = ["bun-plugin-svelte"]

Then start your dev server:

$ bun index.html

See the example for a complete example.

Bundler Usage

bun-plugin-svelte lets you bundle Svelte components with Bun.build.

// build.ts
// to use: bun run build.ts
import { SveltePlugin } from "bun-plugin-svelte"; // NOTE: not published to npm yet

Bun.build({
  entrypoints: ["src/index.ts"],
  outdir: "dist",
  target: "browser",
  sourcemap: true, // sourcemaps not yet supported
  plugins: [
    SveltePlugin({
      development: true, // turn off for prod builds. Defaults to false
    }),
  ],
});

Server-Side Usage

bun-plugin-svelte does not yet support server-side imports (e.g. for SSR). This will be added in the near future.

Not Yet Supported

Support for these features will be added in the near future

• Server-side imports/rendering
• Source maps
• CSS extensions (e.g. tailwind) in <style> blocks
• TypeScript-specific features (e.g. enums and namespaces). If you're using TypeScript 5.8, consider enabling --erasableSyntaxOnly