ripple 0.3.72 → 0.3.76

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

@@ -1,200 +1,192 @@
 describe('generic patterns', () => {
 	it('tests simple generic function', () => {
-		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);
-			</>;
+		function App() @{
+			const e = new Map<string, Promise<number>>();
+			const a = new Array<number>();
+			const b = new Array<string>();
+			const someSource = new Array<number>(1, 2, 3);
+			const d = someSource.map<number>((x) => x * 2).filter<number>((x) => !!x);
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
 		}
 
 		render(App);
 	});
 
 	it('tests member expression)', () => {
-		function App() {
-			return <>
-				class List<T> {
-					items: T[];
-					constructor() {
-						this.items = [];
-					}
+		function App() @{
+			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>();
-					}
+			}
+			class Containers {
+				static List<T>() {
+					return new List<T>();
 				}
-				const c = Containers.List<string>();
-			</>;
+			}
+			const c = Containers.List<string>();
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic function with return type', () => {
-		function App() {
-			return <>
-				function getBuilder() {
-					return {
-						build: function <T>() {
-							return 'test';
-						},
-					};
-				}
-			</>;
+		function App() @{
+			function getBuilder() {
+				return {
+					build: function <T>() {
+						return 'test';
+					},
+				};
+			}
+			<></>
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic function with return type and no arrow function', () => {
-		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>();
-			</>;
+		function App() @{
+			function getBuilder() {
+				return {
+					build<T>(): T {
+						return 'test' as unknown as T;
+					},
+				};
+			}
+			const f = getBuilder().build<string>();
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
 		}
 
 		render(App);
 	});
 
 	it('tests simple generic arrow function with return type', () => {
-		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>();
-			</>;
+		function App() @{
+			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', () => {
-		function App() {
-			return <>
-				function getBuilder() {
-					return <T,>() => ({
-						build<U>(): U {
-							return 'test' as U;
-						},
-					});
-				}
+		function App() @{
+			function getBuilder() {
+				return <T,>() => ({
+					build<U>(): U {
+						return 'test' as U;
+					},
+				});
+			}
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string>();
+			<>
 				<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', () => {
-		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,
-							};
-						},
-					});
-				}
+		function 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,
+						};
+					},
+				});
+			}
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string, object, string>();
+			<>
 				<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', () => {
-		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,
-							};
-						},
-					});
-				}
+		function 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,
+						};
+					},
+				});
+			}
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string, object, string>();
+			<>
 				<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', () => {
-		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,
-							};
-						},
-					});
-				}
+		function 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,
+						};
+					},
+				});
+			}
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<number, object, string>();
+			<>
 				<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,16 +2,16 @@ import { RippleURL, flushSync, track } from 'ripple';
 
 describe('RippleURL > derived', () => {
 	it('handles reactive computed properties based on URL', () => {
-		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'));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -39,33 +39,29 @@ describe('RippleURL > derived', () => {
 	});
 
 	it('maintains reactivity across multiple components', () => {
-		function ParentTest() {
-			return <>
-				const url = RippleURL('https://example.com/path?count=0');
+		function ParentTest() @{
+			const url = RippleURL('https://example.com/path?count=0');
+			<>
 				<ChildA {url} />
 				<ChildB {url} />
-			</>;
+			</>
 		}
 
-		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>
-			</>;
+		function 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 ChildB({ url }: { url: RippleURL }) {
-			return <>
-				let &[count] = track(() => url.searchParams.get('count'));
+		function ChildB({ url }: { url: RippleURL }) @{
+			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,9 +2,9 @@ import { RippleURL, flushSync } from 'ripple';
 
 describe('RippleURL > parsing', () => {
 	it('creates URL from string with reactivity', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('https://example.com:8080/path?foo=bar#section');
+		function URLTest() @{
+			const url = RippleURL('https://example.com:8080/path?foo=bar#section');
+			<>
 				<pre>{url.href}</pre>
 				<pre>{url.protocol}</pre>
 				<pre>{url.hostname}</pre>
@@ -12,7 +12,7 @@ describe('RippleURL > parsing', () => {
 				<pre>{url.pathname}</pre>
 				<pre>{url.search}</pre>
 				<pre>{url.hash}</pre>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -29,12 +29,12 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('creates URL from string with base URL', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('/path?query=value', 'https://example.com');
+		function URLTest() @{
+			const url = RippleURL('/path?query=value', 'https://example.com');
+			<>
 				<pre>{url.href}</pre>
 				<pre>{url.origin}</pre>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -46,13 +46,13 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL encoding correctly', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('https://example.com/path with spaces?key=value with spaces');
+		function 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>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -65,13 +65,13 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with file protocol', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('file:///Users/username/documents/file.txt');
+		function URLTest() @{
+			const url = RippleURL('file:///Users/username/documents/file.txt');
+			<>
 				<pre>{url.protocol}</pre>
 				<pre>{url.pathname}</pre>
 				<pre>{url.href}</pre>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -86,13 +86,13 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with IPv4 address', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('https://192.168.1.1:8080/path');
+		function 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>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -112,14 +112,14 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with localhost', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('http://localhost:3000/api/data');
+		function 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>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -141,15 +141,15 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles URL with multiple path segments', () => {
-		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>
+		function 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>
-			</>;
+			</>
 		}
 
 		render(URLTest);
@@ -173,12 +173,12 @@ describe('RippleURL > parsing', () => {
 	});
 
 	it('handles relative URL paths correctly', () => {
-		function URLTest() {
-			return <>
-				const url = RippleURL('../sibling/path', 'https://example.com/parent/current');
+		function URLTest() @{
+			const url = RippleURL('../sibling/path', 'https://example.com/parent/current');
+			<>
 				<pre>{url.href}</pre>
 				<pre>{url.pathname}</pre>
-			</>;
+			</>
 		}
 
 		render(URLTest);