chore: cleanup (#787)

* wip: clean up some things

* feat: add vite-plugin-svelte-module

* wip: add svelte module support to prebundling

* fix: update to lastest changes and remove link

* chore reenable prettier/eslint and fix findings

* fix: remove runes option

* fix: add types

* fix: remove missing svelte5 exports workaround

* refactor: consolidate svelte5 warnings into a single log

* chore: enable running e2e tests with svelte5, update ci setup, add improve svelte5 generated vite config

* fix workflow

* fix: use correct comparison value for load-raw server output in svelte5

.changeset/thin-comics-work.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Add experimental support for svelte5

.eslintrc.cjs

@@ -9,7 +9,11 @@ module.exports = {
 	],
 	globals: {
 		Atomics: 'readonly',
-		SharedArrayBuffer: 'readonly'
+		SharedArrayBuffer: 'readonly',
+		$derived: 'readonly',
+		$effect: 'readonly',
+		$props: 'readonly',
+		$state: 'readonly'
 	},
 	plugins: ['@typescript-eslint', 'html', 'markdown', 'unicorn'],
 	parser: '@typescript-eslint/parser',

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-# build and test on linux, windows, mac with node  14, 16, 18
+# build and test on linux, windows, mac with node  18,20
 name: CI
 
 on:
@@ -76,11 +76,17 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [18]
+        node: [20]
         os: [ubuntu-latest, macos-latest, windows-latest]
+        svelte: [4]
         include:
-          - node: 20
+          - 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
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -99,6 +105,9 @@ 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

packages/e2e-tests/_test_dependencies/svelte-module/index.js

@@ -0,0 +1,2 @@
+export { createCounter } from './src/counter/Counter.svelte.js';
+export { default as Counter } from './src/counter/Counter.svelte';

packages/e2e-tests/_test_dependencies/svelte-module/package.json

@@ -0,0 +1,19 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-svelte-module",
+  "main": "index.js",
+  "svelte": "index.js",
+  "files": [
+    "src",
+    "index.js"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "svelte": "./index.js"
+      }
+    }
+  },
+  "type": "module"
+}

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

@@ -0,0 +1,13 @@
+<script>
+	import { createCounter } from './Counter.svelte.js';
+	const counter = createCounter(0);
+	let localCounter = $state(0);
+</script>
+
+<button on:click={counter.increment}>
+	count is {counter.count}
+</button>
+
+<button on:click={() => localCounter++}>
+	local count is {localCounter}
+</button>

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

@@ -0,0 +1,11 @@
+export function createCounter(n = 0) {
+	let count = $state(n);
+	return {
+		get count() {
+			return count;
+		},
+		increment() {
+			count++;
+		}
+	};
+}

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

@@ -1,10 +1,14 @@
 import { expect, test } from 'vitest';
-import { isBuild, findAssetFile, page } from '~utils';
+import { isBuild, findAssetFile, page, isSvelte4 } from '~utils';
 
 test('should prefix position: sticky for code in source tree', async () => {
-	const stickyStyle = isBuild
+	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(/;$/, '');
+	}
 	expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky');
 });
 

packages/e2e-tests/autoprefixer-browerslist/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

packages/e2e-tests/configfile-custom/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

packages/e2e-tests/configfile-esm/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

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

@@ -1,4 +1,4 @@
-import { browserLogs, getColor, getText, isBuild } from '~utils';
+import { browserLogs, getColor, getText, isBuild, isSvelte4 } from '~utils';
 import { expect } from 'vitest';
 
 test('should not have failed requests', async () => {
@@ -19,10 +19,17 @@ if (!isBuild) {
 		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[1];
-		expect(css).toBe(
-			'.foo.s-XsEmFtvddWTw{color:magenta}#test.s-XsEmFtvddWTw{color:red}.s-XsEmFtvddWTw{}'
-		);
+		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');
+		}
 		const b64start = '/*# sourceMappingURL=data:application/json;base64,';
 		const b64end = ' */';
 		expect(mapComment.startsWith(b64start));

packages/e2e-tests/css-dev-sourcemap/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

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

@@ -1,19 +1,22 @@
-import { browserLogs, findAssetFile, getColor, getText, isBuild } from '~utils';
+import { browserLogs, findAssetFile, getColor, getText, isBuild, isSvelte4 } from '~utils';
+import { describe, test, expect } from 'vitest';
+// svelte5 removed the css: none option
+describe.runIf(isSvelte4)('css-none', async () => {
+	test('should not have failed requests', async () => {
+		browserLogs.forEach((msg) => {
+			expect(msg).not.toMatch('404');
+		});
+	});
 
-test('should not have failed requests', async () => {
-	browserLogs.forEach((msg) => {
-		expect(msg).not.toMatch('404');
+	test('should not apply component css', async () => {
+		expect(await getText('#test')).toBe('not red');
+		expect(await getColor('#test')).not.toBe('red');
 	});
-});
 
-test('should not apply component css', async () => {
-	expect(await getText('#test')).toBe('not red');
-	expect(await getColor('#test')).not.toBe('red');
+	if (isBuild) {
+		test('should not output css', async () => {
+			const css = await findAssetFile(/index.*\.css/);
+			expect(css).toBe(''); // findAssetFile returns empty for not found
+		});
+	}
 });
-
-if (isBuild) {
-	test('should not output css', async () => {
-		const css = await findAssetFile(/index.*\.css/);
-		expect(css).toBe(''); // findAssetFile returns empty for not found
-	});
-}

packages/e2e-tests/css-none/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

packages/e2e-tests/custom-extensions/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

packages/e2e-tests/dynamic-compile-options/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

packages/e2e-tests/env/src/main.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}

packages/e2e-tests/hmr/src/index.js

@@ -1,7 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body
-});
-
-export default app;
+if (App.toString().startsWith('class ')) {
+	new App({ target: document.body });
+} else {
+	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
+}