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

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

* fix: lint errors

* fix: add workaround for lint issue

* fix: lint and some type errors

* fix: use new hmr option instead of hot

* fix: update types again

* fix or work around type issues, remove code that is no longer needed for ts transform error handling

* breaking: disable vitePreprocess script by default

* refactor: turn svelte-inspector into optional peer and lazy install with a vite plugin hack

* chore: update svelte and test snapshots

* docs: add changesets

* cleanup tests

* remove svelte-hmr from docs, update optimizeDeps

* remove treatment for svelte/ssr thats no longer needed

* fix: use hydrate instead of mount in vite-ssr-esm test

* fix: patch svelte hmr accept output until it is taken care of by the compiler

* chore: remove more svelte4 refs

* docs: update changeset

* chore: cleanup ci and add node 22

Author: dominikg

.changeset/popular-months-vanish.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': major
+'@sveltejs/vite-plugin-svelte': major
+---
+
+remove support for Svelte 4

.changeset/thin-rats-sniff.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+disable script preprocessing in vitePreprocess() by default because Svelte 5 supports lang=ts out of the box

.changeset/wet-rabbits-wink.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+replaced svelte-hmr with Svelte 5 compiler hmr integration

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
     strategy:
       matrix:
         # pseudo-matrix for convenience, NEVER use more than a single combination
-        node: [18]
+        node: [20]
         os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v4
@@ -76,15 +76,11 @@ jobs:
       matrix:
         node: [20]
         os: [ubuntu-latest, macos-latest, windows-latest]
-        svelte: [4]
         include:
           - node: 18
             os: ubuntu-latest
-            svelte: 4
-    #  disable running tests with svelte5 in ci for now. Enable once they pass
-    #          - node: 20
-    #            os: ubuntu-latest
-    #            svelte: 5
+          - node: 22
+            os: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -103,9 +99,6 @@ jobs:
           cache-dependency-path: '**/pnpm-lock.yaml'
       - name: install
         run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts
-      #      - name: use svelte5
-      #        if: (${{matrix.svelte == 5 }})
-      #        run: pnpm i -Dw svelte@^5.0.0-next.1 && pnpm install
       - name: install playwright chromium
         run: pnpm playwright install chromium
       - name: run tests

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
     strategy:
       matrix:
         # pseudo-matrix for convenience, NEVER use more than a single combination
-        node: [18]
+        node: [20]
         os: [ubuntu-latest]
     steps:
       - name: checkout

docs/config.md

@@ -173,13 +173,10 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt
 
 ### hot
 
-- **Type:** `boolean | SvelteHotOptions` - See [svelte-hmr](https://github.com/sveltejs/svelte-hmr/blob/master/packages/svelte-hmr#options)
+- **Deprecated**: use compileOptions.hmr instead
+- **Type:** `boolean`
 - **Default:** `true` for development, always `false` for production
 
-  Enable or disable Hot Module Replacement ([HMR](https://github.com/sveltejs/svelte-hmr/blob/master/packages/svelte-hmr#whats-hmr-by-the-way)).
-
-  > Do not customize the options unless you know exactly what you are doing.
-
 ### ignorePluginPreprocessors
 
 - **Type:** `boolean | string[]`

docs/faq.md

@@ -2,7 +2,8 @@
 
 ### Why is component state reset on HMR update?
 
-Preservation of local component state after JS updates is disabled to avoid unpredictable and error-prone behavior. You can read more about it [here](https://github.com/sveltejs/svelte-hmr/blob/master/packages/svelte-hmr#preservation-of-local-state).
+Preservation of local component state after JS updates is disabled to avoid unpredictable and error-prone behavior.
+Since svelte-5, hmr is integrated in compileOptions, but the sentiment in the previously used [svelte-hmr docs](https://github.com/sveltejs/svelte-hmr/blob/master/packages/svelte-hmr#preservation-of-local-state) still applies.
 
 Please note that if you only edit the `<style>` node, a separate CSS update can be applied where component state is 100% preserved.
 

package.json

@@ -48,10 +48,10 @@
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "publint": "^0.2.7",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vitest": "^1.5.0"
+    "vite": "^5.2.11",
+    "vitest": "^1.5.3"
   },
   "lint-staged": {
     "*.{js,ts,svelte,html,md,svx}": "eslint --cache --fix",
@@ -66,7 +66,7 @@
   },
   "pnpm": {
     "overrides": {
-      "@sveltejs/kit>@sveltejs/vite-plugin-svelte": "^3.0.0",
+      "@sveltejs/kit>@sveltejs/vite-plugin-svelte": "workspace:^",
       "@sveltejs/vite-plugin-svelte": "workspace:^",
       "@sveltejs/vite-plugin-svelte-inspector": "workspace:^",
       "svelte": "$svelte",

packages/e2e-tests/_test_dependencies/svelte-api-only/package.json

@@ -15,6 +15,6 @@
   },
   "type": "module",
   "dependencies": {
-    "svelte": "^4.2.15"
+    "svelte": "^5.0.0-next.121"
   }
 }

packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte

@@ -4,10 +4,10 @@
 	let localCounter = $state(0);
 </script>
 
-<button on:click={counter.increment}>
+<button onclick={counter.increment}>
 	count is {counter.count}
 </button>
 
-<button on:click={() => localCounter++}>
+<button onclick={() => localCounter++}>
 	local count is {localCounter}
 </button>

packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts

@@ -1,14 +1,13 @@
 import { expect, test } from 'vitest';
-import { isBuild, findAssetFile, page, isSvelte4 } from '~utils';
+import { isBuild, findAssetFile, page } from '~utils';
 
 test('should prefix position: sticky for code in source tree', async () => {
 	let stickyStyle = isBuild
 		? await getStyleFromDist('sticky')
 		: await getStyleFromPage(page, 'sticky');
-	if (!isSvelte4) {
-		// svelte5 doesn't minify rules, do it here to be able to have one expect
-		stickyStyle = stickyStyle.replace(/\s/g, '').replace(/;$/, '');
-	}
+
+	// minify style to have a more stable expect
+	stickyStyle = stickyStyle.replace(/\s/g, '').replace(/;$/, '');
 	expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky');
 });
 

packages/e2e-tests/autoprefixer-browerslist/package.json

@@ -15,7 +15,7 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-load-config": "^5.0.3",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "svelte-preprocess": "^5.1.4",
     "vite": "^5.2.9"
   },

packages/e2e-tests/configfile-custom/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "vite": "^5.2.9"
   },
   "type": "module"

packages/e2e-tests/configfile-esm/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "svelte-preprocess": "^5.1.4",
     "vite": "^5.2.9"
   },

packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts

@@ -1,4 +1,4 @@
-import { browserLogs, getColor, getText, isBuild, isSvelte4 } from '~utils';
+import { browserLogs, getColor, getText, isBuild } from '~utils';
 import { expect } from 'vitest';
 
 test('should not have failed requests', async () => {
@@ -18,18 +18,13 @@ if (!isBuild) {
 	test('should generate sourcemap', async () => {
 		const style = await getText('style[data-vite-dev-id*="App.svelte"]');
 		const lines = style.split('\n').map((l) => l.trim());
-		const css = lines[0];
 		const mapComment = lines[lines.length - 1];
-		if (isSvelte4) {
-			expect(css).toBe(
-				'.foo.s-XsEmFtvddWTw{color:magenta}#test.s-XsEmFtvddWTw{color:red}.s-XsEmFtvddWTw{}'
-			);
-		} else {
-			// TODO svelte 5 returns style multiline and doesn't set the right css hash class
-			// figure out a better way to expect here
-			expect(style).toMatch('color: magenta');
-			expect(style).toMatch('color: red');
-		}
+
+		// TODO svelte 5 returns style multiline and doesn't set the right css hash class
+		// figure out a better way to expect here
+		expect(style).toMatch('color: magenta');
+		expect(style).toMatch('color: red');
+
 		const b64start = '/*# sourceMappingURL=data:application/json;base64,';
 		const b64end = ' */';
 		expect(mapComment.startsWith(b64start));

packages/e2e-tests/css-dev-sourcemap/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "sass": "^1.75.0",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "vite": "^5.2.9"
   }
 }

packages/e2e-tests/css-none/__tests__/css-none.spec.ts

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "vite": "^5.2.9"
   },
   "type": "module"

packages/e2e-tests/css-none/index.html

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "vite": "^5.2.9"
   },
   "type": "module"

packages/e2e-tests/css-none/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "vite": "^5.2.9"
   },
   "type": "module"

packages/e2e-tests/css-none/src/App.svelte

@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
     "node-fetch": "^3.3.2",
-    "svelte": "^4.2.15",
+    "svelte": "^5.0.0-next.121",
     "vite": "^5.2.9"
   },
   "type": "module"