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

Author: dominikg

.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 }));
+}