remove vite.config.js files (#569)

* retire vite.config.js in favour of config.kit.vite - fixes #509

* changeset

* message for people with a vite.config.js

* add configFile: false

* add docs for config.kit.vite

* fix ssr config

* update user-facing config type

Author: Rich Harris

.changeset/swift-pumpkins-pump.md

@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+Move Vite config into svelte.config.cjs

documentation/docs/13-configuration.md

@@ -37,7 +37,8 @@ module.exports = {
 			force: false,
 			pages: ['*']
 		},
-		target: null
+		target: null,
+		vite: () => ({})
 	},
 
 	// options passed to svelte.preprocess (https://svelte.dev/docs#svelte_preprocess)
@@ -61,12 +62,12 @@ The directory relative to `paths.assets` where the built JS and CSS (and importe
 
 An object containing zero or more of the following `string` values:
 
-* `assets` — a place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`
-* `lib` — your app's internal library, accessible throughout the codebase as `$lib`
-* `routes` — the files that define the structure of your app (see [Routing](#routing))
-* `serviceWorker` — the location of your service worker's entry point (see [Service workers](#service-workers))
-* `setup` — the location of your setup file (see [Setup](#setup))
-* `template` — the location of the template for HTML responses
+- `assets` — a place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`
+- `lib` — your app's internal library, accessible throughout the codebase as `$lib`
+- `routes` — the files that define the structure of your app (see [Routing](#routing))
+- `serviceWorker` — the location of your service worker's entry point (see [Service workers](#service-workers))
+- `setup` — the location of your setup file (see [Setup](#setup))
+- `template` — the location of the template for HTML responses
 
 #### host
 
@@ -91,18 +92,22 @@ module.exports = {
 
 An object containing zero or more of the following `string` values:
 
-* `assets` — an absolute path, or a path relative to `base`, where your app's files are served from. This is useful if your files are served from a storage bucket of some kind
-* `base` — a root-relative (i.e. starts with `/`) path that specifies where your app is served from. This allows the app to live on a non-root path
+- `assets` — an absolute path, or a path relative to `base`, where your app's files are served from. This is useful if your files are served from a storage bucket of some kind
+- `base` — a root-relative (i.e. starts with `/`) path that specifies where your app is served from. This allows the app to live on a non-root path
 
 #### prerender
 
 See [Prerendering](#prerendering). An object containing zero or more of the following:
 
-* `crawl` — determines whether SvelteKit should find pages to prerender by following links from the seed page(s)
-* `enabled` — set to `false` to disable prerendering altogether
-* `force` — if `true`, a page that fails to render will _not_ cause the entire build to fail
-* `pages` — an array of pages to prerender, or start crawling from (if `crawl: true`). The `*` string includes all non-dynamic routes (i.e. pages with no `[parameters]` )
+- `crawl` — determines whether SvelteKit should find pages to prerender by following links from the seed page(s)
+- `enabled` — set to `false` to disable prerendering altogether
+- `force` — if `true`, a page that fails to render will _not_ cause the entire build to fail
+- `pages` — an array of pages to prerender, or start crawling from (if `crawl: true`). The `*` string includes all non-dynamic routes (i.e. pages with no `[parameters]` )
 
 #### target
 
-Specifies an element to mount the app to. It must be a DOM selector that identifies an element that exists in your template file. If unspecified, the app will be mounted to `document.body`.
+Specifies an element to mount the app to. It must be a DOM selector that identifies an element that exists in your template file. If unspecified, the app will be mounted to `document.body`.
+
+#### vite
+
+A [Vite config object](https://vitejs.dev/config), or a function that returns one. Not all configuration options can be set, since SvelteKit depends on certain values being configured internally.

examples/hn.svelte.dev/svelte.config.cjs

@@ -1,8 +1,6 @@
 module.exports = {
 	kit: {
 		adapter: '@sveltejs/adapter-netlify',
-
-		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte'
 	}
 };

examples/hn.svelte.dev/vite.config.js

@@ -6,6 +6,12 @@ module.exports = {
 		adapter: '@sveltejs/adapter-node',
 
 		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		target: '#svelte',
+
+		vite: {
+			ssr: {
+				noExternal: ['node-fetch']
+			}
+		}
 	}
 };

examples/realworld.svelte.dev/svelte.config.cjs

@@ -1,11 +1,16 @@
+const pkg = require('./package.json');
+
 module.exports = {
 	kit: {
-		// By default, `npm run build` will create a standard Node app.
-		// You can create optimized builds for different platforms by
-		// specifying a different adapter
 		adapter: '@sveltejs/adapter-node',
-
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		target: '#svelte',
+		vite: {
+			build: {
+				minify: false
+			},
+			ssr: {
+				noExternal: Object.keys(pkg.dependencies || {})
+			}
+		}
 	}
 };

examples/realworld.svelte.dev/vite.config.js

@@ -1,11 +1,6 @@
 module.exports = {
 	kit: {
-		// By default, `npm run build` will create a standard Node app.
-		// You can create optimized builds for different platforms by
-		// specifying a different adapter
 		adapter: '@sveltejs/adapter-node',
-
-		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte'
 	}
 };

examples/sandbox/svelte.config.cjs

@@ -1,3 +1,5 @@
+const pkg = require('./package.json');
+
 /** @type {import('@sveltejs/kit').Config} */
 module.exports = {
 	kit: {
@@ -7,6 +9,12 @@ module.exports = {
 		adapter: '@sveltejs/adapter-node',
 
 		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
+		target: '#svelte',
+
+		vite: {
+			ssr: {
+				noExternal: Object.keys(pkg.dependencies || {})
+			}
+		}
 	}
 };

examples/sandbox/vite.config.js

@@ -8,26 +8,13 @@ async function get_config() {
 	if (existsSync('snowpack.config.js') || existsSync('snowpack.config.cjs')) {
 		// prettier-ignore
 		console.error(colors.bold().red(
-			'SvelteKit now uses https://vitejs.dev. Please replace snowpack.config.js with vite.config.js:'
+			'SvelteKit now uses https://vitejs.dev. Please remove snowpack.config.js and put Vite config in svelte.config.cjs: https://kit.svelte.dev/docs#configuration-vite'
 		));
-
+	} else if (existsSync('vite.config.js')) {
 		// prettier-ignore
-		console.error(`
-			// Consult https://vitejs.dev/config/ to learn about these options
-			import { join } from 'path';
-			import { readFileSync } from 'fs';
-			import { cwd } from 'process';
-
-			const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));
-
-			/** @type {import('vite').UserConfig} */
-			export default {
-				ssr: {
-					noExternal: Object.keys(pkg.dependencies || {})
-				}
-			};
-
-		`.replace(/^\t{3}/gm, '').replace(/\t/gm, '  ').trim());
+		console.error(colors.bold().red(
+			'Please remove vite.config.js and put Vite config in svelte.config.cjs: https://kit.svelte.dev/docs#configuration-vite'
+		));
 	}
 
 	try {
@@ -38,8 +25,7 @@ async function get_config() {
 		if (error.code === 'MODULE_NOT_FOUND') {
 			if (existsSync('svelte.config.js')) {
 				// TODO this is temporary, for the benefit of early adopters
-				message =
-					'You must rename svelte.config.js to svelte.config.cjs, and snowpack.config.js to snowpack.config.cjs';
+				message = 'You must rename svelte.config.js to svelte.config.cjs';
 			} else {
 				message = 'Missing svelte.config.cjs';
 			}

examples/svelte-kit-demo/svelte.config.cjs

@@ -109,11 +109,16 @@ async function build_client({
 		});
 	});
 
-	// client build
+	/** @type {any} */
+	const user_config = config.kit.vite();
+
 	await vite.build({
+		...user_config,
+		configFile: false,
 		root: cwd,
 		base,
 		build: {
+			...user_config.build,
 			cssCodeSplit: true,
 			manifest: true,
 			lib: {
@@ -126,6 +131,7 @@ async function build_client({
 			},
 			outDir: client_out_dir,
 			rollupOptions: {
+				...(user_config.build && user_config.build.rollupOptions),
 				input,
 				output: {
 					entryFileNames: '[name]-[hash].js',
@@ -136,12 +142,15 @@ async function build_client({
 			}
 		},
 		resolve: {
+			...user_config.resolve,
 			alias: {
+				...(user_config.resolve && user_config.resolve.alias),
 				$app: path.resolve(`${build_dir}/runtime/app`),
 				$lib: config.kit.files.lib
 			}
 		},
 		plugins: [
+			...(user_config.plugins || []),
 			svelte({
 				extensions: config.extensions
 			})
@@ -370,26 +379,35 @@ async function build_server(
 			.trim()
 	);
 
+	/** @type {any} */
+	const user_config = config.kit.vite();
+
 	await vite.build({
+		...user_config,
+		configFile: false,
 		root: cwd,
 		base,
 		build: {
+			target: 'es2018',
+			...user_config.build,
 			ssr: true,
 			lib: {
 				entry: app_file,
 				name: 'app',
 				formats: ['es']
 			},
-			outDir: `${output_dir}/server`,
-			target: 'es2018'
+			outDir: `${output_dir}/server`
 		},
 		resolve: {
+			...user_config.resolve,
 			alias: {
+				...(user_config.resolve && user_config.resolve.alias),
 				$app: path.resolve(`${build_dir}/runtime/app`),
 				$lib: config.kit.files.lib
 			}
 		},
 		plugins: [
+			...(user_config.plugins || []),
 			svelte({
 				extensions: config.extensions
 			})
@@ -399,7 +417,12 @@ async function build_server(
 		// so we need to ignore the fact that it's missing
 		// @ts-ignore
 		ssr: {
-			noExternal: ['svelte', '@sveltejs/kit']
+			...user_config.ssr,
+			noExternal: [
+				'svelte',
+				'@sveltejs/kit',
+				...((user_config.ssr && user_config.ssr.noExternal) || [])
+			]
 		},
 		optimizeDeps: {
 			entries: []
@@ -457,16 +480,23 @@ async function build_service_worker(
 			.trim()
 	);
 
+	/** @type {any} */
+	const user_config = config.kit.vite();
+
 	await vite.build({
+		...user_config,
+		configFile: false,
 		root: cwd,
 		base,
 		build: {
+			...user_config.build,
 			lib: {
 				entry: service_worker_entry_file,
 				name: 'app',
 				formats: ['es']
 			},
 			rollupOptions: {
+				...(user_config.build && user_config.build.rollupOptions),
 				output: {
 					entryFileNames: 'service-worker.js'
 				}
@@ -475,7 +505,9 @@ async function build_service_worker(
 			emptyOutDir: false
 		},
 		resolve: {
+			...user_config.resolve,
 			alias: {
+				...(user_config.resolve && user_config.resolve.alias),
 				'$service-worker': path.resolve(`${build_dir}/runtime/service-worker`)
 			}
 		},