@sveltejs/kit 1.0.0-next.269 → 1.0.0-next.272

package/assets/client/start.js

@@ -83,6 +83,8 @@ class Router {
 			history.replaceState({ ...history.state, 'sveltekit:index': 0 }, '', location.href);
 		}
 
+		this.hash_navigating = false;
+
 		this.callbacks = {
 			/** @type {Array<({ from, to, cancel }: { from: URL, to: URL | null, cancel: () => void }) => void>} */
 			before_navigate: [],
@@ -210,9 +212,8 @@ class Router {
 			// Removing the hash does a full page navigation in the browser, so make sure a hash is present
 			const [base, hash] = url.href.split('#');
 			if (hash !== undefined && base === location.href.split('#')[0]) {
-				// Call `pushState` to add url to history so going back works.
-				// Also make a delay, otherwise the browser default behaviour would not kick in
-				setTimeout(() => history.pushState({}, '', url.href));
+				this.hash_navigating = true;
+
 				const info = this.parse(url);
 				if (info) {
 					return this.renderer.update(info, [], false);
@@ -256,6 +257,17 @@ class Router {
 				});
 			}
 		});
+
+		addEventListener('hashchange', () => {
+			if (this.hash_navigating) {
+				this.hash_navigating = false;
+				history.replaceState(
+					{ ...history.state, 'sveltekit:index': ++this.current_history_index },
+					'',
+					location.href
+				);
+			}
+		});
 	}
 
 	/**
@@ -1279,10 +1291,10 @@ class Renderer {
 
 					if (has_shadow && i === a.length - 1) {
 						const res = await fetch(
-							`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json`,
+							`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
 							{
 								headers: {
-									'x-sveltekit-noredirect': 'true'
+									'x-sveltekit-load': 'true'
 								}
 							}
 						);

package/assets/server/index.js

@@ -88,6 +88,14 @@ function is_pojo(body) {
 
 	return true;
 }
+/**
+ * @param {import('types/hooks').RequestEvent} event
+ * @returns string
+ */
+function normalize_request_method(event) {
+	const method = event.request.method.toLowerCase();
+	return method === 'delete' ? 'del' : method; // 'delete' is a reserved word
+}
 
 /** @param {string} body */
 function error(body) {
@@ -127,9 +135,14 @@ function is_text(content_type) {
  * @returns {Promise<Response | undefined>}
  */
 async function render_endpoint(event, mod) {
+	const method = normalize_request_method(event);
+
 	/** @type {import('types/endpoint').RequestHandler} */
-	const handler = mod[event.request.method.toLowerCase().replace('delete', 'del')]; // 'delete' is a reserved word
+	let handler = mod[method];
 
+	if (!handler && method === 'head') {
+		handler = mod.get;
+	}
 	if (!handler) {
 		return;
 	}
@@ -179,7 +192,7 @@ async function render_endpoint(event, mod) {
 		}
 	}
 
-	return new Response(normalized_body, {
+	return new Response(method !== 'head' ? normalized_body : undefined, {
 		status,
 		headers
 	});
@@ -1044,7 +1057,7 @@ const updated = {
  *   error?: Error;
  *   url: URL;
  *   params: Record<string, string>;
- *   ssr: boolean;
+ *   resolve_opts: import('types/hooks').RequiredResolveOptions;
  *   stuff: Record<string, any>;
  * }} opts
  */
@@ -1058,7 +1071,7 @@ async function render_response({
 	error,
 	url,
 	params,
-	ssr,
+	resolve_opts,
 	stuff
 }) {
 	if (state.prerender) {
@@ -1090,7 +1103,7 @@ async function render_response({
 		error.stack = options.get_stack(error);
 	}
 
-	if (ssr) {
+	if (resolve_opts.ssr) {
 		branch.forEach(({ node, props, loaded, fetched, uses_credentials }) => {
 			if (node.css) node.css.forEach((url) => stylesheets.add(url));
 			if (node.js) node.js.forEach((url) => modulepreloads.add(url));
@@ -1186,9 +1199,9 @@ async function render_response({
 				throw new Error(`Failed to serialize session data: ${error.message}`);
 			})},
 			route: ${!!page_config.router},
-			spa: ${!ssr},
+			spa: ${!resolve_opts.ssr},
 			trailing_slash: ${s(options.trailing_slash)},
-			hydrate: ${ssr && page_config.hydrate ? `{
+			hydrate: ${resolve_opts.ssr && page_config.hydrate ? `{
 				status: ${status},
 				error: ${serialize_error(error)},
 				nodes: [
@@ -1314,7 +1327,9 @@ async function render_response({
 	const assets =
 		options.paths.assets || (segments.length > 0 ? segments.map(() => '..').join('/') : '.');
 
-	const html = options.template({ head, body, assets, nonce: /** @type {string} */ (csp.nonce) });
+	const html = resolve_opts.transformPage({
+		html: options.template({ head, body, assets, nonce: /** @type {string} */ (csp.nonce) })
+	});
 
 	const headers = new Headers({
 		'content-type': 'text/html',
@@ -1869,10 +1884,11 @@ async function load_shadow_data(route, event, options, prerender) {
 			throw new Error('Cannot prerender pages that have shadow endpoints with mutative methods');
 		}
 
-		const method = event.request.method.toLowerCase().replace('delete', 'del');
-		const handler = mod[method];
+		const method = normalize_request_method(event);
+		const is_get = method === 'head' || method === 'get';
+		const handler = method === 'head' ? mod.head || mod.get : mod[method];
 
-		if (!handler) {
+		if (!handler && !is_get) {
 			return {
 				status: 405,
 				error: new Error(`${method} method not allowed`)
@@ -1886,7 +1902,7 @@ async function load_shadow_data(route, event, options, prerender) {
 			body: {}
 		};
 
-		if (method !== 'get') {
+		if (!is_get) {
 			const result = await handler(event);
 
 			if (result.fallthrough) return result;
@@ -1910,8 +1926,9 @@ async function load_shadow_data(route, event, options, prerender) {
 			data.body = body;
 		}
 
-		if (mod.get) {
-			const result = await mod.get.call(null, event);
+		const get = (method === 'head' && mod.head) || mod.get;
+		if (get) {
+			const result = await get(event);
 
 			if (result.fallthrough) return result;
 
@@ -1999,10 +2016,18 @@ function validate_shadow_output(result) {
  *   $session: any;
  *   status: number;
  *   error: Error;
- *   ssr: boolean;
+ *   resolve_opts: import('types/hooks').RequiredResolveOptions;
  * }} opts
  */
-async function respond_with_error({ event, options, state, $session, status, error, ssr }) {
+async function respond_with_error({
+	event,
+	options,
+	state,
+	$session,
+	status,
+	error,
+	resolve_opts
+}) {
 	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
@@ -2058,7 +2083,7 @@ async function respond_with_error({ event, options, state, $session, status, err
 			branch: [layout_loaded, error_loaded],
 			url: event.url,
 			params,
-			ssr
+			resolve_opts
 		});
 	} catch (err) {
 		const error = coalesce_to_error(err);
@@ -2084,19 +2109,19 @@ async function respond_with_error({ event, options, state, $session, status, err
  *   options: SSROptions;
  *   state: SSRState;
  *   $session: any;
+ *   resolve_opts: import('types/hooks').RequiredResolveOptions;
  *   route: import('types/internal').SSRPage;
  *   params: Record<string, string>;
- *   ssr: boolean;
  * }} opts
  * @returns {Promise<Response | undefined>}
  */
 async function respond$1(opts) {
-	const { event, options, state, $session, route, ssr } = opts;
+	const { event, options, state, $session, route, resolve_opts } = opts;
 
 	/** @type {Array<SSRNode | undefined>} */
 	let nodes;
 
-	if (!ssr) {
+	if (!resolve_opts.ssr) {
 		return await render_response({
 			...opts,
 			branch: [],
@@ -2126,7 +2151,7 @@ async function respond$1(opts) {
 			$session,
 			status: 500,
 			error,
-			ssr
+			resolve_opts
 		});
 	}
 
@@ -2157,7 +2182,7 @@ async function respond$1(opts) {
 
 	let stuff = {};
 
-	ssr: if (ssr) {
+	ssr: if (resolve_opts.ssr) {
 		for (let i = 0; i < nodes.length; i += 1) {
 			const node = nodes[i];
 
@@ -2262,7 +2287,7 @@ async function respond$1(opts) {
 							$session,
 							status,
 							error,
-							ssr
+							resolve_opts
 						}),
 						set_cookie_headers
 					);
@@ -2343,10 +2368,10 @@ function with_cookies(response, set_cookie_headers) {
  * @param {import('types/internal').SSRPage} route
  * @param {import('types/internal').SSROptions} options
  * @param {import('types/internal').SSRState} state
- * @param {boolean} ssr
+ * @param {import('types/hooks').RequiredResolveOptions} resolve_opts
  * @returns {Promise<Response | undefined>}
  */
-async function render_page(event, route, options, state, ssr) {
+async function render_page(event, route, options, state, resolve_opts) {
 	if (state.initiator === route) {
 		// infinite request cycle detected
 		return new Response(`Not found: ${event.url.pathname}`, {
@@ -2372,9 +2397,9 @@ async function render_page(event, route, options, state, ssr) {
 		options,
 		state,
 		$session,
+		resolve_opts,
 		route,
-		params: event.params, // TODO this is redundant
-		ssr
+		params: event.params // TODO this is redundant
 	});
 
 	if (response) {
@@ -2446,6 +2471,9 @@ function negotiate(accept, types) {
 
 const DATA_SUFFIX = '/__data.json';
 
+/** @param {{ html: string }} opts */
+const default_transform = ({ html }) => html;
+
 /** @type {import('types/internal').Respond} */
 async function respond(request, options, state = {}) {
 	const url = new URL(request.url);
@@ -2529,13 +2557,22 @@ async function respond(request, options, state = {}) {
 		rawBody: body_getter
 	});
 
-	let ssr = true;
+	/** @type {import('types/hooks').RequiredResolveOptions} */
+	let resolve_opts = {
+		ssr: true,
+		transformPage: default_transform
+	};
 
 	try {
 		const response = await options.hooks.handle({
 			event,
 			resolve: async (event, opts) => {
-				if (opts && 'ssr' in opts) ssr = /** @type {boolean} */ (opts.ssr);
+				if (opts) {
+					resolve_opts = {
+						ssr: opts.ssr !== false,
+						transformPage: opts.transformPage || default_transform
+					};
+				}
 
 				if (state.prerender && state.prerender.fallback) {
 					return await render_response({
@@ -2548,7 +2585,10 @@ async function respond(request, options, state = {}) {
 						stuff: {},
 						status: 200,
 						branch: [],
-						ssr: false
+						resolve_opts: {
+							...resolve_opts,
+							ssr: false
+						}
 					});
 				}
 
@@ -2562,7 +2602,17 @@ async function respond(request, options, state = {}) {
 				}
 
 				const is_data_request = decoded.endsWith(DATA_SUFFIX);
-				if (is_data_request) decoded = decoded.slice(0, -DATA_SUFFIX.length) || '/';
+
+				if (is_data_request) {
+					decoded = decoded.slice(0, -DATA_SUFFIX.length) || '/';
+
+					const normalized = normalize_path(
+						url.pathname.slice(0, -DATA_SUFFIX.length),
+						options.trailing_slash
+					);
+
+					event.url = new URL(event.url.origin + normalized + event.url.search);
+				}
 
 				for (const route of options.manifest._.routes) {
 					const match = route.pattern.exec(decoded);
@@ -2576,22 +2626,30 @@ async function respond(request, options, state = {}) {
 					if (is_data_request && route.type === 'page' && route.shadow) {
 						response = await render_endpoint(event, await route.shadow());
 
-						// since redirects are opaque to the browser, we need to repackage
-						// 3xx responses as 200s with a custom header
-						if (
-							response &&
-							response.status >= 300 &&
-							response.status < 400 &&
-							request.headers.get('x-sveltekit-noredirect') === 'true'
-						) {
-							const location = response.headers.get('location');
-
-							if (location) {
-								const headers = new Headers(response.headers);
-								headers.set('x-sveltekit-location', location);
-								response = new Response(undefined, {
-									status: 204,
-									headers
+						// loading data for a client-side transition is a special case
+						if (request.headers.get('x-sveltekit-load') === 'true') {
+							if (response) {
+								// since redirects are opaque to the browser, we need to repackage
+								// 3xx responses as 200s with a custom header
+								if (response.status >= 300 && response.status < 400) {
+									const location = response.headers.get('location');
+
+									if (location) {
+										const headers = new Headers(response.headers);
+										headers.set('x-sveltekit-location', location);
+										response = new Response(undefined, {
+											status: 204,
+											headers
+										});
+									}
+								}
+							} else {
+								// TODO ideally, the client wouldn't request this data
+								// in the first place (at least in production)
+								response = new Response('{}', {
+									headers: {
+										'content-type': 'application/json'
+									}
 								});
 							}
 						}
@@ -2599,7 +2657,7 @@ async function respond(request, options, state = {}) {
 						response =
 							route.type === 'endpoint'
 								? await render_endpoint(event, await route.load())
-								: await render_page(event, route, options, state, ssr);
+								: await render_page(event, route, options, state, resolve_opts);
 					}
 
 					if (response) {
@@ -2651,7 +2709,7 @@ async function respond(request, options, state = {}) {
 						$session,
 						status: 404,
 						error: new Error(`Not found: ${event.url.pathname}`),
-						ssr
+						resolve_opts
 					});
 				}
 
@@ -2687,7 +2745,7 @@ async function respond(request, options, state = {}) {
 				$session,
 				status: 500,
 				error,
-				ssr
+				resolve_opts
 			});
 		} catch (/** @type {unknown} */ e) {
 			const error = coalesce_to_error(e);

package/dist/cli.js

@@ -998,7 +998,7 @@ async function launch(port, https) {
 	exec(`${cmd} ${https ? 'https' : 'http'}://localhost:${port}`);
 }
 
-const prog = sade('svelte-kit').version('1.0.0-next.269');
+const prog = sade('svelte-kit').version('1.0.0-next.272');
 
 prog
 	.command('dev')
@@ -1156,7 +1156,7 @@ async function check_port(port) {
 function welcome({ port, host, https, open, loose, allow, cwd }) {
 	if (open) launch(port, https);
 
-	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.269'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.272'}\n`));
 
 	const protocol = https ? 'https:' : 'http:';
 	const exposed = typeof host !== 'undefined' && host !== 'localhost' && host !== '127.0.0.1';

package/package.json

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

package/types/hooks.d.ts

@@ -14,14 +14,17 @@ export interface GetSession {
 	(event: RequestEvent): MaybePromise<App.Session>;
 }
 
-export interface ResolveOpts {
-	ssr?: boolean;
+export interface RequiredResolveOptions {
+	ssr: boolean;
+	transformPage: ({ html }: { html: string }) => string;
 }
 
+export type ResolveOptions = Partial<RequiredResolveOptions>;
+
 export interface Handle {
 	(input: {
 		event: RequestEvent;
-		resolve(event: RequestEvent, opts?: ResolveOpts): MaybePromise<Response>;
+		resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
 	}): MaybePromise<Response>;
 }
 

package/types/index.d.ts

@@ -14,4 +14,11 @@ export {
 } from './config';
 export { EndpointOutput, RequestHandler } from './endpoint';
 export { ErrorLoad, ErrorLoadInput, Load, LoadInput, LoadOutput } from './page';
-export { ExternalFetch, GetSession, Handle, HandleError, RequestEvent, ResolveOpts } from './hooks';
+export {
+	ExternalFetch,
+	GetSession,
+	Handle,
+	HandleError,
+	RequestEvent,
+	ResolveOptions
+} from './hooks';