Allow typescript configuration files

.changeset/twelve-zebras-tease.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/kit': patch
+'kit.svelte.dev': patch
+---
+
+Add the ability to use a typescript configuration file. Move the docs site to this `svelte.config.ts`

documentation/docs/13-configuration.md

@@ -84,6 +84,18 @@ const config = {
 export default config;
 ```
 
+### typescript config file
+
+Thanks to [unconfig](https://www.github.com/antfu/unconfig), you can also use a typescript configuration file. Simply rename `svelte.config.js` to `svelte.config.ts` and replace the beginning of the file with:
+
+```ts
+/// file: svelte.config.ts
+import type { Config } from 'sveltejs/kit';
+const config: Config = {
+ // Contents
+}
+```
+
 ### adapter
 
 Required when running `svelte-kit build` and determines how the output is converted for different platforms. See [Adapters](/docs/adapters).

packages/kit/package.json

@@ -42,6 +42,7 @@
  "svelte-preprocess": "^4.9.8",
  "svelte2tsx": "~0.5.0",
  "tiny-glob": "^0.2.9",
+ "unconfig": "^0.3.1",
  "uvu": "^0.5.2"
  },
  "peerDependencies": {

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

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import path from 'path';
-import * as url from 'url';
 import { logger } from '../utils.js';
 import options from './options.js';
+import { loadConfig } from 'unconfig';
 
 /**
  * @param {string} cwd
@@ -28,17 +28,19 @@ export function load_template(cwd, config) {
 }
 
 export async function load_config({ cwd = process.cwd() } = {}) {
- const config_file = path.join(cwd, 'svelte.config.js');
+ // load from `svelte.config.xx` where xx is one of ts, mjs, js, json
+ const { config, sources } = await loadConfig({
+ sources: [{ files: 'svelte.config' }],
+ cwd
+ });
 
- if (!fs.existsSync(config_file)) {
+ if (!sources.length) {
  throw new Error(
  'You need to create a svelte.config.js file. See https://kit.svelte.dev/docs/configuration'
  );
  }
 
- const config = await import(url.pathToFileURL(config_file).href);
-
- const validated = validate_config(config.default);
+ const validated = validate_config(config);
 
  validated.kit.files.assets = path.resolve(cwd, validated.kit.files.assets);
  validated.kit.files.hooks = path.resolve(cwd, validated.kit.files.hooks);
@@ -55,6 +57,8 @@ export async function load_config({ cwd = process.cwd() } = {}) {
  * @returns {import('types').ValidatedConfig}
  */
 export function validate_config(config) {
+ // unconfig returns an empty object if the config file does not return an object,
+ // so this should never happen. Leaving it here for safety.
  if (typeof config !== 'object') {
  throw new Error(
  'svelte.config.js must have a configuration object as its default export. See https://kit.svelte.dev/docs/configuration'

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

@@ -351,20 +351,16 @@ test('load default config (esm)', async () => {
  assert.equal(config, defaults);
 });
 
-test('errors on loading config with incorrect default export', async () => {
- let message = null;
-
- try {
- const cwd = join(__dirname, 'fixtures', 'export-string');
- await load_config({ cwd });
- } catch (/** @type {any} */ e) {
- message = e.message;
- }
+test('defaults used when using loading config with incorrect default export', async () => {
+ const cwd = join(__dirname, 'fixtures/export-string');
+
+ const config = await load_config({ cwd });
+ remove_keys(config, ([, v]) => typeof v === 'function');
 
- assert.equal(
-  message,
- 'svelte.config.js must have a configuration object as its default export. See https://kit.svelte.dev/docs/configuration'
- );
+ const defaults = get_defaults(cwd + '/');
+ defaults.kit.version.name = config.kit.version.name;
+
+ assert.equal(config, defaults);
 });
 
 test.run();

sites/kit.svelte.dev/svelte.config.js → sites/kit.svelte.dev/svelte.config.ts

@@ -2,8 +2,9 @@ import * as path from 'path';
 import adapter from '@sveltejs/adapter-auto';
 import { imagetools } from 'vite-imagetools';
 
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
+import type { Config } from '@sveltejs/kit';
+
+const config: Config = {
  kit: {
  adapter: adapter(),