@sveltejs/kit 1.0.0-next.206 → 1.0.0-next.208

package/dist/ssr.js

@@ -1,5 +1,6 @@
 import { g as get_single_valued_header, r as resolve, i as is_root_relative } from './chunks/url.js';
 import { c as coalesce_to_error } from './chunks/error.js';
+import { s } from './chunks/misc.js';
 
 /** @param {Record<string, any>} obj */
 function lowercase_keys(obj) {
@@ -13,6 +14,28 @@ function lowercase_keys(obj) {
 	return clone;
 }
 
+/** @param {Record<string, string>} params */
+function decode_params(params) {
+	for (const key in params) {
+		// input has already been decoded by decodeURI
+		// now handle the rest that decodeURIComponent would do
+		params[key] = params[key]
+			.replace(/%23/g, '#')
+			.replace(/%3[Bb]/g, ';')
+			.replace(/%2[Cc]/g, ',')
+			.replace(/%2[Ff]/g, '/')
+			.replace(/%3[Ff]/g, '?')
+			.replace(/%3[Aa]/g, ':')
+			.replace(/%40/g, '@')
+			.replace(/%26/g, '&')
+			.replace(/%3[Dd]/g, '=')
+			.replace(/%2[Bb]/g, '+')
+			.replace(/%24/g, '$');
+	}
+
+	return params;
+}
+
 /** @param {string} body */
 function error(body) {
 	return {
@@ -60,10 +83,13 @@ async function render_endpoint(request, route, match) {
 		return;
 	}
 
-	const params = route.params(match);
+	// we're mutating `request` so that we don't have to do { ...request, params }
+	// on the next line, since that breaks the getters that replace path, query and
+	// origin. We could revert that once we remove the getters
+	request.params = route.params ? decode_params(route.params(match)) : {};
 
-	const response = await handler({ ...request, params });
-	const preface = `Invalid response from route ${request.path}`;
+	const response = await handler(request);
+	const preface = `Invalid response from route ${request.url.pathname}`;
 
 	if (!response) {
 		return;
@@ -478,8 +504,6 @@ function escape(str, dict, unicode_encoder) {
 	return result;
 }
 
-const s$1 = JSON.stringify;
-
 // TODO rename this function/module
 
 /**
@@ -490,7 +514,8 @@ const s$1 = JSON.stringify;
  *   page_config: { hydrate: boolean, router: boolean, ssr: boolean };
  *   status: number;
  *   error?: Error,
- *   page?: import('types/page').Page
+ *   url: URL;
+ *   params: Record<string, string>
  * }} opts
  */
 async function render_response({
@@ -500,10 +525,11 @@ async function render_response({
 	page_config,
 	status,
 	error,
-	page
+	url,
+	params
 }) {
-	const css = new Set(options.entry.css);
-	const js = new Set(options.entry.js);
+	const css = new Set(options.manifest._.entry.css);
+	const js = new Set(options.manifest._.entry.js);
 	const styles = new Set();
 
 	/** @type {Array<{ url: string, body: string, json: string }>} */
@@ -541,10 +567,29 @@ async function render_response({
 				navigating: writable(null),
 				session
 			},
-			page,
+			page: { url, params },
 			components: branch.map(({ node }) => node.module.default)
 		};
 
+		if (options.dev) {
+			// TODO remove this for 1.0
+			/**
+			 * @param {string} property
+			 * @param {string} replacement
+			 */
+			const print_error = (property, replacement) => {
+				Object.defineProperty(props.page, property, {
+					get: () => {
+						throw new Error(`$page.${property} has been replaced by $page.url.${replacement}`);
+					}
+				});
+			};
+
+			print_error('origin', 'origin');
+			print_error('path', 'pathname');
+			print_error('query', 'searchParams');
+		}
+
 		// props_n (instead of props[n]) makes it easy to avoid
 		// unnecessary updates for layout components
 		for (let i = 0; i < branch.length; i += 1) {
@@ -575,8 +620,11 @@ async function render_response({
 			? `<style amp-custom>${Array.from(styles).concat(rendered.css.code).join('\n')}</style>`
 			: ''
 		: [
-				...Array.from(js).map((dep) => `<link rel="modulepreload" href="${dep}">`),
-				...Array.from(css).map((dep) => `<link rel="stylesheet" href="${dep}">`)
+				// 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} */
@@ -593,35 +641,26 @@ async function render_response({
 	} else if (include_js) {
 		// prettier-ignore
 		init = `<script type="module">
-			import { start } from ${s$1(options.entry.file)};
+			import { start } from ${s(options.prefix + options.manifest._.entry.file)};
 			start({
-				target: ${options.target ? `document.querySelector(${s$1(options.target)})` : 'document.body'},
-				paths: ${s$1(options.paths)},
+				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}`);
 				})},
-				host: ${page && page.host ? s$1(page.host) : 'location.host'},
 				route: ${!!page_config.router},
 				spa: ${!page_config.ssr},
-				trailing_slash: ${s$1(options.trailing_slash)},
+				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$1(node.entry)})`)
+						.map(({ node }) => `import(${s(options.prefix + node.entry)})`)
 						.join(',\n\t\t\t\t\t\t')}
 					],
-					page: {
-						host: ${page && page.host ? s$1(page.host) : 'location.host'}, // TODO this is redundant
-						path: ${page && page.path ? try_serialize(page.path, error => {
-							throw new Error(`Failed to serialize page.path: ${error.message}`);
-						}) : null},
-						query: new URLSearchParams(${page && page.query ? s$1(page.query.toString()) : ''}),
-						params: ${page && page.params ? try_serialize(page.params, error => {
-							throw new Error(`Failed to serialize page.params: ${error.message}`);
-						}) : null}
-					}
+					url: new URL(${s(url.href)}),
+					params: ${devalue(params)}
 				}` : 'null'}
 			});
 		</script>`;
@@ -776,15 +815,14 @@ function normalize(loaded) {
 	return /** @type {import('types/internal').NormalizedLoadOutput} */ (loaded);
 }
 
-const s = JSON.stringify;
-
 /**
  * @param {{
  *   request: import('types/hooks').ServerRequest;
  *   options: import('types/internal').SSRRenderOptions;
  *   state: import('types/internal').SSRRenderState;
  *   route: import('types/internal').SSRPage | null;
- *   page: import('types/page').Page;
+ *   url: URL;
+ *   params: Record<string, string>;
  *   node: import('types/internal').SSRNode;
  *   $session: any;
  *   stuff: Record<string, any>;
@@ -801,7 +839,8 @@ async function load_node({
 	options,
 	state,
 	route,
-	page,
+	url,
+	params,
 	node,
 	$session,
 	stuff,
@@ -831,9 +870,9 @@ async function load_node({
 
 	let loaded;
 
-	const page_proxy = new Proxy(page, {
+	const url_proxy = new Proxy(url, {
 		get: (target, prop, receiver) => {
-			if (prop === 'query' && prerender_enabled) {
+			if (prerender_enabled && (prop === 'search' || prop === 'searchParams')) {
 				throw new Error('Cannot access query on a page with prerendering enabled');
 			}
 			return Reflect.get(target, prop, receiver);
@@ -843,7 +882,8 @@ async function load_node({
 	if (module.load) {
 		/** @type {import('types/page').LoadInput | import('types/page').ErrorLoadInput} */
 		const load_input = {
-			page: page_proxy,
+			url: url_proxy,
+			params,
 			get session() {
 				uses_credentials = true;
 				return $session;
@@ -854,12 +894,12 @@ async function load_node({
 			 */
 			fetch: async (resource, opts = {}) => {
 				/** @type {string} */
-				let url;
+				let requested;
 
 				if (typeof resource === 'string') {
-					url = resource;
+					requested = resource;
 				} else {
-					url = resource.url;
+					requested = resource.url;
 
 					opts = {
 						method: resource.method,
@@ -877,7 +917,7 @@ async function load_node({
 
 				opts.headers = new Headers(opts.headers);
 
-				const resolved = resolve(request.path, url.split('?')[0]);
+				const resolved = resolve(request.url.pathname, requested.split('?')[0]);
 
 				let response;
 
@@ -888,20 +928,24 @@ async function load_node({
 					resolved.startsWith(prefix) ? resolved.slice(prefix.length) : resolved
 				).slice(1);
 				const filename_html = `${filename}/index.html`; // path may also match path/index.html
-				const asset = options.manifest.assets.find(
-					(d) => d.file === filename || d.file === filename_html
-				);
 
-				if (asset) {
-					response = options.read
-						? new Response(options.read(asset.file), {
-								headers: asset.type ? { 'content-type': asset.type } : {}
-						  })
-						: await fetch(
-								// TODO we need to know what protocol to use
-								`http://${page.host}/${asset.file}`,
-								/** @type {RequestInit} */ (opts)
-						  );
+				const is_asset = options.manifest.assets.has(filename);
+				const is_asset_html = options.manifest.assets.has(filename_html);
+
+				if (is_asset || is_asset_html) {
+					const file = is_asset ? filename : filename_html;
+
+					if (options.read) {
+						const type = is_asset
+							? options.manifest._.mime[filename.slice(filename.lastIndexOf('.'))]
+							: 'text/html';
+
+						response = new Response(options.read(file), {
+							headers: type ? { 'content-type': type } : {}
+						});
+					} else {
+						response = await fetch(`${url.origin}/${file}`, /** @type {RequestInit} */ (opts));
+					}
 				} else if (is_root_relative(resolved)) {
 					const relative = resolved;
 
@@ -926,20 +970,16 @@ async function load_node({
 						throw new Error('Request body must be a string');
 					}
 
-					const search = url.includes('?') ? url.slice(url.indexOf('?') + 1) : '';
-
 					const rendered = await respond(
 						{
-							host: request.host,
+							url: new URL(requested, request.url),
 							method: opts.method || 'GET',
 							headers: Object.fromEntries(opts.headers),
-							path: relative,
-							rawBody: opts.body == null ? null : new TextEncoder().encode(opts.body),
-							query: new URLSearchParams(search)
+							rawBody: opts.body == null ? null : new TextEncoder().encode(opts.body)
 						},
 						options,
 						{
-							fetched: url,
+							fetched: requested,
 							initiator: route
 						}
 					);
@@ -956,36 +996,40 @@ async function load_node({
 							status: rendered.status,
 							headers: /** @type {Record<string, string>} */ (rendered.headers)
 						});
+					} else {
+						// we can't load the endpoint from our own manifest,
+						// so we need to make an actual HTTP request
+						return fetch(new URL(requested, request.url).href, {
+							method: opts.method || 'GET',
+							headers: opts.headers
+						});
 					}
 				} else {
 					// external
 					if (resolved.startsWith('//')) {
-						throw new Error(`Cannot request protocol-relative URL (${url}) in server-side fetch`);
+						throw new Error(
+							`Cannot request protocol-relative URL (${requested}) in server-side fetch`
+						);
 					}
 
 					// external fetch
-					if (typeof request.host !== 'undefined') {
-						const { hostname: fetch_hostname } = new URL(url);
-						const [server_hostname] = request.host.split(':');
-
-						// allow cookie passthrough for "same-origin"
-						// if SvelteKit is serving my.domain.com:
-						// -        domain.com WILL NOT receive cookies
-						// -     my.domain.com WILL receive cookies
-						// -    api.domain.dom WILL NOT receive cookies
-						// - sub.my.domain.com WILL receive cookies
-						// ports do not affect the resolution
-						// leading dot prevents mydomain.com matching domain.com
-						if (
-							`.${fetch_hostname}`.endsWith(`.${server_hostname}`) &&
-							opts.credentials !== 'omit'
-						) {
-							uses_credentials = true;
-							opts.headers.set('cookie', request.headers.cookie);
-						}
+					// allow cookie passthrough for "same-origin"
+					// if SvelteKit is serving my.domain.com:
+					// -        domain.com WILL NOT receive cookies
+					// -     my.domain.com WILL receive cookies
+					// -    api.domain.dom WILL NOT receive cookies
+					// - sub.my.domain.com WILL receive cookies
+					// ports do not affect the resolution
+					// leading dot prevents mydomain.com matching domain.com
+					if (
+						`.${new URL(requested).hostname}`.endsWith(`.${request.url.hostname}`) &&
+						opts.credentials !== 'omit'
+					) {
+						uses_credentials = true;
+						opts.headers.set('cookie', request.headers.cookie);
 					}
 
-					const external_request = new Request(url, /** @type {RequestInit} */ (opts));
+					const external_request = new Request(requested, /** @type {RequestInit} */ (opts));
 					response = await options.hooks.externalFetch.call(null, external_request);
 				}
 
@@ -1008,7 +1052,7 @@ async function load_node({
 								if (!opts.body || typeof opts.body === 'string') {
 									// prettier-ignore
 									fetched.push({
-										url,
+										url: requested,
 										body: /** @type {string} */ (opts.body),
 										json: `{"status":${response.status},"statusText":${s(response.statusText)},"headers":${s(headers)},"body":"${escape_json_string_in_html(body)}"}`
 									});
@@ -1046,6 +1090,15 @@ async function load_node({
 			stuff: { ...stuff }
 		};
 
+		if (options.dev) {
+			// TODO remove this for 1.0
+			Object.defineProperty(load_input, 'page', {
+				get: () => {
+					throw new Error('`page` in `load` functions has been replaced by `url` and `params`');
+				}
+			});
+		}
+
 		if (is_error) {
 			/** @type {import('types/page').ErrorLoadInput} */ (load_input).status = status;
 			/** @type {import('types/page').ErrorLoadInput} */ (load_input).error = error;
@@ -1092,15 +1145,11 @@ async function load_node({
  * }} opts
  */
 async function respond_with_error({ request, options, state, $session, status, error }) {
-	const default_layout = await options.load_component(options.manifest.layout);
-	const default_error = await options.load_component(options.manifest.error);
-
-	const page = {
-		host: request.host,
-		path: request.path,
-		query: request.query,
-		params: {}
-	};
+	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
+
+	/** @type {Record<string, string>} */
+	const params = {}; // error page has no params
 
 	// error pages don't fall through, so we know it's not undefined
 	const loaded = /** @type {Loaded} */ (
@@ -1109,7 +1158,8 @@ async function respond_with_error({ request, options, state, $session, status, e
 			options,
 			state,
 			route: null,
-			page,
+			url: request.url, // TODO this is redundant, no?
+			params,
 			node: default_layout,
 			$session,
 			stuff: {},
@@ -1127,7 +1177,8 @@ async function respond_with_error({ request, options, state, $session, status, e
 				options,
 				state,
 				route: null,
-				page,
+				url: request.url,
+				params,
 				node: default_error,
 				$session,
 				stuff: loaded ? loaded.stuff : {},
@@ -1152,7 +1203,8 @@ async function respond_with_error({ request, options, state, $session, status, e
 			status,
 			error,
 			branch,
-			page
+			url: request.url,
+			params
 		});
 	} catch (err) {
 		const error = coalesce_to_error(err);
@@ -1193,7 +1245,7 @@ function is_prerender_enabled(options, node, state) {
  *   state: SSRRenderState;
  *   $session: any;
  *   route: import('types/internal').SSRPage;
- *   page: import('types/page').Page;
+ *   params: Record<string, string>;
  * }} opts
  * @returns {Promise<ServerResponse | undefined>}
  */
@@ -1204,7 +1256,9 @@ async function respond$1(opts) {
 	let nodes;
 
 	try {
-		nodes = await Promise.all(route.a.map((id) => (id ? options.load_component(id) : undefined)));
+		nodes = await Promise.all(
+			route.a.map((n) => options.manifest._.nodes[n] && options.manifest._.nodes[n]())
+		);
 	} catch (err) {
 		const error = coalesce_to_error(err);
 
@@ -1259,6 +1313,7 @@ async function respond$1(opts) {
 				try {
 					loaded = await load_node({
 						...opts,
+						url: request.url,
 						node,
 						stuff,
 						prerender_enabled: is_prerender_enabled(options, node, state),
@@ -1301,7 +1356,7 @@ async function respond$1(opts) {
 				if (error) {
 					while (i--) {
 						if (route.b[i]) {
-							const error_node = await options.load_component(route.b[i]);
+							const error_node = await options.manifest._.nodes[route.b[i]]();
 
 							/** @type {Loaded} */
 							let node_loaded;
@@ -1315,6 +1370,7 @@ async function respond$1(opts) {
 								const error_loaded = /** @type {import('./types').Loaded} */ (
 									await load_node({
 										...opts,
+										url: request.url,
 										node: error_node,
 										stuff: node_loaded.stuff,
 										prerender_enabled: is_prerender_enabled(options, error_node, state),
@@ -1372,6 +1428,7 @@ async function respond$1(opts) {
 		return with_cookies(
 			await render_response({
 				...opts,
+				url: request.url,
 				page_config,
 				status,
 				error,
@@ -1432,18 +1489,11 @@ async function render_page(request, route, match, options, state) {
 		return {
 			status: 404,
 			headers: {},
-			body: `Not found: ${request.path}`
+			body: `Not found: ${request.url.pathname}`
 		};
 	}
 
-	const params = route.params(match);
-
-	const page = {
-		host: request.host,
-		path: request.path,
-		query: request.query,
-		params
-	};
+	const params = route.params ? decode_params(route.params(match)) : {};
 
 	const $session = await options.hooks.getSession(request);
 
@@ -1453,7 +1503,7 @@ async function render_page(request, route, match, options, state) {
 		state,
 		$session,
 		route,
-		page
+		params
 	});
 
 	if (response) {
@@ -1658,22 +1708,25 @@ function get_multipart(text, boundary) {
 
 /** @type {import('@sveltejs/kit/ssr').Respond} */
 async function respond(incoming, options, state = {}) {
-	if (incoming.path !== '/' && options.trailing_slash !== 'ignore') {
-		const has_trailing_slash = incoming.path.endsWith('/');
+	if (incoming.url.pathname !== '/' && options.trailing_slash !== 'ignore') {
+		const has_trailing_slash = incoming.url.pathname.endsWith('/');
 
 		if (
 			(has_trailing_slash && options.trailing_slash === 'never') ||
 			(!has_trailing_slash &&
 				options.trailing_slash === 'always' &&
-				!(incoming.path.split('/').pop() || '').includes('.'))
+				!(incoming.url.pathname.split('/').pop() || '').includes('.'))
 		) {
-			const path = has_trailing_slash ? incoming.path.slice(0, -1) : incoming.path + '/';
-			const q = incoming.query.toString();
+			incoming.url.pathname = has_trailing_slash
+				? incoming.url.pathname.slice(0, -1)
+				: incoming.url.pathname + '/';
+
+			if (incoming.url.search === '?') incoming.url.search = '';
 
 			return {
 				status: 301,
 				headers: {
-					location: options.paths.base + path + (q ? `?${q}` : '')
+					location: incoming.url.pathname + incoming.url.search
 				}
 			};
 		}
@@ -1688,12 +1741,33 @@ async function respond(incoming, options, state = {}) {
 		locals: {}
 	};
 
+	if (options.dev) {
+		// TODO remove this for 1.0
+		/**
+		 * @param {string} property
+		 * @param {string} replacement
+		 */
+		const print_error = (property, replacement) => {
+			Object.defineProperty(request, property, {
+				get: () => {
+					throw new Error(`request.${property} has been replaced by request.url.${replacement}`);
+				}
+			});
+		};
+
+		print_error('origin', 'origin');
+		print_error('path', 'pathname');
+		print_error('query', 'searchParams');
+	}
+
 	try {
 		return await options.hooks.handle({
 			request,
 			resolve: async (request) => {
 				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: { ssr: false, router: true, hydrate: true },
@@ -1702,8 +1776,9 @@ async function respond(incoming, options, state = {}) {
 					});
 				}
 
-				const decoded = decodeURI(request.path);
-				for (const route of options.manifest.routes) {
+				const decoded = decodeURI(request.url.pathname).replace(options.paths.base, '');
+
+				for (const route of options.manifest._.routes) {
 					const match = route.pattern.exec(decoded);
 					if (!match) continue;
 
@@ -1740,15 +1815,19 @@ async function respond(incoming, options, state = {}) {
 					}
 				}
 
-				const $session = await options.hooks.getSession(request);
-				return await respond_with_error({
-					request,
-					options,
-					state,
-					$session,
-					status: 404,
-					error: new Error(`Not found: ${request.path}`)
-				});
+				// if this request came direct from the user, rather than
+				// via a `fetch` in a `load`, render a 404 page
+				if (!state.initiator) {
+					const $session = await options.hooks.getSession(request);
+					return await respond_with_error({
+						request,
+						options,
+						state,
+						$session,
+						status: 404,
+						error: new Error(`Not found: ${request.url.pathname}`)
+					});
+				}
 			}
 		});
 	} catch (/** @type {unknown} */ err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.206",
+  "version": "1.0.0-next.208",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -87,6 +87,5 @@
     "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\" -i packaging",
     "test:packaging": "uvu src/packaging \"(spec\\.js|test[\\\\/]index\\.js)\"",
     "test:integration": "uvu test test.js"
-  },
-  "readme": "# The fastest way to build Svelte apps\n\nThis is the [SvelteKit](https://kit.svelte.dev) framework and CLI.\n\nThe quickest way to get started is via the [create-svelte](https://github.com/sveltejs/kit/tree/master/packages/create-svelte) package:\n\n```bash\nnpm init svelte@next my-app\ncd my-app\nnpm install\nnpm run dev\n```\n\nSee the [documentation](https://kit.svelte.dev/docs) to learn more.\n\n## Changelog\n\n[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).\n"
+  }
 }