@sveltejs/kit 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/src/runtime/client/utils.js

@@ -105,7 +105,7 @@ function parent_element(element) {
  */
 export function find_anchor(element, target) {
 	while (element && element !== target) {
-		if (element.nodeName.toUpperCase() === 'A') {
+		if (element.nodeName.toUpperCase() === 'A' && element.hasAttribute('href')) {
 			return /** @type {HTMLAnchorElement | SVGAElement} */ (element);
 		}
 

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

@@ -33,6 +33,12 @@ export async function load_server_data({ event, options, state, node, parent })
 
 	const result = await node.server.load?.call(null, {
 		...event,
+		fetch: (info, init) => {
+			const url = new URL(info instanceof Request ? info.url : info, event.url);
+			uses.dependencies.add(url.href);
+
+			return event.fetch(info, init);
+		},
 		/** @param {string[]} deps */
 		depends: (...deps) => {
 			for (const dep of deps) {

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

@@ -6,6 +6,7 @@ import { s } from '../../../utils/misc.js';
 import { Csp } from './csp.js';
 import { uneval_action_response } from './actions.js';
 import { clarify_devalue_error } from '../utils.js';
+import { DEV } from 'esm-env';
 
 // TODO rename this function/module
 
@@ -353,17 +354,34 @@ export async function render_response({
 	// add the content after the script/css links so the link elements are parsed first
 	head += rendered.head;
 
+	const html = options.app_template({
+		head,
+		body,
+		assets,
+		nonce: /** @type {string} */ (csp.nonce)
+	});
+
 	// TODO flush chunks as early as we can
-	const html =
+	const transformed =
 		(await resolve_opts.transformPageChunk({
-			html: options.app_template({ head, body, assets, nonce: /** @type {string} */ (csp.nonce) }),
+			html,
 			done: true
 		})) || '';
 
+	if (DEV && page_config.csr) {
+		if (transformed.split('<!--').length < html.split('<!--').length) {
+			// the \u001B stuff is ANSI codes, so that we don't need to add a library to the runtime
+			// https://svelte.dev/repl/1b3f49696f0c44c881c34587f2537aa2
+			console.warn(
+				"\u001B[1m\u001B[31mRemoving comments in transformPageChunk can break Svelte's hydration\u001B[39m\u001B[22m"
+			);
+		}
+	}
+
 	const headers = new Headers({
 		'x-sveltekit-page': 'true',
 		'content-type': 'text/html',
-		etag: `"${hash(html)}"`
+		etag: `"${hash(transformed)}"`
 	});
 
 	if (!state.prerendering) {
@@ -381,7 +399,7 @@ export async function render_response({
 		}
 	}
 
-	return new Response(html, {
+	return new Response(transformed, {
 		status,
 		headers
 	});

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

@@ -46,6 +46,7 @@ export function serialize_data(fetched, filter, prerendering = false) {
 
 	let cache_control = null;
 	let age = null;
+	let vary = false;
 
 	for (const [key, value] of fetched.response.headers) {
 		if (filter(key, value)) {
@@ -54,6 +55,7 @@ export function serialize_data(fetched, filter, prerendering = false) {
 
 		if (key === 'cache-control') cache_control = value;
 		if (key === 'age') age = value;
+		if (key === 'vary') vary = true;
 	}
 
 	const payload = {
@@ -75,7 +77,11 @@ export function serialize_data(fetched, filter, prerendering = false) {
 		attrs.push(`data-hash=${escape_html_attr(hash(fetched.request_body))}`);
 	}
 
-	if (!prerendering && fetched.method === 'GET' && cache_control) {
+	// Compute the time the response should be cached, taking into account max-age and age.
+	// Do not cache at all if a vary header is present, as this indicates that the cache is
+	// likely to get busted. It would also mean we'd have to add more logic to computing the
+	// selector on the client which results in more code for 99% of people for the 1% who use vary.
+	if (!prerendering && fetched.method === 'GET' && cache_control && !vary) {
 		const match = /s-maxage=(\d+)/g.exec(cache_control) ?? /max-age=(\d+)/g.exec(cache_control);
 		if (match) {
 			const ttl = +match[1] - +(age ?? '0');