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

package/src/runtime/pathname.js

@@ -47,3 +47,40 @@ export function add_resolution_suffix(pathname) {
 export function strip_resolution_suffix(pathname) {
 	return pathname.slice(0, -ROUTE_SUFFIX.length);
 }
+
+const ROUTES_PREFIX = '/routes';
+
+/**
+ * The pathname of the route-ID-keyed resolution module for a given route ID,
+ * e.g. `/_app/routes/blog/[slug]/__route.js` (before prefixing with `base`).
+ * @param {string} app_dir
+ * @param {string} route_id
+ * @returns {string}
+ */
+export function route_id_resolution_pathname(app_dir, route_id) {
+	return add_resolution_suffix(`/${app_dir}${ROUTES_PREFIX}${route_id === '/' ? '' : route_id}`);
+}
+
+/**
+ * Whether a pathname (with the `/__route.js` suffix already stripped, and `base` NOT yet stripped)
+ * is a route-ID resolution request rather than a pathname resolution request.
+ * @param {string} pathname
+ * @param {string} base
+ * @param {string} app_dir
+ * @returns {boolean}
+ */
+export function is_route_id_resolution_path(pathname, base, app_dir) {
+	const prefix = `${base}/${app_dir}${ROUTES_PREFIX}`;
+	return pathname === prefix || pathname.startsWith(prefix + '/');
+}
+
+/**
+ * Extract the route ID from a decoded, base-stripped, suffix-stripped pathname,
+ * e.g. `/_app/routes/blog/[slug]` -> `/blog/[slug]`, `/_app/routes` -> `/`.
+ * @param {string} pathname
+ * @param {string} app_dir
+ * @returns {string}
+ */
+export function extract_route_id(pathname, app_dir) {
+	return pathname.slice(`/${app_dir}${ROUTES_PREFIX}`.length) || '/';
+}

package/src/runtime/props.svelte.js

@@ -0,0 +1,71 @@
+/** @import { Component } from 'svelte'; */
+/** @import { Page } from '@sveltejs/kit'; */
+
+import { noop } from '../utils/functions.js';
+
+export class Props {
+	/** @type {Page} */
+	page;
+
+	/**
+	 * An array of the `+layout.svelte` and `+page.svelte` component instances
+	 * that currently live on the page — used for capturing and restoring snapshots.
+	 * It's updated/manipulated through `bind:this` in `Root.svelte`.
+	 * @type {Array<Record<string, any>>}
+	 */
+	components = [];
+
+	/** @type {any} */
+	form;
+
+	/** @type {App.Error | undefined} */
+	error;
+
+	/** @type {RenderNode} */
+	tree;
+
+	/** @type {(error: unknown, reset: () => void) => void} */
+	onerror;
+
+	/**
+	 * @param {{
+	 *   page: Page;
+	 *   tree: RenderNode;
+	 *   form: any;
+	 *   error: App.Error | undefined;
+	 *   onerror?: (error: unknown, reset: () => void) => void;
+	 * }} props
+	 */
+	constructor({ page, tree, form, error, onerror = noop }) {
+		this.page = page;
+		this.tree = tree;
+		this.onerror = onerror;
+
+		this.form = $state.raw(form);
+		this.error = $state.raw(error);
+	}
+}
+
+export class RenderNode {
+	/** @type {Component} */
+	component;
+
+	/** @type {Component | undefined} */
+	error;
+
+	/** @type {Record<string, any>} */
+	data = $state.raw({});
+
+	/** @type {RenderNode | undefined} */
+	child = $state.raw();
+
+	/**
+	 *
+	 * @param {Component} component
+	 * @param {Component} error
+	 */
+	constructor(component, error) {
+		this.component = component;
+		this.error = error;
+	}
+}

package/src/runtime/server/fetch.js

@@ -4,6 +4,7 @@ import { respond } from './respond.js';
 import * as paths from '$app/paths/internal/server';
 import { read_implementation } from './internal.js';
 import { has_prerendered_path } from './utils.js';
+import { fork_state_for_subrequest } from './state.js';
 
 /**
  * @param {{
@@ -117,7 +118,7 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 					return await fetch(request);
 				}
 
-				if (has_prerendered_path(manifest, paths.base + decoded)) {
+				if (has_prerendered_path(manifest, decoded)) {
 					// The path of something prerendered could match a different route
 					// that is still in the manifest, leading to the wrong route being loaded.
 					// We therefore bail early here. The prerendered logic is different for
@@ -142,11 +143,9 @@ export function create_fetch({ event, options, manifest, state, get_cookie_heade
 					request.headers.set('accept', '*/*');
 				}
 
-				if (!request.headers.has('accept-language')) {
-					request.headers.set(
-						'accept-language',
-						/** @type {string} */ (event.request.headers.get('accept-language'))
-					);
+				const accept_language = event.request.headers.get('accept-language');
+				if (accept_language && !request.headers.has('accept-language')) {
+					request.headers.set('accept-language', accept_language);
 				}
 
 				const response = await internal_fetch(request, options, manifest, state);
@@ -200,6 +199,8 @@ function normalize_fetch_input(info, init, url) {
  * @returns {Promise<Response>}
  */
 async function internal_fetch(request, options, manifest, state) {
+	const subrequest_state = fork_state_for_subrequest(state);
+
 	if (request.signal) {
 		if (request.signal.aborted) {
 			throw new DOMException('The operation was aborted.', 'AbortError');
@@ -216,18 +217,12 @@ async function internal_fetch(request, options, manifest, state) {
 		});
 
 		const result = await Promise.race([
-			respond(request, options, manifest, {
-				...state,
-				depth: state.depth + 1
-			}),
+			respond(request, options, manifest, subrequest_state),
 			abort_promise
 		]);
 		remove_abort_listener();
 		return result;
 	} else {
-		return await respond(request, options, manifest, {
-			...state,
-			depth: state.depth + 1
-		});
+		return await respond(request, options, manifest, subrequest_state);
 	}
 }

package/src/runtime/server/index.js

@@ -67,31 +67,17 @@ export class Server {
 				const result = read(file);
 				if (result instanceof ReadableStream) {
 					return result;
-				} else {
-					return new ReadableStream({
-						async start(controller) {
-							try {
-								const stream = await Promise.resolve(result);
-								if (!stream) {
-									controller.close();
-									return;
-								}
-
-								const reader = stream.getReader();
-
-								while (true) {
-									const { done, value } = await reader.read();
-									if (done) break;
-									controller.enqueue(value);
-								}
-
-								controller.close();
-							} catch (error) {
-								controller.error(error);
-							}
-						}
-					});
 				}
+
+				// TODO remove the cast once TypeScript's lib includes `ReadableStream.from`
+				return /** @type {ReadableStream} */ (
+					/** @type {any} */ (ReadableStream).from(
+						(async function* () {
+							const stream = await result;
+							if (stream) yield* stream;
+						})()
+					)
+				);
 			};
 
 			set_read_implementation(wrapped_read);

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

@@ -1,4 +1,4 @@
-import { text_encoder } from '../../utils.js';
+import { base64_encode, text_encoder } from '../../utils.js';
 
 /**
  * SHA-256 hashing function adapted from https://bitwiseshiftleft.github.io/sjcl
@@ -102,7 +102,7 @@ export function sha256(data) {
 	const bytes = new Uint8Array(out.buffer);
 	reverse_endianness(bytes);
 
-	return btoa(String.fromCharCode(...bytes));
+	return base64_encode(bytes);
 }
 
 /** The SHA-256 initialization vector */

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

@@ -1,11 +1,12 @@
 import { escape_html } from '../../../utils/escape.js';
+import { base64_encode } from '../../utils.js';
 import { sha256 } from './crypto.js';
 
 const array = new Uint8Array(16);
 
 function generate_nonce() {
 	crypto.getRandomValues(array);
-	return btoa(String.fromCharCode(...array));
+	return base64_encode(array);
 }
 
 const quoted = new Set([
@@ -53,19 +54,19 @@ class BaseProvider {
 	#directives;
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#script_src;
+	#script_src = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#script_src_elem;
+	#script_src_elem = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#style_src;
+	#style_src = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#style_src_attr;
+	#style_src_attr = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#style_src_elem;
+	#style_src_elem = new Set();
 
 	/** @type {boolean} */
 	script_needs_nonce;
@@ -90,12 +91,6 @@ class BaseProvider {
 
 		const d = this.#directives;
 
-		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'];
 		const effective_style_src = d['style-src'] || d['default-src'];
@@ -117,32 +112,25 @@ class BaseProvider {
 
 			// ...and add unsafe-inline so we can inject <style> elements
 			// Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list, so we remove those during dev when injecting unsafe-inline
-			if (effective_style_src && !effective_style_src.includes('unsafe-inline')) {
-				d['style-src'] = [
-					...effective_style_src.filter(
-						(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
-					),
-					'unsafe-inline'
-				];
-			}
-
-			if (style_src_attr && !style_src_attr.includes('unsafe-inline')) {
-				d['style-src-attr'] = [
-					...style_src_attr.filter(
-						(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
-					),
-					'unsafe-inline'
-				];
-			}
-
-			if (style_src_elem && !style_src_elem.includes('unsafe-inline')) {
-				d['style-src-elem'] = [
-					...style_src_elem.filter(
-						(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
-					),
-					'unsafe-inline'
-				];
-			}
+			/**
+			 * @template {'style-src' | 'style-src-attr' | 'style-src-elem'} K
+			 * @param {K} key
+			 * @param {import('types').CspDirectives[K]} directive
+			 */
+			const add_unsafe_inline = (key, directive) => {
+				if (directive && !directive.includes('unsafe-inline')) {
+					d[key] = /** @type {import('types').CspDirectives[K]} */ ([
+						...directive.filter(
+							(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
+						),
+						'unsafe-inline'
+					]);
+				}
+			};
+
+			add_unsafe_inline('style-src', effective_style_src);
+			add_unsafe_inline('style-src-attr', style_src_attr);
+			add_unsafe_inline('style-src-elem', style_src_elem);
 		}
 
 		/** @param {(import('types').Csp.Source | import('types').Csp.ActionSource)[] | undefined} directive */
@@ -175,13 +163,16 @@ class BaseProvider {
 		this.#nonce = nonce;
 	}
 
-	/** @param {string} content */
-	add_script(content) {
-		if (!this.#script_needs_csp) return;
-
-		/** @type {`nonce-${string}` | `sha256-${string}`} */
-		const source = this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
+	/**
+	 * @param {string} content
+	 * @returns {`nonce-${string}` | `sha256-${string}`}
+	 */
+	#get_source(content) {
+		return this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
+	}
 
+	/** @param {`nonce-${string}` | `sha256-${string}`} source */
+	#add_script_source(source) {
 		if (this.#script_src_needs_csp) {
 			this.#script_src.add(source);
 		}
@@ -191,15 +182,17 @@ class BaseProvider {
 		}
 	}
 
+	/** @param {string} content */
+	add_script(content) {
+		if (!this.#script_needs_csp) return;
+
+		this.#add_script_source(this.#get_source(content));
+	}
+
 	/** @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);
-			}
+			this.#add_script_source(hash);
 		}
 	}
 
@@ -207,8 +200,7 @@ class BaseProvider {
 	add_style(content) {
 		if (!this.#style_needs_csp) return;
 
-		/** @type {`nonce-${string}` | `sha256-${string}`} */
-		const source = this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
+		const source = this.#get_source(content);
 
 		if (this.#style_src_needs_csp) {
 			this.#style_src.add(source);
@@ -251,40 +243,34 @@ class BaseProvider {
 
 		const directives = { ...this.#directives };
 
-		if (this.#style_src.size > 0) {
-			directives['style-src'] = [
-				...(directives['style-src'] || directives['default-src'] || []),
-				...this.#style_src
-			];
-		}
-
-		if (this.#style_src_attr.size > 0) {
-			directives['style-src-attr'] = [
-				...(directives['style-src-attr'] || []),
-				...this.#style_src_attr
-			];
-		}
-
-		if (this.#style_src_elem.size > 0) {
-			directives['style-src-elem'] = [
-				...(directives['style-src-elem'] || []),
-				...this.#style_src_elem
-			];
-		}
-
-		if (this.#script_src.size > 0) {
-			directives['script-src'] = [
-				...(directives['script-src'] || directives['default-src'] || []),
-				...this.#script_src
-			];
-		}
-
-		if (this.#script_src_elem.size > 0) {
-			directives['script-src-elem'] = [
-				...(directives['script-src-elem'] || []),
-				...this.#script_src_elem
-			];
-		}
+		/**
+		 * @template {'style-src' | 'style-src-attr' | 'style-src-elem' | 'script-src' | 'script-src-elem'} K
+		 * @param {K} key
+		 * @param {Set<import('types').Csp.Source>} sources
+		 * @param {import('types').CspDirectives[K]} [base]
+		 */
+		const merge_sources = (key, sources, base) => {
+			if (sources.size > 0) {
+				directives[key] = /** @type {import('types').CspDirectives[K]} */ ([
+					...(base || []),
+					...sources
+				]);
+			}
+		};
+
+		merge_sources(
+			'style-src',
+			this.#style_src,
+			directives['style-src'] || directives['default-src']
+		);
+		merge_sources('style-src-attr', this.#style_src_attr, directives['style-src-attr']);
+		merge_sources('style-src-elem', this.#style_src_elem, directives['style-src-elem']);
+		merge_sources(
+			'script-src',
+			this.#script_src,
+			directives['script-src'] || directives['default-src']
+		);
+		merge_sources('script-src-elem', this.#script_src_elem, directives['script-src-elem']);
 
 		for (const key in directives) {
 			if (is_meta && (key === 'frame-ancestors' || key === 'report-uri' || key === 'sandbox')) {
@@ -300,13 +286,11 @@ class BaseProvider {
 
 			const directive = [key];
 			if (Array.isArray(value)) {
-				value.forEach((value) => {
-					if (quoted.has(value) || crypto_pattern.test(value)) {
-						directive.push(`'${value}'`);
-					} else {
-						directive.push(value);
-					}
-				});
+				for (const source of value) {
+					directive.push(
+						quoted.has(source) || crypto_pattern.test(source) ? `'${source}'` : source
+					);
+				}
 			}
 
 			header.push(directive.join(' '));
@@ -337,17 +321,17 @@ class CspReportOnlyProvider extends BaseProvider {
 	constructor(use_hashes, directives, nonce) {
 		super(use_hashes, directives, nonce);
 
-		if (Object.values(directives).filter((v) => !!v).length > 0) {
-			// If we're generating content-security-policy-report-only,
-			// if there are any directives, we need a report-uri or report-to (or both)
-			// else it's just an expensive noop.
-			const has_report_to = directives['report-to']?.length ?? 0 > 0;
-			const has_report_uri = directives['report-uri']?.length ?? 0 > 0;
-			if (!has_report_to && !has_report_uri) {
-				throw Error(
-					'`content-security-policy-report-only` must be specified with either the `report-to` or `report-uri` directives, or both'
-				);
-			}
+		// If we're generating content-security-policy-report-only,
+		// if there are any directives, we need a report-uri or report-to (or both)
+		// else it's just an expensive noop.
+		if (
+			Object.values(directives).some((v) => !!v) &&
+			!directives['report-to']?.length &&
+			!directives['report-uri']?.length
+		) {
+			throw Error(
+				'`content-security-policy-report-only` must be specified with either the `report-to` or `report-uri` directives, or both'
+			);
 		}
 	}
 }

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

@@ -2,7 +2,7 @@
 /** @import { ActionResult, RequestEvent, SSRManifest } from '@sveltejs/kit' */
 /** @import { PageNodeIndexes, RequestState, RequiredResolveOptions, ServerDataNode, SSRNode, SSROptions, SSRState } from 'types' */
 import { text } from '@sveltejs/kit';
-import { HttpError, Redirect } from '@sveltejs/kit/internal';
+import { Redirect } from '@sveltejs/kit/internal';
 import { compact } from '../../../utils/array.js';
 import { get_status, normalize_error } from '../../../utils/error.js';
 import { noop } from '../../../utils/functions.js';
@@ -386,7 +386,6 @@ export async function render_page(
 			options,
 			manifest,
 			state,
-			status: e instanceof HttpError ? e.status : 500,
 			error: e,
 			resolve_opts
 		});

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

@@ -334,14 +334,24 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 						);
 					}
 
+					const request_body =
+						input instanceof Request && cloned_body
+							? await new Response(cloned_body).text()
+							: init?.body;
+
+					if (
+						request_body &&
+						typeof request_body !== 'string' &&
+						!ArrayBuffer.isView(request_body)
+					) {
+						// requests whose body can't be hashed aren't serialized — the browser repeats the fetch
+						return;
+					}
+
 					fetched.push({
 						url: same_origin ? url.href.slice(event.url.origin.length) : url.href,
 						method: event.request.method,
-						request_body: /** @type {string | ArrayBufferView | undefined} */ (
-							input instanceof Request && cloned_body
-								? await stream_to_string(cloned_body)
-								: init?.body
-						),
+						request_body: /** @type {string | ArrayBufferView | null | undefined} */ (request_body),
 						request_headers: cloned_headers,
 						response_body: body,
 						response,
@@ -361,16 +371,7 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 					const [a, b] = response.body.tee();
 
 					void (async () => {
-						let result = new Uint8Array();
-
-						for await (const chunk of a) {
-							const combined = new Uint8Array(result.length + chunk.length);
-
-							combined.set(result, 0);
-							combined.set(chunk, result.length);
-
-							result = combined;
-						}
+						const result = new Uint8Array(await new Response(a).arrayBuffer());
 
 						if (dependency) {
 							dependency.body = new Uint8Array(result);
@@ -486,21 +487,3 @@ export function create_universal_fetch(event, state, fetched, csr, resolve_opts)
 		return response;
 	};
 }
-
-/**
- * @param {ReadableStream<Uint8Array>} stream
- */
-async function stream_to_string(stream) {
-	let result = '';
-	const reader = stream.getReader();
-	const decoder = new TextDecoder();
-	while (true) {
-		const { done, value } = await reader.read();
-		if (done) {
-			result += decoder.decode();
-			break;
-		}
-		result += decoder.decode(value, { stream: true });
-	}
-	return result;
-}