[feat] invalidate with predicate (#4636)

* [feat] invalidate with predicate

* work around function serialisation problem

* simplify

* update types

Co-authored-by: Rich Harris <hello@rich-harris.dev>

.changeset/hungry-weeks-exercise.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+`invalidate` with `predicate` function

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

@@ -61,8 +61,8 @@ export function create_client({ target, session, base, trailing_slash }) {
 	/** @type {Map<string, import('./types').NavigationResult>} */
 	const cache = new Map();
 
-	/** @type {Set<string>} */
-	const invalidated = new Set();
+	/** @type {Array<((href: string) => boolean)>} */
+	const invalidated = [];
 
 	const stores = {
 		url: notifiable_store({}),
@@ -243,7 +243,7 @@ export function create_client({ target, session, base, trailing_slash }) {
 		// abort if user navigated during update
 		if (token !== current_token) return;
 
-		invalidated.clear();
+		invalidated.length = 0;
 
 		if (navigation_result.redirect) {
 			if (redirect_chain.length > 10 || redirect_chain.includes(url.pathname)) {
@@ -634,7 +634,7 @@ export function create_client({ target, session, base, trailing_slash }) {
 					(changed.url && previous.uses.url) ||
 					changed.params.some((param) => previous.uses.params.has(param)) ||
 					(changed.session && previous.uses.session) ||
-					Array.from(previous.uses.dependencies).some((dep) => invalidated.has(dep)) ||
+					Array.from(previous.uses.dependencies).some((dep) => invalidated.some((fn) => fn(dep))) ||
 					(stuff_changed && previous.uses.stuff);
 
 				if (changed_since_last_render) {
@@ -975,9 +975,12 @@ export function create_client({ target, session, base, trailing_slash }) {
 		goto: (href, opts = {}) => goto(href, opts, []),
 
 		invalidate: (resource) => {
-			const { href } = new URL(resource, location.href);
-
-			invalidated.add(href);
+			if (typeof resource === 'function') {
+				invalidated.push(resource);
+			} else {
+				const { href } = new URL(resource, location.href);
+				invalidated.push((dep) => dep === href);
+			}
 
 			if (!invalidating) {
 				invalidating = Promise.resolve().then(async () => {

packages/kit/test/apps/basics/src/global.d.ts

@@ -1,5 +1,6 @@
 declare global {
 	interface Window {
+		invalidated: boolean;
 		oops: string;
 		pageContext: any;
 		fulfil_navigation: (value: any) => void;

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

@@ -1,5 +1,6 @@
 <script context="module">
 	import { browser } from '$app/env';
+	import { invalidate } from '$app/navigation';
 
 	let count = 0;
 
@@ -28,3 +29,10 @@
 </script>
 
 <h2>x: {x}: {loads}</h2>
+
+<button
+	on:click={async () => {
+		await invalidate((dep) => dep.includes('change-detection/data.json'));
+		window.invalidated = true;
+	}}>invalidate change-detection/data.json</button
+>

packages/kit/test/apps/basics/test/test.js

@@ -1230,6 +1230,11 @@ test.describe.parallel('Load', () => {
 			await app.invalidate('custom:change-detection-layout');
 			expect(await page.textContent('h1')).toBe('layout loads: 4');
 			expect(await page.textContent('h2')).toBe('x: b: 2');
+
+			await page.click('button');
+			await page.waitForFunction('window.invalidated');
+			expect(await page.textContent('h1')).toBe('layout loads: 5');
+			expect(await page.textContent('h2')).toBe('x: b: 2');
 		}
 	});
 

packages/kit/types/ambient.d.ts

@@ -103,9 +103,9 @@ declare module '$app/navigation' {
 	): Promise<void>;
 	/**
 	 * Causes any `load` functions belonging to the currently active page to re-run if they `fetch` the resource in question. Returns a `Promise` that resolves when the page is subsequently updated.
-	 * @param href The invalidated resource
+	 * @param dependency The invalidated resource
 	 */
-	export function invalidate(href: string): Promise<void>;
+	export function invalidate(dependency: string | ((href: string) => boolean)): Promise<void>;
 	/**
 	 * Programmatically prefetches the given page, which means
 	 *  1. ensuring that the code for the page is loaded, and