@sveltejs/kit 1.0.0-next.456 → 1.0.0-next.459

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.456",
+  "version": "1.0.0-next.459",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/src/runtime/client/fetcher.js

@@ -44,10 +44,10 @@ if (import.meta.env.DEV) {
 export function initial_fetch(resource, opts) {
 	const url = JSON.stringify(typeof resource === 'string' ? resource : resource.url);
 
-	let selector = `script[sveltekit\\:data-type="data"][sveltekit\\:data-url=${url}]`;
+	let selector = `script[data-sveltekit-fetched][data-url=${url}]`;
 
 	if (opts && typeof opts.body === 'string') {
-		selector += `[sveltekit\\:data-body="${hash(opts.body)}"]`;
+		selector += `[data-hash="${hash(opts.body)}"]`;
 	}
 
 	const script = document.querySelector(selector);

package/src/runtime/server/endpoint.js

@@ -1,4 +1,4 @@
-import { HttpError, Redirect } from '../control.js';
+import { Redirect } from '../control.js';
 import { check_method_names, method_not_allowed } from './utils.js';
 
 /**
@@ -39,9 +39,8 @@ export async function render_endpoint(event, mod, state) {
 		);
 
 		if (!(response instanceof Response)) {
-			return new Response(
-				`Invalid response from route ${event.url.pathname}: handler should return a Response object`,
-				{ status: 500 }
+			throw new Error(
+				`Invalid response from route ${event.url.pathname}: handler should return a Response object`
 			);
 		}
 
@@ -52,15 +51,13 @@ export async function render_endpoint(event, mod, state) {
 
 		return response;
 	} catch (error) {
-		if (error instanceof HttpError) {
-			return new Response(error.message, { status: error.status });
-		} else if (error instanceof Redirect) {
+		if (error instanceof Redirect) {
 			return new Response(undefined, {
 				status: error.status,
-				headers: { Location: error.location }
+				headers: { location: error.location }
 			});
-		} else {
-			throw error;
 		}
+
+		throw error;
 	}
 }

package/src/runtime/server/index.js

@@ -3,10 +3,9 @@ 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 { coalesce_to_error } from '../../utils/error.js';
-import { serialize_error, GENERIC_ERROR, static_error_page } from './utils.js';
+import { GENERIC_ERROR, handle_fatal_error } from './utils.js';
 import { decode_params, disable_search, normalize_path } from '../../utils/url.js';
 import { exec } from '../../utils/routing.js';
-import { negotiate } from '../../utils/http.js';
 import { render_data } from './data/index.js';
 import { DATA_SUFFIX } from '../../constants.js';
 
@@ -190,178 +189,151 @@ export async function respond(request, options, state) {
 		transformPageChunk: default_transform
 	};
 
-	// TODO match route before calling handle?
-
-	try {
-		const response = await options.hooks.handle({
-			event,
-			resolve: async (event, opts) => {
-				if (opts) {
-					// TODO remove for 1.0
-					// @ts-expect-error
-					if (opts.transformPage) {
-						throw new Error(
-							'transformPage has been replaced by transformPageChunk — see https://github.com/sveltejs/kit/pull/5657 for more information'
-						);
-					}
-					// @ts-expect-error
-					if (opts.ssr) {
-						throw new Error(
-							'ssr has been removed, set it in the appropriate +layout.js instead. See the PR for more information: https://github.com/sveltejs/kit/pull/6197'
-						);
-					}
-
-					resolve_opts = {
-						transformPageChunk: opts.transformPageChunk || default_transform
-					};
+	/**
+	 *
+	 * @param {import('types').RequestEvent} event
+	 * @param {import('types').ResolveOptions} [opts]
+	 */
+	async function resolve(event, opts) {
+		try {
+			if (opts) {
+				// TODO remove for 1.0
+				if ('transformPage' in opts) {
+					throw new Error(
+						'transformPage has been replaced by transformPageChunk — see https://github.com/sveltejs/kit/pull/5657 for more information'
+					);
 				}
 
-				if (state.prerendering?.fallback) {
-					return await render_response({
-						event,
-						options,
-						state,
-						page_config: { ssr: false, csr: true },
-						status: 200,
-						error: null,
-						branch: [],
-						fetched: [],
-						validation_errors: undefined,
-						cookies: [],
-						resolve_opts
-					});
+				if ('ssr' in opts) {
+					throw new Error(
+						'ssr has been removed, set it in the appropriate +layout.js instead. See the PR for more information: https://github.com/sveltejs/kit/pull/6197'
+					);
 				}
 
-				if (route) {
-					/** @type {Response} */
-					let response;
-
-					if (is_data_request) {
-						response = await render_data(event, route, options, state);
-					} else if (route.page) {
-						response = await render_page(event, route, route.page, options, state, resolve_opts);
-					} else if (route.endpoint) {
-						response = await render_endpoint(event, await route.endpoint(), state);
-					} else {
-						// a route will always have a page or an endpoint, but TypeScript
-						// doesn't know that
-						throw new Error('This should never happen');
-					}
+				resolve_opts = {
+					transformPageChunk: opts.transformPageChunk || default_transform
+				};
+			}
 
-					if (!is_data_request) {
-						// we only want to set cookies on __data.js requests, we don't
-						// want to cache stuff erroneously etc
-						for (const key in headers) {
-							const value = headers[key];
-							response.headers.set(key, /** @type {string} */ (value));
-						}
-					}
+			if (state.prerendering?.fallback) {
+				return await render_response({
+					event,
+					options,
+					state,
+					page_config: { ssr: false, csr: true },
+					status: 200,
+					error: null,
+					branch: [],
+					fetched: [],
+					validation_errors: undefined,
+					cookies: [],
+					resolve_opts
+				});
+			}
+
+			if (route) {
+				/** @type {Response} */
+				let response;
 
-					for (const cookie of cookies) {
-						response.headers.append('set-cookie', cookie);
+				if (is_data_request) {
+					response = await render_data(event, route, options, state);
+				} else if (route.page) {
+					response = await render_page(event, route, route.page, options, state, resolve_opts);
+				} else if (route.endpoint) {
+					response = await render_endpoint(event, await route.endpoint(), state);
+				} 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 (!is_data_request) {
+					// we only want to set cookies on __data.js requests, we don't
+					// want to cache stuff erroneously etc
+					for (const key in headers) {
+						const value = headers[key];
+						response.headers.set(key, /** @type {string} */ (value));
 					}
+				}
 
-					// respond with 304 if etag matches
-					if (response.status === 200 && response.headers.has('etag')) {
-						let if_none_match_value = request.headers.get('if-none-match');
+				for (const cookie of cookies) {
+					response.headers.append('set-cookie', cookie);
+				}
 
-						// ignore W/ prefix https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-None-Match#directives
-						if (if_none_match_value?.startsWith('W/"')) {
-							if_none_match_value = if_none_match_value.substring(2);
-						}
+				// respond with 304 if etag matches
+				if (response.status === 200 && response.headers.has('etag')) {
+					let if_none_match_value = request.headers.get('if-none-match');
 
-						const etag = /** @type {string} */ (response.headers.get('etag'));
+					// ignore W/ prefix https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-None-Match#directives
+					if (if_none_match_value?.startsWith('W/"')) {
+						if_none_match_value = if_none_match_value.substring(2);
+					}
 
-						if (if_none_match_value === etag) {
-							const headers = new Headers({ etag });
+					const etag = /** @type {string} */ (response.headers.get('etag'));
 
-							// https://datatracker.ietf.org/doc/html/rfc7232#section-4.1
-							for (const key of ['cache-control', 'content-location', 'date', 'expires', 'vary']) {
-								const value = response.headers.get(key);
-								if (value) headers.set(key, value);
-							}
+					if (if_none_match_value === etag) {
+						const headers = new Headers({ etag });
 
-							return new Response(undefined, {
-								status: 304,
-								headers
-							});
+						// https://datatracker.ietf.org/doc/html/rfc7232#section-4.1
+						for (const key of ['cache-control', 'content-location', 'date', 'expires', 'vary']) {
+							const value = response.headers.get(key);
+							if (value) headers.set(key, value);
 						}
-					}
 
-					return response;
+						return new Response(undefined, {
+							status: 304,
+							headers
+						});
+					}
 				}
 
-				if (state.initiator === GENERIC_ERROR) {
-					return new Response('Internal Server Error', {
-						status: 500
-					});
-				}
+				return response;
+			}
 
-				// if this request came direct from the user, rather than
-				// via a `fetch` in a `load`, render a 404 page
-				if (!state.initiator) {
-					return await respond_with_error({
-						event,
-						options,
-						state,
-						status: 404,
-						error: new Error(`Not found: ${event.url.pathname}`),
-						resolve_opts
-					});
-				}
+			if (state.initiator === GENERIC_ERROR) {
+				return new Response('Internal Server Error', {
+					status: 500
+				});
+			}
 
-				if (state.prerendering) {
-					return new Response('not found', { status: 404 });
-				}
+			// if this request came direct from the user, rather than
+			// via a `fetch` in a `load`, render a 404 page
+			if (!state.initiator) {
+				return await respond_with_error({
+					event,
+					options,
+					state,
+					status: 404,
+					error: new Error(`Not found: ${event.url.pathname}`),
+					resolve_opts
+				});
+			}
 
-				// we can't load the endpoint from our own manifest,
-				// so we need to make an actual HTTP request
-				return await fetch(request);
-			},
+			if (state.prerendering) {
+				return new Response('not found', { status: 404 });
+			}
 
+			// we can't load the endpoint from our own manifest,
+			// so we need to make an actual HTTP request
+			return await fetch(request);
+		} catch (e) {
+			const error = coalesce_to_error(e);
+			return handle_fatal_error(event, options, error);
+		}
+	}
+
+	try {
+		return await options.hooks.handle({
+			event,
+			resolve,
 			// TODO remove for 1.0
 			// @ts-expect-error
 			get request() {
 				throw new Error('request in handle has been replaced with event' + details);
 			}
 		});
-
-		// TODO for 1.0, change the error message to point to docs rather than PR
-		if (response && !(response instanceof Response)) {
-			throw new Error('handle must return a Response object' + details);
-		}
-
-		return response;
 	} catch (/** @type {unknown} */ e) {
 		const error = coalesce_to_error(e);
-
-		options.handle_error(error, event);
-
-		const type = negotiate(event.request.headers.get('accept') || 'text/html', [
-			'text/html',
-			'application/json'
-		]);
-
-		if (is_data_request || type === 'application/json') {
-			return new Response(serialize_error(error, options.get_stack), {
-				status: 500,
-				headers: { 'content-type': 'application/json; charset=utf-8' }
-			});
-		}
-
-		// TODO is this necessary? should we just return a plain 500 at this point?
-		try {
-			return await respond_with_error({
-				event,
-				options,
-				state,
-				status: 500,
-				error,
-				resolve_opts
-			});
-		} catch (/** @type {unknown} */ e) {
-			const error = coalesce_to_error(e);
-			return static_error_page(options, 500, error.message);
-		}
+		return handle_fatal_error(event, options, error);
 	}
 }

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

@@ -192,6 +192,7 @@ export function create_fetch({ event, options, state, route, prerender_default }
 				async function text() {
 					const body = await response.text();
 
+					// TODO just pass `response.headers`, for processing inside `serialize_data`
 					/** @type {import('types').ResponseHeaders} */
 					const headers = {};
 					for (const [key, value] of response.headers) {

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

@@ -334,7 +334,7 @@ export async function render_page(event, route, page, options, state, resolve_op
 		});
 	} catch (error) {
 		// if we end up here, it means the data loaded successfull
-		// but the page failed to render
+		// but the page failed to render, or that a prerendering error occurred
 		options.handle_error(/** @type {Error} */ (error), event);
 
 		return await respond_with_error({

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

@@ -2,7 +2,7 @@ import { devalue } from 'devalue';
 import { readable, writable } from 'svelte/store';
 import * as cookie from 'cookie';
 import { hash } from '../../hash.js';
-import { render_json_payload_script } from '../../../utils/escape.js';
+import { serialize_data } from './serialize_data.js';
 import { s } from '../../../utils/misc.js';
 import { Csp } from './csp.js';
 import { serialize_error } from '../utils.js';
@@ -284,25 +284,7 @@ export async function render_response({
 	}
 
 	if (page_config.ssr && page_config.csr) {
-		/** @type {string[]} */
-		const serialized_data = [];
-
-		for (const { url, body, response } of fetched) {
-			serialized_data.push(
-				render_json_payload_script(
-					{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
-					response
-				)
-			);
-		}
-
-		if (validation_errors) {
-			serialized_data.push(
-				render_json_payload_script({ type: 'validation_errors' }, validation_errors)
-			);
-		}
-
-		body += `\n\t${serialized_data.join('\n\t')}`;
+		body += `\n\t${fetched.map(serialize_data).join('\n\t')}`;
 	}
 
 	if (options.service_worker) {

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

@@ -0,0 +1,58 @@
+import { escape_html_attr } from '../../../utils/escape.js';
+import { hash } from '../../hash.js';
+
+/**
+ * Inside a script element, only `</script` and `<!--` hold special meaning to the HTML parser.
+ *
+ * The first closes the script element, so everything after is treated as raw HTML.
+ * The second disables further parsing until `-->`, so the script element might be unexpectedly
+ * kept open until until an unrelated HTML comment in the page.
+ *
+ * U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR are escaped for the sake of pre-2018
+ * browsers.
+ *
+ * @see tests for unsafe parsing examples.
+ * @see https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
+ * @see https://html.spec.whatwg.org/multipage/syntax.html#cdata-rcdata-restrictions
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-state
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-double-escaped-state
+ * @see https://github.com/tc39/proposal-json-superset
+ * @type {Record<string, string>}
+ */
+const replacements = {
+	'<': '\\u003C',
+	'\u2028': '\\u2028',
+	'\u2029': '\\u2029'
+};
+
+const pattern = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
+
+/**
+ * Generates a raw HTML string containing a safe script element carrying data and associated attributes.
+ *
+ * It escapes all the special characters needed to guarantee the element is unbroken, but care must
+ * be taken to ensure it is inserted in the document at an acceptable position for a script element,
+ * and that the resulting string isn't further modified.
+ *
+ * @param {import('./types.js').Fetched} fetched
+ * @returns {string} The raw HTML of a script element carrying the JSON payload.
+ * @example const html = serialize_data('/data.json', null, { foo: 'bar' });
+ */
+export function serialize_data(fetched) {
+	const safe_payload = JSON.stringify(fetched.response).replace(
+		pattern,
+		(match) => replacements[match]
+	);
+
+	const attrs = [
+		'type="application/json"',
+		'data-sveltekit-fetched',
+		`data-url=${escape_html_attr(fetched.url)}`
+	];
+
+	if (fetched.body) {
+		attrs.push(`data-hash=${escape_html_attr(hash(fetched.body))}`);
+	}
+
+	return `<script ${attrs.join(' ')}>${safe_payload}</script>`;
+}

package/src/runtime/server/utils.js

@@ -1,4 +1,6 @@
 import { devalue } from 'devalue';
+import { DATA_SUFFIX } from '../../constants.js';
+import { negotiate } from '../../utils/http.js';
 import { HttpError } from '../control.js';
 
 /** @param {any} body */
@@ -175,3 +177,33 @@ export function static_error_page(options, status, message) {
 		status
 	});
 }
+
+/**
+ * @param {import('types').RequestEvent} event
+ * @param {import('types').SSROptions} options
+ * @param {Error} error
+ */
+export function handle_fatal_error(event, options, error) {
+	let status = 500;
+
+	if (error instanceof HttpError) {
+		status = error.status;
+	} else {
+		options.handle_error(error, event);
+	}
+
+	// ideally we'd use sec-fetch-dest instead, but Safari — quelle surprise — doesn't support it
+	const type = negotiate(event.request.headers.get('accept') || 'text/html', [
+		'text/html',
+		'application/json'
+	]);
+
+	if (event.url.pathname.endsWith(DATA_SUFFIX) || type === 'application/json') {
+		return new Response(serialize_error(error, options.get_stack), {
+			status,
+			headers: { 'content-type': 'application/json; charset=utf-8' }
+		});
+	}
+
+	return static_error_page(options, status, error.message);
+}

package/src/utils/escape.js

@@ -1,61 +1,3 @@
-/**
- * Inside a script element, only `</script` and `<!--` hold special meaning to the HTML parser.
- *
- * The first closes the script element, so everything after is treated as raw HTML.
- * The second disables further parsing until `-->`, so the script element might be unexpectedly
- * kept open until until an unrelated HTML comment in the page.
- *
- * U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR are escaped for the sake of pre-2018
- * browsers.
- *
- * @see tests for unsafe parsing examples.
- * @see https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
- * @see https://html.spec.whatwg.org/multipage/syntax.html#cdata-rcdata-restrictions
- * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-state
- * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-double-escaped-state
- * @see https://github.com/tc39/proposal-json-superset
- * @type {Record<string, string>}
- */
-const render_json_payload_script_dict = {
-	'<': '\\u003C',
-	'\u2028': '\\u2028',
-	'\u2029': '\\u2029'
-};
-
-const render_json_payload_script_regex = new RegExp(
-	`[${Object.keys(render_json_payload_script_dict).join('')}]`,
-	'g'
-);
-
-/**
- * Generates a raw HTML string containing a safe script element carrying JSON data and associated attributes.
- *
- * It escapes all the special characters needed to guarantee the element is unbroken, but care must
- * be taken to ensure it is inserted in the document at an acceptable position for a script element,
- * and that the resulting string isn't further modified.
- *
- * Attribute names must be type-checked so we don't need to escape them.
- *
- * @param {import('types').PayloadScriptAttributes} attrs A list of attributes to be added to the element.
- * @param {any} payload The data to be carried by the element. Must be serializable to JSON.
- * @returns {string} The raw HTML of a script element carrying the JSON payload.
- * @example const html = render_json_payload_script({ type: 'data', url: '/data.json' }, { foo: 'bar' });
- */
-export function render_json_payload_script(attrs, payload) {
-	const safe_payload = JSON.stringify(payload).replace(
-		render_json_payload_script_regex,
-		(match) => render_json_payload_script_dict[match]
-	);
-
-	let safe_attrs = '';
-	for (const [key, value] of Object.entries(attrs)) {
-		if (value === undefined) continue;
-		safe_attrs += ` sveltekit:data-${key}=${escape_html_attr(value)}`;
-	}
-
-	return `<script type="application/json"${safe_attrs}>${safe_payload}</script>`;
-}
-
 /**
  * When inside a double-quoted attribute value, only `&` and `"` hold special meaning.
  * @see https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state

package/types/internal.d.ts

@@ -135,10 +135,6 @@ export interface PageNode {
 	child_pages?: PageNode[];
 }
 
-export type PayloadScriptAttributes =
-	| { type: 'data'; url: string; body?: string }
-	| { type: 'validation_errors' };
-
 export interface PrerenderDependency {
 	response: Response;
 	body: null | string | Uint8Array;