ripple 0.2.115 → 0.2.118

package/tests/client/url/url.serialization.test.ripple

@@ -0,0 +1,50 @@
+import { flushSync, TrackedURL } from 'ripple';
+
+describe('TrackedURL > serialization', () => {
+	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"}');
+	});
+});

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

@@ -0,0 +1,84 @@
+import { flushSync, track, TrackedURL, TrackedURLSearchParams } from 'ripple';
+
+describe('TrackedURLSearchParams > derived', () => {
+	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('maintains reactivity across multiple components', () => {
+		component ParentTest() {
+			const params = new TrackedURLSearchParams('count=0');
+
+			<ChildA params={params} />
+			<ChildB params={params} />
+		}
+
+		component ChildA({ params }: { params: TrackedURLSearchParams }) {
+			<button onClick={() => {
+				const current = parseInt(params.get('count') || '0', 10);
+				params.set('count', String(current + 1));
+			}}>{'increment'}</button>
+		}
+
+		component ChildB({ params }: { params: TrackedURLSearchParams }) {
+			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');
+	});
+});

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

@@ -0,0 +1,61 @@
+import { TrackedURLSearchParams } from 'ripple';
+
+describe('TrackedURLSearchParams > initialization', () => {
+	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 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');
+	});
+});

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

@@ -0,0 +1,153 @@
+import { flushSync, track, TrackedURLSearchParams } from 'ripple';
+
+describe('TrackedURLSearchParams > iteration', () => {
+	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 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');
+	});
+});

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

@@ -0,0 +1,343 @@
+import { flushSync, track, TrackedURL, TrackedURLSearchParams } from 'ripple';
+
+describe('TrackedURLSearchParams > mutation', () => {
+	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 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 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 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('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');
+	});
+});