ripple 0.3.68 → 0.3.70

package/tests/client/url/url.partial-removal.test.tsrx

@@ -2,12 +2,13 @@ import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > partials/removal', () => {
 	it('handles URL with no port specified', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path');
-
-			<pre>{url.port}</pre>
-			<pre>{url.host}</pre>
-			<button onClick={() => (url.port = '8080')}>{'Add Port'}</button>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path');
+				<pre>{url.port}</pre>
+				<pre>{url.host}</pre>
+				<button onClick={() => (url.port = '8080')}>{'Add Port'}</button>
+			</>;
 		}
 
 		render(URLTest);
@@ -27,12 +28,13 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles URL with no search params', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path');
-
-			<pre>{url.search}</pre>
-			<pre>{url.searchParams.size}</pre>
-			<button onClick={() => url.searchParams.append('foo', 'bar')}>{'Add Param'}</button>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -52,11 +54,12 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles URL with no hash', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path');
-
-			<pre>{url.hash}</pre>
-			<button onClick={() => (url.hash = '#section')}>{'Add Hash'}</button>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path');
+				<pre>{url.hash}</pre>
+				<button onClick={() => (url.hash = '#section')}>{'Add Hash'}</button>
+			</>;
 		}
 
 		render(URLTest);
@@ -74,12 +77,13 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles removing port by setting empty string', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com:8080/path');
-
-			<button onClick={() => (url.port = '')}>{'Remove Port'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.port}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com:8080/path');
+				<button onClick={() => (url.port = '')}>{'Remove Port'}</button>
+				<pre>{url.href}</pre>
+				<pre>{url.port}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -99,12 +103,13 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles removing hash by setting empty string', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path#section');
-
-			<button onClick={() => (url.hash = '')}>{'Remove Hash'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.hash}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path#section');
+				<button onClick={() => (url.hash = '')}>{'Remove Hash'}</button>
+				<pre>{url.href}</pre>
+				<pre>{url.hash}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -126,13 +131,14 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles removing search by setting empty string', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -156,12 +162,13 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles hash without leading # character', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path');
-
-			<button onClick={() => (url.hash = 'section')}>{'Set Hash'}</button>
-			<pre>{url.hash}</pre>
-			<pre>{url.href}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path');
+				<button onClick={() => (url.hash = 'section')}>{'Set Hash'}</button>
+				<pre>{url.hash}</pre>
+				<pre>{url.href}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -182,12 +189,13 @@ describe('RippleURL > partials/removal', () => {
 	});
 
 	it('handles search without leading ? character', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path');
-
-			<button onClick={() => (url.search = 'foo=bar')}>{'Set Search'}</button>
-			<pre>{url.search}</pre>
-			<pre>{url.href}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path');
+				<button onClick={() => (url.search = 'foo=bar')}>{'Set Search'}</button>
+				<pre>{url.search}</pre>
+				<pre>{url.href}</pre>
+			</>;
 		}
 
 		render(URLTest);

package/tests/client/url/url.reactivity.test.tsrx

@@ -2,13 +2,14 @@ import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > reactivity', () => {
 	it('handles protocol changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path');
-
-			<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.protocol}</pre>
-			<pre>{url.origin}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -30,13 +31,14 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles hostname changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -58,13 +60,14 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles port changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -86,14 +89,15 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles host changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -119,12 +123,13 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles pathname changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/old-path');
-
-			<button onClick={() => (url.pathname = '/new-path')}>{'Change Pathname'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.pathname}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/old-path');
+				<button onClick={() => (url.pathname = '/new-path')}>{'Change Pathname'}</button>
+				<pre>{url.href}</pre>
+				<pre>{url.pathname}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -144,12 +149,13 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles search changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path?foo=bar');
-
-			<button onClick={() => (url.search = '?baz=qux')}>{'Change Search'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.search}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -173,12 +179,13 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles hash changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path#section1');
-
-			<button onClick={() => (url.hash = '#section2')}>{'Change Hash'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.hash}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path#section1');
+				<button onClick={() => (url.hash = '#section2')}>{'Change Hash'}</button>
+				<pre>{url.href}</pre>
+				<pre>{url.hash}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -202,12 +209,13 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles username changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('https://user:pass@example.com/path');
-
-			<button onClick={() => (url.username = 'newuser')}>{'Change Username'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.username}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://user:pass@example.com/path');
+				<button onClick={() => (url.username = 'newuser')}>{'Change Username'}</button>
+				<pre>{url.href}</pre>
+				<pre>{url.username}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -231,12 +239,13 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles password changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('https://user:pass@example.com/path');
-
-			<button onClick={() => (url.password = 'newpass')}>{'Change Password'}</button>
-			<pre>{url.href}</pre>
-			<pre>{url.password}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://user:pass@example.com/path');
+				<button onClick={() => (url.password = 'newpass')}>{'Change Password'}</button>
+				<pre>{url.href}</pre>
+				<pre>{url.password}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -260,19 +269,22 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles href changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -306,13 +318,14 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles origin property reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -338,15 +351,16 @@ describe('RippleURL > reactivity', () => {
 		expect(container.querySelector('pre').textContent).toBe('http://newdomain.com:9090');
 	});
 	it('handles searchParams changes with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -382,16 +396,17 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles search property updates reflected in searchParams', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -417,22 +432,23 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles multiple URL property changes in sequence', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -452,17 +468,18 @@ describe('RippleURL > reactivity', () => {
 	});
 
 	it('handles href change updates all properties and searchParams', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);

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

@@ -2,11 +2,12 @@ import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > serialization', () => {
 	it('handles toString method', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path?foo=bar#section');
-
-			<button onClick={() => (url.pathname = '/newpath')}>{'Change Pathname'}</button>
-			<pre>{url.toString()}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path?foo=bar#section');
+				<button onClick={() => (url.pathname = '/newpath')}>{'Change Pathname'}</button>
+				<pre>{url.toString()}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -28,12 +29,13 @@ describe('RippleURL > serialization', () => {
 	});
 
 	it('handles toJSON method', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);

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

@@ -2,17 +2,18 @@ import { RippleURL, RippleURLSearchParams, flushSync, track } from 'ripple';
 
 describe('RippleURLSearchParams > derived', () => {
 	it('handles reactive computed properties based on search params', () => {
-		component URLTest() {
-			const params = RippleURLSearchParams('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>
+		function URLTest() {
+			return <>
+				const params = RippleURLSearchParams('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);
@@ -43,28 +44,32 @@ describe('RippleURLSearchParams > derived', () => {
 	});
 
 	it('maintains reactivity across multiple components', () => {
-		component ParentTest() {
-			const params = RippleURLSearchParams('count=0');
-
-			<ChildA {params} />
-			<ChildB {params} />
+		function ParentTest() {
+			return <>
+				const params = RippleURLSearchParams('count=0');
+				<ChildA {params} />
+				<ChildB {params} />
+			</>;
 		}
 
-		component ChildA({ params }: { params: RippleURLSearchParams }) {
-			<button
-				onClick={() => {
-					const current = parseInt(params.get('count') || '0', 10);
-					params.set('count', String(current + 1));
-				}}
-			>
-				{'increment'}
-			</button>
+		function ChildA({ params }: { params: RippleURLSearchParams }) {
+			return <>
+				<button
+					onClick={() => {
+						const current = parseInt(params.get('count') || '0', 10);
+						params.set('count', String(current + 1));
+					}}
+				>
+					{'increment'}
+				</button>
+			</>;
 		}
 
-		component ChildB({ params }: { params: RippleURLSearchParams }) {
-			let &[count] = track(() => params.get('count'));
-
-			<pre>{count}</pre>
+		function ChildB({ params }: { params: RippleURLSearchParams }) {
+			return <>
+				let &[count] = track(() => params.get('count'));
+				<pre>{count}</pre>
+			</>;
 		}
 
 		render(ParentTest);