<!-- index.html -->
<html>
  <head>
    <script type="module" src="./index.ts"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

// index.ts

import { mount, unmount } from "svelte";
import App from "./App.svelte";

// mount the application entrypoint to the DOM
const root = document.getElementById("root")!;
const app = mount(App, { target: root });

<!-- App.svelte -->

<script lang="ts">
  // out-of-the-box typescript support
  let name: string = "Bun";
</script>

<main class="app">
  <h1>Cookin up apps with {name}</h1>
</main>

<style>
  h1 {
      color: #ff3e00;
      text-align: center;
      font-size: 2em;
  }
</style>

Bundler Usage

// 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", // use "bun" or "node" to use Svelte components server-side
  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