Make .svelte-kit configurable as outDir

.changeset/forty-terms-peel.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Add config.kit.outDir

documentation/docs/01-routing.md

@@ -83,7 +83,7 @@ export async function get({ params }) {
 
 > All server-side code, including endpoints, has access to `fetch` in case you need to request data from external APIs. Don't worry about the `$lib` import, we'll get to that [later](/docs/modules#$lib).
 
-The type of the `get` function above comes from `./[id].d.ts`, which is a file generated by SvelteKit (in a hidden directory, using the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option) that provides type safety when accessing `params`. See the section on [generated types](/docs/types#generated-types) for more detail.
+The type of the `get` function above comes from `./[id].d.ts`, which is a file generated by SvelteKit (inside your [`outDir`](/docs/configuration#outdir), using the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option) that provides type safety when accessing `params`. See the section on [generated types](/docs/types#generated-types) for more detail.
 
 The job of a [request handler](/docs/types#sveltejs-kit-requesthandler) is to return a `{ status, headers, body }` object representing the response, where `status` is an [HTTP status code](https://httpstatusdogs.com):
 

documentation/docs/13-configuration.md

@@ -43,6 +43,7 @@ const config = {
 			parameter: '_method',
 			allowed: []
 		},
+		outDir: '.svelte-kit',
 		package: {
 			dir: 'package',
 			emitTypes: true,
@@ -170,6 +171,10 @@ See [HTTP Method Overrides](/docs/routing#endpoints-http-method-overrides). An o
 - `parameter` — query parameter name to use for passing the intended method value
 - `allowed` - array of HTTP methods that can be used when overriding the original request method
 
+### outDir
+
+The directory that SvelteKit writes files to during `dev` and `build`. You should exclude this directory from version control.
+
 ### package
 
 Options related to [creating a package](/docs/packaging).

documentation/docs/14-types.md

@@ -71,6 +71,6 @@ export async function get({ params }) {
 </script>
 ```
 
-> For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json`:
+> For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](/docs/configuration#outdir)):
 >
 >     { "extends": ".svelte-kit/tsconfig.json" }

packages/kit/.gitignore

@@ -7,4 +7,5 @@
 /test/**/build
 !/src/core/adapt/fixtures/*/.svelte-kit
 !/test/node_modules
-/test/apps/basics/test/errors.json
+/test/apps/basics/test/errors.json
+.custom-out-dir

packages/kit/src/core/adapt/builder.js

@@ -1,18 +1,16 @@
-import { SVELTE_KIT } from '../constants.js';
 import { copy, rimraf, mkdirp } from '../../utils/filesystem.js';
 import { prerender } from './prerender/prerender.js';
 import { generate_manifest } from '../generate_manifest/index.js';
 
 /**
  * @param {{
- *   cwd: string;
  *   config: import('types').ValidatedConfig;
  *   build_data: import('types').BuildData;
  *   log: import('types').Logger;
  * }} opts
  * @returns {import('types').Builder}
  */
-export function create_builder({ cwd, config, build_data, log }) {
+export function create_builder({ config, build_data, log }) {
 	/** @type {Set<string>} */
 	let prerendered_paths;
 
@@ -118,29 +116,29 @@ export function create_builder({ cwd, config, build_data, log }) {
 		},
 
 		getBuildDirectory(name) {
-			return `${cwd}/${SVELTE_KIT}/${name}`;
+			return `${config.kit.outDir}/${name}`;
 		},
 
 		getClientDirectory() {
-			return `${cwd}/${SVELTE_KIT}/output/client`;
+			return `${config.kit.outDir}/output/client`;
 		},
 
 		getServerDirectory() {
-			return `${cwd}/${SVELTE_KIT}/output/server`;
+			return `${config.kit.outDir}/output/server`;
 		},
 
 		getStaticDirectory() {
 			return config.kit.files.assets;
 		},
 
 		writeClient(dest) {
-			return copy(`${cwd}/${SVELTE_KIT}/output/client`, dest, {
+			return copy(`${config.kit.outDir}/output/client`, dest, {
 				filter: (file) => file[0] !== '.'
 			});
 		},
 
 		writeServer(dest) {
-			return copy(`${cwd}/${SVELTE_KIT}/output/server`, dest, {
+			return copy(`${config.kit.outDir}/output/server`, dest, {
 				filter: (file) => file[0] !== '.'
 			});
 		},
@@ -159,7 +157,6 @@ export function create_builder({ cwd, config, build_data, log }) {
 			const prerendered = await prerender({
 				out: dest,
 				all,
-				cwd,
 				config,
 				build_data,
 				fallback,

packages/kit/src/core/adapt/builder.spec.js

@@ -5,13 +5,13 @@ import * as assert from 'uvu/assert';
 import glob from 'tiny-glob/sync.js';
 import { create_builder } from './builder.js';
 import { fileURLToPath } from 'url';
-import { SVELTE_KIT } from '../constants.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = join(__filename, '..');
 
 test('copy files', () => {
 	const cwd = join(__dirname, 'fixtures/basic');
+	const outDir = join(cwd, '.svelte-kit');
 
 	/** @type {import('types').Config} */
 	const mocked = {
@@ -20,12 +20,12 @@ test('copy files', () => {
 			appDir: '_app',
 			files: {
 				assets: join(__dirname, 'fixtures/basic/static')
-			}
+			},
+			outDir
 		}
 	};
 
 	const builder = create_builder({
-		cwd,
 		config: /** @type {import('types').ValidatedConfig} */ (mocked),
 		// @ts-expect-error
 		build_data: {},
@@ -48,18 +48,12 @@ test('copy files', () => {
 	rmSync(dest, { recursive: true, force: true });
 	builder.writeClient(dest);
 
-	assert.equal(
-		glob('**', { cwd: `${cwd}/${SVELTE_KIT}/output/client` }),
-		glob('**', { cwd: dest })
-	);
+	assert.equal(glob('**', { cwd: `${outDir}/output/client` }), glob('**', { cwd: dest }));
 
 	rmSync(dest, { recursive: true, force: true });
 	builder.writeServer(dest);
 
-	assert.equal(
-		glob('**', { cwd: `${cwd}/${SVELTE_KIT}/output/server` }),
-		glob('**', { cwd: dest })
-	);
+	assert.equal(glob('**', { cwd: `${outDir}/output/server` }), glob('**', { cwd: dest }));
 
 	rmSync(dest, { force: true, recursive: true });
 });

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

@@ -5,15 +5,15 @@ import { create_builder } from './builder.js';
 /**
  * @param {import('types').ValidatedConfig} config
  * @param {import('types').BuildData} build_data
- * @param {{ cwd?: string, verbose: boolean }} opts
+ * @param {{ verbose: boolean }} opts
  */
-export async function adapt(config, build_data, { cwd = process.cwd(), verbose }) {
+export async function adapt(config, build_data, { verbose }) {
 	const { name, adapt } = config.kit.adapter;
 
 	console.log(colors.bold().cyan(`\n> Using ${name}`));
 
 	const log = logger({ verbose });
-	const builder = create_builder({ cwd, config, build_data, log });
+	const builder = create_builder({ config, build_data, log });
 	await adapt(builder);
 
 	log.success('done');

packages/kit/src/core/adapt/prerender/prerender.js

@@ -1,9 +1,8 @@
 import { readFileSync, writeFileSync } from 'fs';
-import { dirname, join, resolve as resolve_path } from 'path';
+import { dirname, join } from 'path';
 import { pathToFileURL, URL } from 'url';
 import { mkdirp } from '../../../utils/filesystem.js';
 import { installFetch } from '../../../install-fetch.js';
-import { SVELTE_KIT } from '../../constants.js';
 import { is_root_relative, normalize_path, resolve } from '../../../utils/url.js';
 import { queue } from './queue.js';
 import { crawl } from './crawl.js';
@@ -41,7 +40,6 @@ const REDIRECT = 3;
 
 /**
  * @param {{
- *   cwd: string;
  *   out: string;
  *   log: Logger;
  *   config: import('types').ValidatedConfig;
@@ -50,7 +48,7 @@ const REDIRECT = 3;
  *   all: boolean; // disregard `export const prerender = true`
  * }} opts
  */
-export async function prerender({ cwd, out, log, config, build_data, fallback, all }) {
+export async function prerender({ out, log, config, build_data, fallback, all }) {
 	/** @type {import('types').Prerendered} */
 	const prerendered = {
 		pages: new Map(),
@@ -65,7 +63,7 @@ export async function prerender({ cwd, out, log, config, build_data, fallback, a
 
 	installFetch();
 
-	const server_root = resolve_path(cwd, `${SVELTE_KIT}/output`);
+	const server_root = join(config.kit.outDir, 'output');
 
 	/** @type {import('types').ServerModule} */
 	const { Server, override } = await import(pathToFileURL(`${server_root}/server/index.js`).href);

packages/kit/src/core/build/build_client.js

@@ -6,7 +6,6 @@ import { print_config_conflicts } from '../config/index.js';
 import { create_app } from '../create_app/index.js';
 import { copy_assets, get_aliases } from '../utils.js';
 import { create_build, find_deps } from './utils.js';
-import { SVELTE_KIT } from '../constants.js';
 import { posixify } from '../../utils/filesystem.js';
 
 /**
@@ -39,7 +38,7 @@ export async function build_client({
 		cwd
 	});
 
-	copy_assets(`${SVELTE_KIT}/runtime`);
+	copy_assets(path.join(config.kit.outDir, 'runtime'));
 
 	process.env.VITE_SVELTEKIT_AMP = config.kit.amp ? 'true' : '';
 

packages/kit/src/core/build/build_server.js

@@ -4,21 +4,21 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { mkdirp, posixify } from '../../utils/filesystem.js';
 import { deep_merge } from '../../utils/object.js';
 import { load_template, print_config_conflicts } from '../config/index.js';
-import { get_aliases, resolve_entry, runtime } from '../utils.js';
+import { get_aliases, get_runtime_path, resolve_entry } from '../utils.js';
 import { create_build, find_deps } from './utils.js';
-import { SVELTE_KIT } from '../constants.js';
 import { s } from '../../utils/misc.js';
 
 /**
  * @param {{
  *   hooks: string;
  *   config: import('types').ValidatedConfig;
  *   has_service_worker: boolean;
+ *   runtime: string;
  *   template: string;
  * }} opts
  * @returns
  */
-const server_template = ({ config, hooks, has_service_worker, template }) => `
+const server_template = ({ config, hooks, has_service_worker, runtime, template }) => `
 import root from '__GENERATED__/root.svelte';
 import { respond } from '${runtime}/server/index.js';
 import { set_paths, assets, base } from '${runtime}/paths.js';
@@ -133,7 +133,7 @@ export async function build_server(
 ) {
 	let hooks_file = resolve_entry(config.kit.files.hooks);
 	if (!hooks_file || !fs.existsSync(hooks_file)) {
-		hooks_file = path.resolve(cwd, `${SVELTE_KIT}/build/hooks.js`);
+		hooks_file = path.join(config.kit.outDir, 'build/hooks.js');
 		fs.writeFileSync(hooks_file, '');
 	}
 
@@ -177,6 +177,7 @@ export async function build_server(
 			config,
 			hooks: app_relative(hooks_file),
 			has_service_worker: service_worker_register && !!service_worker_entry_file,
+			runtime: get_runtime_path(config),
 			template: load_template(cwd, config)
 		})
 	);

packages/kit/src/core/build/build_service_worker.js

@@ -3,7 +3,6 @@ import vite from 'vite';
 import { s } from '../../utils/misc.js';
 import { deep_merge } from '../../utils/object.js';
 import { print_config_conflicts } from '../config/index.js';
-import { SVELTE_KIT } from '../constants.js';
 
 /**
  * @param {{
@@ -32,7 +31,7 @@ export async function build_service_worker(
 		}
 	}
 
-	const service_worker = `${cwd}/${SVELTE_KIT}/generated/service-worker.js`;
+	const service_worker = `${config.kit.outDir}/generated/service-worker.js`;
 
 	fs.writeFileSync(
 		service_worker,

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

@@ -2,8 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { mkdirp, rimraf, posixify } from '../../utils/filesystem.js';
 import create_manifest_data from '../create_manifest_data/index.js';
-import { SVELTE_KIT } from '../constants.js';
-import { runtime, resolve_entry } from '../utils.js';
+import { get_runtime_path, resolve_entry } from '../utils.js';
 import { generate_manifest } from '../generate_manifest/index.js';
 import { build_service_worker } from './build_service_worker.js';
 import { build_client } from './build_client.js';
@@ -17,11 +16,11 @@ import { generate_tsconfig } from '../tsconfig.js';
 export async function build(config) {
 	const cwd = process.cwd(); // TODO is this necessary?
 
-	const build_dir = path.resolve(`${SVELTE_KIT}/build`);
+	const build_dir = path.join(config.kit.outDir, 'build');
 	rimraf(build_dir);
 	mkdirp(build_dir);
 
-	const output_dir = path.resolve(`${SVELTE_KIT}/output`);
+	const output_dir = path.join(config.kit.outDir, 'output');
 	rimraf(output_dir);
 	mkdirp(output_dir);
 
@@ -41,7 +40,7 @@ export async function build(config) {
 			cwd
 		}),
 		output_dir,
-		client_entry_file: path.relative(cwd, `${runtime}/client/start.js`),
+		client_entry_file: path.relative(cwd, `${get_runtime_path(config)}/client/start.js`),
 		service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker),
 		service_worker_register: config.kit.serviceWorker.register
 	};

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

@@ -40,6 +40,8 @@ export async function load_config({ cwd = process.cwd() } = {}) {
 
 	const validated = validate_config(config.default);
 
+	validated.kit.outDir = path.resolve(cwd, validated.kit.outDir);
+
 	validated.kit.files.assets = path.resolve(cwd, validated.kit.files.assets);
 	validated.kit.files.hooks = path.resolve(cwd, validated.kit.files.hooks);
 	validated.kit.files.lib = path.resolve(cwd, validated.kit.files.lib);

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

@@ -71,6 +71,7 @@ const get_defaults = (prefix = '') => ({
 			parameter: '_method',
 			allowed: []
 		},
+		outDir: join(prefix, '.svelte-kit'),
 		package: {
 			dir: 'package',
 			emitTypes: true

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

@@ -142,6 +142,8 @@ const options = object(
 				})
 			}),
 
+			outDir: string('.svelte-kit'),
+
 			package: object({
 				dir: string('package'),
 				// excludes all .d.ts and filename starting with _

packages/kit/src/core/constants.js

@@ -1,5 +1,3 @@
-export const SVELTE_KIT = '.svelte-kit';
-
 // in `svelte-kit dev` and `svelte-kit preview`, we use a fake
 // asset path so that we can serve local assets while still
 // verifying that requests are correctly prefixed

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

@@ -2,7 +2,6 @@ import fs from 'fs';
 import path from 'path';
 import { s } from '../../utils/misc.js';
 import { mkdirp } from '../../utils/filesystem.js';
-import { SVELTE_KIT } from '../constants.js';
 
 /** @type {Map<string, string>} */
 const previous_contents = new Map();
@@ -29,7 +28,7 @@ export function write_if_changed(file, code) {
  * }} options
  */
 export function create_app({ config, manifest_data, cwd = process.cwd() }) {
-	const output = `${SVELTE_KIT}/generated`;
+	const output = path.join(config.kit.outDir, 'generated');
 	const base = path.relative(cwd, output);
 
 	write_if_changed(`${output}/manifest.js`, generate_client_manifest(manifest_data, base));
@@ -248,7 +247,7 @@ function create_types(config, manifest_data) {
 			.filter(Boolean)
 			.join(', ');
 
-		const file = `${SVELTE_KIT}/types/${key || 'index'}.d.ts`;
+		const file = `${config.kit.outDir}/types/${key || 'index'}.d.ts`;
 		const content = [
 			'// this file is auto-generated',
 			`import type { ${imports} } from '@sveltejs/kit';`,