diff --git a/.vscode/launch.json b/.vscode/launch.json
index 0924c20673..cd232a98a4 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1131,6 +1131,17 @@
       // Don't pause when the GC runs while the debugger is open.
       "postRunCommands": ["command source '${workspaceFolder}/misctools/lldb/lldb_commands'"],
     },
+    {
+      "type": "bun",
+      "name": "[JS] bun test [file]",
+      "runtime": "${workspaceFolder}/build/debug/bun-debug",
+      "runtimeArgs": ["test", "${file}"],
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "BUN_DEBUG_QUIET_LOGS": "1",
+        "BUN_GARBAGE_COLLECTOR_LEVEL": "2",
+      },
+    },
     {
       "type": "midas-rr",
       "request": "attach",
diff --git a/packages/bun-plugin-svelte/README.md b/packages/bun-plugin-svelte/README.md
index 9a29a903e1..b599c9ecb0 100644
--- a/packages/bun-plugin-svelte/README.md
+++ b/packages/bun-plugin-svelte/README.md
@@ -84,3 +84,13 @@ Bun.build({
 
 `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`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8-beta/#the---erasablesyntaxonly-option)
diff --git a/packages/bun-plugin-svelte/package.json b/packages/bun-plugin-svelte/package.json
index a277d00eb5..90cbccfd53 100644
--- a/packages/bun-plugin-svelte/package.json
+++ b/packages/bun-plugin-svelte/package.json
@@ -1,6 +1,14 @@
 {
   "name": "bun-plugin-svelte",
   "version": "0.0.1",
+  "description": "Official Svelte plugin for Bun",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oven-sh/bun",
+    "directory": "packages/bun-plugin-svelte"
+  },
+  "homepage": "https://bun.sh",
+  "license": "MIT",
   "type": "module",
   "module": "src/index.ts",
   "index": "src/index.ts",
@@ -17,7 +25,6 @@
     "svelte": "^5.20.4"
   },
   "peerDependencies": {
-    "typescript": "^5",
     "svelte": "^5"
   },
   "files": [
diff --git a/packages/bun-plugin-svelte/src/index.ts b/packages/bun-plugin-svelte/src/index.ts
index 1c2ca3d11f..c4be99e0b5 100644
--- a/packages/bun-plugin-svelte/src/index.ts
+++ b/packages/bun-plugin-svelte/src/index.ts
@@ -1,7 +1,13 @@
 import type { BunPlugin, BuildConfig, OnLoadResult } from "bun";
 import { basename } from "node:path";
 import { compile, compileModule } from "svelte/compiler";
-import { getBaseCompileOptions, validateOptions, type SvelteOptions, hash } from "./options";
+import {
+  getBaseCompileOptions,
+  validateOptions,
+  type SvelteOptions,
+  hash,
+  getBaseModuleCompileOptions,
+} from "./options";
 
 const kEmptyObject = Object.create(null);
 const virtualNamespace = "bun-svelte";
@@ -25,36 +31,36 @@ function SveltePlugin(options: SvelteOptions = kEmptyObject as SvelteOptions): B
     setup(builder) {
       const { config = kEmptyObject as Partial<BuildConfig> } = builder;
       const baseCompileOptions = getBaseCompileOptions(options ?? (kEmptyObject as Partial<SvelteOptions>), config);
+      const baseModuleCompileOptions = getBaseModuleCompileOptions(
+        options ?? (kEmptyObject as Partial<SvelteOptions>),
+        config,
+      );
+
+      const ts = new Bun.Transpiler({
+        loader: "ts",
+        target: config.target,
+      });
 
       builder
-        .onLoad({ filter: /\.svelte(?:\.[tj]s)?$/ }, async args => {
+        .onLoad({ filter: /\.svelte$/ }, async function onLoadSvelte(args) {
           const { path } = args;
 
-          var isModule = false;
-
-          switch (path.substring(path.length - 2)) {
-            case "js":
-            case "ts":
-              isModule = true;
-              break;
-          }
-
           const sourceText = await Bun.file(path).text();
 
           const side =
             args && "side" in args // "side" only passed when run from dev server
               ? (args as { side: "client" | "server" }).side
               : "server";
-          const hmr = Boolean((args as { hmr?: boolean })["hmr"] ?? process.env.NODE_ENV !== "production");
           const generate = baseCompileOptions.generate ?? side;
 
-          const compileFn = isModule ? compileModule : compile;
-          const result = compileFn(sourceText, {
+          const hmr = Boolean((args as { hmr?: boolean })["hmr"] ?? process.env.NODE_ENV !== "production");
+          const result = compile(sourceText, {
             ...baseCompileOptions,
             generate,
             filename: args.path,
             hmr,
           });
+
           var { js, css } = result;
           if (css?.code && generate != "server") {
             const uid = `${basename(path)}-${hash(path)}-style`.replaceAll(`"`, `'`);
@@ -65,11 +71,37 @@ function SveltePlugin(options: SvelteOptions = kEmptyObject as SvelteOptions): B
 
           return {
             contents: result.js.code,
-            loader: "js",
+            loader: "ts",
           } satisfies OnLoadResult;
           // TODO: allow plugins to return multiple results.
           // TODO: support layered sourcemaps
         })
+        .onLoad({ filter: /\.svelte.[tj]s$/ }, async function onLoadSvelteModule(args) {
+          const { path } = args;
+
+          const side =
+            args && "side" in args // "side" only passed when run from dev server
+              ? (args as { side: "client" | "server" }).side
+              : "server";
+          const generate = baseModuleCompileOptions.generate ?? side;
+
+          var sourceText = await Bun.file(path).text();
+          if (path.endsWith(".ts")) {
+            sourceText = await ts.transform(sourceText);
+          }
+          const result = compileModule(sourceText, {
+            ...baseModuleCompileOptions,
+            generate,
+            filename: args.path,
+          });
+
+          // NOTE: we assume js/ts modules won't have CSS blocks in them, so no
+          // virtual modules get created.
+          return {
+            contents: result.js.code,
+            loader: "js",
+          };
+        })
         .onResolve({ filter: /^bun-svelte:/ }, args => {
           return {
             path: args.path,
diff --git a/packages/bun-plugin-svelte/src/options.ts b/packages/bun-plugin-svelte/src/options.ts
index e7688a90f8..80aa6c8933 100644
--- a/packages/bun-plugin-svelte/src/options.ts
+++ b/packages/bun-plugin-svelte/src/options.ts
@@ -1,6 +1,6 @@
 import { strict as assert } from "node:assert";
-import type { BuildConfig } from "bun";
-import type { CompileOptions } from "svelte/compiler";
+import { type BuildConfig } from "bun";
+import type { CompileOptions, ModuleCompileOptions } from "svelte/compiler";
 
 export interface SvelteOptions {
   /**
@@ -44,8 +44,8 @@ export function validateOptions(options: unknown): asserts options is SvelteOpti
  * @internal
  */
 export function getBaseCompileOptions(pluginOptions: SvelteOptions, config: Partial<BuildConfig>): CompileOptions {
-  let { forceSide, development = false } = pluginOptions;
-  const { minify = false, target } = config;
+  let { development = false } = pluginOptions;
+  const { minify = false } = config;
 
   const shouldMinify = Boolean(minify);
   const {
@@ -60,6 +60,38 @@ export function getBaseCompileOptions(pluginOptions: SvelteOptions, config: Part
         identifiers: shouldMinify,
       };
 
+  const generate = generateSide(pluginOptions, config);
+
+  return {
+    css: "external",
+    generate,
+    preserveWhitespace: !minifyWhitespace,
+    preserveComments: !shouldMinify,
+    dev: development,
+    cssHash({ css }) {
+      // same prime number seed used by svelte/compiler.
+      // TODO: ensure this provides enough entropy
+      return `svelte-${hash(css)}`;
+    },
+  };
+}
+
+export function getBaseModuleCompileOptions(
+  pluginOptions: SvelteOptions,
+  config: Partial<BuildConfig>,
+): ModuleCompileOptions {
+  const { development = false } = pluginOptions;
+  const generate = generateSide(pluginOptions, config);
+  return {
+    dev: development,
+    generate,
+  };
+}
+
+function generateSide(pluginOptions: SvelteOptions, config: Partial<BuildConfig>) {
+  let { forceSide } = pluginOptions;
+  const { target } = config;
+
   if (forceSide == null && typeof target === "string") {
     switch (target) {
       case "browser":
@@ -73,19 +105,7 @@ export function getBaseCompileOptions(pluginOptions: SvelteOptions, config: Part
       // warn? throw?
     }
   }
-
-  return {
-    css: "external",
-    generate: forceSide,
-    preserveWhitespace: !minifyWhitespace,
-    preserveComments: !shouldMinify,
-    dev: development,
-    cssHash({ css }) {
-      // same prime number seed used by svelte/compiler.
-      // TODO: ensure this provides enough entropy
-      return `svelte-${hash(css)}`;
-    },
-  };
+  return forceSide;
 }
 
 export const hash = (content: string): string => Bun.hash(content, 5381).toString(36);
diff --git a/packages/bun-plugin-svelte/test/fixtures/todo-cjs.svelte.ts b/packages/bun-plugin-svelte/test/fixtures/todo-cjs.svelte.ts
new file mode 100644
index 0000000000..7a5bd44977
--- /dev/null
+++ b/packages/bun-plugin-svelte/test/fixtures/todo-cjs.svelte.ts
@@ -0,0 +1,15 @@
+class Todo {
+  title: string | undefined = $state();
+  done: boolean = $state(false);
+  createdAt: Date = $state(new Date());
+
+  constructor(title: string) {
+    this.title = title;
+  }
+
+  public toggle(): void {
+    this.done = !this.done;
+  }
+}
+
+module.exports = Todo;
diff --git a/packages/bun-plugin-svelte/test/fixtures/todo.svelte.ts b/packages/bun-plugin-svelte/test/fixtures/todo.svelte.ts
new file mode 100644
index 0000000000..423a625c93
--- /dev/null
+++ b/packages/bun-plugin-svelte/test/fixtures/todo.svelte.ts
@@ -0,0 +1,13 @@
+export class Todo {
+  title: string | undefined = $state();
+  done: boolean = $state(false);
+  createdAt: Date = $state(new Date());
+
+  constructor(title: string) {
+    this.title = title;
+  }
+
+  public toggle(): void {
+    this.done = !this.done;
+  }
+}
diff --git a/packages/bun-plugin-svelte/test/fixtures/with-cjs.svelte b/packages/bun-plugin-svelte/test/fixtures/with-cjs.svelte
new file mode 100644
index 0000000000..7036d98acc
--- /dev/null
+++ b/packages/bun-plugin-svelte/test/fixtures/with-cjs.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  const Todo = require("./todo-cjs.svelte.ts");
+
+  let name = "World";
+  let todo: Todo = $state(new Todo("Hello World!"));
+</script>
+
+<main class="app">
+  <h1>Hello {todo.title}!</h1>
+  <!-- clicking calls toggle -->
+  <input type="checkbox" bind:checked={todo.done} />
+  <button onclick={todo.toggle}>Toggle</button>
+</main>
+
+<style>
+  h1 {
+    color: #ff3e00;
+    text-align: center;
+    font-size: 2em;
+    font-weight: 100;
+  }
+  .app {
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/bun-plugin-svelte/test/fixtures/with-modules.svelte b/packages/bun-plugin-svelte/test/fixtures/with-modules.svelte
new file mode 100644
index 0000000000..39421203ef
--- /dev/null
+++ b/packages/bun-plugin-svelte/test/fixtures/with-modules.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Todo } from "./todo.svelte";
+
+  let name = "World";
+  let todo: Todo = $state(new Todo("Hello World!"));
+</script>
+
+<main class="app">
+  <h1>Hello {todo.title}!</h1>
+  <!-- clicking calls toggle -->
+  <input type="checkbox" bind:checked={todo.done} />
+  <button onclick={todo.toggle}>Toggle</button>
+</main>
+
+<style>
+  h1 {
+    color: #ff3e00;
+    text-align: center;
+    font-size: 2em;
+    font-weight: 100;
+  }
+  .app {
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/bun-plugin-svelte/test/index.test.ts b/packages/bun-plugin-svelte/test/index.test.ts
index 63e1bddcfd..48c97a7311 100644
--- a/packages/bun-plugin-svelte/test/index.test.ts
+++ b/packages/bun-plugin-svelte/test/index.test.ts
@@ -4,6 +4,7 @@ import fs from "node:fs";
 import os from "node:os";
 import { render } from "svelte/server";
 import { SveltePlugin } from "../src";
+import type { BuildOutput } from "bun";
 
 const fixturePath = (...segs: string[]) => path.join(import.meta.dirname, "fixtures", ...segs);
 
@@ -32,6 +33,46 @@ it("hello world component", async () => {
   expect(res.success).toBeTrue();
 });
 
+describe("when importing `.svelte.ts` files with ESM", () => {
+  let res: BuildOutput;
+
+  beforeAll(async () => {
+    res = await Bun.build({
+      entrypoints: [fixturePath("with-modules.svelte")],
+      outdir,
+      plugins: [SveltePlugin()],
+    });
+  });
+
+  it("builds successfully", () => {
+    expect(res.success).toBeTrue();
+  });
+});
+
+describe("when importing `.svelte.ts` files with CJS", () => {
+  let res: BuildOutput;
+
+  beforeAll(async () => {
+    res = await Bun.build({
+      entrypoints: [fixturePath("with-cjs.svelte")],
+      outdir,
+      plugins: [SveltePlugin()],
+    });
+  });
+
+  it("builds successfully", () => {
+    expect(res.success).toBeTrue();
+  });
+
+  it("does not double-wrap the module with function(module, exports, __filename, __dirname)", async () => {
+    const ts = res.outputs.find(output => output.loader === "ts");
+    expect(ts).toBeDefined();
+    const code = await ts!.text();
+    expect(code).toContain("require_todo_cjs_svelte");
+    expect(code).toContain("var require_todo_cjs_svelte = __commonJS((exports, module) => {\n");
+  });
+});
+
 describe("Bun.build", () => {
   it.each(["node", "bun"] as const)('Generates server-side code when targeting "node" or "bun"', async target => {
     const res = await Bun.build({