ripple 0.3.68 → 0.3.70

package/tests/client/typescript-generics.test.tsrx

@@ -1,200 +1,200 @@
 describe('generic patterns', () => {
 	it('tests simple generic function', () => {
-		component App() {
-			const e = new Map<string, Promise<number>>();
-			const a = new Array<number>();
-
-			const b = new Array<string>();
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			const someSource = new Array<number>(1, 2, 3);
-			const d = someSource.map<number>((x) => x * 2).filter<number>((x) => !!x);
+		function App() {
+			return <>
+				const e = new Map<string, Promise<number>>();
+				const a = new Array<number>();
+				const b = new Array<string>();
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				const someSource = new Array<number>(1, 2, 3);
+				const d = someSource.map<number>((x) => x * 2).filter<number>((x) => !!x);
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests member expression)', () => {
-		component App() {
-			class List<T> {
-				items: T[];
-				constructor() {
-					this.items = [];
+		function App() {
+			return <>
+				class List<T> {
+					items: T[];
+					constructor() {
+						this.items = [];
+					}
 				}
-			}
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			class Containers {
-				static List<T>() {
-					return new List<T>();
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				class Containers {
+					static List<T>() {
+						return new List<T>();
+					}
 				}
-			}
-
-			const c = Containers.List<string>();
+				const c = Containers.List<string>();
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic function with return type', () => {
-		component App() {
-			function getBuilder() {
-				return {
-					build: function <T>() {
-						return 'test';
-					},
-				};
-			}
+		function App() {
+			return <>
+				function getBuilder() {
+					return {
+						build: function <T>() {
+							return 'test';
+						},
+					};
+				}
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic function with return type and no arrow function', () => {
-		component App() {
-			function getBuilder() {
-				return {
-					build<T>(): T {
-						return 'test' as unknown as T;
-					},
-				};
-			}
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			const f = getBuilder().build<string>();
+		function App() {
+			return <>
+				function getBuilder() {
+					return {
+						build<T>(): T {
+							return 'test' as unknown as T;
+						},
+					};
+				}
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				const f = getBuilder().build<string>();
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic arrow function with return type', () => {
-		component App() {
-			function getBuilder() {
-				return <T,>() => ({
-					build<T>(): T {
-						return 'test' as unknown as T;
-					},
-				});
-			}
-
-			type ResultType = string;
-
-			const f = getBuilder()<ResultType>().build<string>();
+		function App() {
+			return <>
+				function getBuilder() {
+					return <T,>() => ({
+						build<T>(): T {
+							return 'test' as unknown as T;
+						},
+					});
+				}
+				type ResultType = string;
+				const f = getBuilder()<ResultType>().build<string>();
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic arrow function with explicit return type', () => {
-		component App() {
-			function getBuilder() {
-				return <T,>() => ({
-					build<U>(): U {
-						return 'test' as U;
-					},
-				});
-			}
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			type ResultType = string;
-			const f = getBuilder()<ResultType>().build<string>();
-			<div>{f}</div>
+		function App() {
+			return <>
+				function getBuilder() {
+					return <T,>() => ({
+						build<U>(): U {
+							return 'test' as U;
+						},
+					});
+				}
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				type ResultType = string;
+				const f = getBuilder()<ResultType>().build<string>();
+				<div>{f}</div>
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests complex generic arrow function with return type', () => {
-		component App() {
-			function getBuilder() {
-				return <T,>() => ({
-					build<V, T, U>(): { build: () => V; data: T; key: U } {
-						return {
-							build(): V {
-								return 'test' as V;
-							},
-							data: undefined as T,
-							key: undefined as U,
-						};
-					},
-				});
-			}
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			type ResultType = string;
-			const f = getBuilder()<ResultType>().build<string, object, string>();
-			<div>{f}</div>
+		function App() {
+			return <>
+				function getBuilder() {
+					return <T,>() => ({
+						build<V, T, U>(): { build: () => V; data: T; key: U } {
+							return {
+								build(): V {
+									return 'test' as V;
+								},
+								data: undefined as T,
+								key: undefined as U,
+							};
+						},
+					});
+				}
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				type ResultType = string;
+				const f = getBuilder()<ResultType>().build<string, object, string>();
+				<div>{f}</div>
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests more complex generic arrow function with return type', () => {
-		component App() {
-			function getBuilder() {
-				return <T,>() => ({
-					build<V, T, U>(): { build: () => V; data: T; key: U } {
-						return {
-							build(): V {
-								return 'test' as V;
-							},
-							data: undefined as T,
-							key: undefined as U,
-						};
-					},
-				});
-			}
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			type ResultType = string;
-			const f = getBuilder()<ResultType>().build<string, object, string>();
-			<div>{f}</div>
+		function App() {
+			return <>
+				function getBuilder() {
+					return <T,>() => ({
+						build<V, T, U>(): { build: () => V; data: T; key: U } {
+							return {
+								build(): V {
+									return 'test' as V;
+								},
+								data: undefined as T,
+								key: undefined as U,
+							};
+						},
+					});
+				}
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				type ResultType = string;
+				const f = getBuilder()<ResultType>().build<string, object, string>();
+				<div>{f}</div>
+			</>;
 		}
 
 		render(App);
 	});
 
 	it('tests most complex generic arrow function with return type', () => {
-		component App() {
-			function getBuilder() {
-				return <T,>() => ({
-					build<V, T, U>(): { build: () => V; data: T; key: U } {
-						return {
-							build(): V {
-								return 42 as V;
-							},
-							data: undefined as T,
-							key: undefined as U,
-						};
-					},
-				});
-			}
-
-			<div class="still-works">
-				<span>{'Test'}</span>
-			</div>
-
-			type ResultType = string;
-			const f = getBuilder()<ResultType>().build<number, object, string>();
-			<div>{f}</div>
+		function App() {
+			return <>
+				function getBuilder() {
+					return <T,>() => ({
+						build<V, T, U>(): { build: () => V; data: T; key: U } {
+							return {
+								build(): V {
+									return 42 as V;
+								},
+								data: undefined as T,
+								key: undefined as U,
+							};
+						},
+					});
+				}
+				<div class="still-works">
+					<span>{'Test'}</span>
+				</div>
+				type ResultType = string;
+				const f = getBuilder()<ResultType>().build<number, object, string>();
+				<div>{f}</div>
+			</>;
 		}
 
 		render(App);

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

@@ -2,15 +2,16 @@ import { RippleURL, flushSync, track } from 'ripple';
 
 describe('RippleURL > derived', () => {
 	it('handles reactive computed properties based on URL', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -38,29 +39,33 @@ describe('RippleURL > derived', () => {
 	});
 
 	it('maintains reactivity across multiple components', () => {
-		component ParentTest() {
-			const url = RippleURL('https://example.com/path?count=0');
-
-			<ChildA {url} />
-			<ChildB {url} />
+		function ParentTest() {
+			return <>
+				const url = RippleURL('https://example.com/path?count=0');
+				<ChildA {url} />
+				<ChildB {url} />
+			</>;
 		}
 
-		component ChildA({ url }: { url: RippleURL }) {
-			<button
-				onClick={() => {
-					const current = parseInt(url.searchParams.get('count') || '0', 10);
-					url.searchParams.set('count', String(current + 1));
-				}}
-			>
-				{'Increment Count'}
-			</button>
+		function ChildA({ url }: { url: RippleURL }) {
+			return <>
+				<button
+					onClick={() => {
+						const current = parseInt(url.searchParams.get('count') || '0', 10);
+						url.searchParams.set('count', String(current + 1));
+					}}
+				>
+					{'Increment Count'}
+				</button>
+			</>;
 		}
 
-		component ChildB({ url }: { url: RippleURL }) {
-			let &[count] = track(() => url.searchParams.get('count'));
-
-			<pre>{url.href}</pre>
-			<pre>{count}</pre>
+		function ChildB({ url }: { url: RippleURL }) {
+			return <>
+				let &[count] = track(() => url.searchParams.get('count'));
+				<pre>{url.href}</pre>
+				<pre>{count}</pre>
+			</>;
 		}
 
 		render(ParentTest);

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

@@ -2,16 +2,17 @@ import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > parsing', () => {
 	it('creates URL from string with reactivity', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -28,11 +29,12 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('creates URL from string with base URL', () => {
-		component URLTest() {
-			const url = RippleURL('/path?query=value', 'https://example.com');
-
-			<pre>{url.href}</pre>
-			<pre>{url.origin}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('/path?query=value', 'https://example.com');
+				<pre>{url.href}</pre>
+				<pre>{url.origin}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -44,12 +46,13 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL encoding correctly', () => {
-		component URLTest() {
-			const url = RippleURL('https://example.com/path with spaces?key=value with spaces');
-
-			<pre>{url.pathname}</pre>
-			<pre>{url.search}</pre>
-			<pre>{url.href}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('https://example.com/path with spaces?key=value with spaces');
+				<pre>{url.pathname}</pre>
+				<pre>{url.search}</pre>
+				<pre>{url.href}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -62,12 +65,13 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with file protocol', () => {
-		component URLTest() {
-			const url = RippleURL('file:///Users/username/documents/file.txt');
-
-			<pre>{url.protocol}</pre>
-			<pre>{url.pathname}</pre>
-			<pre>{url.href}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('file:///Users/username/documents/file.txt');
+				<pre>{url.protocol}</pre>
+				<pre>{url.pathname}</pre>
+				<pre>{url.href}</pre>
+			</>;
 		}
 
 		render(URLTest);
@@ -82,12 +86,13 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with IPv4 address', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -107,13 +112,14 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with localhost', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -135,12 +141,15 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with multiple path segments', () => {
-		component URLTest() {
-			const url = RippleURL('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>
+		function URLTest() {
+			return <>
+				const url = RippleURL('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);
@@ -164,11 +173,12 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles relative URL paths correctly', () => {
-		component URLTest() {
-			const url = RippleURL('../sibling/path', 'https://example.com/parent/current');
-
-			<pre>{url.href}</pre>
-			<pre>{url.pathname}</pre>
+		function URLTest() {
+			return <>
+				const url = RippleURL('../sibling/path', 'https://example.com/parent/current');
+				<pre>{url.href}</pre>
+				<pre>{url.pathname}</pre>
+			</>;
 		}
 
 		render(URLTest);