sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
817 stars 99 forks source link

breaking: drop support for svelte4, remove unused code and update types #892

Closed dominikg closed 1 month ago

dominikg commented 2 months ago

vite-plugin-svelte v3 supports both svelte4 and svelte5.

Due to breaking changes in the svelte compiler, around hmr and for how we add svelte-inspector, it is not feasible to support both svelte majors from the same v-p-s major.

Users on svelte4 must continue to use vite-plugin-svelte@3

This PR makes the grunt work of changes to remove svelte4 related code. Expect some tests to fail intially

dominikg commented 2 months ago

note to self: remove ts transform from vitePreprocess

dominikg commented 2 months ago

note to self: check support for lightningcss and css nesting syntax

Conduitry commented 2 months ago

The linting errors about $foo is an illegal variable name appear to be a bug in the ESLint plugin.

As I've mentioned here, it appears these can be worked around by adding additional references to the stores, like so:

diff --git a/packages/playground/kit-demo-app/src/routes/Header.svelte b/packages/playground/kit-demo-app/src/routes/Header.svelte
index 368b721e..454e1e23 100644
--- a/packages/playground/kit-demo-app/src/routes/Header.svelte
+++ b/packages/playground/kit-demo-app/src/routes/Header.svelte
@@ -1,5 +1,6 @@
 <script>
    import { page } from '$app/stores';
+   page;
    import logo from '$lib/images/svelte-logo.svg';
    import github from '$lib/images/github.svg';
 </script>
diff --git a/packages/playground/kit-demo-app/src/routes/sverdle/+page.svelte b/packages/playground/kit-demo-app/src/routes/sverdle/+page.svelte
index 2784431d..ce7bb67d 100644
--- a/packages/playground/kit-demo-app/src/routes/sverdle/+page.svelte
+++ b/packages/playground/kit-demo-app/src/routes/sverdle/+page.svelte
@@ -3,6 +3,7 @@
    import { enhance } from '$app/forms';

    import { reduced_motion } from './reduced-motion';
+   reduced_motion;

    /** @type {import('./$types').PageData} */
    export let data;
diff --git a/packages/playground/optimizedeps-include/src/App.svelte b/packages/playground/optimizedeps-include/src/App.svelte
index ccbba8da..5ce4e7de 100644
--- a/packages/playground/optimizedeps-include/src/App.svelte
+++ b/packages/playground/optimizedeps-include/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
    import { Route, router } from 'tinro';
+   router;
 </script>

 <nav>

This does, then, leave me with a bunch of other type errors still present locally.

I don't know whether it makes sense to apply a workaround like the above for now. I don't know what the expected timeline is on dropping Svelte 4 support here and on fixing the eslint-plugin-svelte bug.

dominikg commented 2 months ago

as for the timeline, right before/around svelte5 final release, the eslint bug needs fixing too, users would rightfully be royally annoyed by this i