feat: load svelte config file in config hook to update vite config

.changeset/two-queens-roll.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat: vite config can be updated based on values in svelte config, provide knownJsSrcExtensions (see #60)

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

@@ -15,6 +15,7 @@ import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 import { SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './utils/constants';
 import { setupWatchers } from './utils/watch';
 import { resolveViaPackageJsonSvelte } from './utils/resolve';
+import { addExtraPreprocessors } from './utils/preprocess';
 
 // extend the Vite plugin interface to be able to have `sveltePreprocess` injection
 declare module 'vite' {
@@ -34,7 +35,6 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	// updated in configResolved hook
 	let requestParser: IdParser;
 	let options: ResolvedOptions;
-
 	/* eslint-disable no-unused-vars */
 	let compileSvelte: (
 		svelteRequest: SvelteRequest,
@@ -47,14 +47,14 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		name: 'vite-plugin-svelte',
 		// make sure our resolver runs before vite internal resolver to resolve svelte field correctly
 		enforce: 'pre',
-		config(config): Partial<UserConfig> {
+		async config(config, configEnv): Promise<Partial<UserConfig>> {
 			// setup logger
 			if (process.env.DEBUG) {
 				log.setLevel('debug');
 			} else if (config.logLevel) {
 				log.setLevel(config.logLevel);
 			}
-
+			options = await resolveOptions(inlineOptions, config, configEnv);
 			// extra vite config
 			const extraViteConfig: Partial<UserConfig> = {
 				optimizeDeps: {
@@ -63,11 +63,15 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 				resolve: {
 					mainFields: [...SVELTE_RESOLVE_MAIN_FIELDS],
 					dedupe: [...SVELTE_IMPORTS]
-				}
+				},
+				// this option is still awaiting a PR in vite to be supported
+				// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
+				// @ts-ignore
+				knownJsSrcExtensions: options.extensions
 			};
 			// needed to transform svelte files with component imports
 			// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
-			if (inlineOptions?.useVitePreprocess) {
+			if (options.useVitePreprocess) {
 				extraViteConfig.esbuild = {
 					tsconfigRaw: {
 						compilerOptions: {
@@ -81,9 +85,10 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		},
 
 		async configResolved(config) {
-			options = await resolveOptions(inlineOptions, config);
+			addExtraPreprocessors(options, config);
 			requestParser = buildIdParser(options);
 			compileSvelte = createCompileSvelte(options);
+			log.debug('resolved options', options);
 		},
 
 		configureServer(server) {

packages/vite-plugin-svelte/src/utils/load-svelte-config.ts

@@ -3,7 +3,7 @@ import fs from 'fs';
 import { pathToFileURL } from 'url';
 import { log } from './log';
 import { Options } from './options';
-import { ResolvedConfig } from 'vite';
+import { UserConfig } from 'vite';
 
 const knownSvelteConfigNames = ['svelte.config.js', 'svelte.config.cjs', 'svelte.config.mjs'];
 
@@ -12,11 +12,10 @@ const knownSvelteConfigNames = ['svelte.config.js', 'svelte.config.cjs', 'svelte
 const dynamicImportDefault = new Function('path', 'return import(path).then(m => m.default)');
 
 export async function loadSvelteConfig(
-	viteConfig: ResolvedConfig,
+	viteConfig: UserConfig,
 	inlineOptions: Partial<Options>
-) {
+): Promise<Partial<Options> | undefined> {
 	const configFile = findConfigToLoad(viteConfig, inlineOptions);
-
 	if (configFile) {
 		let err;
 		// try to use dynamic import for svelte.config.js first
@@ -42,7 +41,7 @@ export async function loadSvelteConfig(
 	}
 }
 
-function findConfigToLoad(viteConfig: ResolvedConfig, inlineOptions: Partial<Options>) {
+function findConfigToLoad(viteConfig: UserConfig, inlineOptions: Partial<Options>) {
 	const root = viteConfig.root || process.cwd();
 	if (inlineOptions.configFile) {
 		const abolutePath = path.isAbsolute(inlineOptions.configFile)

packages/vite-plugin-svelte/src/utils/options.ts

@@ -1,8 +1,7 @@
 /* eslint-disable no-unused-vars */
-import { ResolvedConfig, ViteDevServer } from 'vite';
+import { ConfigEnv, UserConfig, ViteDevServer } from 'vite';
 import { log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
-import { addExtraPreprocessors } from './preprocess';
 
 const knownOptions = new Set([
 	'configFile',
@@ -18,10 +17,7 @@ const knownOptions = new Set([
 	'useVitePreprocess'
 ]);
 
-function buildDefaultOptions(
-	{ isProduction }: ResolvedConfig,
-	options: Partial<Options>
-): Partial<Options> {
+function buildDefaultOptions(isProduction: boolean, options: Partial<Options>): Partial<Options> {
 	const disableCssHmr = !!options?.disableCssHmr;
 	// emit for prod, emit in dev unless css hmr is disabled
 	const emitCss = options?.emitCss != null ? options.emitCss : isProduction || !disableCssHmr;
@@ -115,7 +111,8 @@ function mergeOptions(
 	defaultOptions: Partial<Options>,
 	svelteConfig: Partial<Options>,
 	inlineOptions: Partial<Options>,
-	viteConfig: ResolvedConfig
+	viteConfig: UserConfig,
+	viteEnv: ConfigEnv
 ): ResolvedOptions {
 	return {
 		...defaultOptions,
@@ -126,27 +123,31 @@ function mergeOptions(
 			...(svelteConfig?.compilerOptions || {}),
 			...(inlineOptions?.compilerOptions || {})
 		},
-		root: viteConfig.root,
-		isProduction: viteConfig.isProduction,
-		isBuild: viteConfig.command === 'build',
-		isServe: viteConfig.command === 'serve'
+		root: viteConfig.root || process.cwd(),
+		isProduction: viteEnv.mode === 'production',
+		isBuild: viteEnv.command === 'build',
+		isServe: viteEnv.command === 'serve'
 	};
 }
 
 export async function resolveOptions(
 	inlineOptions: Partial<Options> = {},
-	viteConfig: ResolvedConfig
+	viteConfig: UserConfig,
+	viteEnv: ConfigEnv
 ): Promise<ResolvedOptions> {
-	const defaultOptions = buildDefaultOptions(viteConfig, inlineOptions);
+	const defaultOptions = buildDefaultOptions(viteEnv.mode === 'production', inlineOptions);
 	const svelteConfig = (await loadSvelteConfig(viteConfig, inlineOptions)) || {};
-	const resolvedOptions = mergeOptions(defaultOptions, svelteConfig, inlineOptions, viteConfig);
+	const resolvedOptions = mergeOptions(
+		defaultOptions,
+		svelteConfig,
+		inlineOptions,
+		viteConfig,
+		viteEnv
+	);
 
 	enforceOptionsForProduction(resolvedOptions);
-
 	enforceOptionsForHmr(resolvedOptions);
 
-	addExtraPreprocessors(resolvedOptions, viteConfig);
-	log.debug('resolved options', resolvedOptions);
 	return resolvedOptions;
 }