@sveltejs/kit 1.0.0-next.563 → 1.0.0-next.565

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.563",
+  "version": "1.0.0-next.565",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -21,10 +21,10 @@
     "set-cookie-parser": "^2.5.1",
     "sirv": "^2.0.2",
     "tiny-glob": "^0.2.9",
-    "undici": "5.12.0"
+    "undici": "5.13.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.25.0",
+    "@playwright/test": "^1.28.1",
     "@types/connect": "^3.4.35",
     "@types/marked": "^4.0.7",
     "@types/mime": "^3.0.1",

package/src/runtime/app/navigation.js

@@ -17,7 +17,7 @@ export const disableScrollHandling = ssr
 export const goto = ssr ? guard('goto') : client.goto;
 export const invalidate = ssr ? guard('invalidate') : client.invalidate;
 export const invalidateAll = ssr ? guard('invalidateAll') : client.invalidateAll;
-export const prefetch = ssr ? guard('prefetch') : client.prefetch;
-export const prefetchRoutes = ssr ? guard('prefetchRoutes') : client.prefetch_routes;
+export const preloadData = ssr ? guard('preloadData') : client.preload_data;
+export const preloadCode = ssr ? guard('preloadCode') : client.preload_code;
 export const beforeNavigate = ssr ? () => {} : client.before_navigate;
 export const afterNavigate = ssr ? () => {} : client.after_navigate;

package/src/runtime/client/client.js

@@ -6,7 +6,7 @@ import {
 	normalize_path,
 	add_data_suffix
 } from '../../utils/url.js';
-import { find_anchor, get_base_uri, scroll_state } from './utils.js';
+import { find_anchor, get_base_uri, is_external_url, scroll_state } from './utils.js';
 import {
 	lock_fetch,
 	unlock_fetch,
@@ -22,9 +22,7 @@ import { HttpError, Redirect } from '../control.js';
 import { stores } from './singletons.js';
 import { unwrap_promises } from '../../utils/promises.js';
 import * as devalue from 'devalue';
-
-const SCROLL_KEY = 'sveltekit:scroll';
-const INDEX_KEY = 'sveltekit:index';
+import { INDEX_KEY, PRELOAD_PRIORITIES, SCROLL_KEY } from './constants.js';
 
 const routes = parse(nodes, server_loads, dictionary, matchers);
 
@@ -66,7 +64,9 @@ function check_for_removed_attributes() {
 			if (!warned_about_attributes[attr]) {
 				warned_about_attributes[attr] = true;
 				console.error(
-					`The sveltekit:${attr} attribute has been replaced with data-sveltekit-${attr}`
+					`The sveltekit:${attr} attribute has been replaced with data-sveltekit-${
+						attr === 'prefetch' ? 'preload-data' : attr
+					}`
 				);
 			}
 		}
@@ -159,8 +159,8 @@ export function create_client({ target, base }) {
 
 		const url = new URL(location.href);
 		const intent = get_navigation_intent(url, true);
-		// Clear prefetch, it might be affected by the invalidation.
-		// Also solves an edge case where a prefetch is triggered, the navigation for it
+		// Clear preload, it might be affected by the invalidation.
+		// Also solves an edge case where a preload is triggered, the navigation for it
 		// was then triggered and is still running while the invalidation kicks in,
 		// at which point the invalidation should take over and "win".
 		load_cache = null;
@@ -210,11 +210,11 @@ export function create_client({ target, base }) {
 	}
 
 	/** @param {URL} url */
-	async function prefetch(url) {
+	async function preload_data(url) {
 		const intent = get_navigation_intent(url, false);
 
 		if (!intent) {
-			throw new Error(`Attempted to prefetch a URL that does not belong to this app: ${url}`);
+			throw new Error(`Attempted to preload a URL that does not belong to this app: ${url}`);
 		}
 
 		load_cache = {
@@ -231,6 +231,17 @@ export function create_client({ target, base }) {
 		return load_cache.promise;
 	}
 
+	/** @param {...string} pathnames */
+	async function preload_code(...pathnames) {
+		const matching = routes.filter((route) => pathnames.some((pathname) => route.exec(pathname)));
+
+		const promises = matching.map((r) => {
+			return Promise.all([...r.layouts, r.leaf].map((load) => load?.[1]()));
+		});
+
+		await Promise.all(promises);
+	}
+
 	/**
 	 * Returns `true` if update completes, `false` if it is aborted
 	 * @param {import('./types').NavigationIntent | undefined} intent
@@ -306,7 +317,7 @@ export function create_client({ target, base }) {
 			history[details.replaceState ? 'replaceState' : 'pushState'](details.state, '', url);
 		}
 
-		// reset prefetch synchronously after the history state has been set to avoid race conditions
+		// reset preload synchronously after the history state has been set to avoid race conditions
 		load_cache = null;
 
 		if (started) {
@@ -478,7 +489,7 @@ export function create_client({ target, base }) {
 				params,
 				route,
 				status,
-				url,
+				url: new URL(url),
 				form,
 				// The whole page store is updated, but this way the object reference stays the same
 				data: data_changed ? data : page.data
@@ -1004,7 +1015,7 @@ export function create_client({ target, base }) {
 	 * @param {boolean} invalidating
 	 */
 	function get_navigation_intent(url, invalidating) {
-		if (is_external_url(url)) return;
+		if (is_external_url(url, base)) return;
 
 		const path = decode_pathname(url.pathname.slice(base.length) || '/');
 
@@ -1020,11 +1031,6 @@ export function create_client({ target, base }) {
 		}
 	}
 
-	/** @param {URL} url */
-	function is_external_url(url) {
-		return url.origin !== location.origin || !url.pathname.startsWith(base);
-	}
-
 	/**
 	 * @param {{
 	 *   url: URL;
@@ -1177,6 +1183,77 @@ export function create_client({ target, base }) {
 		});
 	}
 
+	function setup_preload() {
+		/** @type {NodeJS.Timeout} */
+		let mousemove_timeout;
+
+		target.addEventListener('mousemove', (event) => {
+			const target = /** @type {Element} */ (event.target);
+
+			clearTimeout(mousemove_timeout);
+			mousemove_timeout = setTimeout(() => {
+				preload(target, 2);
+			}, 20);
+		});
+
+		/** @param {Event} event */
+		function tap(event) {
+			preload(/** @type {Element} */ (event.composedPath()[0]), 1);
+		}
+
+		target.addEventListener('mousedown', tap);
+		target.addEventListener('touchstart', tap, { passive: true });
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						preload_code(new URL(/** @type {HTMLAnchorElement} */ (entry.target).href).pathname);
+						observer.unobserve(entry.target);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+
+		/**
+		 * @param {Element} element
+		 * @param {number} priority
+		 */
+		function preload(element, priority) {
+			const { url, options, external } = find_anchor(element, base);
+
+			if (!external) {
+				if (priority <= options.preload_data) {
+					preload_data(/** @type {URL} */ (url));
+				} else if (priority <= options.preload_code) {
+					preload_code(/** @type {URL} */ (url).pathname);
+				}
+			}
+		}
+
+		function after_navigate() {
+			observer.disconnect();
+
+			for (const a of target.querySelectorAll('a')) {
+				const { url, external, options } = find_anchor(a, base);
+
+				if (external) continue;
+
+				if (options.preload_code === PRELOAD_PRIORITIES.viewport) {
+					observer.observe(a);
+				}
+
+				if (options.preload_code === PRELOAD_PRIORITIES.eager) {
+					preload_code(/** @type {URL} */ (url).pathname);
+				}
+			}
+		}
+
+		callbacks.after_navigate.push(after_navigate);
+		after_navigate();
+	}
+
 	return {
 		after_navigate: (fn) => {
 			onMount(() => {
@@ -1250,23 +1327,12 @@ export function create_client({ target, base }) {
 			return invalidate();
 		},
 
-		prefetch: async (href) => {
+		preload_data: async (href) => {
 			const url = new URL(href, get_base_uri(document));
-			await prefetch(url);
+			await preload_data(url);
 		},
 
-		// TODO rethink this API
-		prefetch_routes: async (pathnames) => {
-			const matching = pathnames
-				? routes.filter((route) => pathnames.some((pathname) => route.exec(pathname)))
-				: routes;
-
-			const promises = matching.map((r) => {
-				return Promise.all([...r.layouts, r.leaf].map((load) => load?.[1]()));
-			});
-
-			await Promise.all(promises);
-		},
+		preload_code,
 
 		apply_action: async (result) => {
 			if (result.type === 'error') {
@@ -1365,33 +1431,10 @@ export function create_client({ target, base }) {
 				}
 			});
 
-			/** @param {Event} event */
-			const trigger_prefetch = (event) => {
-				const { url, options, has } = find_anchor(event);
-				if (url && options.prefetch && !is_external_url(url)) {
-					if (options.reload || has.rel_external || has.target || has.download) return;
-					prefetch(url);
-				}
-			};
-
-			/** @type {NodeJS.Timeout} */
-			let mousemove_timeout;
-
-			/** @param {MouseEvent|TouchEvent} event */
-			const handle_mousemove = (event) => {
-				clearTimeout(mousemove_timeout);
-				mousemove_timeout = setTimeout(() => {
-					// event.composedPath(), which is used in find_anchor, will be empty if the event is read in a timeout
-					// add a layer of indirection to address that
-					event.target?.dispatchEvent(
-						new CustomEvent('sveltekit:trigger_prefetch', { bubbles: true })
-					);
-				}, 20);
-			};
-
-			target.addEventListener('touchstart', trigger_prefetch, { passive: true });
-			target.addEventListener('mousemove', handle_mousemove);
-			target.addEventListener('sveltekit:trigger_prefetch', trigger_prefetch);
+			// @ts-expect-error this isn't supported everywhere yet
+			if (!navigator.connection?.saveData) {
+				setup_preload();
+			}
 
 			/** @param {MouseEvent} event */
 			target.addEventListener('click', (event) => {
@@ -1401,7 +1444,10 @@ export function create_client({ target, base }) {
 				if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
 				if (event.defaultPrevented) return;
 
-				const { a, url, options, has } = find_anchor(event);
+				const { a, url, options, has } = find_anchor(
+					/** @type {Element} */ (event.composedPath()[0]),
+					base
+				);
 				if (!a || !url) return;
 
 				const is_svg_a_element = a instanceof SVGAElement;
@@ -1436,8 +1482,8 @@ export function create_client({ target, base }) {
 				// Check if new url only differs by hash and use the browser default behavior in that case
 				// This will ensure the `hashchange` event is fired
 				// 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]) {
+				const [nonhash, hash] = url.href.split('#');
+				if (hash !== undefined && nonhash === location.href.split('#')[0]) {
 					// set this flag to distinguish between navigations triggered by
 					// clicking a hash link and those triggered by popstate
 					// TODO why not update history here directly?

package/src/runtime/client/constants.js

@@ -0,0 +1,10 @@
+export const SCROLL_KEY = 'sveltekit:scroll';
+export const INDEX_KEY = 'sveltekit:index';
+
+export const PRELOAD_PRIORITIES = /** @type {const} */ ({
+	tap: 1,
+	hover: 2,
+	viewport: 3,
+	eager: 4,
+	off: -1
+});

package/src/runtime/client/fetcher.js

@@ -26,7 +26,12 @@ if (import.meta.env.DEV) {
 		const url = input instanceof Request ? input.url : input.toString();
 		const stack = /** @type {string} */ (new Error().stack);
 
-		const heuristic = can_inspect_stack_trace ? stack.includes('load_node') : loading;
+		// check if fetch was called via load_node. the lock method only checks if it was called at the
+		// same time, but not necessarily if it was called from `load`
+		// we use just the filename as the method name sometimes does not appear on the CI
+		const heuristic = can_inspect_stack_trace
+			? stack.includes('src/runtime/client/client.js')
+			: loading;
 		if (heuristic) {
 			console.warn(
 				`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://kit.svelte.dev/docs/load#making-fetch-requests`

package/src/runtime/client/types.d.ts

@@ -5,8 +5,8 @@ import {
 	goto,
 	invalidate,
 	invalidateAll,
-	prefetch,
-	prefetchRoutes
+	preloadCode,
+	preloadData
 } from '$app/navigation';
 import { CSRPageNode, CSRPageNodeLoader, CSRRoute, TrailingSlash, Uses } from 'types';
 
@@ -18,8 +18,8 @@ export interface Client {
 	goto: typeof goto;
 	invalidate: typeof invalidate;
 	invalidateAll: typeof invalidateAll;
-	prefetch: typeof prefetch;
-	prefetch_routes: typeof prefetchRoutes;
+	preload_code: typeof preloadCode;
+	preload_data: typeof preloadData;
 	apply_action: typeof applyAction;
 
 	// private API

package/src/runtime/client/utils.js

@@ -1,6 +1,7 @@
 import { writable } from 'svelte/store';
 import { assets } from '../paths.js';
 import { version } from '../env.js';
+import { PRELOAD_PRIORITIES } from './constants.js';
 
 /* global __SVELTEKIT_APP_VERSION_FILE__, __SVELTEKIT_APP_VERSION_POLL_INTERVAL__ */
 
@@ -23,72 +24,137 @@ export function scroll_state() {
 	};
 }
 
-/** @param {Event} event */
-export function find_anchor(event) {
+const warned = new WeakSet();
+
+/** @typedef {keyof typeof valid_link_options} LinkOptionName */
+
+const valid_link_options = /** @type {const} */ ({
+	'preload-code': ['', 'off', 'tap', 'hover', 'viewport', 'eager'],
+	'preload-data': ['', 'off', 'tap', 'hover'],
+	noscroll: ['', 'off'],
+	reload: ['', 'off']
+});
+
+/**
+ * @template {LinkOptionName} T
+ * @param {Element} element
+ * @param {T} name
+ */
+function link_option(element, name) {
+	const value = /** @type {typeof valid_link_options[T][number] | null} */ (
+		element.getAttribute(`data-sveltekit-${name}`)
+	);
+
+	if (__SVELTEKIT_DEV__) validate_link_option(element, name, value);
+
+	return value;
+}
+
+/**
+ * @template {LinkOptionName} T
+ * @template {typeof valid_link_options[T][number] | null} U
+ * @param {Element} element
+ * @param {T} name
+ * @param {U} value
+ */
+function validate_link_option(element, name, value) {
+	if (value === null) return;
+
+	// @ts-expect-error - includes is dumb
+	if (!warned.has(element) && !valid_link_options[name].includes(value)) {
+		console.error(
+			`Unexpected value for ${name} — should be one of ${valid_link_options[name]
+				.map((option) => JSON.stringify(option))
+				.join(', ')}`,
+			element
+		);
+
+		warned.add(element);
+	}
+}
+
+const levels = {
+	...PRELOAD_PRIORITIES,
+	'': PRELOAD_PRIORITIES.hover
+};
+
+/**
+ * @param {Element} element
+ * @param {string} base
+ */
+export function find_anchor(element, base) {
 	/** @type {HTMLAnchorElement | SVGAElement | undefined} */
 	let a;
 
-	/** @type {boolean | null} */
+	/** @type {typeof valid_link_options['noscroll'][number] | null} */
 	let noscroll = null;
 
-	/** @type {boolean | null} */
-	let prefetch = null;
+	/** @type {typeof valid_link_options['preload-code'][number] | null} */
+	let preload_code = null;
 
-	/** @type {boolean | null} */
-	let reload = null;
+	/** @type {typeof valid_link_options['preload-data'][number] | null} */
+	let preload_data = null;
 
-	for (const element of event.composedPath()) {
-		if (!(element instanceof Element)) continue;
+	/** @type {typeof valid_link_options['reload'][number] | null} */
+	let reload = null;
 
+	while (element !== document.documentElement) {
 		if (!a && element.nodeName.toUpperCase() === 'A') {
 			// SVG <a> elements have a lowercase name
 			a = /** @type {HTMLAnchorElement | SVGAElement} */ (element);
 		}
 
-		if (noscroll === null) noscroll = get_link_option(element, 'data-sveltekit-noscroll');
-		if (prefetch === null) prefetch = get_link_option(element, 'data-sveltekit-prefetch');
-		if (reload === null) reload = get_link_option(element, 'data-sveltekit-reload');
-	}
+		if (a) {
+			if (preload_code === null) preload_code = link_option(element, 'preload-code');
+			if (preload_data === null) preload_data = link_option(element, 'preload-data');
+			if (noscroll === null) noscroll = link_option(element, 'noscroll');
+			if (reload === null) reload = link_option(element, 'reload');
+		}
 
-	const url = a && new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+		// @ts-expect-error handle shadow roots
+		element = element.assignedSlot ?? element.parentNode;
 
-	return {
-		a,
-		url,
-		options: {
-			noscroll,
-			prefetch,
-			reload
-		},
-		has: a
-			? {
-					rel_external: (a.getAttribute('rel') || '').split(/\s+/).includes('external'),
-					download: a.hasAttribute('download'),
-					target: !!(a instanceof SVGAElement ? a.target.baseVal : a.target)
-			  }
-			: {}
-	};
-}
+		// @ts-expect-error handle shadow roots
+		if (element.nodeType === 11) element = element.host;
+	}
 
-const warned = new WeakSet();
+	/** @type {URL | undefined} */
+	let url;
 
-/**
- * @param {Element} element
- * @param {string} attribute
- */
-function get_link_option(element, attribute) {
-	const value = element.getAttribute(attribute);
-	if (value === null) return value;
+	try {
+		url = a && new URL(a instanceof SVGAElement ? a.href.baseVal : a.href, document.baseURI);
+	} catch {}
 
-	if (value === '') return true;
-	if (value === 'off') return false;
+	const options = {
+		preload_code: levels[preload_code ?? 'off'],
+		preload_data: levels[preload_data ?? 'off'],
+		noscroll: noscroll === 'off' ? false : noscroll === '' ? true : null,
+		reload: reload === 'off' ? false : reload === '' ? true : null
+	};
 
-	if (__SVELTEKIT_DEV__ && !warned.has(element)) {
-		console.error(`Unexpected value for ${attribute} — should be "" or "off"`, element);
-		warned.add(element);
-	}
+	const has = a
+		? {
+				rel_external: (a.getAttribute('rel') || '').split(/\s+/).includes('external'),
+				download: a.hasAttribute('download'),
+				target: !!(a instanceof SVGAElement ? a.target.baseVal : a.target)
+		  }
+		: {};
+
+	const external =
+		!url ||
+		is_external_url(url, base) ||
+		options.reload ||
+		has.rel_external ||
+		has.target ||
+		has.download;
 
-	return false;
+	return {
+		a,
+		url,
+		options,
+		external,
+		has
+	};
 }
 
 /** @param {any} value */
@@ -165,3 +231,11 @@ export function create_updated_store() {
 		check
 	};
 }
+
+/**
+ * @param {URL} url
+ * @param {string} base
+ */
+export function is_external_url(url, base) {
+	return url.origin !== location.origin || !url.pathname.startsWith(base);
+}

package/types/ambient.d.ts

@@ -186,8 +186,8 @@ declare module '$app/forms' {
  * 	goto,
  * 	invalidate,
  * 	invalidateAll,
- * 	prefetch,
- * 	prefetchRoutes
+ * 	preloadCode,
+ * 	preloadData
  * } from '$app/navigation';
  * ```
  */
@@ -251,28 +251,27 @@ declare module '$app/navigation' {
 	 */
 	export function invalidateAll(): Promise<void>;
 	/**
-	 * Programmatically prefetches the given page, which means
+	 * Programmatically preloads the given page, which means
 	 *  1. ensuring that the code for the page is loaded, and
 	 *  2. calling the page's load function with the appropriate options.
 	 *
-	 * This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with `data-sveltekit-prefetch`.
+	 * This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with `data-sveltekit-preload-data`.
 	 * If the next navigation is to `href`, the values returned from load will be used, making navigation instantaneous.
-	 * Returns a Promise that resolves when the prefetch is complete.
+	 * Returns a Promise that resolves when the preload is complete.
 	 *
-	 * @param href Page to prefetch
+	 * @param href Page to preload
 	 */
-	export function prefetch(href: string): Promise<void>;
+	export function preloadData(href: string): Promise<void>;
 	/**
-	 * Programmatically prefetches the code for routes that haven't yet been fetched.
+	 * Programmatically imports the code for routes that haven't yet been fetched.
 	 * Typically, you might call this to speed up subsequent navigation.
 	 *
-	 * If no argument is given, all routes will be fetched, otherwise you can specify routes by any matching pathname
-	 * such as `/about` (to match `src/routes/about.svelte`) or `/blog/*` (to match `src/routes/blog/[slug].svelte`).
+	 * You can specify routes by any matching pathname such as `/about` (to match `src/routes/about.svelte`) or `/blog/*` (to match `src/routes/blog/[slug].svelte`).
 	 *
-	 * Unlike prefetch, this won't call load for individual pages.
-	 * Returns a Promise that resolves when the routes have been prefetched.
+	 * Unlike `preloadData`, this won't call `load` functions.
+	 * Returns a Promise that resolves when the modules have been imported.
 	 */
-	export function prefetchRoutes(routes?: string[]): Promise<void>;
+	export function preloadCode(...urls: string[]): Promise<void>;
 
 	/**
 	 * A navigation interceptor that triggers before we navigate to a new URL, whether by clicking a link, calling `goto(...)`, or using the browser back/forward controls.
@@ -363,7 +362,7 @@ declare module '$app/stores' {
 declare module '$service-worker' {
 	/**
 	 * An array of URL strings representing the files generated by Vite, suitable for caching with `cache.addAll(build)`.
-	 * During development, this is be an empty array.
+	 * During development, this is an empty array.
 	 */
 	export const build: string[];
 	/**
@@ -372,7 +371,7 @@ declare module '$service-worker' {
 	export const files: string[];
 	/**
 	 * An array of pathnames corresponding to prerendered pages and endpoints.
-	 * During development, this is be an empty array.
+	 * During development, this is an empty array.
 	 */
 	export const prerendered: string[];
 	/**