feat: support experimental.async and dynamicCompileOptions for Svelte modules

.changeset/huge-ideas-nail.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat: add support for the new experimental.async option and apply dynamicCompileOptions when compiling Svelte modules

.github/workflows/ci.yml

@@ -49,6 +49,8 @@ jobs:
           cache-dependency-path: '**/pnpm-lock.yaml'
       - name: install
         run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts
+      - name: sync
+        run: pnpm -r sync # required to ensure sveltekit test project have tsconfig.json which may be required by the checks below
       - name: format
         run: pnpm check:format
       - name: lint
@@ -77,21 +79,26 @@ jobs:
         node: [22]
         os: [ubuntu-latest, macos-latest, windows-latest]
         vite: ['current']
+        svelte: ['current']
         include:
           - node: 20
             os: ubuntu-latest
             vite: 'current'
+            svelte: 'current'
           - node: 24
             os: ubuntu-latest
             vite: 'current'
-          # baseline test lowest vite and node version
+            svelte: 'current'
+          # baseline test lowest svelte, vite and node version
           - node: 20.19
             os: ubuntu-latest
             vite: 'baseline'
+            svelte: 'baseline'
           # future test with rolldown-vite
           - node: 24
             os: ubuntu-latest
             vite: 'rolldown-vite'
+            svelte: 'current'
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -115,6 +122,11 @@ jobs:
         run: |
           pnpm update -r --no-save [email protected]
           pnpm ls vite
+      - name: downgrade svelte to baseline
+        if: matrix.svelte == 'baseline'
+        run: |
+          pnpm update -r --no-save [email protected]
+          pnpm ls svelte
       - name: update vite to rolldown-vite
         if: matrix.vite == 'rolldown-vite'
         run: |
@@ -134,7 +146,7 @@ jobs:
       - uses: actions/upload-artifact@v4
         if: failure()
         with:
-          name: test-failure-${{github.run_id}}-${{ matrix.os }}-${{ matrix.node }}-${{ matrix.vite }}
+          name: test-failure-${{github.run_id}}-os_${{ matrix.os }}-node_${{ matrix.node }}-vite_${{ matrix.vite }}-svelte_${{matrix.svelte}}
           path: |
             test-temp.tar
             pnpm-debug.log

package.json

@@ -28,7 +28,7 @@
     "@eslint/js": "^9.31.0",
     "@stylistic/eslint-plugin-js": "^4.4.1",
     "@sveltejs/eslint-config": "^8.2.0",
-    "@sveltejs/kit": "^2.22.5",
+    "@sveltejs/kit": "^2.23.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.16.3",
@@ -51,7 +51,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "svelte-eslint-parser": "^1.2.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.36.0",

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

@@ -15,6 +15,6 @@
   },
   "type": "module",
   "dependencies": {
-    "svelte": "^5.35.6"
+    "svelte": "^5.0.0"
   }
 }

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

@@ -15,7 +15,7 @@
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
     "postcss-load-config": "^6.0.1",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.0.4"
   },

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

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   },
   "type": "module"

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

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.0.4"
   },

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

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "sass": "^1.89.2",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   }
 }

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

@@ -1,37 +1,48 @@
-import { browserLogs, findAssetFile, getColor, getEl, getText, isBuild } from '~utils';
+import {
+	browserLogs,
+	findAssetFile,
+	getColor,
+	getEl,
+	getText,
+	IS_SVELTE_BASELINE,
+	isBuild
+} from '~utils';
 import { expect } from 'vitest';
 
-test('should not have failed requests', async () => {
-	browserLogs.forEach((msg) => {
-		expect(msg).not.toMatch('404');
+// support for treeshaking css was added after 5.0.0
+describe.skipIf(IS_SVELTE_BASELINE)('css-treeshake', () => {
+	test('should not have failed requests', async () => {
+		browserLogs.forEach((msg) => {
+			expect(msg).not.toMatch('404');
+		});
 	});
-});
-
-test('should apply css from used components', async () => {
-	expect(await getText('#app')).toBe('App');
-	expect(await getColor('#app')).toBe('blue');
-	expect(await getText('#a')).toBe('A');
-	expect(await getColor('#a')).toBe('red');
-});
-
-test('should apply css from unused components that contain global styles', async () => {
-	expect(await getEl('head style[src]'));
-	expect(await getColor('#test')).toBe('green'); // from B.svelte
-});
 
-test('should not render unused components', async () => {
-	expect(await getEl('#b')).toBeNull();
-	expect(await getEl('#c')).toBeNull();
-});
+	test('should apply css from used components', async () => {
+		expect(await getText('#app')).toBe('App');
+		expect(await getColor('#app')).toBe('blue');
+		expect(await getText('#a')).toBe('A');
+		expect(await getColor('#a')).toBe('red');
+	});
 
-if (isBuild) {
-	test('should include unscoped global styles from unused components', async () => {
-		const cssOutput = findAssetFile(/index-.*\.css/);
-		expect(cssOutput).toContain('#test{color:green}'); // from B.svelte
+	test('should apply css from unused components that contain global styles', async () => {
+		expect(await getEl('head style[src]'));
+		expect(await getColor('#test')).toBe('green'); // from B.svelte
 	});
-	test('should not include scoped styles from unused components', async () => {
-		const cssOutput = findAssetFile(/index-.*\.css/);
-		// from C.svelte
-		expect(cssOutput).not.toContain('.unused');
+
+	test('should not render unused components', async () => {
+		expect(await getEl('#b')).toBeNull();
+		expect(await getEl('#c')).toBeNull();
 	});
-}
+
+	if (isBuild) {
+		test('should include unscoped global styles from unused components', async () => {
+			const cssOutput = findAssetFile(/index-.*\.css/);
+			expect(cssOutput).toContain('#test{color:green}'); // from B.svelte
+		});
+		test('should not include scoped styles from unused components', async () => {
+			const cssOutput = findAssetFile(/index-.*\.css/);
+			// from C.svelte
+			expect(cssOutput).not.toContain('.unused');
+		});
+	}
+});

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

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "sass": "^1.89.2",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   }
 }

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

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   },
   "type": "module"

packages/e2e-tests/dynamic-compile-options/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   },
   "type": "module"

packages/e2e-tests/e2e-server.js

@@ -4,6 +4,7 @@ import treeKill from 'tree-kill';
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
+import { rootDir } from 'vitest/node';
 const isWin = process.platform === 'win32';
 
 async function startedOnPort(serverProcess, port, timeout) {
@@ -77,6 +78,16 @@ export async function serve(root, isBuild, port) {
 		}
 	};
 
+	const pkg = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json'), 'utf-8'));
+	if (pkg.scripts?.sync) {
+		try {
+			await execa('pnpm', ['sync']);
+		} catch (e) {
+			console.error(`Failed to run sync script in ${rootDir}`);
+			throw e;
+		}
+	}
+
 	if (isBuild) {
 		let buildResult;
 		let hasErr = false;

packages/e2e-tests/env/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   },
   "type": "module"

packages/e2e-tests/hmr/package.json

@@ -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": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   },
   "type": "module"

packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/raw.txt

@@ -1,10 +1,14 @@
 <script lang="ts">
-	export let name: string;
-	let clicks = 0;
+	interface Props {
+		name: string;
+	}
+
+	let { name }: Props = $props();
+	let clicks = $state(0);
 </script>
 
 <button
-	on:click={() => {
+	onclick={() => {
 		clicks++;
 	}}>{name} clicks: {clicks}</button
 >

packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-raw.txt

@@ -1,10 +1,14 @@
 <script lang="ts">
-	export let name: string;
-	let clicks = 0;
+	interface Props {
+		name: string;
+	}
+
+	let { name }: Props = $props();
+	let clicks = $state(0);
 </script>
 
 <button
-	on:click={() => {
+	onclick={() => {
 		clicks++;
 	}}>{name} clicks: {clicks}</button
 >

packages/e2e-tests/import-queries/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "sass": "^1.89.2",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   }
 }

packages/e2e-tests/import-queries/src/Dummy.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-	export let name: string;
-	let clicks = 0;
+	interface Props {
+		name: string;
+	}
+
+	let { name }: Props = $props();
+	let clicks = $state(0);
 </script>
 
 <button
-	on:click={() => {
+	onclick={() => {
 		clicks++;
 	}}>{name} clicks: {clicks}</button
 >

packages/e2e-tests/inspector-kit/package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/kit": "^2.22.5",
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   },
   "type": "module"

packages/e2e-tests/inspector-vite/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
-    "svelte": "^5.35.6",
+    "svelte": "^5.36.1",
     "vite": "^7.0.4"
   }
 }

packages/e2e-tests/kit-async/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+#.env
+.env.*
+!.env.example
+logs

packages/e2e-tests/kit-async/__tests__/kit-async.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { getText, IS_SVELTE_BASELINE, sleep } from '~utils';
+
+describe.skipIf(IS_SVELTE_BASELINE)('kit-async', async () => {
+	it('works', async () => {
+		expect(await getText('h1')).toBe('Hello async world!');
+		expect(await getText('span')).toBe('Wait for it ...');
+		// TODO ideally this would wait for the actual async settled but that requires a new util
+		await sleep(700); // the async derived resolves after 500ms
+		expect(await getText('span')).toBe('foo');
+	});
+});

packages/e2e-tests/kit-async/jsconfig.json

@@ -0,0 +1,15 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	},
+	"exclude": ["src/routes/+page.svelte"]
+}