Update compiler, tests and examples to use Svelte 5

dist/index.d.ts

@@ -1,5 +1,5 @@
-import type { CompileOptions, Warning } from "svelte/types/compiler/interfaces";
-import type { PreprocessorGroup } from "svelte/types/compiler/preprocess";
+/// <reference types="svelte" />
+import type { CompileOptions, Warning, PreprocessorGroup } from "svelte/compiler";
 import type { Plugin } from "esbuild";
 interface esbuildSvelteOptions {
     /**

example-js/entry.js

@@ -1,5 +1,6 @@
+import { mount } from "svelte";
 import Test from "./index.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });

example-js/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "esbuild": "^0.20.1",
     "esbuild-svelte": "^0.8.0",
-    "svelte": "^4.2.11"
+    "svelte": "^5.0.0-next.136"
   },
   "private": true
 }

example-ts/entry.ts

@@ -1,5 +1,9 @@
 import Test from "./index.svelte";
 import { haha } from "./fun";
 
-new Test({ target: document.body });
+import { mount } from "svelte";
+
+mount(Test, {
+    target: document.body,
+});
 console.log(haha());

example-ts/package.json

@@ -9,7 +9,7 @@
     "@tsconfig/svelte": "^5.0.2",
     "esbuild": "^0.20.1",
     "esbuild-svelte": "^0.8.0",
-    "svelte": "^4.2.11",
+    "svelte": "^5.0.0-next.136",
     "svelte-check": "^3.6.4",
     "svelte-preprocess": "^5.1.3",
     "typescript": "^5.3.3"

index.ts

@@ -5,8 +5,7 @@ import { promisify } from "util";
 import { readFile, statSync } from "fs";
 import { originalPositionFor, TraceMap } from "@jridgewell/trace-mapping";
 
-import type { CompileOptions, Warning } from "svelte/types/compiler/interfaces";
-import type { PreprocessorGroup } from "svelte/types/compiler/preprocess";
+import type { CompileOptions, Warning, PreprocessorGroup } from "svelte/compiler";
 import type { OnLoadResult, Plugin, PluginBuild, Location, PartialMessage } from "esbuild";
 
 interface esbuildSvelteOptions {
@@ -202,7 +201,7 @@ export default function sveltePlugin(options?: esbuildSvelteOptions): Plugin {
                 dependencyModifcationTimes.set(args.path, statSync(args.path).mtime); // add the target file
 
                 let compilerOptions = {
-                    css: (svelteVersion < 3 ? false : "external") as boolean | "external",
+                    css: (svelteVersion < 3 ? undefined : "external") as CompileOptions["css"],
                     ...options?.compilerOptions,
                 };
 
@@ -274,8 +273,8 @@ export default function sveltePlugin(options?: esbuildSvelteOptions): Plugin {
 
                     //if svelte emits css seperately, then store it in a map and import it from the js
                     if (
-                        (compilerOptions.css === false || compilerOptions.css === "external") &&
-                        css.code
+                        (compilerOptions.css === undefined || compilerOptions.css === "external") &&
+                        css?.code
                     ) {
                         let cssPath = args.path
                             .replace(".svelte", ".esbuild-svelte-fake-css") //TODO append instead of replace to support different svelte filters

package.json

@@ -33,15 +33,15 @@
   "license": "MIT",
   "peerDependencies": {
     "esbuild": ">=0.9.6",
-    "svelte": ">=3.43.0 <5"
+    "svelte": ">=3.43.0 <6"
   },
   "devDependencies": {
     "@types/node": "^16.18.37",
     "esbuild": "^0.20.0",
     "prettier": "^3.2.5",
     "rewrite-imports": "^3.0.0",
     "sass": "^1.71.0",
-    "svelte": "^4.2.11",
+    "svelte": "^5.0.0-next.136",
     "svelte-preprocess-esbuild": "^3.0.0",
     "svelte-preprocess-sass": "^2.0.1",
     "typescript": "^5.3.3",

test/errors.mjs

@@ -33,9 +33,9 @@ test("Errors (with preprocessors) are in the right spot", async () => {
         );
         assert.equal(error.location.line, 12, "Should have the right line");
         assert.equal(error.location.column, 31, "Should have the right column");
-        assert.equal(
+        assert.match(
             error.text,
-            "Expected value for the attribute",
+            /Expected (value for the attribute|attribute value)/,
             "Should have the right error message",
         );
         return;

test/fixtures/errors/entry.js

@@ -1,5 +1,6 @@
+import { mount } from "svelte";
 import Test from "./error.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });

test/fixtures/non-ascii/entry.js

@@ -1,5 +1,6 @@
+import { mount } from "svelte";
 import Test from "./non-ascii.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });

test/fixtures/preprocessing-sourcemaps/pp-sourcemaps.js

@@ -1,5 +1,6 @@
+import { mount } from "svelte";
 import Test from "./pp-sourcemaps.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });

test/fixtures/resolveDirectory/entry.js

@@ -1,5 +1,6 @@
+import { mount } from "svelte";
 import Test from "./resDir.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });

test/fixtures/svelte5/entry.js

@@ -1,4 +1,4 @@
-import { mount } from 'svelte';
-import Test from './svelte5.svelte';
+import { mount } from "svelte";
+import Test from "./svelte5.svelte";
 
 const test = mount(Test, { target: document.body });

test/fixtures/warnings/entry.js

@@ -1,5 +1,6 @@
-import Test from "./missing-declaration.svelte";
+import { mount } from "svelte";
+import Test from "./warnings.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });

test/fixtures/warnings/warnings.svelte

@@ -0,0 +1,11 @@
+<div>
+  <!-- This will generate a warning about missing alt -->
+  <img src="foo.jpg" />
+</div>
+
+<!-- This will generate a warning about an unused CSS selector -->
+<style>
+  .special-image {
+    height: 200px;
+  }
+</style>

test/fixtures/watch-preprocessing/entry.js

@@ -1,5 +1,6 @@
+import { mount } from "svelte";
 import Test from "./external-styles.svelte";
 
-new Test({
+mount(Test, {
     target: document.body,
 });