ripple 0.2.152 → 0.2.154

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

@@ -110,7 +110,9 @@ describe('TrackedURL > reactivity', () => {
 		button.click();
 		flushSync();
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://newdomain.com:9090/path');
+		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');
@@ -155,14 +157,18 @@ describe('TrackedURL > reactivity', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=bar');
+		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')[0].textContent).toBe(
+			'https://example.com/path?baz=qux',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('?baz=qux');
 	});
 
@@ -180,14 +186,18 @@ describe('TrackedURL > reactivity', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path#section1');
+		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')[0].textContent).toBe(
+			'https://example.com/path#section2',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('#section2');
 	});
 
@@ -205,14 +215,18 @@ describe('TrackedURL > reactivity', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://user:pass@example.com/path');
+		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')[0].textContent).toBe(
+			'https://newuser:pass@example.com/path',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('newuser');
 	});
 
@@ -230,14 +244,18 @@ describe('TrackedURL > reactivity', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://user:pass@example.com/path');
+		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')[0].textContent).toBe(
+			'https://user:newpass@example.com/path',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('newpass');
 	});
 
@@ -245,7 +263,9 @@ describe('TrackedURL > 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>
+			<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>
@@ -260,7 +280,9 @@ describe('TrackedURL > reactivity', () => {
 		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')[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('');
@@ -272,7 +294,9 @@ describe('TrackedURL > reactivity', () => {
 		button.click();
 		flushSync();
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://newdomain.com:9090/newpath?baz=qux#newsection');
+		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');
@@ -331,7 +355,9 @@ describe('TrackedURL > reactivity', () => {
 		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')[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');
 
@@ -339,7 +365,9 @@ describe('TrackedURL > reactivity', () => {
 		updateButton.click();
 		flushSync();
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=updated');
+		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');
 
@@ -347,7 +375,9 @@ describe('TrackedURL > reactivity', () => {
 		addButton.click();
 		flushSync();
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/path?foo=updated&baz=qux');
+		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');
 	});
 
@@ -390,14 +420,18 @@ describe('TrackedURL > reactivity', () => {
 		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>
+			<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>
 		}
 
@@ -412,7 +446,9 @@ describe('TrackedURL > reactivity', () => {
 		button.click();
 		flushSync();
 
-		expect(container.querySelector('pre').textContent).toBe('http://newdomain.com:8080/api?key=value#section');
+		expect(container.querySelector('pre').textContent).toBe(
+			'http://newdomain.com:8080/api?key=value#section',
+		);
 	});
 
 	it('handles href change updates all properties and searchParams', () => {
@@ -420,7 +456,9 @@ describe('TrackedURL > reactivity', () => {
 			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>
+			<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>

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

@@ -14,13 +14,17 @@ describe('TrackedURL > serialization', () => {
 		const button = container.querySelector('button');
 
 		// Initial state
-		expect(container.querySelector('pre').textContent).toBe('https://example.com/path?foo=bar#section');
+		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');
+		expect(container.querySelector('pre').textContent).toBe(
+			'https://example.com/newpath?foo=bar#section',
+		);
 	});
 
 	it('handles toJSON method', () => {
@@ -37,14 +41,22 @@ describe('TrackedURL > serialization', () => {
 		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"}');
+		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"}');
+		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

@@ -46,15 +46,19 @@ describe('TrackedURLSearchParams > derived', () => {
 		component ParentTest() {
 			const params = new TrackedURLSearchParams('count=0');
 
-			<ChildA params={params} />
-			<ChildB params={params} />
+			<ChildA {params} />
+			<ChildB {params} />
 		}
 
 		component ChildA({ params }: { params: TrackedURLSearchParams }) {
-			<button onClick={() => {
-				const current = parseInt(params.get('count') || '0', 10);
-				params.set('count', String(current + 1));
-			}}>{'increment'}</button>
+			<button
+				onClick={() => {
+					const current = parseInt(params.get('count') || '0', 10);
+					params.set('count', String(current + 1));
+				}}
+			>
+				{'increment'}
+			</button>
 		}
 
 		component ChildB({ params }: { params: TrackedURLSearchParams }) {

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

@@ -67,7 +67,9 @@ describe('TrackedURLSearchParams > iteration', () => {
 		button.click();
 		flushSync();
 
-		expect(container.querySelector('pre').textContent).toBe('[["foo","bar"],["baz","qux"],["new","value"]]');
+		expect(container.querySelector('pre').textContent).toBe(
+			'[["foo","bar"],["baz","qux"],["new","value"]]',
+		);
 	});
 
 	it('handles Symbol.iterator with reactivity', () => {

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

@@ -243,10 +243,14 @@ describe('TrackedURLSearchParams > mutation', () => {
 			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>
+			<button
+				onClick={() => {
+					params.delete('foo');
+					params.delete('baz');
+				}}
+			>
+				{'clear all'}
+			</button>
 			<pre>{url.href}</pre>
 			<pre>{params.size}</pre>
 		}
@@ -256,7 +260,9 @@ describe('TrackedURLSearchParams > mutation', () => {
 		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')[0].textContent).toBe(
+			'https://example.com/?foo=bar&baz=qux',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
 
 		// Test clear all
@@ -271,14 +277,18 @@ describe('TrackedURLSearchParams > mutation', () => {
 		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>
+			<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>
 		}
@@ -337,7 +347,9 @@ describe('TrackedURLSearchParams > mutation', () => {
 		rippleButton.click();
 		flushSync();
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["javascript","typescript","ripple"]');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe(
+			'["javascript","typescript","ripple"]',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
 	});
 });

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

@@ -23,7 +23,9 @@ describe('TrackedURLSearchParams > TrackedURL integration', () => {
 		button.click();
 		flushSync();
 
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[0].textContent).toBe(
+			'https://example.com/?foo=bar&baz=qux',
+		);
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('foo=bar&baz=qux');
 	});
 

package/tests/server/await.test.ripple

@@ -9,7 +9,7 @@ describe('await in control flow', () => {
 			let data = track('loading');
 
 			if (condition) {
-				await new Promise(resolve => setTimeout(() => {
+				await new Promise((resolve) => setTimeout(() => {
 					@data = 'loaded';
 					resolve();
 				}, 10));
@@ -28,7 +28,7 @@ describe('await in control flow', () => {
 			let result = '';
 
 			for (const item of items) {
-				await new Promise(resolve => setTimeout(resolve, 5));
+				await new Promise((resolve) => setTimeout(resolve, 5));
 				result += item;
 			}
 
@@ -39,23 +39,24 @@ describe('await in control flow', () => {
 		expect(body).toBe('<div>123</div>');
 	});
 
-			it('should handle await inside switch statement', async () => {
-				component App() {
-					let value = 'b';
-	
-					switch (value) {
-						case 'a':
-							<div>{'Case A'}</div>
-							break;
-						case 'b':
-							await new Promise(resolve => setTimeout(resolve, 10));
-							<div>{'Case B'}</div>
-							break;
-						default:
-							<div>{'Default Case'}</div>
-					}
-				}
-	
-				const { body } = await render(App);
-				expect(body).toBe('<div>Case B</div>');
-			});});
+	it('should handle await inside switch statement', async () => {
+		component App() {
+			let value = 'b';
+
+			switch (value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+					await new Promise((resolve) => setTimeout(resolve, 10));
+					<div>{'Case B'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Case B</div>');
+	});
+});

package/tests/server/basic.test.ripple

@@ -12,4 +12,4 @@ describe('basic client', () => {
 		expect(head).toBe('');
 		expect(body).toBe('<div>Hello World</div>');
 	});
-});
+});

package/tests/server/compiler.test.ripple

@@ -1,12 +1,9 @@
 import { describe, it, expect } from 'vitest';
-import { compile } from 'ripple/compiler'
+import { compile } from 'ripple/compiler';
 
 describe('compiler success tests', () => {
-
-
 	it('compiles TSInstantiationExpression', () => {
-		const source =
-`function makeBox<T>(value: T) {
+		const source = `function makeBox<T,>(value: T) {
 	return { value };
 }
 const makeStringBox = makeBox<string>;
@@ -20,8 +17,7 @@ const errorMap = new ErrorMap();`;
 	});
 
 	it('compiles imported component with conditional async in SSR', () => {
-		const source =
-`import { ChildComponent } from './Child.ripple';
+		const source = `import { ChildComponent } from './Child.ripple';
 
 export component App() {
 	<div>

package/tests/server/composite.test.ripple

@@ -9,32 +9,36 @@ describe('generics', () => {
 
 			// 7. Generic following optional chaining
 			const maybe = {
-				factory<T>() {
+				factory: function <T>() {
 					return {
-						make<U>() {
+						make: function <U>() {
 							return 1;
-						}
+						},
 					};
-				}
+				},
 			};
 			const g = maybe?.factory<number>()?.make<boolean>();
 
 			// 8. Comparison operator (ensure '<' here NOT misparsed as generics)
 			let x = 10, y = 20;
-			const h = x < y ? 'lt' : 'ge';
+			const h =
+				x < y ? 'lt' : 'ge';
 
 			// 9. Chained comparisons with intervening generics
 			class Box<T> {
 				value: T;
-				constructor(value?: T) {
+
+				constructor(value: T) {
 					this.value = value;
 				}
+
 				open<U>() {
 					return new Box<U>();
 				}
 			}
 			const limit = 100;
-			const i = new Box<number>().value < limit ? 'ok' : 'no';
+			const i =
+				new Box<number>().value < limit ? 'ok' : 'no';
 
 			// 10. JSX / Element should still work
 			<div class="still-works">
@@ -59,13 +63,13 @@ describe('generics', () => {
 			// 13. Multiple generic segments in chain
 			function foo<T>() {
 				return {
-					bar<U>() {
+					bar: function <U>() {
 						return {
-							baz<V>() {
+							baz: function <V>() {
 								return true;
-							}
+							},
 						};
-					}
+					},
 				};
 			}
 			const l = foo<number>().bar<string>().baz<boolean>();
@@ -77,9 +81,11 @@ describe('generics', () => {
 			// 15. Generic in angle after "new" + trailing call
 			class Wrapper<T> {
 				value: T;
+
 				constructor() {
 					this.value = null as unknown as T;
 				}
+
 				unwrap<U>() {
 					return null as unknown as U;
 				}
@@ -90,11 +96,11 @@ describe('generics', () => {
 			function getUnknown(): unknown {
 				return new Map<string, number>([['a', 1]]);
 			}
-			getUnknown.factory = function<T>() {
+			getUnknown.factory = function <T>() {
 				return {
-					make<U>() {
+					make: function <U>() {
 						return 2;
-					}
+					},
 				};
 			};
 			const raw = getUnknown();
@@ -103,14 +109,17 @@ describe('generics', () => {
 			// 17. Generic with comma + trailing less-than comparison on next token
 			class Pair<T1, T2> {
 				first: T1;
+
 				second: T2;
+
 				constructor() {
 					this.first = null as unknown as T1;
 					this.second = null as unknown as T2;
 				}
 			}
 			const p = new Pair<number, string>();
-			const q = 1 < 2 ? p : null;
+			const q =
+				1 < 2 ? p : null;
 
 			// 18. Nested generics with line breaks resembling JSX indentation
 			interface Node<T> {
@@ -121,16 +130,15 @@ describe('generics', () => {
 			}
 			class Graph<N, E> {
 				nodes: N[];
+
 				edges: E[];
+
 				constructor() {
 					this.nodes = [];
 					this.edges = [];
 				}
 			}
-			const r = new Graph<
-				Node<string>,
-				Edge<number>
-			>();
+			const r = new Graph<Node<string>, Edge<number>>();
 
 			// 19. Ternary containing generics in both branches
 			let flag = true;
@@ -150,18 +158,17 @@ describe('generics', () => {
 			const v = make<number>()(10);
 
 			// 23. Generic followed by tagged template (ensure not confused with JSX)
-			function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
+			function tagFn<T>(strings: TemplateStringsArray, ...values) {
 				return values[0];
 			}
-			const tagResult = tagFn<number>`value`;
+			const tagResult = tagFn`value`;
 
 			// 24. Sequence mixing: (a < b) + generic call in same statement
 			function compute<T>(x: T, y: T): T {
 				return y;
 			}
 
-			const w = (x < y) && compute<number>(x, y);
-
+			const w = x < y && compute<number>(x, y);
 
 			// Additional component focusing on edge crankers
 
@@ -172,37 +179,32 @@ describe('generics', () => {
 			class Builder<Kind> {
 				finalize<Result>() {
 					return {
-						result: null as unknown as Result
+						result: null as unknown as Result,
 					};
 				}
 			}
 			const builder = new Builder<Number>();
-			const result = ((function(){ return builder; })() as Builder<Number>).finalize<boolean>();
+			const result = (function () {
+				return builder;
+			}() as Builder<Number>).finalize<boolean>();
 
 			// 30. Angle bracket start of conditional expression line
 			function adjust<T>(value: T): T {
 				return value;
 			}
 			const val =
-				new Wrapper<number>()
-					.value < 100
-					? adjust<number>(10)
-					: adjust<number>(20);
-
+				new Wrapper<number>().value < 100 ? adjust<number>(10) : adjust<number>(20);
 
 			// 32. Generic with comments inside angle list
 			class Mapper<Key, Value> {
 				map: Map<Key, Value>;
+
 				constructor() {
 					this.map = new Map<Key, Value>();
 				}
 			}
-			const gg = new Mapper<
-				// key type
-				string,
-				/* value type */
-				number
-			>();
+			const gg = new Mapper<// key type
+			string /* value type */, number>();
 
 			// 33. Map of generic instance as key
 			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();