@sveltejs/kit 1.0.0-next.335 → 1.0.0-next.338

package/assets/app/env.js

@@ -12,9 +12,5 @@ const dev = !!import.meta.env.DEV;
  * @type {import('$app/env').mode}
  */
 const mode = import.meta.env.MODE;
-/**
- * @type {import('$app/env').amp}
- */
-const amp = !!import.meta.env.VITE_SVELTEKIT_AMP;
 
-export { amp, browser, dev, mode };
+export { browser, dev, mode };

package/assets/client/start.js

@@ -432,6 +432,33 @@ function update_scroll_positions(index) {
 	scroll_positions[index] = scroll_state();
 }
 
+const fetch$1 = window.fetch;
+let loading = 0;
+
+if (import.meta.env.DEV) {
+	let can_inspect_stack_trace = false;
+
+	const check_stack_trace = async () => {
+		const stack = /** @type {string} */ (new Error().stack);
+		can_inspect_stack_trace = stack.includes('check_stack_trace');
+	};
+
+	check_stack_trace();
+
+	window.fetch = (input, init) => {
+		const url = input instanceof Request ? input.url : input.toString();
+		const stack = /** @type {string} */ (new Error().stack);
+
+		const heuristic = can_inspect_stack_trace ? stack.includes('load_node') : loading;
+		if (heuristic) {
+			console.warn(
+				`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://kit.svelte.dev/docs/loading#input-fetch`
+			);
+		}
+		return fetch$1(input, init);
+	};
+}
+
 /**
  * @param {{
  *   target: Element;
@@ -914,7 +941,18 @@ function create_client({ target, session, base, trailing_slash }) {
 				props: props || {},
 				get url() {
 					node.uses.url = true;
-					return url;
+
+					return new Proxy(url, {
+						get: (target, property) => {
+							if (property === 'hash') {
+								throw new Error(
+									'url.hash is inaccessible from load. Consider accessing hash from the page store within the script tag of your component.'
+								);
+							}
+
+							return Reflect.get(target, property, target);
+						}
+					});
 				},
 				get session() {
 					node.uses.session = true;
@@ -928,7 +966,7 @@ function create_client({ target, session, base, trailing_slash }) {
 					const requested = typeof resource === 'string' ? resource : resource.url;
 					add_dependency(requested);
 
-					return started ? fetch(resource, info) : initial_fetch(resource, info);
+					return started ? fetch$1(resource, info) : initial_fetch(resource, info);
 				},
 				status: status ?? null,
 				error: error ?? null
@@ -943,7 +981,18 @@ function create_client({ target, session, base, trailing_slash }) {
 				});
 			}
 
-			const loaded = await module.load.call(null, load_input);
+			let loaded;
+
+			if (import.meta.env.DEV) {
+				try {
+					loading += 1;
+					loaded = await module.load.call(null, load_input);
+				} finally {
+					loading -= 1;
+				}
+			} else {
+				loaded = await module.load.call(null, load_input);
+			}
 
 			if (!loaded) {
 				throw new Error('load function must return a value');
@@ -1027,7 +1076,7 @@ function create_client({ target, session, base, trailing_slash }) {
 					const is_shadow_page = has_shadow && i === a.length - 1;
 
 					if (is_shadow_page) {
-						const res = await fetch(
+						const res = await fetch$1(
 							`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
 							{
 								headers: {

package/assets/server/index.js

@@ -1272,95 +1272,76 @@ async function render_response({
 		}
 	`;
 
-	if (options.amp) {
-		// inline_style contains CSS files (i.e. `import './styles.css'`)
-		// rendered.css contains the CSS from `<style>` tags in Svelte components
-		const styles = `${inlined_style}\n${rendered.css.code}`;
-		head += `
-		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
-		<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-		<script async src="https://cdn.ampproject.org/v0.js"></script>
-
-		<style amp-custom>${styles}</style>`;
-
-		if (options.service_worker) {
-			head +=
-				'<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>';
+	if (inlined_style) {
+		const attributes = [];
+		if (options.dev) attributes.push(' data-sveltekit');
+		if (csp.style_needs_nonce) attributes.push(` nonce="${csp.nonce}"`);
 
-			body += `<amp-install-serviceworker src="${options.service_worker}" layout="nodisplay"></amp-install-serviceworker>`;
-		}
-	} else {
-		if (inlined_style) {
-			const attributes = [];
-			if (options.dev) attributes.push(' data-sveltekit');
-			if (csp.style_needs_nonce) attributes.push(` nonce="${csp.nonce}"`);
+		csp.add_style(inlined_style);
 
-			csp.add_style(inlined_style);
+		head += `\n\t<style${attributes.join('')}>${inlined_style}</style>`;
+	}
 
-			head += `\n\t<style${attributes.join('')}>${inlined_style}</style>`;
-		}
+	// prettier-ignore
+	head += Array.from(stylesheets)
+		.map((dep) => {
+			const attributes = [
+				'rel="stylesheet"',
+				`href="${options.prefix + dep}"`
+			];
 
-		// prettier-ignore
-		head += Array.from(stylesheets)
-			.map((dep) => {
-				const attributes = [
-					'rel="stylesheet"',
-					`href="${options.prefix + dep}"`
-				];
+			if (csp.style_needs_nonce) {
+				attributes.push(`nonce="${csp.nonce}"`);
+			}
 
-				if (csp.style_needs_nonce) {
-					attributes.push(`nonce="${csp.nonce}"`);
-				}
+			if (styles.has(dep)) {
+				// don't load stylesheets that are already inlined
+				// include them in disabled state so that Vite can detect them and doesn't try to add them
+				attributes.push('disabled', 'media="(max-width: 0)"');
+			}
 
-				if (styles.has(dep)) {
-					// don't load stylesheets that are already inlined
-					// include them in disabled state so that Vite can detect them and doesn't try to add them
-					attributes.push('disabled', 'media="(max-width: 0)"');
-				}
+			return `\n\t<link ${attributes.join(' ')}>`;
+		})
+		.join('');
 
-				return `\n\t<link ${attributes.join(' ')}>`;
-			})
+	if (page_config.router || page_config.hydrate) {
+		head += Array.from(modulepreloads)
+			.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
 			.join('');
 
-		if (page_config.router || page_config.hydrate) {
-			head += Array.from(modulepreloads)
-				.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
-				.join('');
+		const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
 
-			const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
+		csp.add_script(init_app);
 
-			csp.add_script(init_app);
-
-			if (csp.script_needs_nonce) {
-				attributes.push(`nonce="${csp.nonce}"`);
-			}
+		if (csp.script_needs_nonce) {
+			attributes.push(`nonce="${csp.nonce}"`);
+		}
 
-			body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
+		body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
 
-			body += serialized_data
-				.map(({ url, body, response }) =>
-					render_json_payload_script(
-						{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
-						response
-					)
+		body += serialized_data
+			.map(({ url, body, response }) =>
+				render_json_payload_script(
+					{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
+					response
 				)
-				.join('\n\t');
+			)
+			.join('\n\t');
 
-			if (shadow_props) {
-				body += render_json_payload_script({ type: 'props' }, shadow_props);
-			}
+		if (shadow_props) {
+			body += render_json_payload_script({ type: 'props' }, shadow_props);
 		}
+	}
 
-		if (options.service_worker) {
-			// always include service worker unless it's turned off explicitly
-			csp.add_script(init_service_worker);
+	if (options.service_worker) {
+		// always include service worker unless it's turned off explicitly
+		csp.add_script(init_service_worker);
 
-			head += `
-				<script${csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : ''}>${init_service_worker}</script>`;
-		}
+		head += `
+			<script${csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : ''}>${init_service_worker}</script>`;
 	}
 
-	if (state.prerender && !options.amp) {
+	if (state.prerender) {
 		const http_equiv = [];
 
 		const csp_headers = csp.get_meta();

package/dist/chunks/filesystem.js

@@ -13,7 +13,7 @@ function mkdirp(dir) {
 
 /** @param {string} path */
 function rimraf(path) {
-	(fs__default.rmSync || fs__default.rmdirSync)(path, { recursive: true, force: true });
+	fs__default.rmSync(path, { force: true, recursive: true });
 }
 
 /**

package/dist/chunks/index.js

@@ -9,12 +9,12 @@ import { S as SVELTE_KIT_ASSETS, s as sirv } from './constants.js';
 import { installFetch } from '../install-fetch.js';
 import { update, init } from './sync.js';
 import { getRequest, setResponse } from '../node.js';
-import { sequence } from '../hooks.js';
 import { p as posixify } from './filesystem.js';
 import { p as parse_route_id } from './misc.js';
 import 'sade';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'os';
 import 'querystring';
 import 'node:http';
@@ -38,14 +38,6 @@ const style_pattern = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/;
 async function create_plugin(config, cwd) {
 	const runtime = get_runtime_path(config);
 
-	/** @type {import('types').Handle} */
-	let amp;
-
-	if (config.kit.amp) {
-		process.env.VITE_SVELTEKIT_AMP = 'true';
-		amp = (await import('./amp_hook.js')).handle;
-	}
-
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = '0';
 
 	/** @type {import('types').Respond} */
@@ -193,6 +185,11 @@ async function create_plugin(config, cwd) {
 			});
 
 			return () => {
+				const serve_static_middleware = vite.middlewares.stack.find(
+					(middleware) =>
+						/** @type {function} */ (middleware.handle).name === 'viteServeStaticMiddleware'
+				);
+
 				remove_html_middlewares(vite.middlewares);
 
 				vite.middlewares.use(async (req, res) => {
@@ -232,7 +229,7 @@ async function create_plugin(config, cwd) {
 						/** @type {import('types').Hooks} */
 						const hooks = {
 							getSession: user_hooks.getSession || (() => ({})),
-							handle: amp ? sequence(amp, handle) : handle,
+							handle,
 							handleError:
 								user_hooks.handleError ||
 								(({ /** @type {Error & { frame?: string }} */ error }) => {
@@ -294,7 +291,6 @@ async function create_plugin(config, cwd) {
 						const rendered = await respond(
 							request,
 							{
-								amp: config.kit.amp,
 								csp: config.kit.csp,
 								dev: true,
 								floc: config.kit.floc,
@@ -358,10 +354,13 @@ async function create_plugin(config, cwd) {
 							}
 						);
 
-						if (rendered) {
-							setResponse(res, rendered);
+						if (rendered.status === 404) {
+							// @ts-expect-error
+							serve_static_middleware.handle(req, res, () => {
+								setResponse(res, rendered);
+							});
 						} else {
-							not_found(res);
+							setResponse(res, rendered);
 						}
 					} catch (e) {
 						const error = coalesce_to_error(e);
@@ -388,7 +387,8 @@ function remove_html_middlewares(server) {
 	const html_middlewares = [
 		'viteIndexHtmlMiddleware',
 		'vite404Middleware',
-		'viteSpaFallbackMiddleware'
+		'viteSpaFallbackMiddleware',
+		'viteServeStaticMiddleware'
 	];
 	for (let i = server.stack.length - 1; i > 0; i--) {
 		// @ts-expect-error using internals until https://github.com/vitejs/vite/pull/4640 is merged
@@ -403,34 +403,38 @@ function remove_html_middlewares(server) {
  * @param {import('vite').ModuleNode} node
  * @param {Set<import('vite').ModuleNode>} deps
  */
-function find_deps(vite, node, deps) {
+async function find_deps(vite, node, deps) {
 	// since `ssrTransformResult.deps` contains URLs instead of `ModuleNode`s, this process is asynchronous.
 	// instead of using `await`, we resolve all branches in parallel.
 	/** @type {Promise<void>[]} */
 	const branches = [];
 
 	/** @param {import('vite').ModuleNode} node */
-	function add(node) {
+	async function add(node) {
 		if (!deps.has(node)) {
 			deps.add(node);
-			branches.push(find_deps(vite, node, deps));
+			await find_deps(vite, node, deps);
 		}
 	}
 
 	/** @param {string} url */
 	async function add_by_url(url) {
-		branches.push(vite.moduleGraph.getModuleByUrl(url).then((node) => node && add(node)));
+		const node = await vite.moduleGraph.getModuleByUrl(url);
+
+		if (node) {
+			await add(node);
+		}
 	}
 
 	if (node.ssrTransformResult) {
 		if (node.ssrTransformResult.deps) {
-			node.ssrTransformResult.deps.forEach(add_by_url);
+			node.ssrTransformResult.deps.forEach((url) => branches.push(add_by_url(url)));
 		}
 	} else {
-		node.importedModules.forEach(add);
+		node.importedModules.forEach((node) => branches.push(add(node)));
 	}
 
-	return Promise.all(branches).then(() => {});
+	await Promise.all(branches);
 }
 
 /**
@@ -464,7 +468,10 @@ async function dev({ cwd, port, host, https, config }) {
 					]
 				},
 				port: 3000,
-				strictPort: true
+				strictPort: true,
+				watch: {
+					ignored: [`${config.kit.outDir}/**`, `!${config.kit.outDir}/generated/**`]
+				}
 			}
 		},
 		await config.kit.vite()
@@ -486,16 +493,13 @@ async function dev({ cwd, port, host, https, config }) {
 		},
 		plugins: [
 			svelte({
-				extensions: config.extensions,
-				// In AMP mode, we know that there are no conditional component imports. In that case, we
-				// don't need to include CSS for components that are imported but unused, so we can just
-				// include rendered CSS.
-				// This would also apply if hydrate and router are both false, but we don't know if one
-				// has been enabled at the page level, so we don't do anything there.
-				emitCss: !config.kit.amp,
+				...config,
+				emitCss: true,
 				compilerOptions: {
+					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
-				}
+				},
+				configFile: false
 			}),
 			await create_plugin(config, cwd)
 		],

package/dist/chunks/index2.js

@@ -14,6 +14,7 @@ import './write_tsconfig.js';
 import 'sade';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'os';
 import 'node:http';
 import 'node:https';
@@ -237,8 +238,6 @@ async function build_client({
 	process.env.VITE_SVELTEKIT_APP_VERSION_FILE = `${config.kit.appDir}/version.json`;
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = `${config.kit.version.pollInterval}`;
 
-	process.env.VITE_SVELTEKIT_AMP = config.kit.amp ? 'true' : '';
-
 	const client_out_dir = `${output_dir}/client/${config.kit.appDir}`;
 
 	/** @type {Record<string, string>} */
@@ -284,16 +283,13 @@ async function build_client({
 		},
 		plugins: [
 			svelte({
-				extensions: config.extensions,
-				// In AMP mode, we know that there are no conditional component imports. In that case, we
-				// don't need to include CSS for components that are imported but unused, so we can just
-				// include rendered CSS.
-				// This would also apply if hydrate and router are both false, but we don't know if one
-				// has been enabled at the page level, so we don't do anything there.
-				emitCss: !config.kit.amp,
+				...config,
+				emitCss: true,
 				compilerOptions: {
+					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
-				}
+				},
+				configFile: false
 			})
 		],
 		// prevent Vite copying the contents of `config.kit.files.assets`,
@@ -369,7 +365,6 @@ export function override(settings) {
 export class Server {
 	constructor(manifest) {
 		this.options = {
-			amp: ${config.kit.amp},
 			csp: ${s(config.kit.csp)},
 			dev: false,
 			floc: ${config.kit.floc},
@@ -549,10 +544,12 @@ async function build_server(
 		},
 		plugins: [
 			svelte({
-				extensions: config.extensions,
+				...config,
 				compilerOptions: {
+					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
-				}
+				},
+				configFile: false
 			})
 		],
 		resolve: {
@@ -576,7 +573,7 @@ async function build_server(
 
 	client.assets.forEach((asset) => {
 		if (asset.fileName.endsWith('.css')) {
-			if (config.kit.amp || asset.source.length < config.kit.inlineStyleThreshold) {
+			if (asset.source.length < config.kit.inlineStyleThreshold) {
 				const index = stylesheet_lookup.size;
 				const file = `${output_dir}/server/stylesheets/${index}.js`;
 

package/dist/chunks/index4.js

@@ -6,6 +6,7 @@ import 'fs';
 import 'path';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'url';
 import 'os';
 import './misc.js';

package/dist/chunks/index6.js

@@ -15549,7 +15549,7 @@ async function build(config, cwd = process.cwd()) {
 	mkdirp(dir);
 
 	// Make sure generated tsconfig is up-to-date
-	write_tsconfig(config);
+	write_tsconfig(config, cwd);
 
 	const files = scan(config);
 

package/dist/chunks/sync.js

@@ -1,13 +1,14 @@
 import path__default from 'path';
 import fs__default from 'fs';
 import { g as get_runtime_path } from '../cli.js';
-import { p as posixify, c as copy } from './filesystem.js';
+import { p as posixify, c as copy, r as rimraf } from './filesystem.js';
 import { p as parse_route_id, s } from './misc.js';
 import { fileURLToPath } from 'url';
 import { w as write_if_changed, t as trim, a as write_tsconfig } from './write_tsconfig.js';
 import 'sade';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'os';
 
 /**
@@ -763,6 +764,8 @@ export type Load<
  * @param {import('types').ManifestData} manifest_data
  */
 function write_types(config, manifest_data) {
+	rimraf(`${config.kit.outDir}/types`);
+
 	/** @type {Map<string, { params: string[], type: 'page' | 'endpoint' | 'both' }>} */
 	const shadow_types = new Map();
 
@@ -811,8 +814,11 @@ function write_types(config, manifest_data) {
 
 		content.unshift(header(imports.join(', ')));
 
+		const parts = (key || 'index').split('/');
+		parts.push('__types', /** @type {string} */ (parts.pop()));
+
 		write_if_changed(
-			`${config.kit.outDir}/types/${key || 'index'}.d.ts`,
+			`${config.kit.outDir}/types/${parts.join('/')}.d.ts`,
 			content.join('\n').trim()
 		);
 	});

package/dist/chunks/write_tsconfig.js

@@ -29,11 +29,12 @@ function trim(str) {
 const exists = (file) => fs__default.existsSync(file) && file;
 
 /** @param {import('types').ValidatedConfig} config */
-function write_tsconfig(config) {
+function write_tsconfig(config, cwd = process.cwd()) {
 	const out = path__default.join(config.kit.outDir, 'tsconfig.json');
-	const user_file = exists('tsconfig.json') || exists('jsconfig.json');
+	const user_file =
+		exists(path__default.resolve(cwd, 'tsconfig.json')) || exists(path__default.resolve(cwd, 'jsconfig.json'));
 
-	if (user_file) validate(config, out, user_file);
+	if (user_file) validate(config, cwd, out, user_file);
 
 	/** @param {string} file */
 	const project_relative = (file) => posixify(path__default.relative('.', file));
@@ -97,17 +98,20 @@ function write_tsconfig(config) {
 
 /**
  * @param {import('types').ValidatedConfig} config
+ * @param {string} cwd
  * @param {string} out
  * @param {string} user_file
  */
-function validate(config, out, user_file) {
+function validate(config, cwd, out, user_file) {
 	// we have to eval the file, since it's not parseable as JSON (contains comments)
 	const user_tsconfig_json = fs__default.readFileSync(user_file, 'utf-8');
 	const user_tsconfig = (0, eval)(`(${user_tsconfig_json})`);
 
 	// we need to check that the user's tsconfig extends the framework config
 	const extend = user_tsconfig.extends;
-	const extends_framework_config = extend && path__default.resolve('.', extend) === out;
+	const extends_framework_config = extend && path__default.resolve(cwd, extend) === out;
+
+	const kind = path__default.basename(user_file);
 
 	if (extends_framework_config) {
 		const { paths: user_paths } = user_tsconfig.compilerOptions || {};
@@ -119,16 +123,16 @@ function validate(config, out, user_file) {
 			const lib_ = user_paths['$lib/*'] || [];
 
 			const missing_lib_paths =
-				!lib.some((relative) => path__default.resolve('.', relative) === config.kit.files.lib) ||
+				!lib.some((relative) => path__default.resolve(cwd, relative) === config.kit.files.lib) ||
 				!lib_.some(
-					(relative) => path__default.resolve('.', relative) === path__default.join(config.kit.files.lib, '/*')
+					(relative) => path__default.resolve(cwd, relative) === path__default.join(config.kit.files.lib, '/*')
 				);
 
 			if (missing_lib_paths) {
 				console.warn(
 					$
 						.bold()
-						.yellow(`Your compilerOptions.paths in ${user_file} should include the following:`)
+						.yellow(`Your compilerOptions.paths in ${kind} should include the following:`)
 				);
 				const relative = posixify(path__default.relative('.', config.kit.files.lib));
 				console.warn(`{\n  "$lib":["${relative}"],\n  "$lib/*":["${relative}/*"]\n}`);
@@ -139,9 +143,7 @@ function validate(config, out, user_file) {
 		if (!relative.startsWith('./')) relative = './' + relative;
 
 		console.warn(
-			$
-				.bold()
-				.yellow(`Your ${user_file} should extend the configuration generated by SvelteKit:`)
+			$.bold().yellow(`Your ${kind} should extend the configuration generated by SvelteKit:`)
 		);
 		console.warn(`{\n  "extends": "${relative}"\n}`);
 	}