diff --git a/dist/index.d.ts b/dist/index.d.ts index 908b76e..fc03678 100644 --- a/dist/index.d.ts +++ b/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"; +/// +import type { CompileOptions, Warning, PreprocessorGroup } from "svelte/compiler"; import type { Plugin } from "esbuild"; interface esbuildSvelteOptions { /** diff --git a/example-js/entry.js b/example-js/entry.js index 51162ec..ad07bf6 100644 --- a/example-js/entry.js +++ b/example-js/entry.js @@ -1,5 +1,6 @@ +import { mount } from "svelte"; import Test from "./index.svelte"; -new Test({ +mount(Test, { target: document.body, }); diff --git a/example-js/package.json b/example-js/package.json index f9d3f70..2c4296f 100644 --- a/example-js/package.json +++ b/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 } diff --git a/example-ts/entry.ts b/example-ts/entry.ts index 2c12590..e9340af 100644 --- a/example-ts/entry.ts +++ b/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()); diff --git a/example-ts/package.json b/example-ts/package.json index 686686f..db5b3da 100644 --- a/example-ts/package.json +++ b/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" diff --git a/index.ts b/index.ts index 489e933..036fed8 100644 --- a/index.ts +++ b/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 diff --git a/package-lock.json b/package-lock.json index 80ec195..bde335a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "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", @@ -28,7 +28,7 @@ }, "peerDependencies": { "esbuild": ">=0.9.6", - "svelte": ">=3.43.0 <5" + "svelte": ">=3.43.0 <6" } }, "node_modules/@ampproject/remapping": { @@ -481,6 +481,15 @@ "node": ">=0.4.0" } }, + "node_modules/acorn-typescript": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz", + "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==", + "dev": true, + "peerDependencies": { + "acorn": ">=8.9.0" + } + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -557,32 +566,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/code-red": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", - "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15", - "@types/estree": "^1.0.1", - "acorn": "^8.10.0", - "estree-walker": "^3.0.3", - "periscopic": "^3.1.0" - } - }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -639,13 +622,20 @@ "@esbuild/win32-x64": "0.20.1" } }, - "node_modules/estree-walker": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", - "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "node_modules/esm-env": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz", + "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==", + "dev": true + }, + "node_modules/esrap": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz", + "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==", "dev": true, "dependencies": { - "@types/estree": "^1.0.0" + "@jridgewell/sourcemap-codec": "^1.4.15", + "@types/estree": "^1.0.1" } }, "node_modules/fill-range": { @@ -770,12 +760,6 @@ "node": ">=12" } }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true - }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -794,17 +778,6 @@ "node": ">=0.10.0" } }, - "node_modules/periscopic": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", - "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^3.0.0", - "is-reference": "^3.0.0" - } - }, "node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", @@ -892,28 +865,27 @@ } }, "node_modules/svelte": { - "version": "4.2.11", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz", - "integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==", + "version": "5.0.0-next.136", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.136.tgz", + "integrity": "sha512-M3jHAIfWZ7K+hjZdvu2p53ZtWE843yubxJfjxeQw9XiwMYG5z6quCA5u8r23GrxAp20JBl36B6ucbZvLUf0Z/g==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.1", "@jridgewell/sourcemap-codec": "^1.4.15", - "@jridgewell/trace-mapping": "^0.3.18", - "@types/estree": "^1.0.1", - "acorn": "^8.9.0", + "@types/estree": "^1.0.5", + "acorn": "^8.11.3", + "acorn-typescript": "^1.4.13", "aria-query": "^5.3.0", "axobject-query": "^4.0.0", - "code-red": "^1.0.3", - "css-tree": "^2.3.1", - "estree-walker": "^3.0.3", - "is-reference": "^3.0.1", + "esm-env": "^1.0.0", + "esrap": "^1.2.2", + "is-reference": "^3.0.2", "locate-character": "^3.0.0", - "magic-string": "^0.30.4", - "periscopic": "^3.1.0" + "magic-string": "^0.30.5", + "zimmerframe": "^1.1.2" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/svelte-preprocess-esbuild": { @@ -989,6 +961,12 @@ "engines": { "node": ">=8" } + }, + "node_modules/zimmerframe": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", + "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==", + "dev": true } } } diff --git a/package.json b/package.json index a307dfc..1ef3451 100644 --- a/package.json +++ b/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", @@ -41,7 +41,7 @@ "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", diff --git a/test/errors.mjs b/test/errors.mjs index f5f7368..b278d98 100644 --- a/test/errors.mjs +++ b/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; diff --git a/test/fixtures/errors/entry.js b/test/fixtures/errors/entry.js index 7032e9e..970664a 100644 --- a/test/fixtures/errors/entry.js +++ b/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, }); diff --git a/test/fixtures/non-ascii/entry.js b/test/fixtures/non-ascii/entry.js index b5ac1bc..49c693c 100644 --- a/test/fixtures/non-ascii/entry.js +++ b/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, }); diff --git a/test/fixtures/preprocessing-sourcemaps/pp-sourcemaps.js b/test/fixtures/preprocessing-sourcemaps/pp-sourcemaps.js index 8fea077..b656cda 100644 --- a/test/fixtures/preprocessing-sourcemaps/pp-sourcemaps.js +++ b/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, }); diff --git a/test/fixtures/resolveDirectory/entry.js b/test/fixtures/resolveDirectory/entry.js index 323269c..2114ade 100644 --- a/test/fixtures/resolveDirectory/entry.js +++ b/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, }); diff --git a/test/fixtures/svelte5/entry.js b/test/fixtures/svelte5/entry.js index 42ba241..31aefa6 100644 --- a/test/fixtures/svelte5/entry.js +++ b/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 }); diff --git a/test/fixtures/warnings/entry.js b/test/fixtures/warnings/entry.js index ec95754..f22ab3a 100644 --- a/test/fixtures/warnings/entry.js +++ b/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, }); diff --git a/test/fixtures/warnings/missing-declaration.svelte b/test/fixtures/warnings/missing-declaration.svelte deleted file mode 100644 index b3a3bac..0000000 --- a/test/fixtures/warnings/missing-declaration.svelte +++ /dev/null @@ -1,11 +0,0 @@ -
- - {#if MY_GLOBAL} -

MY_GLOBAL is truthy

- {:else} -

MY_GLOBAL is falsy

- {/if} - - - -
diff --git a/test/fixtures/warnings/warnings.svelte b/test/fixtures/warnings/warnings.svelte new file mode 100644 index 0000000..5ba37a7 --- /dev/null +++ b/test/fixtures/warnings/warnings.svelte @@ -0,0 +1,11 @@ +
+ + +
+ + + diff --git a/test/fixtures/watch-preprocessing/entry.js b/test/fixtures/watch-preprocessing/entry.js index bbe8c80..b1831a6 100644 --- a/test/fixtures/watch-preprocessing/entry.js +++ b/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, }); diff --git a/test/simpleTest.mjs b/test/simpleTest.mjs index 69f4401..801f8f4 100644 --- a/test/simpleTest.mjs +++ b/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, diff --git a/test/svelte5.mjs b/test/svelte5.mjs index 3a393dd..578b8ea 100644 --- a/test/svelte5.mjs +++ b/test/svelte5.mjs @@ -3,8 +3,14 @@ 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, diff --git a/test/versionTests/entry.js b/test/versionTests/entry.js index 51162ec..ad07bf6 100644 --- a/test/versionTests/entry.js +++ b/test/versionTests/entry.js @@ -1,5 +1,6 @@ +import { mount } from "svelte"; import Test from "./index.svelte"; -new Test({ +mount(Test, { target: document.body, }); diff --git a/test/versionTests/versionTests.sh b/test/versionTests/versionTests.sh index 0e812d6..f0fb465 100755 --- a/test/versionTests/versionTests.sh +++ b/test/versionTests/versionTests.sh @@ -12,7 +12,7 @@ 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") +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[@]}" diff --git a/test/warnings.mjs b/test/warnings.mjs index e710401..9bf5b2f 100644 --- a/test/warnings.mjs +++ b/test/warnings.mjs @@ -31,10 +31,10 @@ test("Can filter out warnings", async () => { preprocess: typescript(), compilerOptions: { dev: true }, filterWarnings: (warning) => { - // Ignore warning about the missing MY_GLOBAL. + // Ignore warning about the unused CSS. if ( - warning.code === "missing-declaration" && - warning.message.startsWith("'MY_GLOBAL' is not defined") + warning.code === "css_unused_selector" && + warning.message.startsWith('Unused CSS selector ".special-image"') ) { return false; } @@ -51,7 +51,7 @@ test("Can filter out warnings", async () => { assert.equal(resultsWithFilter.warnings.length, 1, "Should have one warning"); assert.equal( resultsWithFilter.warnings[0].text, - "A11y: element should have an alt attribute", + "`` element should have an alt attribute", "The not filtered warning is still there", ); assert.equal(resultsWithFilter.errors.length, 0, "Should not have errors"); @@ -75,15 +75,15 @@ test("Warnings are in the right spot", async () => { assert.equal(results.warnings.length, 2, "Should have two warnings"); assert.equal(results.errors.length, 0, "Should not have errors"); - assert.equal(results.warnings[0].location.column, 7, "Column is correct"); + assert.equal(results.warnings[0].location.column, 2, "Column is correct"); assert.equal(results.warnings[0].location.line, 3, "Line is correct"); - assert.equal(results.warnings[0].location.length, 9, "Length is correct"); + assert.equal(results.warnings[0].location.length, 21, "Length is correct"); assert.equal( results.warnings[0].location.lineText, - " {#if MY_GLOBAL}", + ' ', "Line text is correct", ); - assert.match(results.warnings[0].text, /'MY_GLOBAL' is not defined/); + assert.match(results.warnings[0].text, /`` element should have an alt attribute/); }); test("Preprocessor warnings are as expected", async () => {