fix: tighten up preloadCode (#12217)

support absolute URLs with `data-sveltekit-preload-code="viewport"` and reroutes for preloadCode in general --------- Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Chew Tee Ming <chew.tee.ming@nindatech.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

Author: 4 people

.changeset/fluffy-coats-laugh.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: support absolute URLs and reroutes with `data-sveltekit-preload-code="viewport"`

packages/kit/src/runtime/client/client.js

@@ -426,9 +426,15 @@ async function _preload_data(intent) {
 return load_cache.promise;
 }
 
-/** @param {URL} url */
+/**
+ * @param {URL} url
+ * @returns {Promise<void>}
+ */
 async function _preload_code(url) {
-const route = routes.find((route) => route.exec(get_url_path(url)));
+const rerouted = get_rerouted_url(url);
+if (!rerouted) return;
+
+const route = routes.find((route) => route.exec(get_url_path(rerouted)));
 
 if (route) {
 await Promise.all([...route.layouts, route.leaf].map((load) => load?.[1]()));
@@ -1189,16 +1195,11 @@ async function load_root_error_page({ status, error, url, route }) {
 }
 
 /**
- * Resolve the full info (which route, params, etc.) for a client-side navigation from the URL,
- * taking the reroute hook into account. If this isn't a client-side-navigation (or the URL is undefined),
- * returns undefined.
- * @param {URL | undefined} url
- * @param {boolean} invalidating
+ * Resolve the relative rerouted URL for a client-side navigation
+ * @param {URL} url
+ * @returns {URL | undefined}
  */
-function get_navigation_intent(url, invalidating) {
-if (!url) return;
-if (is_external_url(url, base, app.hash)) return;
-
+function get_rerouted_url(url) {
 // reroute could alter the given URL, so we pass a copy
 let rerouted;
 try {
@@ -1225,9 +1226,26 @@ function get_navigation_intent(url, invalidating) {
 }
 
 // fall back to native navigation
-return undefined;
+return;
 }
 
+return rerouted;
+}
+
+/**
+ * Resolve the full info (which route, params, etc.) for a client-side navigation from the URL,
+ * taking the reroute hook into account. If this isn't a client-side-navigation (or the URL is undefined),
+ * returns undefined.
+ * @param {URL | undefined} url
+ * @param {boolean} invalidating
+ */
+function get_navigation_intent(url, invalidating) {
+if (!url) return;
+if (is_external_url(url, base, app.hash)) return;
+
+const rerouted = get_rerouted_url(url);
+if (!rerouted) return;
+
 const path = get_url_path(rerouted);
 
 for (const route of routes) {
@@ -1942,13 +1960,20 @@ export function preloadCode(pathname) {
 const url = new URL(pathname, current.url);
 
 if (DEV) {
+if (!pathname.startsWith('/')) {
+throw new Error(
+'argument passed to preloadCode must be a pathname (i.e. "/about" rather than "http://example.com/about"'
+);
+}
+
 if (!pathname.startsWith(base)) {
 throw new Error(
-`pathnames passed to preloadCode must start with \`paths.base\` (i.e. "${base}${pathname}" rather than "${pathname}")`
+`pathname passed to preloadCode must start with \`paths.base\` (i.e. "${base}${pathname}" rather than "${pathname}")`
 );
 }
 
-if (!routes.find((route) => route.exec(get_url_path(url)))) {
+const rerouted = get_rerouted_url(url);
+if (!rerouted || !routes.find((route) => route.exec(get_url_path(rerouted)))) {
 throw new Error(`'${pathname}' did not match any routes`);
 }
 }

packages/kit/test/ambient.d.ts

@@ -16,7 +16,7 @@ declare global {
 const preloadData: (url: string) => Promise<void>;
 const beforeNavigate: (fn: (url: URL) => void | boolean) => void;
 const afterNavigate: (fn: () => void) => void;
-const preloadCode: (...urls: string[]) => Promise<void>;
+const preloadCode: (pathname: string) => Promise<void>;
 }
 
 export {};

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/+page.svelte

@@ -0,0 +1,11 @@
+<div style="height: 200vh"></div>
+
+<a
+id="viewport"
+href="/data-sveltekit/preload-code/target/viewport"
+data-sveltekit-preload-code="viewport">viewport</a
+>
+<a id="hover" href="/data-sveltekit/preload-code/target/hover" data-sveltekit-preload-code="hover"
+>hover</a
+>
+<a id="tap" href="/data-sveltekit/preload-code/target/tap" data-sveltekit-preload-code="tap">tap</a>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/target/eager/+page.js

@@ -0,0 +1,5 @@
+export function load() {
+return {
+name: 'eager'
+};
+}

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/target/eager/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+export let data;
+</script>
+
+<h1>{data.name}</h1>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/target/hover/+page.js

@@ -0,0 +1,5 @@
+export function load() {
+return {
+name: 'hover'
+};
+}

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/target/hover/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+export let data;
+</script>
+
+<h1>{data.name}</h1>

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/target/tap/+page.js

@@ -0,0 +1,5 @@
+export function load() {
+return {
+name: 'tap'
+};
+}

packages/kit/test/apps/basics/src/routes/data-sveltekit/preload-code/target/tap/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+export let data;
+</script>
+
+<h1>{data.name}</h1>