ripple 0.2.105 → 0.2.106

package/tests/client/url.test.ripple

@@ -0,0 +1,954 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track } from 'ripple';
+import { TrackedURL } from '../../src/runtime/url.js';
+
+describe('TrackedURL', () => {
+	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 URL from string with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com:8080/path?foo=bar#section');
+
+			<pre>{url.href}</pre>
+			<pre>{url.protocol}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.port}</pre>
+			<pre>{url.pathname}</pre>
+			<pre>{url.search}</pre>
+			<pre>{url.hash}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:8080/path?foo=bar#section');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https:');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('8080');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('/path');
+		expect(container.querySelectorAll('pre')[5].textContent).toBe('?foo=bar');
+		expect(container.querySelectorAll('pre')[6].textContent).toBe('#section');
+	});
+
+	it('creates URL from string with base URL', () => {
+		component URLTest() {
+			const url = new TrackedURL('/path?query=value', 'https://example.com');
+
+			<pre>{url.href}</pre>
+			<pre>{url.origin}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?query=value');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com');
+	});
+
+	it('handles protocol changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<button onClick={() => url.protocol = 'http:'}>{'Change Protocol'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.protocol}</pre>
+			<pre>{url.origin}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https:');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('https://example.com');
+
+		// Change protocol
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('http://example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('http:');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('http://example.com');
+	});
+
+	it('handles hostname changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<button onClick={() => url.hostname = 'newdomain.com'}>{'Change Hostname'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.host}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('example.com');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com');
+
+		// Change hostname
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://newdomain.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('newdomain.com');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('newdomain.com');
+	});
+
+	it('handles port changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com:8080/path');
+
+			<button onClick={() => url.port = '9090'}>{'Change Port'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.port}</pre>
+			<pre>{url.host}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('8080');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com:8080');
+
+		// Change port
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:9090/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('9090');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com:9090');
+	});
+
+	it('handles host changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com:8080/path');
+
+			<button onClick={() => url.host = 'newdomain.com:9090'}>{'Change Host'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.host}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.port}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('example.com:8080');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('8080');
+
+		// Change host
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://newdomain.com:9090/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('newdomain.com:9090');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('newdomain.com');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('9090');
+	});
+
+	it('handles pathname changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/old-path');
+
+			<button onClick={() => url.pathname = '/new-path'}>{'Change Pathname'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.pathname}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/old-path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('/old-path');
+
+		// Change pathname
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/new-path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('/new-path');
+	});
+
+	it('handles search changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar');
+
+			<button onClick={() => url.search = '?baz=qux'}>{'Change Search'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.search}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?foo=bar');
+
+		// Change search
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?baz=qux');
+	});
+
+	it('handles hash changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path#section1');
+
+			<button onClick={() => url.hash = '#section2'}>{'Change Hash'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hash}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path#section1');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('#section1');
+
+		// Change hash
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path#section2');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('#section2');
+	});
+
+	it('handles username changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://user:pass@example.com/path');
+
+			<button onClick={() => url.username = 'newuser'}>{'Change Username'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.username}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://user:pass@example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('user');
+
+		// Change username
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://newuser:pass@example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('newuser');
+	});
+
+	it('handles password changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://user:pass@example.com/path');
+
+			<button onClick={() => url.password = 'newpass'}>{'Change Password'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.password}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://user:pass@example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('pass');
+
+		// Change password
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://user:newpass@example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('newpass');
+	});
+
+	it('handles href changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar#section');
+
+			<button onClick={() => url.href = 'https://newdomain.com:9090/newpath?baz=qux#newsection'}>{'Change Href'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.protocol}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.port}</pre>
+			<pre>{url.pathname}</pre>
+			<pre>{url.search}</pre>
+			<pre>{url.hash}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar#section');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https:');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('example.com');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('/path');
+		expect(container.querySelectorAll('pre')[5].textContent).toBe('?foo=bar');
+		expect(container.querySelectorAll('pre')[6].textContent).toBe('#section');
+
+		// Change href
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://newdomain.com:9090/newpath?baz=qux#newsection');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https:');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('newdomain.com');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('9090');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('/newpath');
+		expect(container.querySelectorAll('pre')[5].textContent).toBe('?baz=qux');
+		expect(container.querySelectorAll('pre')[6].textContent).toBe('#newsection');
+	});
+
+	it('handles origin property reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com:8080/path');
+
+			<button onClick={() => url.protocol = 'http:'}>{'Change Protocol'}</button>
+			<button onClick={() => url.hostname = 'newdomain.com'}>{'Change Hostname'}</button>
+			<button onClick={() => url.port = '9090'}>{'Change Port'}</button>
+			<pre>{url.origin}</pre>
+		}
+
+		render(URLTest);
+
+		const buttons = container.querySelectorAll('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('https://example.com:8080');
+
+		// Change protocol
+		buttons[0].click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('http://example.com:8080');
+
+		// Change hostname
+		buttons[1].click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('http://newdomain.com:8080');
+
+		// Change port
+		buttons[2].click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('http://newdomain.com:9090');
+	});
+
+	it('handles searchParams changes with reactivity', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar');
+			const params = url.searchParams;
+
+			<button onClick={() => params.set('foo', 'updated')}>{'Update Foo'}</button>
+			<button onClick={() => params.append('baz', 'qux')}>{'Add Baz'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.search}</pre>
+			<pre>{params.get('foo')}</pre>
+		}
+
+		render(URLTest);
+
+		const updateButton = container.querySelectorAll('button')[0];
+		const addButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?foo=bar');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('bar');
+
+		// Update param
+		updateButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=updated');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?foo=updated');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('updated');
+
+		// Add param
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=updated&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?foo=updated&baz=qux');
+	});
+
+	it('handles search property updates reflected in searchParams', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar');
+			const params = url.searchParams;
+
+			<button onClick={() => url.search = '?baz=qux&test=value'}>{'Change Search'}</button>
+			<pre>{url.search}</pre>
+			<pre>{params.get('foo')}</pre>
+			<pre>{params.get('baz')}</pre>
+			<pre>{params.get('test')}</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('bar');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('1');
+
+		// Change search
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('?baz=qux&test=value');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('qux');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('value');
+		expect(container.querySelectorAll('pre')[4].textContent).toBe('2');
+	});
+
+	it('handles toString method', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar#section');
+
+			<button onClick={() => url.pathname = '/newpath'}>{'Change Pathname'}</button>
+			<pre>{url.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('https://example.com/path?foo=bar#section');
+
+		// Change pathname
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('https://example.com/newpath?foo=bar#section');
+	});
+
+	it('handles toJSON method', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar');
+
+			<button onClick={() => url.pathname = '/api'}>{'Change Pathname'}</button>
+			<pre>{url.toJSON()}</pre>
+			<pre>{JSON.stringify({ url: url.toJSON() })}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('{"url":"https://example.com/path?foo=bar"}');
+
+		// Change pathname
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/api?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('{"url":"https://example.com/api?foo=bar"}');
+	});
+
+	it('handles multiple URL property changes in sequence', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<button onClick={() => {
+				url.protocol = 'http:';
+				url.hostname = 'newdomain.com';
+				url.port = '8080';
+				url.pathname = '/api';
+				url.search = '?key=value';
+				url.hash = '#section';
+			}}>{'Change All'}</button>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('https://example.com/path');
+
+		// Change all properties
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('http://newdomain.com:8080/api?key=value#section');
+	});
+
+	it('handles URL with no port specified', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<pre>{url.port}</pre>
+			<pre>{url.host}</pre>
+			<button onClick={() => url.port = '8080'}>{'Add Port'}</button>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state - default ports are empty strings
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('example.com');
+
+		// Add port
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('8080');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('example.com:8080');
+	});
+
+	it('handles URL with no search params', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<pre>{url.search}</pre>
+			<pre>{url.searchParams.size}</pre>
+			<button onClick={() => url.searchParams.append('foo', 'bar')}>{'Add Param'}</button>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Add param
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+	});
+
+	it('handles URL with no hash', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<pre>{url.hash}</pre>
+			<button onClick={() => url.hash = '#section'}>{'Add Hash'}</button>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('');
+
+		// Add hash
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('#section');
+	});
+
+	it('handles removing port by setting empty string', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com:8080/path');
+
+			<button onClick={() => url.port = ''}>{'Remove Port'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.port}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('8080');
+
+		// Remove port
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('');
+	});
+
+	it('handles removing hash by setting empty string', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path#section');
+
+			<button onClick={() => url.hash = ''}>{'Remove Hash'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hash}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path#section');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('#section');
+
+		// Remove hash
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('');
+	});
+
+	it('handles removing search by setting empty string', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path?foo=bar');
+
+			<button onClick={() => url.search = ''}>{'Remove Search'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.search}</pre>
+			<pre>{url.searchParams.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?foo=bar');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+
+		// Remove search
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('0');
+	});
+
+	it('handles reactive computed properties based on URL', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/users/123?tab=profile');
+			let userId = track(() => url.pathname.split('/').pop());
+			let activeTab = track(() => url.searchParams.get('tab'));
+
+			<button onClick={() => url.pathname = '/users/456'}>{'Change User'}</button>
+			<button onClick={() => url.searchParams.set('tab', 'settings')}>{'Change Tab'}</button>
+			<pre>{`User ID: ${@userId}`}</pre>
+			<pre>{`Active Tab: ${@activeTab}`}</pre>
+		}
+
+		render(URLTest);
+
+		const changeUserBtn = container.querySelectorAll('button')[0];
+		const changeTabBtn = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('User ID: 123');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Active Tab: profile');
+
+		// Change user
+		changeUserBtn.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('User ID: 456');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Active Tab: profile');
+
+		// Change tab
+		changeTabBtn.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('User ID: 456');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('Active Tab: settings');
+	});
+
+	it('handles URL encoding correctly', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path with spaces?key=value with spaces');
+
+			<pre>{url.pathname}</pre>
+			<pre>{url.search}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('/path%20with%20spaces');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('?key=value%20with%20spaces');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('https://example.com/path%20with%20spaces?key=value%20with%20spaces');
+	});
+
+	it('maintains reactivity across multiple components', () => {
+		component ParentTest() {
+			const url = new TrackedURL('https://example.com/path?count=0');
+
+			<ChildA url={url} />
+			<ChildB url={url} />
+		}
+
+		component ChildA({ url }) {
+			<button onClick={() => {
+				const current = parseInt(url.searchParams.get('count') || '0', 10);
+				url.searchParams.set('count', String(current + 1));
+			}}>{'Increment Count'}</button>
+		}
+
+		component ChildB({ url }) {
+			let count = track(() => url.searchParams.get('count'));
+
+			<pre>{url.href}</pre>
+			<pre>{@count}</pre>
+		}
+
+		render(ParentTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=0');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Increment from child
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=1');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?count=2');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('handles relative URL paths correctly', () => {
+		component URLTest() {
+			const url = new TrackedURL('../sibling/path', 'https://example.com/parent/current');
+
+			<pre>{url.href}</pre>
+			<pre>{url.pathname}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/sibling/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('/sibling/path');
+	});
+
+	it('handles URL with IPv4 address', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://192.168.1.1:8080/path');
+
+			<button onClick={() => url.hostname = '10.0.0.1'}>{'Change IP'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hostname}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://192.168.1.1:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('192.168.1.1');
+
+		// Change IP
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://10.0.0.1:8080/path');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('10.0.0.1');
+	});
+
+	it('handles href change updates all properties and searchParams', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://old.com/old?foo=bar#old');
+			const params = url.searchParams;
+
+			<button onClick={() => url.href = 'https://new.com:9090/new?baz=qux#new'}>{'Change Href'}</button>
+			<pre>{params.get('foo')}</pre>
+			<pre>{params.get('baz')}</pre>
+			<pre>{params.size}</pre>
+			<pre>{url.pathname}</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('');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('/old');
+
+		// Change href
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('qux');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('/new');
+	});
+
+	it('handles URL with localhost', () => {
+		component URLTest() {
+			const url = new TrackedURL('http://localhost:3000/api/data');
+
+			<button onClick={() => url.port = '8080'}>{'Change Port'}</button>
+			<pre>{url.href}</pre>
+			<pre>{url.hostname}</pre>
+			<pre>{url.port}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('http://localhost:3000/api/data');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('localhost');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3000');
+
+		// Change port
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('http://localhost:8080/api/data');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('localhost');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('8080');
+	});
+
+	it('handles URL with multiple path segments', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/api/v1/users/123/profile');
+
+			<button onClick={() => url.pathname = '/api/v2/users/456/settings'}>{'Change Path'}</button>
+			<pre>{url.pathname}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('/api/v1/users/123/profile');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/api/v1/users/123/profile');
+
+		// Change path
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('/api/v2/users/456/settings');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/api/v2/users/456/settings');
+	});
+
+	it('handles URL with file protocol', () => {
+		component URLTest() {
+			const url = new TrackedURL('file:///Users/username/documents/file.txt');
+
+			<pre>{url.protocol}</pre>
+			<pre>{url.pathname}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('file:');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('/Users/username/documents/file.txt');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('file:///Users/username/documents/file.txt');
+	});
+
+	it('handles hash without leading # character', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<button onClick={() => url.hash = 'section'}>{'Set Hash'}</button>
+			<pre>{url.hash}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('');
+
+		// Set hash
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('#section');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/path#section');
+	});
+
+	it('handles search without leading ? character', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com/path');
+
+			<button onClick={() => url.search = 'foo=bar'}>{'Set Search'}</button>
+			<pre>{url.search}</pre>
+			<pre>{url.href}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Set search
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('https://example.com/path?foo=bar');
+	});
+});