@sveltejs/kit 2.50.2 → 2.52.0

package/src/runtime/app/paths/client.js

@@ -2,6 +2,7 @@
 /** @import { ResolveArgs } from './types.js' */
 import { base, assets, hash_routing } from './internal/client.js';
 import { resolve_route } from '../../../utils/routing.js';
+import { get_navigation_intent } from '../../client/client.js';
 
 /**
  * Resolve the URL of an asset in your `static` directory, by prefixing it with [`config.kit.paths.assets`](https://svelte.dev/docs/kit/configuration#paths) if configured, or otherwise by prefixing it with the base path.
@@ -58,4 +59,41 @@ export function resolve(...args) {
 	);
 }
 
+/**
+ * Match a path or URL to a route ID and extracts any parameters.
+ *
+ * @example
+ * ```js
+ * import { match } from '$app/paths';
+ *
+ * const route = await match('/blog/hello-world');
+ *
+ * if (route?.id === '/blog/[slug]') {
+ * 	const slug = route.params.slug;
+ * 	const response = await fetch(`/api/posts/${slug}`);
+ * 	const post = await response.json();
+ * }
+ * ```
+ * @since 2.52.0
+ *
+ * @param {Pathname | URL | (string & {})} url
+ * @returns {Promise<{ id: RouteId, params: Record<string, string> } | null>}
+ */
+export async function match(url) {
+	if (typeof url === 'string') {
+		url = new URL(url, location.href);
+	}
+
+	const intent = await get_navigation_intent(url, false);
+
+	if (intent) {
+		return {
+			id: /** @type {RouteId} */ (intent.route.id),
+			params: intent.params
+		};
+	}
+
+	return null;
+}
+
 export { base, assets, resolve as resolveRoute };

package/src/runtime/app/paths/public.d.ts

@@ -1,7 +1,7 @@
 import { RouteId, Pathname, ResolvedPathname } from '$app/types';
 import { ResolveArgs } from './types.js';
 
-export { resolve, asset } from './client.js';
+export { resolve, asset, match } from './client.js';
 
 /**
  * A string that matches [`config.kit.paths.base`](https://svelte.dev/docs/kit/configuration#paths).

package/src/runtime/app/paths/server.js

@@ -1,6 +1,9 @@
 import { base, assets, relative, initial_base } from './internal/server.js';
-import { resolve_route } from '../../../utils/routing.js';
+import { resolve_route, find_route } from '../../../utils/routing.js';
+import { decode_pathname } from '../../../utils/url.js';
 import { try_get_request_store } from '@sveltejs/kit/internal/server';
+import { manifest } from '__sveltekit/server';
+import { get_hooks } from '__SERVER__/internal.js';
 
 /** @type {import('./client.js').asset} */
 export function asset(file) {
@@ -27,4 +30,42 @@ export function resolve(id, params) {
 	return base + resolved;
 }
 
+/** @type {import('./client.js').match} */
+export async function match(url) {
+	const store = try_get_request_store();
+
+	if (typeof url === 'string') {
+		const origin = store?.event.url.origin ?? 'http://internal';
+		url = new URL(url, origin);
+	}
+
+	const { reroute } = await get_hooks();
+
+	let resolved_path = url.pathname;
+
+	try {
+		resolved_path = decode_pathname(
+			(await reroute?.({ url: new URL(url), fetch: store?.event.fetch ?? fetch })) ?? url.pathname
+		);
+	} catch {
+		return null;
+	}
+
+	if (base && resolved_path.startsWith(base)) {
+		resolved_path = resolved_path.slice(base.length) || '/';
+	}
+
+	const matchers = await manifest._.matchers();
+	const result = find_route(resolved_path, manifest._.routes, matchers);
+
+	if (result) {
+		return {
+			id: /** @type {import('$app/types').RouteId} */ (result.route.id),
+			params: result.params
+		};
+	}
+
+	return null;
+}
+
 export { base, assets, resolve as resolveRoute };

package/src/runtime/client/client.js

@@ -605,7 +605,8 @@ async function initialize(result, target, hydrate) {
 			to: {
 				params: current.params,
 				route: { id: current.route?.id ?? null },
-				url: new URL(location.href)
+				url: new URL(location.href),
+				scroll: scroll_positions[current_history_index] ?? scroll_state()
 			},
 			willUnload: false,
 			type: 'enter',
@@ -1400,7 +1401,7 @@ async function get_rerouted_url(url) {
  * @param {boolean} invalidating
  * @returns {Promise<import('./types.js').NavigationIntent | undefined>}
  */
-async function get_navigation_intent(url, invalidating) {
+export async function get_navigation_intent(url, invalidating) {
 	if (!url) return;
 	if (is_external_url(url, base, app.hash)) return;
 
@@ -1463,12 +1464,13 @@ function get_page_key(url) {
  *   intent?: import('./types.js').NavigationIntent;
  *   delta?: number;
  *   event?: PopStateEvent | MouseEvent;
+ *   scroll?: { x: number, y: number };
  * }} opts
  */
-function _before_navigate({ url, type, intent, delta, event }) {
+function _before_navigate({ url, type, intent, delta, event, scroll }) {
 	let should_block = false;
 
-	const nav = create_navigation(current, intent, url, type);
+	const nav = create_navigation(current, intent, url, type, scroll ?? null);
 
 	if (delta !== undefined) {
 		nav.navigation.delta = delta;
@@ -1543,6 +1545,7 @@ async function navigate({
 					type,
 					delta: popped?.delta,
 					intent,
+					scroll: popped?.scroll,
 					// @ts-ignore
 					event
 				});
@@ -1758,26 +1761,18 @@ async function navigate({
 	await svelte.tick();
 
 	// we reset scroll before dealing with focus, to avoid a flash of unscrolled content
-	let scroll = popped ? popped.scroll : noscroll ? scroll_state() : null;
+	/** @type {Element | null | ''} */
+	let deep_linked = null;
 
 	if (autoscroll) {
-		const deep_linked = url.hash && document.getElementById(get_id(url));
+		const scroll = popped ? popped.scroll : noscroll ? scroll_state() : null;
 		if (scroll) {
 			scrollTo(scroll.x, scroll.y);
-		} else if (deep_linked) {
+		} else if ((deep_linked = url.hash && document.getElementById(get_id(url)))) {
 			// Here we use `scrollIntoView` on the element instead of `scrollTo`
 			// because it natively supports the `scroll-margin` and `scroll-behavior`
 			// CSS properties.
 			deep_linked.scrollIntoView();
-
-			// Get target position at this point because with smooth scrolling the scroll position
-			// retrieved from current x/y above might be wrong (since we might not have arrived at the destination yet)
-			const { top, left } = deep_linked.getBoundingClientRect();
-
-			scroll = {
-				x: pageXOffset + left,
-				y: pageYOffset + top
-			};
 		} else {
 			scrollTo(0, 0);
 		}
@@ -1791,7 +1786,10 @@ async function navigate({
 		document.activeElement !== document.body;
 
 	if (!keepfocus && !changed_focus) {
-		reset_focus(url, scroll);
+		// We don't need to manually restore the scroll position if we're navigating
+		// to a fragment identifier. It is automatically done for us when we set the
+		// sequential navigation starting point with `location.replace`
+		reset_focus(url, !deep_linked);
 	}
 
 	autoscroll = true;
@@ -1808,6 +1806,11 @@ async function navigate({
 
 	nav.fulfil(undefined);
 
+	// Update to.scroll to the actual scroll position after navigation completed
+	if (nav.navigation.to) {
+		nav.navigation.to.scroll = scroll_state();
+	}
+
 	after_navigate_callbacks.forEach((fn) =>
 		fn(/** @type {import('@sveltejs/kit').AfterNavigate} */ (nav.navigation))
 	);
@@ -2991,9 +2994,9 @@ let resetting_focus = false;
 
 /**
  * @param {URL} url
- * @param {{ x: number, y: number } | null} scroll
+ * @param {boolean} [scroll]
  */
-function reset_focus(url, scroll = null) {
+function reset_focus(url, scroll = true) {
 	const autofocus = document.querySelector('[autofocus]');
 	if (autofocus) {
 		// @ts-ignore
@@ -3005,7 +3008,7 @@ function reset_focus(url, scroll = null) {
 		// starting point to the fragment identifier.
 		const id = get_id(url);
 		if (id && document.getElementById(id)) {
-			const { x, y } = scroll ?? scroll_state();
+			const { x, y } = scroll_state();
 
 			// `element.focus()` doesn't work on Safari and Firefox Ubuntu so we need
 			// to use this hack with `location.replace()` instead.
@@ -3013,24 +3016,16 @@ function reset_focus(url, scroll = null) {
 				const history_state = history.state;
 
 				resetting_focus = true;
-				location.replace(`#${id}`);
+				location.replace(new URL(`#${id}`, location.href));
 
-				// if we're using hash routing, we need to restore the original hash after
-				// setting the focus with `location.replace()`. Although we're calling
-				// `location.replace()` again, the focus won't shift to the new hash
-				// unless there's an element with the ID `/pathname#hash`, etc.
-				if (app.hash) {
-					location.replace(url.hash);
-				}
-
-				// but Firefox has a bug that sets the history state to `null` so we
-				// need to restore it after.
-				// See https://bugzilla.mozilla.org/show_bug.cgi?id=1199924
-				history.replaceState(history_state, '', url.hash);
+				// Firefox has a bug that sets the history state to `null` so we need to
+				// restore it after. See https://bugzilla.mozilla.org/show_bug.cgi?id=1199924
+				// This is also needed to restore the original hash if we're using hash routing
+				history.replaceState(history_state, '', url);
 
-				// Scroll management has already happened earlier so we need to restore
+				// If scroll management has already happened earlier, we need to restore
 				// the scroll position after setting the sequential focus navigation starting point
-				scrollTo(x, y);
+				if (scroll) scrollTo(x, y);
 				resetting_focus = false;
 			});
 		} else {
@@ -3102,8 +3097,9 @@ function reset_focus(url, scroll = null) {
  * @param {import('./types.js').NavigationIntent | undefined} intent
  * @param {URL | null} url
  * @param {T} type
+ * @param {{ x: number, y: number } | null} [target_scroll] The scroll position for the target (for popstate navigations)
  */
-function create_navigation(current, intent, url, type) {
+function create_navigation(current, intent, url, type, target_scroll = null) {
 	/** @type {(value: any) => void} */
 	let fulfil;
 
@@ -3123,12 +3119,14 @@ function create_navigation(current, intent, url, type) {
 		from: {
 			params: current.params,
 			route: { id: current.route?.id ?? null },
-			url: current.url
+			url: current.url,
+			scroll: scroll_state()
 		},
 		to: url && {
 			params: intent?.params ?? null,
 			route: { id: intent?.route?.id ?? null },
-			url
+			url,
+			scroll: target_scroll
 		},
 		willUnload: !intent,
 		type,

package/src/runtime/server/fetch.js

@@ -55,7 +55,12 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 					request.headers.delete('origin');
 				}
 
-				if (url.origin !== event.url.origin) {
+				const decoded = decodeURIComponent(url.pathname);
+
+				if (
+					url.origin !== event.url.origin ||
+					(paths.base && decoded !== paths.base && !decoded.startsWith(`${paths.base}/`))
+				) {
 					// Allow cookie passthrough for "credentials: same-origin" and "credentials: include"
 					// if SvelteKit is serving my.domain.com:
 					// -        domain.com WILL NOT receive cookies
@@ -77,7 +82,6 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 				// handle fetch requests for static assets. e.g. prebaked data, etc.
 				// we need to support everything the browser's fetch supports
 				const prefix = paths.assets || paths.base;
-				const decoded = decodeURIComponent(url.pathname);
 				const filename = (
 					decoded.startsWith(prefix) ? decoded.slice(prefix.length) : decoded
 				).slice(1);

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

@@ -53,21 +53,30 @@ class BaseProvider {
 	/** @type {import('types').CspDirectives} */
 	#directives;
 
-	/** @type {import('types').Csp.Source[]} */
+	/** @type {Set<import('types').Csp.Source>} */
 	#script_src;
 
-	/** @type {import('types').Csp.Source[]} */
+	/** @type {Set<import('types').Csp.Source>} */
 	#script_src_elem;
 
-	/** @type {import('types').Csp.Source[]} */
+	/** @type {Set<import('types').Csp.Source>} */
 	#style_src;
 
-	/** @type {import('types').Csp.Source[]} */
+	/** @type {Set<import('types').Csp.Source>} */
 	#style_src_attr;
 
-	/** @type {import('types').Csp.Source[]} */
+	/** @type {Set<import('types').Csp.Source>} */
 	#style_src_elem;
 
+	/** @type {boolean} */
+	script_needs_nonce;
+
+	/** @type {boolean} */
+	style_needs_nonce;
+
+	/** @type {boolean} */
+	script_needs_hash;
+
 	/** @type {string} */
 	#nonce;
 
@@ -82,11 +91,11 @@ class BaseProvider {
 
 		const d = this.#directives;
 
-		this.#script_src = [];
-		this.#script_src_elem = [];
-		this.#style_src = [];
-		this.#style_src_attr = [];
-		this.#style_src_elem = [];
+		this.#script_src = new Set();
+		this.#script_src_elem = new Set();
+		this.#style_src = new Set();
+		this.#style_src_attr = new Set();
+		this.#style_src_elem = new Set();
 
 		const effective_script_src = d['script-src'] || d['default-src'];
 		const script_src_elem = d['script-src-elem'];
@@ -162,6 +171,7 @@ class BaseProvider {
 
 		this.script_needs_nonce = this.#script_needs_csp && !this.#use_hashes;
 		this.style_needs_nonce = this.#style_needs_csp && !this.#use_hashes;
+		this.script_needs_hash = this.#script_needs_csp && this.#use_hashes;
 
 		this.#nonce = nonce;
 	}
@@ -174,11 +184,23 @@ class BaseProvider {
 		const source = this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
 
 		if (this.#script_src_needs_csp) {
-			this.#script_src.push(source);
+			this.#script_src.add(source);
 		}
 
 		if (this.#script_src_elem_needs_csp) {
-			this.#script_src_elem.push(source);
+			this.#script_src_elem.add(source);
+		}
+	}
+
+	/** @param {`sha256-${string}`[]} hashes */
+	add_script_hashes(hashes) {
+		for (const hash of hashes) {
+			if (this.#script_src_needs_csp) {
+				this.#script_src.add(hash);
+			}
+			if (this.#script_src_elem_needs_csp) {
+				this.#script_src_elem.add(hash);
+			}
 		}
 	}
 
@@ -190,11 +212,11 @@ class BaseProvider {
 		const source = this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
 
 		if (this.#style_src_needs_csp) {
-			this.#style_src.push(source);
+			this.#style_src.add(source);
 		}
 
 		if (this.#style_src_attr_needs_csp) {
-			this.#style_src_attr.push(source);
+			this.#style_src_attr.add(source);
 		}
 
 		if (this.#style_src_elem_needs_csp) {
@@ -207,13 +229,13 @@ class BaseProvider {
 			if (
 				d['style-src-elem'] &&
 				!d['style-src-elem'].includes(sha256_empty_comment_hash) &&
-				!this.#style_src_elem.includes(sha256_empty_comment_hash)
+				!this.#style_src_elem.has(sha256_empty_comment_hash)
 			) {
-				this.#style_src_elem.push(sha256_empty_comment_hash);
+				this.#style_src_elem.add(sha256_empty_comment_hash);
 			}
 
 			if (source !== sha256_empty_comment_hash) {
-				this.#style_src_elem.push(source);
+				this.#style_src_elem.add(source);
 			}
 		}
 	}
@@ -230,35 +252,35 @@ class BaseProvider {
 
 		const directives = { ...this.#directives };
 
-		if (this.#style_src.length > 0) {
+		if (this.#style_src.size > 0) {
 			directives['style-src'] = [
 				...(directives['style-src'] || directives['default-src'] || []),
 				...this.#style_src
 			];
 		}
 
-		if (this.#style_src_attr.length > 0) {
+		if (this.#style_src_attr.size > 0) {
 			directives['style-src-attr'] = [
 				...(directives['style-src-attr'] || []),
 				...this.#style_src_attr
 			];
 		}
 
-		if (this.#style_src_elem.length > 0) {
+		if (this.#style_src_elem.size > 0) {
 			directives['style-src-elem'] = [
 				...(directives['style-src-elem'] || []),
 				...this.#style_src_elem
 			];
 		}
 
-		if (this.#script_src.length > 0) {
+		if (this.#script_src.size > 0) {
 			directives['script-src'] = [
 				...(directives['script-src'] || directives['default-src'] || []),
 				...this.#script_src
 			];
 		}
 
-		if (this.#script_src_elem.length > 0) {
+		if (this.#script_src_elem.size > 0) {
 			directives['script-src-elem'] = [
 				...(directives['script-src-elem'] || []),
 				...this.#script_src_elem
@@ -351,6 +373,10 @@ export class Csp {
 		this.report_only_provider = new CspReportOnlyProvider(use_hashes, reportOnly, this.nonce);
 	}
 
+	get script_needs_hash() {
+		return this.csp_provider.script_needs_hash || this.report_only_provider.script_needs_hash;
+	}
+
 	get script_needs_nonce() {
 		return this.csp_provider.script_needs_nonce || this.report_only_provider.script_needs_nonce;
 	}
@@ -365,6 +391,12 @@ export class Csp {
 		this.report_only_provider.add_script(content);
 	}
 
+	/** @param {`sha256-${string}`[]} hashes */
+	add_script_hashes(hashes) {
+		this.csp_provider.add_script_hashes(hashes);
+		this.report_only_provider.add_script_hashes(hashes);
+	}
+
 	/** @param {string} content */
 	add_style(content) {
 		this.csp_provider.add_style(content);

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

@@ -1,5 +1,5 @@
 import { text } from '@sveltejs/kit';
-import { Redirect } from '@sveltejs/kit/internal';
+import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { compact } from '../../../utils/array.js';
 import { get_status, normalize_error } from '../../../utils/error.js';
 import { add_data_suffix } from '../../pathname.js';
@@ -357,6 +357,11 @@ export async function render_page(
 				ssr === false ? server_data_serializer(event, event_state, options) : data_serializer
 		});
 	} catch (e) {
+		// a remote function could have thrown a redirect during render
+		if (e instanceof Redirect) {
+			return redirect_response(e.status, e.location);
+		}
+
 		// if we end up here, it means the data loaded successfully
 		// but the page failed to render, or that a prerendering error occurred
 		return await respond_with_error({
@@ -365,7 +370,7 @@ export async function render_page(
 			options,
 			manifest,
 			state,
-			status: 500,
+			status: e instanceof HttpError ? e.status : 500,
 			error: e,
 			resolve_opts
 		});