generate: 'client' | 'server' (#785)

* generate client/server

* changeset

* chore: ignore type error for now

* chore: fix audit check

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: dominikg <[email protected]>

Author: Rich-Harris

.changeset/eleven-hats-search.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+feat: support Svelte 5 compiler API

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

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.31",
     "postcss-load-config": "^4.0.1",
     "svelte": "^4.2.0",
     "svelte-preprocess": "^5.0.4",

packages/vite-plugin-svelte/src/index.js

@@ -298,7 +298,7 @@ export function svelte(inlineOptions) {
 				try {
 					// @ts-ignore doesn't exist in Svelte 4
 					const compileResult = await svelteCompiler.compileModule(code, {
-						generate: ssr ? 'ssr' : 'dom',
+						generate: isSvelte5 ? (ssr ? 'server' : 'client') : ssr ? 'ssr' : 'dom',
 						filename: moduleRequest.filename
 					});
 					logCompilerWarnings(moduleRequest, compileResult.warnings, options);

packages/vite-plugin-svelte/src/utils/compile.js

@@ -9,7 +9,7 @@ import { mapToRelative } from './sourcemaps.js';
 
 const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
-import { isSvelte3 } from './svelte-version.js';
+import { isSvelte3, isSvelte5 } from './svelte-version.js';
 
 /**
  * @param {Function} [makeHot]
@@ -53,7 +53,8 @@ export const _createCompileSvelte = (makeHot) => {
 		const compileOptions = {
 			...options.compilerOptions,
 			filename,
-			generate: ssr ? 'ssr' : 'dom'
+			// @ts-expect-error generate type is different for svelte5
+			generate: isSvelte5 ? (ssr ? 'server' : 'client') : ssr ? 'ssr' : 'dom'
 		};
 		if (isSvelte3) {
 			// @ts-ignore

packages/vite-plugin-svelte/src/utils/esbuild.js

@@ -65,7 +65,7 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		// @ts-ignore doesn't exist in Svelte 4
 		const compiled = svelte.compileModule(code, {
 			filename,
-			generate: 'dom',
+			generate: isSvelte5 ? 'client' : 'dom',
 			runes: true
 		});
 		if (endStat) {
@@ -86,7 +86,8 @@ async function compileSvelte(options, { filename, code }, statsCollection) {
 		...options.compilerOptions,
 		css,
 		filename,
-		generate: 'dom'
+		// @ts-expect-error generate type is different for svelte5
+		generate: isSvelte5 ? 'client' : 'dom'
 	};
 	if (isSvelte3) {
 		// @ts-ignore