Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support Svelte in bundler and dev server #17735

Merged
merged 32 commits into from
Mar 4, 2025
Merged

feat: support Svelte in bundler and dev server #17735

merged 32 commits into from
Mar 4, 2025
+1,123 −16

Conversation

DonIsaac
Copy link
Contributor

What does this PR do?

Adds a new bun-plugin-svelte package, which provides a build plugin to support Svelte.

Example: Dev Server + HMR

<!-- 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";

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>

Example: Bun Build

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

Not Yet Implemented

These will be added in follow-up PRs

  • Source map support
  • Tailwind (and other CSS extensions)
  • TypeScript-specific features (e.g. enums and namespaces). If you're using TypeScript 5.8, consider enabling --erasableSyntaxOnly

How did you verify your code works?

There are tests, plus I ran example apps locally.

@robobun
Copy link

robobun commented Feb 26, 2025 •
edited
Loading

Updated 12:08 PM PT - Mar 4th, 2025

❌ @DonIsaac, your commit 7c29ab2 has 3 failures in Build #12652:

🧪   try this PR locally:

bunx bun-pr 17735

@DonIsaac DonIsaac added bundler Something to do with the bundler bake:dev hot-reloading dev server for client+server applications labels Feb 26, 2025
@DonIsaac DonIsaac marked this pull request as ready for review February 27, 2025 02:41
@yus-ham
Copy link
Contributor

yus-ham commented Feb 27, 2025

can't wait 😀

paperclover
paperclover requested changes Mar 1, 2025
View reviewed changes
@DonIsaac DonIsaac requested a review from paperclover March 4, 2025 02:19
paperclover
paperclover reviewed Mar 4, 2025
View reviewed changes
@DonIsaac DonIsaac requested a review from paperclover March 4, 2025 19:16
@paperclover paperclover merged commit a41d773 into main Mar 4, 2025
64 of 71 checks passed
@paperclover paperclover deleted the don/feat/bun-plugin-svelte branch March 4, 2025 22:16
@RiskyMH RiskyMH added the release-notes This PR should be mentioned in release notes for the Bun version in which it lands label Mar 7, 2025
@pekeler pekeler mentioned this pull request Mar 12, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Jarred-Sumner Jarred-Sumner Awaiting requested review from Jarred-Sumner

@paperclover paperclover Awaiting requested review from paperclover

Assignees
No one assigned
Labels
bake:dev hot-reloading dev server for client+server applications bundler Something to do with the bundler release-notes This PR should be mentioned in release notes for the Bun version in which it lands
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@DonIsaac @robobun @yus-ham @paperclover @RiskyMH