fix: reflect SvelteURLSearchParams changes to SvelteURL (#12285)

* separated url-search params and url classes and added more tests

* making URL aware of SvelteURLSearchParams changes so they are in sync

* added changeset

* generated types

* bail out if url.sp and SvelteSp are already in sync

* sync search on searchParams change because of how node18 handles it

* use ts-expect-error instead of ts-ignore

* remove a bit of indirection

* tweak

* fix

* regenerate types

* short-circuit in both directions

---------

Co-authored-by: Rich Harris <[email protected]>

Author: FoHoOV

.changeset/angry-birds-fly.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: reflect SvelteURLSearchParams changes to SvelteURL

packages/svelte/src/reactivity/index-client.js

@@ -1,7 +1,8 @@
 export { SvelteDate } from './date.js';
 export { SvelteSet } from './set.js';
 export { SvelteMap } from './map.js';
-export { SvelteURL, SvelteURLSearchParams } from './url.js';
+export { SvelteURL } from './url.js';
+export { SvelteURLSearchParams } from './url-search-params.js';
 
 /** @deprecated Use `SvelteDate` instead */
 export function Date() {

packages/svelte/src/reactivity/url-search-params.js

@@ -0,0 +1,146 @@
+import { source } from '../internal/client/reactivity/sources.js';
+import { get } from '../internal/client/runtime.js';
+import { get_current_url } from './url.js';
+import { increment } from './utils.js';
+
+export const REPLACE = Symbol();
+
+export class SvelteURLSearchParams extends URLSearchParams {
+	#version = source(0);
+	#url = get_current_url();
+
+	#updating = false;
+
+	#update_url() {
+		if (!this.#url || this.#updating) return;
+		this.#updating = true;
+
+		const search = this.toString();
+		this.#url.search = search && `?${search}`;
+
+		this.#updating = false;
+	}
+
+	/**
+	 * @param {URLSearchParams} params
+	 */
+	[REPLACE](params) {
+		if (this.#updating) return;
+		this.#updating = true;
+
+		for (const key of [...super.keys()]) {
+			super.delete(key);
+		}
+
+		for (const [key, value] of params) {
+			super.append(key, value);
+		}
+
+		increment(this.#version);
+		this.#updating = false;
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @returns {void}
+	 */
+	append(name, value) {
+		super.append(name, value);
+		this.#update_url();
+		increment(this.#version);
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string=} value
+	 * @returns {void}
+	 */
+	delete(name, value) {
+		var has_value = super.has(name, value);
+		super.delete(name, value);
+		if (has_value) {
+			this.#update_url();
+			increment(this.#version);
+		}
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {string|null}
+	 */
+	get(name) {
+		get(this.#version);
+		return super.get(name);
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {string[]}
+	 */
+	getAll(name) {
+		get(this.#version);
+		return super.getAll(name);
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string=} value
+	 * @returns {boolean}
+	 */
+	has(name, value) {
+		get(this.#version);
+		return super.has(name, value);
+	}
+
+	keys() {
+		get(this.#version);
+		return super.keys();
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @returns {void}
+	 */
+	set(name, value) {
+		var previous = super.getAll(name).join('');
+		super.set(name, value);
+		// can't use has(name, value), because for something like https://svelte.dev?foo=1&bar=2&foo=3
+		// if you set `foo` to 1, then foo=3 gets deleted whilst `has("foo", "1")` returns true
+		if (previous !== super.getAll(name).join('')) {
+			this.#update_url();
+			increment(this.#version);
+		}
+	}
+
+	sort() {
+		super.sort();
+		this.#update_url();
+		increment(this.#version);
+	}
+
+	toString() {
+		get(this.#version);
+		return super.toString();
+	}
+
+	values() {
+		get(this.#version);
+		return super.values();
+	}
+
+	entries() {
+		get(this.#version);
+		return super.entries();
+	}
+
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+
+	get size() {
+		get(this.#version);
+		return super.size;
+	}
+}

packages/svelte/src/reactivity/url-search-params.test.ts

@@ -0,0 +1,208 @@
+import { render_effect, effect_root } from '../internal/client/reactivity/effects.js';
+import { flushSync } from '../index-client.js';
+import { assert, test } from 'vitest';
+import { SvelteURLSearchParams } from './url-search-params';
+
+test('new URLSearchParams', () => {
+	const params = new SvelteURLSearchParams('a=b');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.set('a', 'c');
+	});
+
+	flushSync(() => {
+		// nothing should happen here
+		params.set('a', 'c');
+	});
+
+	assert.deepEqual(log, ['a=b', 'a=c']);
+
+	cleanup();
+});
+
+test('URLSearchParams.set', () => {
+	const params = new SvelteURLSearchParams();
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.set('a', 'b');
+	});
+
+	flushSync(() => {
+		params.set('a', 'c');
+	});
+
+	flushSync(() => {
+		// nothing should happen here
+		params.set('a', 'c');
+	});
+
+	assert.deepEqual(log, ['', 'a=b', 'a=c']);
+
+	cleanup();
+});
+
+test('URLSearchParams.append', () => {
+	const params = new SvelteURLSearchParams();
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.append('a', 'b');
+	});
+
+	flushSync(() => {
+		// nothing should happen here
+		params.set('a', 'b');
+	});
+
+	flushSync(() => {
+		params.append('a', 'c');
+	});
+
+	assert.deepEqual(log, ['', 'a=b', 'a=b&a=c']);
+
+	cleanup();
+});
+
+test('URLSearchParams.delete', () => {
+	const params = new SvelteURLSearchParams('a=b&c=d');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.delete('a');
+	});
+
+	flushSync(() => {
+		// nothing should happen here
+		params.delete('a');
+	});
+
+	flushSync(() => {
+		params.set('a', 'b');
+	});
+
+	assert.deepEqual(log, ['a=b&c=d', 'c=d', 'c=d&a=b']);
+
+	cleanup();
+});
+
+test('URLSearchParams.get', () => {
+	const params = new SvelteURLSearchParams('a=b&c=d');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.get('a'));
+		});
+		render_effect(() => {
+			log.push(params.get('c'));
+		});
+		render_effect(() => {
+			log.push(params.get('e'));
+		});
+	});
+
+	flushSync(() => {
+		params.set('a', 'b');
+	});
+
+	flushSync(() => {
+		params.set('a', 'new-b');
+	});
+
+	flushSync(() => {
+		params.delete('a');
+	});
+
+	assert.deepEqual(log, ['b', 'd', null, 'new-b', 'd', null, null, 'd', null]);
+
+	cleanup();
+});
+
+test('URLSearchParams.getAll', () => {
+	const params = new SvelteURLSearchParams('a=b&c=d');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.getAll('a'));
+		});
+		render_effect(() => {
+			log.push(params.getAll('q'));
+		});
+	});
+
+	flushSync(() => {
+		params.append('a', 'b1');
+	});
+
+	flushSync(() => {
+		params.append('q', 'z');
+	});
+
+	assert.deepEqual(log, [
+		// initial
+		['b'],
+		[],
+		// first flush
+		['b', 'b1'],
+		[],
+		// second flush
+		['b', 'b1'],
+		['z']
+	]);
+
+	cleanup();
+});
+
+test('URLSearchParams.toString', () => {
+	const params = new SvelteURLSearchParams();
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.set('a', 'b');
+	});
+
+	flushSync(() => {
+		params.append('a', 'c');
+	});
+
+	assert.deepEqual(log, ['', 'a=b', 'a=b&a=c']);
+
+	cleanup();
+});
+
+test('SvelteURLSearchParams instanceof URLSearchParams', () => {
+	assert.ok(new SvelteURLSearchParams() instanceof URLSearchParams);
+});