Skip to content

Commit

Permalink
Initial Svelte 5 compatibility (#230)
Browse files Browse the repository at this point in the history
A patch version bump since it won't break existing projects, and will allow early users to test with Svelte 5
  • Loading branch information
EMH333 authored May 19, 2024
1 parent ec1b29b commit b13d4a3
Show file tree
Hide file tree
Showing 13 changed files with 90 additions and 11 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions test/errors.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions test/fixtures/svelte5/entry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { mount } from "svelte";
import Test from "./svelte5.svelte";

const test = mount(Test, { target: document.body });
14 changes: 14 additions & 0 deletions test/fixtures/svelte5/svelte5.svelte
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 15 additions & 1 deletion test/simpleTest.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
33 changes: 33 additions & 0 deletions test/svelte5.mjs
Original file line number Diff line number Diff line change
@@ -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();
6 changes: 6 additions & 0 deletions test/versionTests/entry5.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { mount } from "svelte";
import Test from "./index.svelte";

mount(Test, {
target: document.body,
});
4 changes: 2 additions & 2 deletions test/versionTests/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions test/versionTests/versionTests.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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[@]}"
Expand Down
2 changes: 1 addition & 1 deletion version.txt
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0.8.0
0.8.1

0 comments on commit b13d4a3

Please sign in to comment.