@sveltejs/kit 1.0.0-next.221 → 1.0.0-next.225

package/assets/kit.js

@@ -544,11 +544,12 @@ const s = JSON.stringify;
  *   branch: Array<import('./types').Loaded>;
  *   options: import('types/internal').SSRRenderOptions;
  *   $session: any;
- *   page_config: { hydrate: boolean, router: boolean, ssr: boolean };
+ *   page_config: { hydrate: boolean, router: boolean };
  *   status: number;
- *   error?: Error,
+ *   error?: Error;
  *   url: URL;
- *   params: Record<string, string>
+ *   params: Record<string, string>;
+ *   ssr: boolean;
  *   stuff: Record<string, any>;
  * }} opts
  */
@@ -561,11 +562,13 @@ async function render_response({
 	error,
 	url,
 	params,
+	ssr,
 	stuff
 }) {
 	const css = new Set(options.manifest._.entry.css);
 	const js = new Set(options.manifest._.entry.js);
-	const styles = new Set();
+	/** @type {Map<string, string>} */
+	const styles = new Map();
 
 	/** @type {Array<{ url: string, body: string, json: string }>} */
 	const serialized_data = [];
@@ -579,11 +582,11 @@ async function render_response({
 		error.stack = options.get_stack(error);
 	}
 
-	if (page_config.ssr) {
+	if (ssr) {
 		branch.forEach(({ node, loaded, fetched, uses_credentials }) => {
 			if (node.css) node.css.forEach((url) => css.add(url));
 			if (node.js) node.js.forEach((url) => js.add(url));
-			if (node.styles) node.styles.forEach((content) => styles.add(content));
+			if (node.styles) Object.entries(node.styles).forEach(([k, v]) => styles.set(k, v));
 
 			// TODO probably better if `fetched` wasn't populated unless `hydrate`
 			if (fetched && page_config.hydrate) serialized_data.push(...fetched);
@@ -644,94 +647,80 @@ async function render_response({
 		rendered = { head: '', html: '', css: { code: '', map: null } };
 	}
 
-	const include_js = page_config.router || page_config.hydrate;
-	if (!include_js) js.clear();
-
-	// TODO strip the AMP stuff out of the build if not relevant
-	const links = options.amp
-		? styles.size > 0 || rendered.css.code.length > 0
-			? `<style amp-custom>${Array.from(styles).concat(rendered.css.code).join('\n')}</style>`
-			: ''
-		: [
-				// From https://web.dev/priority-hints/:
-				// Generally, preloads will load in the order the parser gets to them for anything above "Medium" priority
-				// Thus, we should list CSS first
-				...Array.from(css).map((dep) => `<link rel="stylesheet" href="${options.prefix}${dep}">`),
-				...Array.from(js).map((dep) => `<link rel="modulepreload" href="${options.prefix}${dep}">`)
-		  ].join('\n\t\t');
-
-	/** @type {string} */
-	let init = '';
+	let { head, html: body } = rendered;
+
+	const inlined_style = Array.from(styles.values()).join('\n');
 
 	if (options.amp) {
-		init = `
+		head += `
 		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
 		<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-		<script async src="https://cdn.ampproject.org/v0.js"></script>`;
-		init += options.service_worker
-			? '<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>'
-			: '';
-	} else if (include_js) {
-		// prettier-ignore
-		init = `<script type="module">
-			import { start } from ${s(options.prefix + options.manifest._.entry.file)};
-			start({
-				target: ${options.target ? `document.querySelector(${s(options.target)})` : 'document.body'},
-				paths: ${s(options.paths)},
-				session: ${try_serialize($session, (error) => {
-					throw new Error(`Failed to serialize session data: ${error.message}`);
-				})},
-				route: ${!!page_config.router},
-				spa: ${!page_config.ssr},
-				trailing_slash: ${s(options.trailing_slash)},
-				hydrate: ${page_config.ssr && page_config.hydrate ? `{
-					status: ${status},
-					error: ${serialize_error(error)},
-					nodes: [
-						${(branch || [])
-						.map(({ node }) => `import(${s(options.prefix + node.entry)})`)
-						.join(',\n\t\t\t\t\t\t')}
-					],
-					url: new URL(${s(url.href)}),
-					params: ${devalue(params)}
-				}` : 'null'}
-			});
-		</script>`;
-	}
+		<script async src="https://cdn.ampproject.org/v0.js"></script>
 
-	if (options.service_worker && !options.amp) {
-		init += `<script>
-			if ('serviceWorker' in navigator) {
-				navigator.serviceWorker.register('${options.service_worker}');
-			}
-		</script>`;
-	}
-
-	const head = [
-		rendered.head,
-		styles.size && !options.amp
-			? `<style data-svelte>${Array.from(styles).join('\n')}</style>`
-			: '',
-		links,
-		init
-	].join('\n\n\t\t');
+		<style amp-custom>${inlined_style}\n${rendered.css.code}</style>`;
 
-	let body = rendered.html;
-	if (options.amp) {
 		if (options.service_worker) {
+			head +=
+				'<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>';
+
 			body += `<amp-install-serviceworker src="${options.service_worker}" layout="nodisplay"></amp-install-serviceworker>`;
 		}
 	} else {
-		body += serialized_data
-			.map(({ url, body, json }) => {
-				let attributes = `type="application/json" data-type="svelte-data" data-url=${escape_html_attr(
-					url
-				)}`;
-				if (body) attributes += ` data-body="${hash(body)}"`;
-
-				return `<script ${attributes}>${json}</script>`;
-			})
-			.join('\n\n\t');
+		if (inlined_style) {
+			head += `\n\t<style${options.dev ? ' data-svelte' : ''}>${inlined_style}</style>`;
+		}
+		// prettier-ignore
+		head += Array.from(css)
+				.map((dep) => `\n\t<link${styles.has(dep) ? ' disabled' : ''} rel="stylesheet" href="${options.prefix + dep}">`)
+				.join('');
+
+		if (page_config.router || page_config.hydrate) {
+			head += Array.from(js)
+				.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
+				.join('');
+			// prettier-ignore
+			head += `
+			<script type="module">
+				import { start } from ${s(options.prefix + options.manifest._.entry.file)};
+				start({
+					target: ${options.target ? `document.querySelector(${s(options.target)})` : 'document.body'},
+					paths: ${s(options.paths)},
+					session: ${try_serialize($session, (error) => {
+						throw new Error(`Failed to serialize session data: ${error.message}`);
+					})},
+					route: ${!!page_config.router},
+					spa: ${!ssr},
+					trailing_slash: ${s(options.trailing_slash)},
+					hydrate: ${ssr && page_config.hydrate ? `{
+						status: ${status},
+						error: ${serialize_error(error)},
+						nodes: [
+							${(branch || [])
+							.map(({ node }) => `import(${s(options.prefix + node.entry)})`)
+							.join(',\n\t\t\t\t\t\t')}
+						],
+						url: new URL(${s(url.href)}),
+						params: ${devalue(params)}
+					}` : 'null'}
+				});
+			</script>${options.service_worker ? `
+			<script>
+				if ('serviceWorker' in navigator) {
+					navigator.serviceWorker.register('${options.service_worker}');
+				}
+			</script>` : ''}`;
+
+			body += serialized_data
+				.map(({ url, body, json }) => {
+					let attributes = `type="application/json" data-type="svelte-data" data-url=${escape_html_attr(
+						url
+					)}`;
+					if (body) attributes += ` data-body="${hash(body)}"`;
+
+					return `<script ${attributes}>${json}</script>`;
+				})
+				.join('\n\n\t');
+		}
 	}
 
 	/** @type {import('types/helper').ResponseHeaders} */
@@ -1220,9 +1209,18 @@ async function load_node({
  *   $session: any;
  *   status: number;
  *   error: Error;
+ *   ssr: boolean;
  * }} opts
  */
-async function respond_with_error({ request, options, state, $session, status, error }) {
+async function respond_with_error({
+	request,
+	options,
+	state,
+	$session,
+	status,
+	error,
+	ssr
+}) {
 	try {
 		const default_layout = await options.manifest._.nodes[0](); // 0 is always the root layout
 		const default_error = await options.manifest._.nodes[1](); // 1 is always the root error
@@ -1269,15 +1267,15 @@ async function respond_with_error({ request, options, state, $session, status, e
 			$session,
 			page_config: {
 				hydrate: options.hydrate,
-				router: options.router,
-				ssr: options.ssr
+				router: options.router
 			},
 			stuff: error_loaded.stuff,
 			status,
 			error,
 			branch: [layout_loaded, error_loaded],
 			url: request.url,
-			params
+			params,
+			ssr
 		});
 	} catch (err) {
 		const error = coalesce_to_error(err);
@@ -1319,15 +1317,30 @@ function is_prerender_enabled(options, node, state) {
  *   $session: any;
  *   route: import('types/internal').SSRPage;
  *   params: Record<string, string>;
+ *   ssr: boolean;
  * }} opts
  * @returns {Promise<ServerResponse | undefined>}
  */
 async function respond$1(opts) {
-	const { request, options, state, $session, route } = opts;
+	const { request, options, state, $session, route, ssr } = opts;
 
 	/** @type {Array<SSRNode | undefined>} */
 	let nodes;
 
+	if (!ssr) {
+		return await render_response({
+			...opts,
+			branch: [],
+			page_config: {
+				hydrate: true,
+				router: true
+			},
+			status: 200,
+			url: request.url,
+			stuff: {}
+		});
+	}
+
 	try {
 		nodes = await Promise.all(
 			route.a.map((n) => options.manifest._.nodes[n] && options.manifest._.nodes[n]())
@@ -1343,7 +1356,8 @@ async function respond$1(opts) {
 			state,
 			$session,
 			status: 500,
-			error
+			error,
+			ssr
 		});
 	}
 
@@ -1375,7 +1389,7 @@ async function respond$1(opts) {
 
 	let stuff = {};
 
-	ssr: if (page_config.ssr) {
+	ssr: if (ssr) {
 		for (let i = 0; i < nodes.length; i += 1) {
 			const node = nodes[i];
 
@@ -1438,7 +1452,6 @@ async function respond$1(opts) {
 							}
 
 							try {
-								// there's no fallthough on an error page, so we know it's not undefined
 								const error_loaded = /** @type {import('./types').Loaded} */ (
 									await load_node({
 										...opts,
@@ -1480,7 +1493,8 @@ async function respond$1(opts) {
 							state,
 							$session,
 							status,
-							error
+							error,
+							ssr
 						}),
 						set_cookie_headers
 					);
@@ -1530,8 +1544,14 @@ async function respond$1(opts) {
  * @param {SSRRenderOptions} options
  */
 function get_page_config(leaf, options) {
+	// TODO remove for 1.0
+	if ('ssr' in leaf) {
+		throw new Error(
+			'`export const ssr` has been removed — use the handle hook instead: https://kit.svelte.dev/docs#hooks-handle'
+		);
+	}
+
 	return {
-		ssr: 'ssr' in leaf ? !!leaf.ssr : options.ssr,
 		router: 'router' in leaf ? !!leaf.router : options.router,
 		hydrate: 'hydrate' in leaf ? !!leaf.hydrate : options.hydrate
 	};
@@ -1554,9 +1574,10 @@ function with_cookies(response, set_cookie_headers) {
  * @param {RegExpExecArray} match
  * @param {import('types/internal').SSRRenderOptions} options
  * @param {import('types/internal').SSRRenderState} state
+ * @param {boolean} ssr
  * @returns {Promise<import('types/hooks').ServerResponse | undefined>}
  */
-async function render_page(request, route, match, options, state) {
+async function render_page(request, route, match, options, state, ssr) {
 	if (state.initiator === route) {
 		// infinite request cycle detected
 		return {
@@ -1576,7 +1597,8 @@ async function render_page(request, route, match, options, state) {
 		state,
 		$session,
 		route,
-		params
+		params,
+		ssr
 	});
 
 	if (response) {
@@ -1814,6 +1836,28 @@ async function respond(incoming, options, state = {}) {
 		locals: {}
 	};
 
+	const { parameter, allowed } = options.method_override;
+	const method_override = incoming.url.searchParams.get(parameter)?.toUpperCase();
+
+	if (method_override) {
+		if (request.method.toUpperCase() === 'POST') {
+			if (allowed.includes(method_override)) {
+				request.method = method_override;
+			} else {
+				const verb = allowed.length === 0 ? 'enabled' : 'allowed';
+				const body = `${parameter}=${method_override} is not ${verb}. See https://kit.svelte.dev/docs#configuration-methodoverride`;
+
+				return {
+					status: 400,
+					headers: {},
+					body
+				};
+			}
+		} else {
+			throw new Error(`${parameter}=${method_override} is only allowed with POST requests`);
+		}
+	}
+
 	// TODO remove this for 1.0
 	/**
 	 * @param {string} property
@@ -1831,20 +1875,25 @@ async function respond(incoming, options, state = {}) {
 	print_error('path', 'pathname');
 	print_error('query', 'searchParams');
 
+	let ssr = true;
+
 	try {
 		return await options.hooks.handle({
 			request,
-			resolve: async (request) => {
+			resolve: async (request, opts) => {
+				if (opts && 'ssr' in opts) ssr = /** @type {boolean} */ (opts.ssr);
+
 				if (state.prerender && state.prerender.fallback) {
 					return await render_response({
 						url: request.url,
 						params: request.params,
 						options,
 						$session: await options.hooks.getSession(request),
+						page_config: { router: true, hydrate: true },
 						stuff: {},
-						page_config: { ssr: false, router: true, hydrate: true },
 						status: 200,
-						branch: []
+						branch: [],
+						ssr: false
 					});
 				}
 
@@ -1857,7 +1906,7 @@ async function respond(incoming, options, state = {}) {
 					const response =
 						route.type === 'endpoint'
 							? await render_endpoint(request, route, match)
-							: await render_page(request, route, match, options, state);
+							: await render_page(request, route, match, options, state, ssr);
 
 					if (response) {
 						// inject ETags for 200 responses
@@ -1897,7 +1946,8 @@ async function respond(incoming, options, state = {}) {
 						state,
 						$session,
 						status: 404,
-						error: new Error(`Not found: ${request.url.pathname}`)
+						error: new Error(`Not found: ${request.url.pathname}`),
+						ssr
 					});
 				}
 			}
@@ -1915,7 +1965,8 @@ async function respond(incoming, options, state = {}) {
 				state,
 				$session,
 				status: 500,
-				error
+				error,
+				ssr
 			});
 		} catch (/** @type {unknown} */ e) {
 			const error = coalesce_to_error(e);

package/assets/runtime/app/stores.js

@@ -2,8 +2,6 @@ import { getContext } from 'svelte';
 import { browser } from './env.js';
 import '../env.js';
 
-const ssr = !browser;
-
 // TODO remove this (for 1.0? after 1.0?)
 let warned = false;
 function stores() {
@@ -59,9 +57,9 @@ const navigating = {
 /** @param {string} verb */
 const throw_error = (verb) => {
 	throw new Error(
-		ssr
-			? `Can only ${verb} session store in browser`
-			: `Cannot ${verb} session store before subscribing`
+		browser
+			? `Cannot ${verb} session store before subscribing`
+			: `Can only ${verb} session store in browser`
 	);
 };
 
@@ -70,7 +68,7 @@ const session = {
 	subscribe(fn) {
 		const store = getStores().session;
 
-		if (!ssr) {
+		if (browser) {
 			session.set = store.set;
 			session.update = store.update;
 		}