@sveltejs/kit 3.0.0-next.10 → 3.0.0-next.12

package/src/core/sync/sync.js

@@ -1,11 +1,9 @@
 import path from 'node:path';
-import process from 'node:process';
 import create_manifest_data from './create_manifest_data/index.js';
 import { write_client_manifest } from './write_client_manifest.js';
-import { write_tsconfig } from './write_tsconfig.js';
+import { write_tsconfig } from './write_tsconfig/index.js';
 import { write_types, write_all_types } from './write_types/index.js';
-import { write_ambient } from './write_ambient.js';
-import { write_non_ambient } from './write_non_ambient.js';
+import { write_app_types } from './write_app_types.js';
 import { write_server } from './write_server.js';
 import {
 	create_node_analyser,
@@ -21,7 +19,6 @@ import { write_env } from './write_env.js';
  */
 export function init(config, root) {
 	write_tsconfig(config.kit, root);
-	write_ambient(config.kit);
 }
 
 /**
@@ -37,7 +34,7 @@ export function create(config, root) {
 	write_client_manifest(config.kit, manifest_data, `${output}/client`);
 	write_server(config, output, root);
 	write_all_types(config, manifest_data, root);
-	write_non_ambient(config.kit, manifest_data);
+	write_app_types(config.kit, manifest_data, root);
 
 	return { manifest_data };
 }
@@ -65,7 +62,7 @@ export function update(config, manifest_data, file, root) {
 	}
 
 	write_types(config, manifest_data, file, root);
-	write_non_ambient(config.kit, manifest_data);
+	write_app_types(config.kit, manifest_data, root);
 }
 
 /**
@@ -81,13 +78,13 @@ export function all(config, root) {
 /**
  * Run sync.init and then generate all type files.
  * @param {import('types').ValidatedConfig} config
+ * @param {string} root
  */
-export function all_types(config) {
-	const cwd = process.cwd();
-	init(config, cwd);
-	const manifest_data = create_manifest_data({ config, cwd });
-	write_all_types(config, manifest_data, cwd);
-	write_non_ambient(config.kit, manifest_data);
+export function all_types(config, root) {
+	init(config, root);
+	const manifest_data = create_manifest_data({ config, cwd: root });
+	write_all_types(config, manifest_data, root);
+	write_app_types(config.kit, manifest_data, root);
 }
 
 /**
@@ -100,7 +97,7 @@ export function all_types(config) {
 export async function env(kit, entry, root, mode) {
 	const env_config = await load_explicit_env(kit, entry, root, mode);
 
-	write_env(kit, entry, env_config);
+	write_env(entry, env_config, root);
 
 	return env_config;
 }

package/src/core/sync/utils.js

@@ -1,6 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { mkdirp } from '../../utils/filesystem.js';
+import { styleText } from 'node:util';
+import { mkdirp, resolve_entry } from '../../utils/filesystem.js';
 
 /** @type {Map<string, string>} */
 const previous_contents = new Map();
@@ -68,3 +69,22 @@ export function dedent(strings, ...values) {
 
 	return str;
 }
+
+/**
+ * @param {string} original
+ * @param {string} typo The common misspelling to check for
+ * @param {string} description What was wrong with the filename
+ */
+export function check_spelling(original, typo, description) {
+	const misspelled = resolve_entry(typo);
+	if (!misspelled) return;
+
+	const corrected = path.basename(misspelled).replace(path.basename(typo), path.basename(original));
+
+	console.warn(
+		styleText(
+			['bold', 'yellow'],
+			`${description}. Did you mean ${corrected}?` + ` at ${path.resolve(misspelled)}`
+		)
+	);
+}

package/src/core/sync/{write_non_ambient.js → write_app_types.js}

@@ -22,10 +22,6 @@ const remove_group_segments = (/** @type {string} */ id) => {
  * @returns {string[]}
  */
 function get_pathnames_for_trailing_slash(pathname, route) {
-	if (pathname === '/') {
-		return [pathname];
-	}
-
 	/** @type {Set<string>} */
 	const pathnames = new Set();
 
@@ -55,8 +51,6 @@ function get_pathnames_for_trailing_slash(pathname, route) {
 // people could use to type their own components.
 // The T generic is needed or else there's a "all declarations must have identical type parameters" error.
 const template = `
-${GENERATED_COMMENT}
-
 declare module "svelte/elements" {
 	export interface HTMLAttributes<T> {
 		'data-sveltekit-keepfocus'?: true | false | '' | undefined | null;
@@ -76,16 +70,15 @@ declare module "svelte/elements" {
 		'data-sveltekit-replacestate'?: true | false | '' | undefined | null;
 	}
 }
-
-export {};
 `;
 
 /**
  * Generate app types interface extension
  * @param {import('types').ManifestData} manifest_data
  * @param {import('types').ValidatedKitConfig} config
+ * @param {string} dir
  */
-function generate_app_types(manifest_data, config) {
+function generate_app_types(manifest_data, config, dir) {
 	/** @type {Map<string, string>} */
 	const matcher_types = new Map();
 
@@ -100,7 +93,7 @@ function generate_app_types(manifest_data, config) {
 					resolve_entry(config.files.params) ??
 					config.files.params.replace(/\.(js|ts)$/, '') + '.js';
 
-				return posixify(path.relative(config.outDir, params_file));
+				return posixify(path.relative(dir, params_file));
 			};
 
 			type = `import('@sveltejs/kit').MatcherParam<(typeof import('${path_to_params()}').params)[${JSON.stringify(matcher)}]>`;
@@ -201,7 +194,7 @@ function generate_app_types(manifest_data, config) {
 
 	for (const route of manifest_data.routes) {
 		const pathname = remove_group_segments(route.id);
-		let normalized_pathname = pathname;
+		let normalized_pathname = pathname.slice(1);
 
 		/** @type {(path: string) => string} */
 		let serialise = s;
@@ -215,7 +208,7 @@ function generate_app_types(manifest_data, config) {
 
 			dynamic_routes.push(route_type);
 
-			normalized_pathname = replace_required_params(replace_optional_params(pathname));
+			normalized_pathname = replace_required_params(replace_optional_params(pathname)).slice(1);
 			serialise = (p) => `\`${p}\` & {}`;
 		}
 
@@ -240,7 +233,7 @@ function generate_app_types(manifest_data, config) {
 		layouts.push(`${s(route.id)}: ${layout_type}`);
 	}
 
-	const assets = manifest_data.assets.map((asset) => s('/' + asset.file));
+	const assets = manifest_data.assets.map((asset) => s(asset.file));
 
 	return [
 		'declare module "$app/types" {',
@@ -248,22 +241,31 @@ function generate_app_types(manifest_data, config) {
 		`\t\tRouteId(): ${manifest_data.routes.map((r) => s(r.id)).join(' | ')};`,
 		`\t\tRouteParams(): {\n\t\t\t${dynamic_routes.join(';\n\t\t\t')}\n\t\t};`,
 		`\t\tLayoutParams(): {\n\t\t\t${layouts.join(';\n\t\t\t')}\n\t\t};`,
-		`\t\tPathname(): ${Array.from(pathnames).join(' | ')};`,
-		'\t\tResolvedPathname(): `${"" | `/${string}`}${ReturnType<AppTypes[\'Pathname\']>}`;',
-		`\t\tAsset(): ${assets.concat('string & {}').join(' | ')};`,
+		`\t\tPath(): ${Array.from(pathnames).join(' | ')};`,
+		'\t\tResolvedPathname(): `${"/" | `/${string}/`}${ReturnType<AppTypes[\'Path\']>}`;',
+		`\t\tAssetPath(): ${assets.join(' | ') || 'never'};`,
 		'\t}',
 		'}'
 	].join('\n');
 }
 
 /**
- * Writes non-ambient declarations to the output directory
+ * Writes `node_modules/$app/types/index.d.ts`. This file contains
+ * declarations for `$app/types` and `svelte/elements`, and
+ * imports `env.ts` which declares `$app/env/(public|private)`
  * @param {import('types').ValidatedKitConfig} config
  * @param {import('types').ManifestData} manifest_data
+ * @param {string} root
  */
-export function write_non_ambient(config, manifest_data) {
-	const app_types = generate_app_types(manifest_data, config);
-	const content = [template, app_types].join('\n\n');
+export function write_app_types(config, manifest_data, root) {
+	const dir = path.join(root, 'node_modules/$app/types');
+
+	const content = [
+		GENERATED_COMMENT,
+		`import '@sveltejs/kit';\nimport './env';`,
+		generate_app_types(manifest_data, config, dir),
+		template.trim()
+	].join('\n\n');
 
-	write_if_changed(path.join(config.outDir, 'non-ambient.d.ts'), content);
+	write_if_changed(path.join(dir, 'index.d.ts'), content);
 }

package/src/core/sync/write_client_manifest.js

@@ -1,8 +1,6 @@
-import path from 'node:path';
-import { styleText } from 'node:util';
+import { check_spelling, dedent, write_if_changed } from './utils.js';
 import { relative_path, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
-import { dedent, write_if_changed } from './utils.js';
 
 /**
  * Writes the client manifest to disk. The manifest is used to power the router. It contains the
@@ -123,15 +121,9 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 	const client_hooks_file = resolve_entry(kit.files.hooks.client);
 	const universal_hooks_file = resolve_entry(kit.files.hooks.universal);
 
-	const typo = resolve_entry('src/+hooks.client');
-	if (typo) {
-		console.log(
-			styleText(
-				['bold', 'yellow'],
-				`Unexpected + prefix. Did you mean ${typo.split('/').at(-1)?.slice(1)}?` +
-					` at ${path.resolve(typo)}`
-			)
-		);
+	if (!client_hooks_file) {
+		check_spelling('src/hooks.client', 'src/+hooks.client', 'Unexpected + prefix');
+		check_spelling('src/hooks.client', 'src/hook.client', 'Missing s suffix');
 	}
 
 	// Stringified version of

package/src/core/sync/write_env.js

@@ -10,16 +10,18 @@ const DOCS = '// See https://svelte.dev/docs/kit/environment-variables for more
  * Writes ambient declarations including types reference to @sveltejs/kit,
  * and the existing environment variables in process.env to
  * $env/static/private and $env/static/public
- * @param {import('types').ValidatedKitConfig} kit
  * @param {string | null} entry
  * @param {Record<string, EnvVarConfig<any>> | null} env_config
+ * @param {string} root
  */
-export function write_env(kit, entry, env_config) {
+export function write_env(entry, env_config, root) {
 	const content = [];
-	const out = path.join(kit.outDir, 'env.d.ts');
+
+	const dir = path.join(root, 'node_modules/$app/types');
+	const out = path.join(dir, 'env.d.ts');
 
 	if (entry && env_config) {
-		const relative = posixify(path.relative(kit.outDir, entry));
+		const relative = posixify(path.relative(dir, entry));
 		content.push(
 			`// This file is generated from ${relative}.\n${DOCS}`,
 			create_explicit_env_types(env_config, relative, 'private'),

package/src/core/sync/write_server.js

@@ -1,11 +1,10 @@
 import path from 'node:path';
-import { styleText } from 'node:util';
 import { hash } from '../../utils/hash.js';
 import { resolve_entry } from '../../utils/filesystem.js';
 import { posixify } from '../../utils/os.js';
 import { s } from '../../utils/misc.js';
 import { load_error_page, load_template } from '../config/index.js';
-import { write_if_changed } from './utils.js';
+import { check_spelling, write_if_changed } from './utils.js';
 import { escape_html } from '../../utils/escape.js';
 
 /**
@@ -26,7 +25,7 @@ const server_template = ({
 }) => `
 import { set_building, set_prerendering } from '$app/env/internal';
 import { set_assets } from '$app/paths/internal/server';
-import { set_manifest, set_read_implementation } from '__sveltekit/server';
+import { set_fix_stack_trace, set_manifest, set_read_implementation } from '__sveltekit/server';
 import error from '../shared/error-template.js';
 
 export const options = {
@@ -54,6 +53,7 @@ export const options = {
 			)},
 		error
 	},
+	version: ${s(config.kit.version.name)},
 	version_hash: ${s(hash(config.kit.version.name))}
 };
 
@@ -80,13 +80,9 @@ export async function get_hooks() {
 	};
 }
 
-export { set_assets, set_building, set_manifest, set_prerendering, set_read_implementation };
+export { set_assets, set_building, set_fix_stack_trace, set_manifest, set_prerendering, set_read_implementation };
 `;
 
-// TODO need to re-run this whenever src/app.html or src/error.html are
-// created or changed, or src/service-worker.js is created or deleted.
-// Also, need to check that updating hooks.server.js works
-
 /**
  * Write server configuration to disk
  * @param {import('types').ValidatedConfig} config
@@ -97,15 +93,14 @@ export function write_server(config, output, root) {
 	const server_hooks_file = resolve_entry(config.kit.files.hooks.server);
 	const universal_hooks_file = resolve_entry(config.kit.files.hooks.universal);
 
-	const typo = resolve_entry('src/+hooks.server');
-	if (typo) {
-		console.log(
-			styleText(
-				['bold', 'yellow'],
-				`Unexpected + prefix. Did you mean ${typo.split('/').at(-1)?.slice(1)}?` +
-					` at ${path.resolve(typo)}`
-			)
-		);
+	if (!server_hooks_file) {
+		check_spelling('src/hooks.server', 'src/+hooks.server', 'Unexpected + prefix');
+		check_spelling('src/hooks.server', 'src/hook.server', 'Missing s suffix');
+	}
+
+	if (!universal_hooks_file) {
+		check_spelling('src/hooks', 'src/+hooks', 'Unexpected + prefix');
+		check_spelling('src/hooks', 'src/hook', 'Missing s suffix');
 	}
 
 	/** @param {string} file */

package/src/core/sync/write_tsconfig/index.js

@@ -0,0 +1,245 @@
+/** @import { ValidatedKitConfig } from 'types' */
+import process from 'node:process';
+import fs from 'node:fs';
+import path from 'node:path';
+import ts from 'typescript';
+import { styleText } from 'node:util';
+import { write_if_changed } from '../utils.js';
+import {
+	ESSENTIAL_OPTIONS,
+	extends_id,
+	get_subpath_imports,
+	normalize_config,
+	RECOMMENDED_OPTIONS,
+	remove_trailing_slashstar,
+	validate_resolved_config
+} from './utils.js';
+
+/**
+ * Generates the tsconfig that the user's tsconfig inherits from.
+ * @param {import('types').ValidatedKitConfig} kit
+ * @param {string} root
+ */
+export function write_tsconfig(kit, root) {
+	const paths = get_paths(kit, root);
+
+	write_parent_tsconfig(
+		root,
+		root,
+		'$app/tsconfig',
+		{
+			compilerOptions: {
+				paths,
+				rootDirs: ['.', `${kit.outDir}/types`],
+				types: ['$app/types'],
+
+				// This is required for svelte-package to work as expected
+				// Can be overwritten
+				lib: ['ESNext', 'DOM', 'DOM.Iterable'],
+
+				...ESSENTIAL_OPTIONS,
+				...RECOMMENDED_OPTIONS
+			},
+			exclude: [kit.files.serviceWorker]
+		},
+		{
+			extends: '$app/tsconfig',
+			include: ['src']
+		},
+		kit.typescript.config
+	);
+
+	write_parent_tsconfig(
+		root,
+		kit.files.serviceWorker,
+		'$app/tsconfig/service-worker',
+		{
+			compilerOptions: {
+				paths,
+				types: ['$app/types'],
+				lib: ['ESNext', 'WebWorker'],
+				...ESSENTIAL_OPTIONS
+			}
+		},
+		{
+			extends: '$app/tsconfig/service-worker'
+		}
+	);
+}
+
+/**
+ * Write a generated `tsconfig.json` inside `node_modules`, for the
+ * user config to extend
+ * @param {string} root The project root
+ * @param {string} dir The directory to resolve a user config from
+ * @param {string} id The id of the generated config
+ * @param {any} config The contents of the generated tsconfig, with paths relative to `root`
+ * @param {any} example What to print if the user config does _not_ extend the generated config
+ * @param {ValidatedKitConfig['typescript']['config']} [transform] TODO get rid of this
+ */
+function write_parent_tsconfig(root, dir, id, config, example, transform) {
+	const out_file = path.join(root, `node_modules/${id}/tsconfig.json`);
+
+	let normalized = normalize_config(out_file, config);
+	normalized = transform?.(normalized) ?? normalized;
+
+	write_if_changed(out_file, JSON.stringify(normalized, null, '\t'));
+
+	const user_config = load_user_tsconfig(dir);
+
+	if (user_config && modified_since_last_check(user_config.file)) {
+		// now that we've written the parent config, we can resolve the
+		// user config and validate that nothing important was overwritten
+		if (!extends_id(user_config.options, id)) {
+			console.warn(
+				styleText(
+					['bold', 'yellow'],
+					`${path.relative(process.cwd(), user_config.file)} should extend SvelteKit's built-in configuration:`
+				)
+			);
+
+			console.warn(JSON.stringify(example, null, '  '));
+
+			return;
+		}
+
+		const resolved = ts.parseJsonConfigFileContent(user_config.options, ts.sys, dir).options;
+		const warnings = validate_resolved_config(resolved, config.compilerOptions);
+
+		if (warnings.length > 0) {
+			console.warn(
+				styleText(
+					['bold', 'yellow'],
+					`Found issues while validating ${path.relative(process.cwd(), user_config.file)}`
+				)
+			);
+
+			for (const warning of warnings) {
+				console.warn(`  - ${warning}`);
+			}
+		}
+	}
+}
+
+/** @type {Map<string, number>} */
+const mtimes = new Map();
+
+/**
+ * Returns true if the file was modified since we last got here,
+ * otherwise we can skip warnings
+ * @param {string} file
+ */
+function modified_since_last_check(file) {
+	const a = mtimes.get(file) ?? -1;
+	const b = fs.statSync(file).mtimeMs;
+	mtimes.set(file, b);
+
+	return b > a;
+}
+
+/**
+ * @param {string} cwd
+ * @param {string} file
+ */
+function maybe_file(cwd, file) {
+	const resolved = path.resolve(cwd, file);
+	if (fs.existsSync(resolved)) {
+		return resolved;
+	}
+}
+
+/** @param {string} cwd */
+function load_user_tsconfig(cwd) {
+	const file = maybe_file(cwd, 'tsconfig.json') || maybe_file(cwd, 'jsconfig.json');
+	if (!file) return;
+
+	const options = load_tsconfig(file);
+
+	return {
+		file,
+		kind: path.basename(file),
+		options
+	};
+}
+
+/**
+ * @param {string} file
+ */
+function load_tsconfig(file) {
+	const options = ts.readConfigFile(file, ts.sys.readFile);
+
+	if (options.error) {
+		let message = `Failed to parse TypeScript config`;
+
+		if (typeof options.error.messageText === 'string') {
+			message += `: ${options.error.messageText}`;
+		}
+
+		const error = new Error(message);
+		error.stack = '';
+
+		if (options.error.file && options.error.start !== undefined) {
+			const line_start = options.error.file.text.lastIndexOf('\n', options.error.start);
+
+			const line =
+				line_start === -1
+					? 0
+					: options.error.file.text.slice(0, options.error.start).split('\n').length;
+			const column = options.error.start - line_start;
+
+			error.stack = `${error.message}\n    at ${path.relative(process.cwd(), file)}:${line}:${column}`;
+		}
+
+		throw error;
+	}
+
+	return options.config;
+}
+
+/** Matches anything (except the empty string/string with newline), and separates any trailing `/*` */
+const alias_key = /^(.+?)(\/\*)?$/;
+
+/** Matches anything (except the empty string/string with newline), and separates any trailing `/*` or file extension */
+const alias_value = /^(.+?)((\/\*)|(\.\w+))?$/;
+
+/**
+ * Generates tsconfig path aliases from kit's aliases and the package.json `imports` field.
+ * Related to vite alias creation.
+ *
+ * @param {import('types').ValidatedKitConfig} config
+ * @param {string} root
+ * @returns {Record<string, string[]>}
+ */
+function get_paths(config, root) {
+	const alias = {
+		...config.alias,
+		...get_subpath_imports(root)
+	};
+
+	/** @type {Record<string, string[]>} */
+	const paths = {};
+
+	for (const [key, value] of Object.entries(alias)) {
+		const key_match = alias_key.exec(key);
+		if (!key_match) throw new Error(`Invalid alias key: ${key}`);
+
+		const value_match = alias_value.exec(value);
+		if (!value_match) throw new Error(`Invalid alias value: ${value}`);
+
+		const resolved = path.resolve(root, remove_trailing_slashstar(value));
+		const slashstar = key_match[2];
+
+		if (slashstar) {
+			paths[key] = [resolved + '/*'];
+		} else {
+			paths[key] = [resolved];
+			const fileending = value_match[4];
+
+			if (!fileending && !(key + '/*' in alias)) {
+				paths[key + '/*'] = [resolved + '/*'];
+			}
+		}
+	}
+
+	return paths;
+}