feat: support experimental.async and dynamicCompileOptions for Svelte modules (#1176)

* feat: support experimental.async and dynamicCompileOptions when compiling Svelte modules

* fix: check if it exists before using

* wip: add svelte version check for async and use it in kit-node test

* fix: split async test into separate project, adapt tests when running in baseline svelte version

* try to fix missing tsconfig bug that doesnt happen locally

* fix: run sync script before testing too

* dedupe dependencies

* bump svelte&kit, update kit-async setup

* switch kit-async to jsconfig.json

Author: dominikg

.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"
   }
 }