feat: Support svelte.config.ts (#13935)

Co-authored-by: Tee Ming <[email protected]>
Co-authored-by: Ben McCann <[email protected]>

Author: 3 people

.changeset/twenty-pants-fetch.md

@@ -0,0 +1,11 @@
+---
+'@sveltejs/package': minor
+'@sveltejs/kit': minor
+---
+
+feat: support svelte.config.ts
+
+> **NOTE**
+>
+> Your runtime has to support importing TypeScript files for `svelte.config.ts` to work.
+> In Node.js, the feature is supported with the `--experimental-strip-types` flag starting in Node 22.6.0 and supported without a flag starting in Node 23.6.0.

.github/workflows/ci.yml

@@ -74,6 +74,8 @@ jobs:
       - run: pnpm playwright install ${{ matrix.e2e-browser }}
       - run: pnpm run sync-all
       - run: pnpm test:kit
+        env:
+          NODE_OPTIONS: ${{matrix.node-version == 22 && '--experimental-strip-types' || ''}} # allows loading svelte.config.ts
       - name: Print flaky test report
         run: node scripts/print-flaky-test-report.js
       - name: Archive test results
@@ -181,14 +183,19 @@ jobs:
           path: test-results-server-side-route-resolution-${{ matrix.mode }}.tar.gz
   test-others:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20, 22, 24]
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/[email protected]
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{matrix.node-version}}
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm playwright install chromium
       - run: cd packages/kit && pnpm prepublishOnly
       - run: pnpm run test:others
+        env:
+          NODE_OPTIONS: ${{matrix.node-version == 22 && '--experimental-strip-types' || ''}} # allows loading svelte.config.ts

eslint.config.js

@@ -14,7 +14,9 @@ export default [
 			'**/test-results',
 			'**/build',
 			'**/.custom-out-dir',
-			'packages/adapter-*/files'
+			'packages/adapter-*/files',
+			'packages/kit/src/core/config/fixtures/multiple', // dir contains svelte config with multiple extensions tripping eslint
+			'packages/package/test/fixtures/typescript-svelte-config/expected'
 		]
 	},
 	{

packages/kit/src/cli.js

@@ -1,5 +1,4 @@
 import fs from 'node:fs';
-import path from 'node:path';
 import process from 'node:process';
 import colors from 'kleur';
 import sade from 'sade';
@@ -28,8 +27,11 @@ prog
 	.describe('Synchronise generated type definitions')
 	.option('--mode', 'Specify a mode for loading environment variables', 'development')
 	.action(async ({ mode }) => {
-		if (!fs.existsSync('svelte.config.js')) {
-			console.warn(`Missing ${path.resolve('svelte.config.js')} — skipping`);
+		const config_files = ['js', 'ts']
+			.map((ext) => `svelte.config.${ext}`)
+			.filter((f) => fs.existsSync(f));
+		if (config_files.length === 0) {
+			console.warn(`Missing Svelte config file in ${process.cwd()} — skipping`);
 			return;
 		}
 

packages/kit/src/core/config/fixtures/multiple/svelte.config.js

@@ -0,0 +1 @@
+export default {};

packages/kit/src/core/config/fixtures/multiple/svelte.config.ts

@@ -0,0 +1,2 @@
+// invalid export is on purpose to ensure that this file is not preferred over svelte.config.js
+export default 'invalid';

packages/kit/src/core/config/fixtures/typescript/svelte.config.ts

@@ -0,0 +1 @@
+export default {};

packages/kit/src/core/config/index.js

@@ -57,17 +57,24 @@ export function load_error_page(config) {
 }
 
 /**
- * Loads and validates svelte.config.js
+ * Loads and validates Svelte config file
  * @param {{ cwd?: string }} options
  * @returns {Promise<import('types').ValidatedConfig>}
  */
 export async function load_config({ cwd = process.cwd() } = {}) {
-	const config_file = path.join(cwd, 'svelte.config.js');
+	const config_files = ['js', 'ts']
+		.map((ext) => path.join(cwd, `svelte.config.${ext}`))
+		.filter((f) => fs.existsSync(f));
 
-	if (!fs.existsSync(config_file)) {
+	if (config_files.length === 0) {
 		return process_config({}, { cwd });
 	}
-
+	const config_file = config_files[0];
+	if (config_files.length > 1) {
+		console.log(
+			`Found multiple Svelte config files in ${cwd}: ${config_files.map((f) => path.basename(f)).join(', ')}. Using ${path.basename(config_file)}`
+		);
+	}
 	const config = await import(`${url.pathToFileURL(config_file).href}?ts=${Date.now()}`);
 
 	try {
@@ -76,7 +83,7 @@ export async function load_config({ cwd = process.cwd() } = {}) {
 		const error = /** @type {Error} */ (e);
 
 		// redact the stack trace — it's not helpful to users
-		error.stack = `Could not load svelte.config.js: ${error.message}\n`;
+		error.stack = `Could not load ${config_file}: ${error.message}\n`;
 		throw error;
 	}
 }
@@ -111,7 +118,7 @@ function process_config(config, { cwd = process.cwd() } = {}) {
 export function validate_config(config) {
 	if (typeof config !== 'object') {
 		throw new Error(
-			'svelte.config.js must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
+			'The Svelte config file must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
 		);
 	}
 

packages/kit/src/core/config/index.spec.js

@@ -365,6 +365,30 @@ test('load default config (esm)', async () => {
 	expect(config).toEqual(defaults);
 });
 
+test('load default config (esm) with .ts extensions', async () => {
+	const cwd = join(__dirname, 'fixtures/typescript');
+
+	const config = await load_config({ cwd });
+	remove_keys(config, ([, v]) => typeof v === 'function');
+
+	const defaults = get_defaults(cwd + '/');
+	defaults.kit.version.name = config.kit.version.name;
+
+	expect(config).toEqual(defaults);
+});
+
+test('load .js config when both .js and .ts configs are present', async () => {
+	const cwd = join(__dirname, 'fixtures/multiple');
+
+	const config = await load_config({ cwd });
+	remove_keys(config, ([, v]) => typeof v === 'function');
+
+	const defaults = get_defaults(cwd + '/');
+	defaults.kit.version.name = config.kit.version.name;
+
+	expect(config).toEqual(defaults);
+});
+
 test('errors on loading config with incorrect default export', async () => {
 	let message = null;
 
@@ -377,6 +401,6 @@ test('errors on loading config with incorrect default export', async () => {
 
 	assert.equal(
 		message,
-		'svelte.config.js must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
+		'The Svelte config file must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
 	);
 });

packages/kit/src/core/sync/create_manifest_data/index.js

@@ -361,7 +361,7 @@ function create_routes_and_nodes(cwd, config, fallback) {
 			const root = routes[0];
 			if (!root.leaf && !root.error && !root.layout && !root.endpoint) {
 				throw new Error(
-					'No routes found. If you are using a custom src/routes directory, make sure it is specified in svelte.config.js'
+					'No routes found. If you are using a custom src/routes directory, make sure it is specified in your Svelte config file'
 				);
 			}
 		}