feat(vite-plugin-svelte): support esm in svelte.config.js (see #29)

Author: dominikg

.changeset/blue-schools-bake.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Feature: Support esm in svelte.config.js

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

@@ -91,11 +91,10 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
 			return extraViteConfig as Partial<UserConfig>;
 		},
 
-		configResolved(config) {
-			options = resolveOptions(inlineOptions, config);
+		async configResolved(config) {
+			options = await resolveOptions(inlineOptions, config);
 			requestParser = buildIdParser(options);
-			// init compiler
-			compileSvelte = createCompileSvelte(options, config);
+			compileSvelte = createCompileSvelte(options);
 		},
 
 		configureServer(server) {

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

@@ -1,14 +1,12 @@
-import { CompileOptions, PreprocessorGroup, ResolvedOptions } from './options';
+import { CompileOptions, ResolvedOptions } from './options';
 import { compile, preprocess, walk } from 'svelte/compiler';
 // @ts-ignore
 import { createMakeHot } from 'svelte-hmr';
 import { SvelteRequest } from './id';
 import { safeBase64Hash } from './hash';
 import { log } from './log';
-import { ResolvedConfig } from 'vite';
-import { buildExtraPreprocessors } from './preprocess';
 
-const _createCompileSvelte = (makeHot: Function, extraPreprocessors: PreprocessorGroup[]) =>
+const _createCompileSvelte = (makeHot: Function) =>
 	async function compileSvelte(
 		svelteRequest: SvelteRequest,
 		code: string,
@@ -31,17 +29,9 @@ const _createCompileSvelte = (makeHot: Function, extraPreprocessors: Preprocesso
 		}
 
 		let preprocessed;
-		const preprocessors = [];
+
 		if (options.preprocess) {
-			if (Array.isArray(options.preprocess)) {
-				preprocessors.push(...options.preprocess);
-			} else {
-				preprocessors.push(options.preprocess);
-			}
-		}
-		preprocessors.push(...(extraPreprocessors || []));
-		if (preprocessors.length > 0) {
-			preprocessed = await preprocess(code, preprocessors, { filename });
+			preprocessed = await preprocess(code, options.preprocess, { filename });
 			if (preprocessed.dependencies) dependencies.push(...preprocessed.dependencies);
 			if (preprocessed.map) finalCompilerOptions.sourcemap = preprocessed.map;
 		}
@@ -97,10 +87,9 @@ function buildMakeHot(options: ResolvedOptions) {
 	}
 }
 
-export function createCompileSvelte(options: ResolvedOptions, config: ResolvedConfig) {
+export function createCompileSvelte(options: ResolvedOptions) {
 	const makeHot = buildMakeHot(options);
-	const extraPreprocessors = buildExtraPreprocessors(options, config);
-	return _createCompileSvelte(makeHot, extraPreprocessors);
+	return _createCompileSvelte(makeHot);
 }
 
 export interface Code {

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

@@ -4,7 +4,11 @@ import { log } from './log';
 
 const knownSvelteConfigNames = ['svelte.config.js', 'svelte.config.cjs'];
 
-export function loadSvelteConfig(root: string = process.cwd()) {
+// hide dynamic import from ts transform to prevent it turning into a require
+// see https://github.com/microsoft/TypeScript/issues/43329#issuecomment-811606238
+const dynamicImportDefault = new Function('path', 'return import(path).then(m => m.default)');
+
+export async function loadSvelteConfig(root: string = process.cwd()) {
 	const foundConfigs = knownSvelteConfigNames
 		.map((candidate) => path.resolve(root, candidate))
 		.filter((file) => fs.existsSync(file));
@@ -18,7 +22,7 @@ export function loadSvelteConfig(root: string = process.cwd()) {
 		);
 	}
 	try {
-		const config = require(foundConfigs[0]);
+		const config = await dynamicImportDefault(foundConfigs[0]);
 		log.debug(`loaded svelte config ${foundConfigs[0]}`, config);
 		return config;
 	} catch (e) {

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

@@ -2,6 +2,7 @@
 import { ResolvedConfig, ViteDevServer } from 'vite';
 import { log } from './log';
 import { loadSvelteConfig } from './loadSvelteConfig';
+import { addExtraPreprocessors } from './preprocess';
 
 const knownOptions = new Set([
 	'include',
@@ -116,19 +117,20 @@ function mergeOptions(
 	};
 }
 
-export function resolveOptions(
+export async function resolveOptions(
 	inlineOptions: Partial<Options> = {},
 	viteConfig: ResolvedConfig
-): ResolvedOptions {
+): Promise<ResolvedOptions> {
 	const defaultOptions = buildDefaultOptions(viteConfig, inlineOptions);
 	// TODO always load from vite root dir or make this configurable?
-	const svelteConfig = loadSvelteConfig(viteConfig.root) || {};
+	const svelteConfig = (await loadSvelteConfig(viteConfig.root)) || {};
 	const resolvedOptions = mergeOptions(defaultOptions, svelteConfig, inlineOptions, viteConfig);
 
 	enforceOptionsForProduction(resolvedOptions);
 
 	enforceOptionsForHmr(resolvedOptions);
 
+	addExtraPreprocessors(resolvedOptions, viteConfig);
 	log.debug('resolved options', resolvedOptions);
 	return resolvedOptions;
 }

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

@@ -74,7 +74,7 @@ function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
 	};
 }
 
-export function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
+function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
 	const extraPreprocessors = [];
 	if (options.useVitePreprocess) {
 		log.debug('adding vite preprocessor');
@@ -99,3 +99,16 @@ export function buildExtraPreprocessors(options: ResolvedOptions, config: Resolv
 
 	return extraPreprocessors;
 }
+
+export function addExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
+	const extra = buildExtraPreprocessors(options, config);
+	if (extra?.length > 0) {
+		if (!options.preprocess) {
+			options.preprocess = extra;
+		} else if (Array.isArray(options.preprocess)) {
+			options.preprocess.push(...extra);
+		} else {
+			options.preprocess = [options.preprocess, ...extra];
+		}
+	}
+}