ripple 0.2.105 → 0.2.107

package/tests/client/url-search-params.test.ripple

@@ -0,0 +1,912 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track, effect } from 'ripple';
+import { TrackedURLSearchParams } from '../../src/runtime/url-search-params.js';
+import { TrackedURL } from '../../src/runtime/url.js';
+
+describe('TrackedURLSearchParams', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('creates empty URLSearchParams with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams();
+
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+	});
+
+	it('creates URLSearchParams from string with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+			<pre>{params.get('foo')}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('bar');
+	});
+
+	it('creates URLSearchParams from object with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams({ foo: 'bar', baz: 'qux' });
+
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('handles append operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+
+			<button onClick={() => params.append('baz', 'qux')}>{'append'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		// Test append
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('handles append with multiple values for same key', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let allFoo = track(() => params.getAll('foo'));
+
+			<button onClick={() => params.append('foo', 'baz')}>{'append foo'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{JSON.stringify(@allFoo)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('["bar"]');
+
+		// Test append
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&foo=baz');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('["bar","baz"]');
+	});
+
+	it('handles delete operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+
+			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+			<pre>{params.has('foo').toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('true');
+
+		// Test delete
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('false');
+	});
+
+	it('handles delete with specific value', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&foo=baz&foo=qux');
+
+			<button onClick={() => params.delete('foo', 'baz')}>{'delete foo=baz'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&foo=baz&foo=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+		// Test delete specific value
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&foo=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('handles delete when key does not exist', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let reactiveSize = track(() => params.size);
+
+			<button onClick={() => params.delete('nonexistent')}>{'delete nonexistent'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{@reactiveSize}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		// Test delete nonexistent - should not trigger reactivity
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+	});
+
+	it('handles get operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			let foo = track(() => params.get('foo'));
+			let baz = track(() => params.get('baz'));
+
+			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
+			<pre>{@foo}</pre>
+			<pre>{@baz}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('qux');
+
+		// Test update
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('updated');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('qux');
+	});
+
+	it('handles get for nonexistent key', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let nonexistent = track(() => params.get('nonexistent'));
+
+			<pre>{String(@nonexistent)}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelector('pre').textContent).toBe('null');
+	});
+
+	it('handles getAll operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&foo=baz');
+			let allFoo = track(() => params.getAll('foo'));
+
+			<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
+			<pre>{JSON.stringify(@allFoo)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('["bar","baz"]');
+
+		// Test append
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('["bar","baz","qux"]');
+	});
+
+	it('handles has operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let hasFoo = track(() => params.has('foo'));
+			let hasBaz = track(() => params.has('baz'));
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add baz'}</button>
+			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
+			<pre>{@hasFoo.toString()}</pre>
+			<pre>{@hasBaz.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const addButton = container.querySelectorAll('button')[0];
+		const deleteButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+
+		// Test add
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+
+		// Test delete
+		deleteButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+	});
+
+	it('handles has with specific value', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&foo=baz');
+			let hasBarValue = track(() => params.has('foo', 'bar'));
+			let hasQuxValue = track(() => params.has('foo', 'qux'));
+
+			<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
+			<pre>{@hasBarValue.toString()}</pre>
+			<pre>{@hasQuxValue.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+	});
+
+	it('handles set operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+
+			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
+			<button onClick={() => params.set('baz', 'qux')}>{'add baz'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const updateButton = container.querySelectorAll('button')[0];
+		const addButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		// Test update
+		updateButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=updated');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		// Test add new key
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=updated&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('handles set with multiple existing values', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&foo=baz&foo=qux');
+			let allFoo = track(() => params.getAll('foo'));
+
+			<button onClick={() => params.set('foo', 'single')}>{'set foo'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{JSON.stringify(@allFoo)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar&foo=baz&foo=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('["bar","baz","qux"]');
+
+		// Test set - should replace all values
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=single');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('["single"]');
+	});
+
+	it('handles set when value is the same', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let reactiveString = track(() => params.toString());
+
+			<button onClick={() => params.set('foo', 'bar')}>{'set same value'}</button>
+			<pre>{@reactiveString}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Test set same value - should not trigger reactivity changes
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+	});
+
+	it('handles sort operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('z=last&a=first&m=middle');
+
+			<button onClick={() => params.sort()}>{'sort'}</button>
+			<pre>{params.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('z=last&a=first&m=middle');
+
+		// Test sort
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('a=first&m=middle&z=last');
+	});
+
+	it('handles keys method with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			let keys = track(() => Array.from(params.keys()));
+
+			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
+			<pre>{JSON.stringify(@keys)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('["foo","baz"]');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('["foo","baz","new"]');
+	});
+
+	it('handles values method with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			let values = track(() => Array.from(params.values()));
+
+			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
+			<pre>{JSON.stringify(@values)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('["bar","qux"]');
+
+		// Test update
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('["updated","qux"]');
+	});
+
+	it('handles entries method with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			let entries = track(() => Array.from(params.entries()));
+
+			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
+			<pre>{JSON.stringify(@entries)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('[["foo","bar"],["baz","qux"]]');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('[["foo","bar"],["baz","qux"],["new","value"]]');
+	});
+
+	it('handles Symbol.iterator with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			let entries = track(() => Array.from(params));
+
+			<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
+			<pre>{JSON.stringify(@entries)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('[["foo","bar"],["baz","qux"]]');
+
+		// Test delete
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('[["baz","qux"]]');
+	});
+
+	it('handles iteration with for...of', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+
+			<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
+
+			for (const [key, value] of params) {
+				<pre>{`${key}=${value}`}</pre>
+			}
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('baz=qux');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('baz=qux');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('new=value');
+	});
+
+	it('handles size property with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let size = track(() => params.size);
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
+			<button onClick={() => params.delete('foo')}>{'delete'}</button>
+			<pre>{@size}</pre>
+		}
+
+		render(URLTest);
+
+		const addButton = container.querySelectorAll('button')[0];
+		const deleteButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('1');
+
+		// Test add
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('2');
+
+		// Test delete
+		deleteButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('1');
+	});
+
+	it('handles toString method with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let string = track(() => params.toString());
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
+			<pre>{@string}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('foo=bar');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('foo=bar&baz=qux');
+	});
+
+	it('handles special characters encoding', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams();
+
+			<button onClick={() => params.set('key', 'value with spaces')}>{'add spaces'}</button>
+			<button onClick={() => params.set('special', '!@#$%^&*()')}>{'add special'}</button>
+			<pre>{params.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const spacesButton = container.querySelectorAll('button')[0];
+		const specialButton = container.querySelectorAll('button')[1];
+
+		// Test spaces
+		spacesButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('key=value+with+spaces');
+
+		// Test special characters
+		specialButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toContain('special');
+	});
+
+	it('handles multiple operations in sequence', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams();
+
+			<button onClick={() => {
+				params.append('a', '1');
+				params.append('b', '2');
+				params.set('a', '10');
+				params.delete('b');
+				params.append('c', '3');
+				params.sort();
+			}}>{'complex operations'}</button>
+			<pre>{params.toString()}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Test complex operations
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('a=10&c=3');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('integrates with TrackedURL', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com?foo=bar');
+			const params = url.searchParams;
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add param'}</button>
+			<pre>{url.href}</pre>
+			<pre>{params.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('foo=bar');
+
+		// Test add param - should update URL
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('foo=bar&baz=qux');
+	});
+
+	it('handles empty search string in URL', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com');
+			const params = url.searchParams;
+
+			<button onClick={() => params.append('foo', 'bar')}>{'add first param'}</button>
+			<pre>{url.href}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state - no search params
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Test add first param
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+	});
+
+	it('handles clearing all params via delete', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com?foo=bar&baz=qux');
+			const params = url.searchParams;
+
+			<button onClick={() => {
+				params.delete('foo');
+				params.delete('baz');
+			}}>{'clear all'}</button>
+			<pre>{url.href}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+		// Test clear all
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+	});
+
+	it('handles reactive computed properties based on search params', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('page=1&limit=10');
+			let page = track(() => parseInt(params.get('page') || '1', 10));
+			let limit = track(() => parseInt(params.get('limit') || '10', 10));
+			let offset = track(() => (@page - 1) * @limit);
+
+			<button onClick={() => params.set('page', '2')}>{'next page'}</button>
+			<button onClick={() => params.set('page', '1')}>{'first page'}</button>
+			<pre>{`Page: ${@page}`}</pre>
+			<pre>{`Limit: ${@limit}`}</pre>
+			<pre>{`Offset: ${@offset}`}</pre>
+		}
+
+		render(URLTest);
+
+		const nextButton = container.querySelectorAll('button')[0];
+		const firstButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('Page: 1');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Limit: 10');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('Offset: 0');
+
+		// Test next page
+		nextButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('Page: 2');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Limit: 10');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('Offset: 10');
+
+		// Test first page
+		firstButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('Page: 1');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Limit: 10');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('Offset: 0');
+	});
+
+	it('handles duplicate keys with different values', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams();
+			let tags = track(() => params.getAll('tag'));
+
+			<button onClick={() => params.append('tag', 'javascript')}>{'add js'}</button>
+			<button onClick={() => params.append('tag', 'typescript')}>{'add ts'}</button>
+			<button onClick={() => params.append('tag', 'ripple')}>{'add ripple'}</button>
+			<pre>{JSON.stringify(@tags)}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const jsButton = container.querySelectorAll('button')[0];
+		const tsButton = container.querySelectorAll('button')[1];
+		const rippleButton = container.querySelectorAll('button')[2];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Add tags sequentially
+		jsButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["javascript"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		tsButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["javascript","typescript"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+		rippleButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["javascript","typescript","ripple"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+	});
+
+	it('handles URL-encoded characters correctly', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('name=John+Doe&email=john%40example.com');
+
+			<pre>{params.get('name')}</pre>
+			<pre>{params.get('email')}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('John Doe');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('john@example.com');
+	});
+
+	it('maintains reactivity across multiple components', () => {
+		component ParentTest() {
+			const params = new TrackedURLSearchParams('count=0');
+
+			<ChildA params={params} />
+			<ChildB params={params} />
+		}
+
+		component ChildA({ params }) {
+			<button onClick={() => {
+				const current = parseInt(params.get('count') || '0', 10);
+				params.set('count', String(current + 1));
+			}}>{'increment'}</button>
+		}
+
+		component ChildB({ params }) {
+			let count = track(() => params.get('count'));
+
+			<pre>{@count}</pre>
+		}
+
+		render(ParentTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('0');
+
+		// Test increment from child component
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('2');
+	});
+
+	it('handles forEach iteration', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('a=1&b=2&c=3');
+			let sum = track(() => {
+				let total = 0;
+				// Access the params reactively through entries
+				for (const [key, value] of params.entries()) {
+					total += parseInt(value, 10);
+				}
+				return total;
+			});
+
+			<button onClick={() => params.append('d', '4')}>{'add d=4'}</button>
+			<pre>{@sum}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state: 1 + 2 + 3 = 6
+		expect(container.querySelector('pre').textContent).toBe('6');
+
+		// Add d=4, sum should be 10
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('10');
+	});
+});