Initial Svelte 5 compatibility (#230)

A patch version bump since it won't break existing projects, and will allow early users to test with Svelte 5

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.8.1
+
+- Update Svelte peer dependency version lock to include Svelte 5
+
+  This should have no impact on Svelte 3 or 4 users, but will allow folks to start trying out Svelte 5 if they so please. Any errors or issues should be reported as bugs in order to resolve them before Svelte 5 is offically released.
+
+  **Plugin versions `v0.8.x` will be the last to support Svelte 3 and Svelte 4 below `v4.2.1`**
+
 ## 0.8.0 (Breaking)
 
 - **Minorly Breaking** Caching is automatically enabled after two sucessful builds when using the `context` esbuild API

index.ts

@@ -275,7 +275,7 @@ 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
+                        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,7 +33,7 @@
   "license": "MIT",
   "peerDependencies": {
     "esbuild": ">=0.9.6",
-    "svelte": ">=3.43.0 <5"
+    "svelte": ">=3.43.0 <6"
   },
   "devDependencies": {
     "@types/node": "^16.18.37",

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/svelte5/entry.js

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

test/fixtures/svelte5/svelte5.svelte

@@ -0,0 +1,14 @@
+<script>
+	let count = $state(0);
+	let double = $derived(count * 2);
+	$effect(() => {
+		if (count > 10) {
+			alert('Too high!');
+		}
+
+	});
+</script>
+
+<button onclick={() => count++}>
+	{count} / {double}
+</button>

test/simpleTest.mjs

@@ -4,6 +4,7 @@ import { build as _build } from "esbuild";
 import sveltePlugin from "../dist/index.mjs";
 import sveltePluginCJS from "../dist/index.js";
 import commonOptions from "./commonOptions.js";
+import { VERSION } from "svelte/compiler";
 
 test("Without esbuild", async () => {
     let build = {};
@@ -84,8 +85,12 @@ test("More advanced build", async () => {
     assert.equal(results.outputFiles.length, 2, "Non-expected number of output files");
 });
 
-// remove for svelte v5
 test("CSS external boolean", async () => {
+    // TODO remove for svelte 5
+    if (VERSION.startsWith("5")) {
+        return;
+    }
+
     //Note this fails on svelte v4 since booleans are deprecated and it has seemingly been broken
     //I'm not sure if this is a bug or not, but I'm going to choose to ignore this failure for now,
     //since there is an easy workaround (use a string instead of a boolean)
@@ -119,6 +124,10 @@ test("CSS external string", async () => {
 
 // remove for svelte v5
 test("CSS injected boolean", async () => {
+    // TODO remove for svelte 5
+    if (VERSION.startsWith("5")) {
+        return;
+    }
     //TODO this should fail with a warning with svelte v4
     const results = await _build({
         ...commonOptions,
@@ -149,6 +158,11 @@ test("CSS injected string", async () => {
 });
 
 test("CSS none", async () => {
+    // TODO remove for svelte 5
+    if (VERSION.startsWith("5")) {
+        return;
+    }
+
     //more advanced
     const results = await _build({
         ...commonOptions,

test/svelte5.mjs

@@ -0,0 +1,33 @@
+import { test } from "uvu";
+import * as assert from "uvu/assert";
+import { build } from "esbuild";
+import sveltePlugin from "../dist/index.mjs";
+import commonOptions from "./commonOptions.js";
+import { VERSION } from "svelte/compiler";
+
+test("Simple Svelte v5 build", async () => {
+    // only run for svelte 5
+    if (!VERSION.startsWith("5")) {
+        return;
+    }
+
+    //Try a simple build with v5 features
+    const results = await build({
+        ...commonOptions,
+        entryPoints: ["./test/fixtures/svelte5/entry.js"],
+        outdir: "./example-js/dist",
+        sourcemap: true,
+        plugins: [
+            sveltePlugin({
+                compilerOptions: { dev: true },
+            }),
+        ],
+        logLevel: "silent",
+    });
+
+    assert.equal(results.errors.length, 0, "Non-zero number of errors");
+    assert.equal(results.warnings.length, 0, "Non-zero number of warnings");
+    assert.equal(results.outputFiles.length, 2, "Non-expected number of output files");
+});
+
+test.run();

test/versionTests/entry5.js

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

test/versionTests/test.js

@@ -13,7 +13,7 @@ if (!fs.existsSync("./dist/")) {
 //build the application
 esbuild
     .build({
-        entryPoints: ["./entry.js"],
+        entryPoints: [Number(svelteVersion.at(0)) >= 5 ? "./entry5.js" : "./entry.js"],
         mainFields: ["svelte", "browser", "module", "main"],
         conditions: ["svelte", "browser"],
         target: "es2016",
@@ -23,7 +23,7 @@ esbuild
         minify: false, //so the resulting code is easier to understand
         bundle: true,
         splitting: true,
-        sourcemap: "inline",
+        sourcemap: "external",
         plugins: [sveltePlugin()],
     })
     .then((results) => {

test/versionTests/versionTests.sh

@@ -11,8 +11,8 @@ cp ../../dist/index.js .
 npm init -y || exit
 
 # array of versions
-ESBUILD_VERSIONS=("0.9.6" "0.16.17" "0.18.10" "0.19.2")
-SVELTE_VERSIONS=("3.43.0" "3.59.2" "4.0.0")
+ESBUILD_VERSIONS=("0.9.6" "0.16.17" "0.18.10" "0.19.2" "0.21.3")
+SVELTE_VERSIONS=("3.43.0" "3.59.2" "4.0.0" "5.0.0-next.127")
 
 # loop through versions
 for ESBUILD_VERSION in "${ESBUILD_VERSIONS[@]}"

version.txt

@@ -1 +1 @@
-0.8.0
+0.8.1