@sveltejs/kit 1.21.0 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "description": "The fastest way to build Svelte apps",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
     "dts-buddy": "^0.0.10",
     "marked": "^4.2.3",
     "rollup": "^3.7.0",
-    "svelte": "^4.0.0",
+    "svelte": "^4.0.3",
     "svelte-preprocess": "^5.0.4",
     "typescript": "^4.9.4",
     "vite": "^4.3.6",

package/src/constants.js

@@ -5,3 +5,15 @@
 export const SVELTE_KIT_ASSETS = '/_svelte_kit_assets';
 
 export const GENERATED_COMMENT = '// this file is generated — do not edit it\n';
+
+export const ENDPOINT_METHODS = new Set([
+	'GET',
+	'POST',
+	'PUT',
+	'PATCH',
+	'DELETE',
+	'OPTIONS',
+	'HEAD'
+]);
+
+export const PAGE_METHODS = new Set(['GET', 'POST', 'HEAD']);

package/src/core/postbuild/analyse.js

@@ -13,6 +13,7 @@ import { forked } from '../../utils/fork.js';
 import { should_polyfill } from '../../utils/platform.js';
 import { installPolyfills } from '../../exports/node/polyfills.js';
 import { resolvePath } from '../../exports/index.js';
+import { ENDPOINT_METHODS } from '../../constants.js';
 import { filter_private_env, filter_public_env } from '../../utils/env.js';
 
 export default forked(import.meta.url, analyse);
@@ -92,12 +93,11 @@ async function analyse({ manifest_path, env }) {
 				prerender = mod.prerender;
 			}
 
-			if (mod.GET) api_methods.push('GET');
-			if (mod.POST) api_methods.push('POST');
-			if (mod.PUT) api_methods.push('PUT');
-			if (mod.PATCH) api_methods.push('PATCH');
-			if (mod.DELETE) api_methods.push('DELETE');
-			if (mod.OPTIONS) api_methods.push('OPTIONS');
+			Object.values(mod).forEach((/** @type {import('types').HttpMethod} */ method) => {
+				if (mod[method] && ENDPOINT_METHODS.has(method)) {
+					api_methods.push(method);
+				}
+			});
 
 			config = mod.config;
 			entries = mod.entries;

package/src/exports/public.d.ts

@@ -454,7 +454,7 @@ export interface KitConfig {
 		/**
 		 * SvelteKit will preload the JavaScript modules needed for the initial page to avoid import 'waterfalls', resulting in faster application startup. There
 		 * are three strategies with different trade-offs:
-		 * - `modulepreload` - uses `<link rel="modulepreload">`. This delivers the best results in Chromium-based browsers, but is currently ignored by Firefox and Safari (though support is coming to Safari soon).
+		 * - `modulepreload` - uses `<link rel="modulepreload">`. This delivers the best results in Chromium-based browsers, in Firefox 115+, and Safari 17+. It is ignored in older browsers.
 		 * - `preload-js` - uses `<link rel="preload">`. Prevents waterfalls in Chromium and Safari, but Chromium will parse each module twice (once as a script, once as a module). Causes modules to be requested twice in Firefox. This is a good setting if you want to maximise performance for users on iOS devices at the cost of a very slight degradation for Chromium users.
 		 * - `preload-mjs` - uses `<link rel="preload">` but with the `.mjs` extension which prevents double-parsing in Chromium. Some static webservers will fail to serve .mjs files with a `Content-Type: application/javascript` header, which will cause your application to break. If that doesn't apply to you, this is the option that will deliver the best performance for the largest number of users, until `modulepreload` is more widely supported.
 		 * @default "modulepreload"

package/src/exports/vite/build/utils.js

@@ -90,14 +90,3 @@ export function resolve_symlinks(manifest, file) {
 export function assets_base(config) {
 	return (config.paths.assets || config.paths.base || '.') + '/';
 }
-
-const method_names = new Set(['GET', 'HEAD', 'PUT', 'POST', 'DELETE', 'PATCH', 'OPTIONS']);
-
-// If we'd written this in TypeScript, it could be easy...
-/**
- * @param {string} str
- * @returns {str is import('types').HttpMethod}
- */
-export function is_http_method(str) {
-	return method_names.has(str);
-}

package/src/exports/vite/index.js

@@ -541,8 +541,14 @@ function kit({ svelte_config }) {
 				// see the kit.output.preloadStrategy option for details on why we have multiple options here
 				const ext = kit.output.preloadStrategy === 'preload-mjs' ? 'mjs' : 'js';
 
+				// We could always use a relative asset base path here, but it's better for performance not to.
+				// E.g. Vite generates `new URL('/asset.png', import.meta).href` for a relative path vs just '/asset.png'.
+				// That's larger and takes longer to run and also causes an HTML diff between SSR and client
+				// causing us to do a more expensive hydration check.
+				const client_base = kit.paths.relative || kit.paths.assets ? './' : kit.paths.base || '/';
+
 				new_config = {
-					base: ssr ? assets_base(kit) : './',
+					base: ssr ? assets_base(kit) : client_base,
 					build: {
 						copyPublicDir: !ssr,
 						cssCodeSplit: true,

package/src/runtime/client/client.js

@@ -1,12 +1,21 @@
 import { DEV } from 'esm-env';
 import { onMount, tick } from 'svelte';
 import {
-	make_trackable,
-	decode_pathname,
+	add_data_suffix,
 	decode_params,
-	normalize_path,
-	add_data_suffix
+	decode_pathname,
+	make_trackable,
+	normalize_path
 } from '../../utils/url.js';
+import {
+	initial_fetch,
+	lock_fetch,
+	native_fetch,
+	subsequent_fetch,
+	unlock_fetch
+} from './fetcher.js';
+import { parse } from './parse.js';
+import * as storage from './session-storage.js';
 import {
 	find_anchor,
 	get_base_uri,
@@ -15,25 +24,16 @@ import {
 	is_external_url,
 	scroll_state
 } from './utils.js';
-import * as storage from './session-storage.js';
-import {
-	lock_fetch,
-	unlock_fetch,
-	initial_fetch,
-	subsequent_fetch,
-	native_fetch
-} from './fetcher.js';
-import { parse } from './parse.js';
 
 import { base } from '__sveltekit/paths';
-import { HttpError, Redirect } from '../control.js';
-import { stores } from './singletons.js';
-import { unwrap_promises } from '../../utils/promises.js';
 import * as devalue from 'devalue';
-import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './constants.js';
-import { validate_page_exports } from '../../utils/exports.js';
 import { compact } from '../../utils/array.js';
+import { validate_page_exports } from '../../utils/exports.js';
+import { unwrap_promises } from '../../utils/promises.js';
+import { HttpError, Redirect } from '../control.js';
 import { INVALIDATED_PARAM, validate_depends } from '../shared.js';
+import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY, SNAPSHOT_KEY } from './constants.js';
+import { stores } from './singletons.js';
 
 let errored = false;
 
@@ -1555,9 +1555,7 @@ export function create_client(app, target) {
 
 					update_scroll_positions(current_history_index);
 
-					current.url = url;
-					stores.page.set({ ...page, url });
-					stores.page.notify();
+					update_url(url);
 
 					if (!options.replace_state) return;
 
@@ -1670,6 +1668,14 @@ export function create_client(app, target) {
 						type: 'popstate',
 						delta
 					});
+				} else {
+					// since popstate event is also emitted when an anchor referencing the same
+					// document is clicked, we have to check that the router isn't already handling
+					// the navigation. otherwise we would be updating the page store twice.
+					if (!hash_navigating) {
+						const url = new URL(location.href);
+						update_url(url);
+					}
 				}
 			});
 
@@ -1702,6 +1708,15 @@ export function create_client(app, target) {
 					stores.navigating.set(null);
 				}
 			});
+
+			/**
+			 * @param {URL} url
+			 */
+			function update_url(url) {
+				current.url = url;
+				stores.page.set({ ...page, url });
+				stores.page.notify();
+			}
 		},
 
 		_hydrate: async ({

package/src/runtime/server/endpoint.js

@@ -1,3 +1,4 @@
+import { ENDPOINT_METHODS, PAGE_METHODS } from '../../constants.js';
 import { negotiate } from '../../utils/http.js';
 import { Redirect } from '../control.js';
 import { method_not_allowed } from './utils.js';
@@ -79,8 +80,8 @@ export async function render_endpoint(event, mod, state) {
 export function is_endpoint_request(event) {
 	const { method, headers } = event.request;
 
-	if (method === 'PUT' || method === 'PATCH' || method === 'DELETE' || method === 'OPTIONS') {
-		// These methods exist exclusively for endpoints
+	// These methods exist exclusively for endpoints
+	if (ENDPOINT_METHODS.has(method) && !PAGE_METHODS.has(method)) {
 		return true;
 	}
 

package/src/runtime/server/page/serialize_data.js

@@ -46,7 +46,7 @@ export function serialize_data(fetched, filter, prerendering = false) {
 
 	let cache_control = null;
 	let age = null;
-	let vary = false;
+	let varyAny = false;
 
 	for (const [key, value] of fetched.response.headers) {
 		if (filter(key, value)) {
@@ -54,8 +54,8 @@ export function serialize_data(fetched, filter, prerendering = false) {
 		}
 
 		if (key === 'cache-control') cache_control = value;
-		if (key === 'age') age = value;
-		if (key === 'vary') vary = true;
+		else if (key === 'age') age = value;
+		else if (key === 'vary' && value.trim() === '*') varyAny = true;
 	}
 
 	const payload = {
@@ -89,10 +89,9 @@ export function serialize_data(fetched, filter, prerendering = false) {
 	}
 
 	// Compute the time the response should be cached, taking into account max-age and age.
-	// Do not cache at all if a vary header is present, as this indicates that the cache is
-	// likely to get busted. It would also mean we'd have to add more logic to computing the
-	// selector on the client which results in more code for 99% of people for the 1% who use vary.
-	if (!prerendering && fetched.method === 'GET' && cache_control && !vary) {
+	// Do not cache at all if a `Vary: *` header is present, as this indicates that the
+	// cache is likely to get busted.
+	if (!prerendering && fetched.method === 'GET' && cache_control && !varyAny) {
 		const match = /s-maxage=(\d+)/g.exec(cache_control) ?? /max-age=(\d+)/g.exec(cache_control);
 		if (match) {
 			const ttl = +match[1] - +(age ?? '0');

package/src/runtime/server/respond.js

@@ -5,7 +5,7 @@ import { render_page } from './page/index.js';
 import { render_response } from './page/render.js';
 import { respond_with_error } from './page/respond_with_error.js';
 import { is_form_content_type } from '../../utils/http.js';
-import { handle_fatal_error, redirect_response } from './utils.js';
+import { handle_fatal_error, method_not_allowed, redirect_response } from './utils.js';
 import {
 	decode_pathname,
 	decode_params,
@@ -42,6 +42,10 @@ const default_filter = () => false;
 /** @type {import('types').RequiredResolveOptions['preload']} */
 const default_preload = ({ type }) => type === 'js' || type === 'css';
 
+const page_methods = new Set(['GET', 'HEAD', 'POST']);
+
+const allowed_page_methods = new Set(['GET', 'HEAD', 'OPTIONS']);
+
 /**
  * @param {Request} request
  * @param {import('types').SSROptions} options
@@ -343,7 +347,6 @@ export async function respond(request, options, manifest, state) {
 	}
 
 	/**
-	 *
 	 * @param {import('@sveltejs/kit').RequestEvent} event
 	 * @param {import('@sveltejs/kit').ResolveOptions} [opts]
 	 */
@@ -379,6 +382,8 @@ export async function respond(request, options, manifest, state) {
 			}
 
 			if (route) {
+				const method = /** @type {import('types').HttpMethod} */ (event.request.method);
+
 				/** @type {Response} */
 				let response;
 
@@ -395,13 +400,50 @@ export async function respond(request, options, manifest, state) {
 				} else if (route.endpoint && (!route.page || is_endpoint_request(event))) {
 					response = await render_endpoint(event, await route.endpoint(), state);
 				} else if (route.page) {
-					response = await render_page(event, route.page, options, manifest, state, resolve_opts);
+					if (page_methods.has(method)) {
+						response = await render_page(event, route.page, options, manifest, state, resolve_opts);
+					} else {
+						const allowed_methods = new Set(allowed_page_methods);
+						const node = await manifest._.nodes[route.page.leaf]();
+						if (node?.server?.actions) {
+							allowed_methods.add('POST');
+						}
+
+						if (method === 'OPTIONS') {
+							// This will deny CORS preflight requests implicitly because we don't
+							// add the required CORS headers to the response.
+							response = new Response(null, {
+								status: 204,
+								headers: {
+									allow: Array.from(allowed_methods.values()).join(', ')
+								}
+							});
+						} else {
+							const mod = [...allowed_methods].reduce((acc, curr) => {
+								acc[curr] = true;
+								return acc;
+							}, /** @type {Record<string, any>} */ ({}));
+							response = method_not_allowed(mod, method);
+						}
+					}
 				} else {
 					// a route will always have a page or an endpoint, but TypeScript
 					// doesn't know that
 					throw new Error('This should never happen');
 				}
 
+				// If the route contains a page and an endpoint, we need to add a
+				// `Vary: Accept` header to the response because of browser caching
+				if (request.method === 'GET' && route.page && route.endpoint) {
+					const vary = response.headers
+						.get('vary')
+						?.split(',')
+						?.map((v) => v.trim().toLowerCase());
+					if (!(vary?.includes('accept') || vary?.includes('*'))) {
+						response.headers.append('Vary', 'Accept');
+					}
+				}
+
 				return response;
 			}
 

package/src/runtime/server/utils.js

@@ -4,6 +4,7 @@ import { coalesce_to_error } from '../../utils/error.js';
 import { negotiate } from '../../utils/http.js';
 import { HttpError } from '../control.js';
 import { fix_stack_trace } from '../shared-server.js';
+import { ENDPOINT_METHODS } from '../../constants.js';
 
 /** @param {any} body */
 export function is_pojo(body) {
@@ -34,9 +35,7 @@ export function method_not_allowed(mod, method) {
 
 /** @param {Partial<Record<import('types').HttpMethod, any>>} mod */
 export function allowed_methods(mod) {
-	const allowed = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'].filter(
-		(method) => method in mod
-	);
+	const allowed = Array.from(ENDPOINT_METHODS).filter((method) => method in mod);
 
 	if ('GET' in mod || 'HEAD' in mod) allowed.push('HEAD');
 

package/src/utils/exports.js

@@ -78,6 +78,7 @@ const valid_server_exports = new Set([
 	'PUT',
 	'DELETE',
 	'OPTIONS',
+	'HEAD',
 	'prerender',
 	'trailingSlash',
 	'config',

package/src/version.js

@@ -1,4 +1,4 @@
 // generated during release, do not modify
 
 /** @type {string} */
-export const VERSION = '1.21.0';
+export const VERSION = '1.22.1';

package/types/index.d.ts

@@ -408,7 +408,7 @@ declare module '@sveltejs/kit' {
 			/**
 			 * SvelteKit will preload the JavaScript modules needed for the initial page to avoid import 'waterfalls', resulting in faster application startup. There
 			 * are three strategies with different trade-offs:
-			 * - `modulepreload` - uses `<link rel="modulepreload">`. This delivers the best results in Chromium-based browsers, but is currently ignored by Firefox and Safari (though support is coming to Safari soon).
+			 * - `modulepreload` - uses `<link rel="modulepreload">`. This delivers the best results in Chromium-based browsers, in Firefox 115+, and Safari 17+. It is ignored in older browsers.
 			 * - `preload-js` - uses `<link rel="preload">`. Prevents waterfalls in Chromium and Safari, but Chromium will parse each module twice (once as a script, once as a module). Causes modules to be requested twice in Firefox. This is a good setting if you want to maximise performance for users on iOS devices at the cost of a very slight degradation for Chromium users.
 			 * - `preload-mjs` - uses `<link rel="preload">` but with the `.mjs` extension which prevents double-parsing in Chromium. Some static webservers will fail to serve .mjs files with a `Content-Type: application/javascript` header, which will cause your application to break. If that doesn't apply to you, this is the option that will deliver the best performance for the largest number of users, until `modulepreload` is more widely supported.
 			 * @default "modulepreload"