failing test for #1277

packages/kit/.eslintrc.json

@@ -6,6 +6,7 @@
 	},
 	"globals": {
 		"goto": true,
+		"invalidate": true,
 		"prefetch": true,
 		"prefetchRoutes": true
 	}

packages/kit/src/runtime/app/navigation.js

@@ -11,6 +11,7 @@ function guard(name) {
 }
 
 export const goto = import.meta.env.SSR ? guard('goto') : goto_;
+export const invalidate = import.meta.env.SSR ? guard('invalidate') : invalidate_;
 export const prefetch = import.meta.env.SSR ? guard('prefetch') : prefetch_;
 export const prefetchRoutes = import.meta.env.SSR ? guard('prefetchRoutes') : prefetchRoutes_;
 
@@ -21,6 +22,11 @@ async function goto_(href, opts) {
 	return router.goto(href, opts, []);
 }
 
+/**
+ * @type {import('$app/navigation').invalidate}
+ */
+async function invalidate_(href) {}
+
 /**
  * @type {import('$app/navigation').prefetch}
  */

packages/kit/test/ambient.d.ts

@@ -12,6 +12,7 @@ declare global {
 		}
 	) => Promise<void>;
 
+	const invalidate: (url: string) => Promise<void>;
 	const prefetch: (url: string) => Promise<void>;
 	const prefetchRoutes: (urls?: string[]) => Promise<void>;
 }

packages/kit/test/apps/basics/src/routes/$layout.svelte

@@ -12,10 +12,10 @@
 </script>
 
 <script>
-	import { goto, prefetch, prefetchRoutes } from '$app/navigation';
+	import { goto, invalidate, prefetch, prefetchRoutes } from '$app/navigation';
 
 	if (typeof window !== 'undefined') {
-		Object.assign(window, { goto, prefetch, prefetchRoutes });
+		Object.assign(window, { goto, invalidate, prefetch, prefetchRoutes });
 	}
 
 	export let foo;
@@ -29,4 +29,4 @@
 	footer {
 		color: purple;
 	}
-</style>
+</style>

packages/kit/test/apps/basics/src/routes/load/__tests__.js

@@ -63,20 +63,25 @@ export default function (test, is_dev) {
 		'load function is only called when necessary',
 		'/load/change-detection/one/a',
 		async ({ app, page, js }) => {
-			assert.equal(await page.textContent('h1'), 'x: a: 1');
+			assert.equal(await page.textContent('h1'), 'layout loads: 1');
+			assert.equal(await page.textContent('h2'), 'x: a: 1');
 
 			if (js) {
 				await app.goto('/load/change-detection/one/a?unused=whatever');
-				assert.equal(await page.textContent('h1'), 'x: a: 1');
+				assert.equal(await page.textContent('h2'), 'x: a: 1');
 
 				await app.goto('/load/change-detection/two/b');
-				assert.equal(await page.textContent('h1'), 'y: b: 1');
+				assert.equal(await page.textContent('h2'), 'y: b: 1');
 
 				await app.goto('/load/change-detection/one/a');
-				assert.equal(await page.textContent('h1'), 'x: a: 1');
+				assert.equal(await page.textContent('h2'), 'x: a: 1');
 
 				await app.goto('/load/change-detection/one/b');
-				assert.equal(await page.textContent('h1'), 'x: b: 2');
+				assert.equal(await page.textContent('h2'), 'x: b: 2');
+
+				await app.invalidate('/load/change-detection/data.json');
+				assert.equal(await page.textContent('h1'), 'layout loads: 2');
+				assert.equal(await page.textContent('h2'), 'x: b: 2');
 			}
 		}
 	);

packages/kit/test/apps/basics/src/routes/load/change-detection/$layout.svelte

@@ -0,0 +1,30 @@
+<script context="module">
+	let loads = 0;
+
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ fetch }) {
+		const res = await fetch('/load/change-detection/data.json');
+		const { type } = await res.json();
+
+		loads += 1;
+
+		return {
+			maxage: 5,
+			props: {
+				type,
+				loads
+			}
+		};
+	}
+</script>
+
+<script>
+	/** @type {string} */
+	export let type;
+
+	/** @type {number} */
+	export let loads;
+</script>
+
+<h1>{type} loads: {loads}</h1>
+<slot></slot>

packages/kit/test/apps/basics/src/routes/load/change-detection/data.json.js

@@ -0,0 +1,7 @@
+export function get() {
+	return {
+		body: {
+			type: 'layout'
+		}
+	};
+}

packages/kit/test/apps/basics/src/routes/load/change-detection/one/[x].svelte

@@ -1,6 +1,7 @@
 <script context="module">
 	let loads = 0;
 
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page }) {
 		loads += 1;
 
@@ -15,8 +16,11 @@
 </script>
 
 <script>
+	/** @type {string} */
 	export let x;
+
+	/** @type {number} */
 	export let loads;
 </script>
 
-<h1>x: {x}: {loads}</h1>
+<h2>x: {x}: {loads}</h2>

packages/kit/test/apps/basics/src/routes/load/change-detection/two/[y].svelte

@@ -1,6 +1,7 @@
 <script context="module">
 	let loads = 0;
 
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page }) {
 		loads += 1;
 
@@ -15,8 +16,11 @@
 </script>
 
 <script>
+	/** @type {string} */
 	export let y;
+
+	/** @type {number} */
 	export let loads;
 </script>
 
-<h1>y: {y}: {loads}</h1>
+<h2>y: {y}: {loads}</h2>

packages/kit/test/test.js

@@ -106,6 +106,12 @@ async function setup({ port }) {
 			 */
 			goto: (url) => pages.js.evaluate((url) => goto(url), url),
 
+			/**
+			 * @param {string} url
+			 * @returns {Promise<void>}
+			 */
+			invalidate: (url) => pages.js.evaluate((url) => invalidate(url), url),
+
 			/**
 			 * @param {string} url
 			 * @returns {Promise<void>}

packages/kit/test/types.d.ts

@@ -23,6 +23,7 @@ export type TestContext = {
 	// these are assumed to have been put in the global scope by the layout
 	app: {
 		goto: (url: string) => Promise<void>;
+		invalidate: (url: string) => Promise<void>;
 		prefetch: (url: string) => Promise<void>;
 		prefetchRoutes: (urls?: string[]) => Promise<void>;
 	};

packages/kit/types/ambient-modules.d.ts

@@ -24,6 +24,11 @@ declare module '$app/navigation' {
 		href: string,
 		opts?: { replaceState?: boolean; noscroll?: boolean }
 	): Promise<any>;
+	/**
+	 * Returns a Promise that resolves when SvelteKit re-runs any current `load` functions that depend on `href`
+	 * @param href The invalidated resource
+	 */
+	export function invalidate(href: string): Promise<any>;
 	/**
 	 * Programmatically prefetches the given page, which means a) ensuring that the code for the page is loaded, and b) 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 `sveltekit:prefetch`.