sveltejs · bluwy · Dec 19, 2021 · Dec 17, 2021 · Dec 17, 2021 · Dec 17, 2021
diff --git a/.changeset/khaki-kids-vanish.md b/.changeset/khaki-kids-vanish.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+handle preprocess for prebundleSvelteLibraries
diff --git a/.changeset/olive-flowers-glow.md b/.changeset/olive-flowers-glow.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+handle production builds for non "production" mode
diff --git a/packages/e2e-tests/env/.env.staging b/packages/e2e-tests/env/.env.staging
@@ -0,0 +1 @@
+NODE_ENV=production
diff --git a/packages/e2e-tests/env/README.md b/packages/e2e-tests/env/README.md
@@ -0,0 +1,10 @@
+# default svelte app template
+
+Created with `npx degit sveltejs/template`
+
+adapted to vite by moving index.html to root and replacing rollup config with vite
+
+use pnpm
+
+`pnpm dev` starts dev server
+`pnpm build` builds for production
diff --git a/packages/e2e-tests/env/__tests__/env.spec.ts b/packages/e2e-tests/env/__tests__/env.spec.ts
@@ -0,0 +1,11 @@
+import { findAssetFile, isBuild } from 'testUtils';
+
+// can't have no tests for test:serve
+it('dummy', () => {});
+
+if (isBuild) {
+	it('custom production mode should build for production', () => {
+		const indexBundle = findAssetFile(/index\..*\.js/);
+		expect(indexBundle).not.toContain('SvelteComponentDev');
+	});
+}
diff --git a/packages/e2e-tests/env/index.html b/packages/e2e-tests/env/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>
diff --git a/packages/e2e-tests/env/package.json b/packages/e2e-tests/env/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "e2e-tests-env",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "^3.44.2",
+    "vite": "^2.7.0"
+  },
+  "type": "module"
+}
diff --git a/packages/e2e-tests/env/src/App.svelte b/packages/e2e-tests/env/src/App.svelte
@@ -0,0 +1,7 @@
+<h1>Hello world!</h1>
+
+<style>
+	h1 {
+		color: #ff3e00;
+	}
+</style>
diff --git a/packages/e2e-tests/env/src/main.js b/packages/e2e-tests/env/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/e2e-tests/env/vite.config.js b/packages/e2e-tests/env/vite.config.js
@@ -0,0 +1,25 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	mode: 'staging',
+	plugins: [svelte()],
+	build: {
+		// make build faster by skipping transforms and minification
+		target: 'esnext',
+		minify: false,
+		commonjsOptions: {
+			// pnpm only symlinks packages, and vite wont process cjs deps not in
+			// node_modules, so we add the cjs dep here
+			include: [/node_modules/, /cjs-only/]
+		}
+	},
+	server: {
+		watch: {
+			// During tests we edit the files too fast and sometimes chokidar
+			// misses change events, so enforce polling for consistency
+			usePolling: true,
+			interval: 100
+		}
+	}
+});
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -9,13 +9,14 @@ import {
 	validateInlineOptions,
 	Options,
 	ResolvedOptions,
-	resolveOptions
+	resolveOptions,
+	patchResolvedViteConfig,
+	preResolveOptions
 } from './utils/options';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 
 import { ensureWatchedFile, setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
-import { addExtraPreprocessors } from './utils/preprocess';
 import { PartialResolvedId } from 'rollup';
 import { toRollupError } from './utils/error';
 
@@ -51,15 +52,17 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			} else if (config.logLevel) {
 				log.setLevel(config.logLevel);
 			}
-			options = await resolveOptions(inlineOptions, config, configEnv);
+			// @ts-expect-error temporarily lend the options variable until fixed in configResolved
+			options = await preResolveOptions(inlineOptions, config, configEnv);
 			// extra vite config
 			const extraViteConfig = buildExtraViteConfig(options, config, configEnv);
 			log.debug('additional vite config', extraViteConfig);
-			return extraViteConfig as Partial<UserConfig>;
+			return extraViteConfig;
 		},
 
 		async configResolved(config) {
-			addExtraPreprocessors(options, config);
+			options = resolveOptions(options, config);
+			patchResolvedViteConfig(config, options);
 			requestParser = buildIdParser(options);
 			compileSvelte = createCompileSvelte(options);
 			viteConfig = config;

diff --git a/packages/vite-plugin-svelte/src/utils/esbuild.ts b/packages/vite-plugin-svelte/src/utils/esbuild.ts
@@ -10,6 +10,8 @@ type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
 type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
 type EsbuildPluginBuild = Parameters<EsbuildPlugin['setup']>[0];
 
+export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
+
 export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 	return {
 		name: 'vite-plugin-svelte:optimize-svelte',
@@ -64,6 +66,7 @@ async function compileSvelte(
 		...options.compilerOptions,
 		css: true,
 		filename,
+		format: 'esm',
 		generate: 'dom'
 	};