@sveltejs/kit 2.50.1 → 2.51.0

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',
@@ -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
 				});
@@ -1808,6 +1811,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))
 	);
@@ -3013,20 +3021,12 @@ 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
 				// the scroll position after setting the sequential focus navigation starting point
@@ -3102,8 +3102,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 +3124,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'];
@@ -138,14 +147,20 @@ class BaseProvider {
 		}
 
 		/** @param {(import('types').Csp.Source | import('types').Csp.ActionSource)[] | undefined} directive */
-		const needs_csp = (directive) =>
+		const style_needs_csp = (directive) =>
 			!!directive && !directive.some((value) => value === 'unsafe-inline');
 
-		this.#script_src_needs_csp = needs_csp(effective_script_src);
-		this.#script_src_elem_needs_csp = needs_csp(script_src_elem);
-		this.#style_src_needs_csp = needs_csp(effective_style_src);
-		this.#style_src_attr_needs_csp = needs_csp(style_src_attr);
-		this.#style_src_elem_needs_csp = needs_csp(style_src_elem);
+		/** @param {(import('types').Csp.Source | import('types').Csp.ActionSource)[] | undefined} directive */
+		const script_needs_csp = (directive) =>
+			!!directive &&
+			(!directive.some((value) => value === 'unsafe-inline') ||
+				directive.some((value) => value === 'strict-dynamic'));
+
+		this.#script_src_needs_csp = script_needs_csp(effective_script_src);
+		this.#script_src_elem_needs_csp = script_needs_csp(script_src_elem);
+		this.#style_src_needs_csp = style_needs_csp(effective_style_src);
+		this.#style_src_attr_needs_csp = style_needs_csp(style_src_attr);
+		this.#style_src_elem_needs_csp = style_needs_csp(style_src_elem);
 
 		this.#script_needs_csp = this.#script_src_needs_csp || this.#script_src_elem_needs_csp;
 		this.#style_needs_csp =
@@ -156,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;
 	}
@@ -168,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);
+			}
 		}
 	}
 
@@ -184,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) {
@@ -201,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);
 			}
 		}
 	}
@@ -224,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
@@ -345,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;
 	}
@@ -359,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
 		});

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

@@ -80,17 +80,11 @@ export async function render_response({
 	 */
 	const link_headers = new Set();
 
-	/**
-	 * `<link>` tags that are added to prerendered responses
-	 * (note that stylesheets are always added, prerendered or not)
-	 * @type {Set<string>}
-	 */
-	const link_tags = new Set();
-
 	/** @type {Map<string, string>} */
 	// TODO if we add a client entry point one day, we will need to include inline_styles with the entry, otherwise stylesheets will be linked even if they are below inlineStyleThreshold
 	const inline_styles = new Map();
 
+	/** @type {ReturnType<typeof options.root.render>} */
 	let rendered;
 
 	const form_value =
@@ -110,6 +104,10 @@ export async function render_response({
 	 */
 	let base_expression = s(paths.base);
 
+	const csp = new Csp(options.csp, {
+		prerender: !!state.prerendering
+	});
+
 	// if appropriate, use relative paths for greater portability
 	if (paths.relative) {
 		if (!state.prerendering?.fallback) {
@@ -177,7 +175,8 @@ export async function render_response({
 						page: props.page
 					}
 				]
-			])
+			]),
+			csp: csp.script_needs_nonce ? { nonce: csp.nonce } : { hash: csp.script_needs_hash }
 		};
 
 		const fetch = globalThis.fetch;
@@ -227,9 +226,15 @@ export async function render_response({
 					paths.reset();
 				}
 
-				const { head, html, css } = options.async ? await rendered : rendered;
+				const { head, html, css, hashes } = /** @type {ReturnType<typeof options.root.render>} */ (
+					options.async ? await rendered : rendered
+				);
+
+				if (hashes) {
+					csp.add_script_hashes(hashes.script);
+				}
 
-				return { head, html, css };
+				return { head, html, css, hashes };
 			});
 		} finally {
 			if (DEV) {
@@ -245,20 +250,23 @@ export async function render_response({
 			for (const url of node.fonts) fonts.add(url);
 
 			if (node.inline_styles && !client.inline) {
-				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
+				Object.entries(await node.inline_styles()).forEach(([filename, css]) => {
+					if (typeof css === 'string') {
+						inline_styles.set(filename, css);
+						return;
+					}
+
+					inline_styles.set(filename, css(`${assets}/${paths.app_dir}/immutable/assets`, assets));
+				});
 			}
 		}
 	} else {
-		rendered = { head: '', html: '', css: { code: '', map: null } };
+		rendered = { head: '', html: '', css: { code: '', map: null }, hashes: { script: [] } };
 	}
 
-	let head = '';
+	const head = new Head(rendered.head, !!state.prerendering);
 	let body = rendered.html;
 
-	const csp = new Csp(options.csp, {
-		prerender: !!state.prerendering
-	});
-
 	/** @param {string} path */
 	const prefixed = (path) => {
 		if (path.startsWith('/')) {
@@ -276,12 +284,10 @@ export async function render_response({
 		: Array.from(inline_styles.values()).join('\n');
 
 	if (style) {
-		const attributes = DEV ? [' data-sveltekit'] : [];
-		if (csp.style_needs_nonce) attributes.push(` nonce="${csp.nonce}"`);
-
+		const attributes = DEV ? ['data-sveltekit'] : [];
+		if (csp.style_needs_nonce) attributes.push(`nonce="${csp.nonce}"`);
 		csp.add_style(style);
-
-		head += `\n\t<style${attributes.join('')}>${style}</style>`;
+		head.add_style(style, attributes);
 	}
 
 	for (const dep of stylesheets) {
@@ -299,7 +305,7 @@ export async function render_response({
 			}
 		}
 
-		head += `\n\t\t<link href="${path}" ${attributes.join(' ')}>`;
+		head.add_stylesheet(path, attributes);
 	}
 
 	for (const dep of fonts) {
@@ -308,7 +314,7 @@ export async function render_response({
 		if (resolve_opts.preload({ type: 'font', path })) {
 			const ext = dep.slice(dep.lastIndexOf('.') + 1);
 
-			link_tags.add(`<link rel="preload" as="font" type="font/${ext}" href="${path}" crossorigin>`);
+			head.add_link_tag(path, ['rel="preload"', 'as="font"', `type="font/${ext}"`, 'crossorigin']);
 
 			link_headers.add(
 				`<${encodeURI(path)}>; rel="preload"; as="font"; type="font/${ext}"; crossorigin; nopush`
@@ -344,19 +350,13 @@ export async function render_response({
 				link_headers.add(`<${encodeURI(path)}>; rel="modulepreload"; nopush`);
 
 				if (options.preload_strategy !== 'modulepreload') {
-					head += `\n\t\t<link rel="preload" as="script" crossorigin="anonymous" href="${path}">`;
+					head.add_script_preload(path);
 				} else {
-					link_tags.add(`<link rel="modulepreload" href="${path}">`);
+					head.add_link_tag(path, ['rel="modulepreload"']);
 				}
 			}
 		}
 
-		if (state.prerendering && link_tags.size > 0) {
-			head += Array.from(link_tags)
-				.map((tag) => `\n\t\t${tag}`)
-				.join('');
-		}
-
 		// prerender a `/path/to/page/__route.js` module
 		if (manifest._.client.routes && state.prerendering && !state.prerendering.fallback) {
 			const pathname = add_resolution_suffix(event.url.pathname);
@@ -574,19 +574,15 @@ export async function render_response({
 
 	if (state.prerendering) {
 		// TODO read headers set with setHeaders and convert into http-equiv where possible
-		const http_equiv = [];
-
 		const csp_headers = csp.csp_provider.get_meta();
 		if (csp_headers) {
-			http_equiv.push(csp_headers);
+			head.add_http_equiv(csp_headers);
 		}
 
 		if (state.prerendering.cache) {
-			http_equiv.push(`<meta http-equiv="cache-control" content="${state.prerendering.cache}">`);
-		}
-
-		if (http_equiv.length > 0) {
-			head = http_equiv.join('\n') + head;
+			head.add_http_equiv(
+				`<meta http-equiv="cache-control" content="${state.prerendering.cache}">`
+			);
 		}
 	} else {
 		const csp_header = csp.csp_provider.get_header();
@@ -603,11 +599,8 @@ export async function render_response({
 		}
 	}
 
-	// add the content after the script/css links so the link elements are parsed first
-	head += rendered.head;
-
 	const html = options.templates.app({
-		head,
+		head: head.build(),
 		body,
 		assets,
 		nonce: /** @type {string} */ (csp.nonce),
@@ -665,3 +658,78 @@ export async function render_response({
 				}
 			);
 }
+
+class Head {
+	#rendered;
+	#prerendering;
+	/** @type {string[]} */
+	#http_equiv = [];
+	/** @type {string[]} */
+	#link_tags = [];
+	/** @type {string[]} */
+	#script_preloads = [];
+	/** @type {string[]} */
+	#style_tags = [];
+	/** @type {string[]} */
+	#stylesheet_links = [];
+
+	/**
+	 * @param {string} rendered
+	 * @param {boolean} prerendering
+	 */
+	constructor(rendered, prerendering) {
+		this.#rendered = rendered;
+		this.#prerendering = prerendering;
+	}
+
+	build() {
+		return [
+			...this.#http_equiv,
+			...this.#link_tags,
+			...this.#script_preloads,
+			this.#rendered,
+			...this.#style_tags,
+			...this.#stylesheet_links
+		].join('\n\t\t');
+	}
+
+	/**
+	 * @param {string} style
+	 * @param {string[]} attributes
+	 */
+	add_style(style, attributes) {
+		this.#style_tags.push(
+			`<style${attributes.length ? ' ' + attributes.join(' ') : ''}>${style}</style>`
+		);
+	}
+
+	/**
+	 * @param {string} href
+	 * @param {string[]} attributes
+	 */
+	add_stylesheet(href, attributes) {
+		this.#stylesheet_links.push(`<link href="${href}" ${attributes.join(' ')}>`);
+	}
+
+	/** @param {string} href */
+	add_script_preload(href) {
+		this.#script_preloads.push(
+			`<link rel="preload" as="script" crossorigin="anonymous" href="${href}">`
+		);
+	}
+
+	/**
+	 * @param {string} href
+	 * @param {string[]} attributes
+	 */
+	add_link_tag(href, attributes) {
+		if (!this.#prerendering) return;
+		this.#link_tags.push(`<link href="${href}" ${attributes.join(' ')}>`);
+	}
+
+	/** @param {string} tag */
+	add_http_equiv(tag) {
+		if (!this.#prerendering) return;
+		this.#http_equiv.push(tag);
+	}
+}

package/src/runtime/server/remote.js

@@ -73,23 +73,12 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 			/** @type {{ payloads: string[] }} */
 			const { payloads } = await event.request.json();
 
-			const args = payloads.map((payload) => parse_remote_arg(payload, transport));
-			const get_result = await with_request_store({ event, state }, () => info.run(args));
-			const results = await Promise.all(
-				args.map(async (arg, i) => {
-					try {
-						return { type: 'result', data: get_result(arg, i) };
-					} catch (error) {
-						return {
-							type: 'error',
-							error: await handle_error_and_jsonify(event, state, options, error),
-							status:
-								error instanceof HttpError || error instanceof SvelteKitError ? error.status : 500
-						};
-					}
-				})
+			const args = await Promise.all(
+				payloads.map((payload) => parse_remote_arg(payload, transport))
 			);
 
+			const results = await with_request_store({ event, state }, () => info.run(args, options));
+
 			return json(
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',