refactor(load-config): remove support for cjs and add support for ts

Author: dominikg

.changeset/nasty-ghosts-warn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+remove support for loading commonjs svelte config files

.changeset/tall-rivers-sleep.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+add support for loading typescript svelte config files in runtimes that support it

packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts

@@ -1,5 +1,8 @@
 import { it, expect } from 'vitest';
 import { editViteConfig, isBuild, page, e2eServer } from '~utils';
+import { versions } from 'node:process';
+
+const isNodeWithoutTypeStripping = Number(versions.node?.split('.', 1)[0]) < 22;
 
 it('should load default config and work', async () => {
 	expect(e2eServer.logs.server.out).toContain('default svelte config loaded');
@@ -11,11 +14,11 @@ it('should load default config and work', async () => {
 if (!isBuild) {
 	// editing vite config does not work in build tests, build only runs once
 	// TODO split into different tests
-	it('should load custom cjs config and work', async () => {
+	it.skipIf(isNodeWithoutTypeStripping)('should load custom ts config and work', async () => {
 		await editViteConfig((c) =>
-			c.replace(/svelte\([^)]*\)/, "svelte({configFile:'svelte.config.custom.cjs'})")
+			c.replace(/svelte\([^)]*\)/, "svelte({configFile:'svelte.config.custom.ts'})")
 		);
-		expect(e2eServer.logs.server.out).toContain('custom svelte config loaded cjs');
+		expect(e2eServer.logs.server.out).toContain('custom svelte config loaded ts');
 		expect(await page.textContent('h1')).toMatch('Hello world!');
 		expect(await page.textContent('#test-child')).toBe('test-child');
 		expect(await page.textContent('#dependency-import')).toBe('dependency-import');

packages/e2e-tests/configfile-custom/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "cross-env NODE_OPTIONS=\"--experimental-strip-types\" vite",
+    "build": "cross-env NODE_OPTIONS=\"--experimental-strip-types\" vite build",
     "preview": "vite preview"
   },
   "dependencies": {

packages/e2e-tests/configfile-custom/svelte.config.custom.cjs

@@ -0,0 +1,8 @@
+console.log('custom svelte config loaded ts');
+import type { SvelteConfig } from '@sveltejs/vite-plugin-svelte';
+const config: SvelteConfig = {
+	vitePlugin: {
+		emitCss: false
+	}
+};
+export default config;

packages/e2e-tests/configfile-custom/svelte.config.custom.ts

@@ -1,2 +1,2 @@
 console.log('default svelte config loaded');
-module.exports = {};
+export default {};

packages/e2e-tests/configfile-custom/svelte.config.cjs renamed to packages/e2e-tests/configfile-custom/svelte.config.js

@@ -1,21 +1,12 @@
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import process from 'node:process';
 import fs from 'node:fs';
 import { pathToFileURL } from 'node:url';
 import { log } from './log.js';
 
-// used to require cjs config in esm.
-// NOTE dynamic import() cjs technically works, but timestamp query cache bust
-// have no effect, likely because it has another internal cache?
-/** @type {NodeRequire}*/
-let esmRequire;
-
-export const knownSvelteConfigNames = [
-	'svelte.config.js',
-	'svelte.config.cjs',
-	'svelte.config.mjs'
-];
+export const knownSvelteConfigNames = ['js', 'ts', 'mjs', 'mts'].map(
+	(ext) => `svelte.config.${ext}`
+);
 
 /**
  * @param {string} filePath
@@ -36,56 +27,23 @@ export async function loadSvelteConfig(viteConfig, inlineOptions) {
 	}
 	const configFile = findConfigToLoad(viteConfig, inlineOptions);
 	if (configFile) {
-		let err;
-		// try to use dynamic import for svelte.config.js first
-		if (configFile.endsWith('.js') || configFile.endsWith('.mjs')) {
-			try {
-				const result = await dynamicImportDefault(
-					pathToFileURL(configFile).href,
-					fs.statSync(configFile).mtimeMs
-				);
-				if (result != null) {
-					return {
-						...result,
-						configFile
-					};
-				} else {
-					throw new Error(`invalid export in ${configFile}`);
-				}
-			} catch (e) {
-				log.error(`failed to import config ${configFile}`, e);
-				err = e;
-			}
-		}
-		// cjs or error with dynamic import
-		if (!configFile.endsWith('.mjs')) {
-			try {
-				// identify which require function to use (esm and cjs mode)
-				const _require = import.meta.url
-					? (esmRequire ?? (esmRequire = createRequire(import.meta.url)))
-					: // eslint-disable-next-line no-undef
-						require;
-
-				// avoid loading cached version on reload
-				delete _require.cache[_require.resolve(configFile)];
-				const result = _require(configFile);
-				if (result != null) {
-					return {
-						...result,
-						configFile
-					};
-				} else {
-					throw new Error(`invalid export in ${configFile}`);
-				}
-			} catch (e) {
-				log.error(`failed to require config ${configFile}`, e);
-				if (!err) {
-					err = e;
-				}
+		try {
+			const result = await dynamicImportDefault(
+				pathToFileURL(configFile).href,
+				fs.statSync(configFile).mtimeMs
+			);
+			if (result != null) {
+				return {
+					...result,
+					configFile
+				};
+			} else {
+				throw new Error(`invalid export in ${configFile}`);
 			}
+		} catch (e) {
+			log.error(`failed to import config ${configFile}`, e);
+			throw e;
 		}
-		// failed to load existing config file
-		throw err;
 	}
 }
 

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

@@ -26,6 +26,6 @@
 		null,
 		null
 	],
-	"mappings": ";;;;aAIYA,OAAOA;;WAETC,mBAAmBA;;;;;;;;;;;kBAWZC,aAAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAgGbC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiDnBC,mBAAmBA;;;;;;;;;;;;;;;;WAgBnBC,oBAAoBA;;;;;;;;;;;;;;;MAezBC,SAASA;;kBAEGC,qBAAqBA;;;;;;;;;;;;;iBC/JtBC,MAAMA;iBCXNC,cAAcA;iBCORC,gBAAgBA",
+	"mappings": ";;;;aAIYA,OAAOA;;WAETC,mBAAmBA;;;;;;;;;;;kBAWZC,aAAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAgGbC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiDnBC,mBAAmBA;;;;;;;;;;;;;;;;WAgBnBC,oBAAoBA;;;;;;;;;;;;;;;MAezBC,SAASA;;kBAEGC,qBAAqBA;;;;;;;;;;;;;iBC/JtBC,MAAMA;iBCXNC,cAAcA;iBCFRC,gBAAgBA",
 	"ignoreList": []
 }