From ea73ad31e11df9770fa375b308d1d90632efb458 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 14 Apr 2024 14:47:52 -0400 Subject: [PATCH] simplify, make ReactiveURLSearchParams signature match URLSearchParams --- packages/svelte/src/reactivity/url.js | 75 +++++++++------------- packages/svelte/src/reactivity/url.test.ts | 25 +++++++- 2 files changed, 53 insertions(+), 47 deletions(-) diff --git a/packages/svelte/src/reactivity/url.js b/packages/svelte/src/reactivity/url.js index bf5781f73f..cb9697e781 100644 --- a/packages/svelte/src/reactivity/url.js +++ b/packages/svelte/src/reactivity/url.js @@ -1,8 +1,7 @@ import { source, set } from '../internal/client/reactivity/sources.js'; import { get } from '../internal/client/runtime.js'; -const UPDATE = Symbol('UPDATE'); -const VERSION = Symbol('version'); +const REPLACE = Symbol(); export class ReactiveURL extends URL { #url = { @@ -16,7 +15,7 @@ export class ReactiveURL extends URL { hash: source(super.hash) }; - #searchParams = new ReactiveURLSearchParams(super.searchParams, this.#url.search); + #searchParams = new ReactiveURLSearchParams(super.searchParams); get hash() { return get(this.#url.hash); @@ -70,7 +69,7 @@ export class ReactiveURL extends URL { set(this.#url.pathname, super.pathname); set(this.#url.search, super.search); set(this.#url.hash, super.hash); - this.#searchParams[UPDATE](super.searchParams); + this.#searchParams[REPLACE](super.searchParams); } get password() { @@ -110,15 +109,13 @@ export class ReactiveURL extends URL { } get search() { - get(this.#url.search); - get(this.#searchParams[VERSION]); - return super.search; + const search = this.#searchParams.toString(); + return search ? `?${search}` : ''; } set search(value) { super.search = value; - set(this.#url.search, super.search); - this.#searchParams[UPDATE](super.searchParams); + this.#searchParams[REPLACE](super.searchParams); } get username() { @@ -151,36 +148,25 @@ export class ReactiveURL extends URL { } export class ReactiveURLSearchParams extends URLSearchParams { - #url_search_params; - #search; #version = source(0); - [VERSION] = this.#version; #increment_version() { set(this.#version, this.#version.v + 1); } - #update_search() { - set(this.#search, '?' + this.#url_search_params.toString()); - } - /** - * - * @param {URLSearchParams} value + * @param {URLSearchParams} params */ - [UPDATE](value) { - this.#url_search_params = value; - this.#increment_version(); - } + [REPLACE](params) { + for (const key of [...super.keys()]) { + super.delete(key); + } - /** - * @param {URLSearchParams} url_search_params - * @param {import('../internal/client/reactivity/types.js').Source} search - */ - constructor(url_search_params, search) { - super(); - this.#url_search_params = url_search_params; - this.#search = search; + for (const [key, value] of params) { + super.append(key, value); + } + + this.#increment_version(); } /** @@ -190,8 +176,7 @@ export class ReactiveURLSearchParams extends URLSearchParams { */ append(name, value) { this.#increment_version(); - this.#update_search(); - return this.#url_search_params.append(name, value); + return super.append(name, value); } /** @@ -201,8 +186,7 @@ export class ReactiveURLSearchParams extends URLSearchParams { */ delete(name, value) { this.#increment_version(); - this.#update_search(); - return this.#url_search_params.delete(name, value); + return super.delete(name, value); } /** @@ -211,7 +195,7 @@ export class ReactiveURLSearchParams extends URLSearchParams { */ get(name) { get(this.#version); - return this.#url_search_params.get(name); + return super.get(name); } /** @@ -220,7 +204,7 @@ export class ReactiveURLSearchParams extends URLSearchParams { */ getAll(name) { get(this.#version); - return this.#url_search_params.getAll(name); + return super.getAll(name); } /** @@ -230,12 +214,12 @@ export class ReactiveURLSearchParams extends URLSearchParams { */ has(name, value) { get(this.#version); - return this.#url_search_params.has(name, value); + return super.has(name, value); } keys() { get(this.#version); - return this.#url_search_params.keys(); + return super.keys(); } /** @@ -245,29 +229,27 @@ export class ReactiveURLSearchParams extends URLSearchParams { */ set(name, value) { this.#increment_version(); - this.#update_search(); - return this.#url_search_params.set(name, value); + return super.set(name, value); } sort() { this.#increment_version(); - this.#update_search(); - return this.#url_search_params.sort(); + return super.sort(); } toString() { get(this.#version); - return this.#url_search_params.toString(); + return super.toString(); } values() { get(this.#version); - return this.#url_search_params.values(); + return super.values(); } entries() { get(this.#version); - return this.#url_search_params.entries(); + return super.entries(); } [Symbol.iterator]() { @@ -275,6 +257,7 @@ export class ReactiveURLSearchParams extends URLSearchParams { } get size() { - return this.#url_search_params.size; + get(this.#version); + return super.size; } } diff --git a/packages/svelte/src/reactivity/url.test.ts b/packages/svelte/src/reactivity/url.test.ts index 53f7796bc2..910edba502 100644 --- a/packages/svelte/src/reactivity/url.test.ts +++ b/packages/svelte/src/reactivity/url.test.ts @@ -1,6 +1,6 @@ import { render_effect, effect_root } from '../internal/client/reactivity/effects.js'; import { flushSync } from '../index-client.js'; -import { ReactiveURL } from './url.js'; +import { ReactiveURL, ReactiveURLSearchParams } from './url.js'; import { assert, test } from 'vitest'; test('url.hash', () => { @@ -76,3 +76,26 @@ test('url.searchParams', () => { cleanup(); }); + +test('URLSearchParams', () => { + const params = new ReactiveURLSearchParams(); + 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(); +});