ripple 0.3.67 → 0.3.69

package/tests/client/async-suspend.test.tsrx

@@ -5,31 +5,32 @@ describe('async suspense', () => {
 	it('hides child content during re-suspension when tracked dependency changes', async () => {
 		let resolve_fn: (() => void) | null = null;
 
-		component Child({ countTracked }: { countTracked: Tracked<number> }) {
-			trackAsync(() => {
-				countTracked.value;
-				return new Promise<void>((resolve) => {
-					resolve_fn = resolve;
+		function Child({ countTracked }: { countTracked: Tracked<number> }) {
+			return <>
+				trackAsync(() => {
+					countTracked.value;
+					return new Promise<void>((resolve) => {
+						resolve_fn = resolve;
+					});
 				});
-			});
-
-			<div class="child-content">{'child content'}</div>
-			<div class="count">
-				{'count is: '}
-				{countTracked.value}
-			</div>
+				<div class="child-content">{'child content'}</div>
+				<div class="count">
+					{'count is: '}
+					{countTracked.value}
+				</div>
+			</>;
 		}
 
-		component App() {
-			let &[count, countTracked] = track(0);
-
-			try {
-				<Child {countTracked} />
-			} pending {
-				<div class="pending">{'pending...'}</div>
-			}
-
-			<button onClick={() => count++}>{'Increment'}</button>
+		function App() {
+			return <>
+				let &[count, countTracked] = track(0);
+				try {
+					<Child {countTracked} />
+				} pending {
+					<div class="pending">{'pending...'}</div>
+				}
+				<button onClick={() => count++}>{'Increment'}</button>
+			</>;
 		}
 
 		render(App);
@@ -68,30 +69,31 @@ describe('async suspense', () => {
 	it('ignores settled promises after the surrounding boundary is destroyed', async () => {
 		let resolve_value: ((value: string) => void) | null = null;
 
-		component Child() {
-			let &[value] = trackAsync(
-				() => new Promise<string>((resolve) => {
-					resolve_value = resolve;
-				}),
-			);
-
-			<div class="value">{value}</div>
+		function Child() {
+			return <>
+				let &[value] = trackAsync(
+					() => new Promise<string>((resolve) => {
+						resolve_value = resolve;
+					}),
+				);
+				<div class="value">{value}</div>
+			</>;
 		}
 
-		component App() {
-			let &[show] = track(true);
-
-			<button onClick={() => (show = false)}>{'Hide'}</button>
-
-			if (show) {
-				try {
-					<Child />
-				} pending {
-					<div class="pending">{'loading...'}</div>
+		function App() {
+			return <>
+				let &[show] = track(true);
+				<button onClick={() => (show = false)}>{'Hide'}</button>
+				if (show) {
+					try {
+						<Child />
+					} pending {
+						<div class="pending">{'loading...'}</div>
+					}
+				} else {
+					<div class="hidden">{'hidden'}</div>
 				}
-			} else {
-				<div class="hidden">{'hidden'}</div>
-			}
+			</>;
 		}
 
 		render(App);
@@ -137,25 +139,25 @@ describe('async suspense', () => {
 			return { promise, abortController };
 		}
 
-		component App() {
-			let &[query] = track('a');
-
-			try {
-				let &[value] = trackAsync(() => createRequest(query));
-				<div class="value">{value}</div>
-			} pending {
-				<div class="pending">{'loading...'}</div>
-			} catch (error) {
-				<div class="error">{String(error)}</div>
-			}
-
-			<button
-				onClick={() => {
-					query = query === 'a' ? 'b' : 'c';
-				}}
-			>
-				{'Next'}
-			</button>
+		function App() {
+			return <>
+				let &[query] = track('a');
+				try {
+					let &[value] = trackAsync(() => createRequest(query));
+					<div class="value">{value}</div>
+				} pending {
+					<div class="pending">{'loading...'}</div>
+				} catch (error) {
+					<div class="error">{String(error)}</div>
+				}
+				<button
+					onClick={() => {
+						query = query === 'a' ? 'b' : 'c';
+					}}
+				>
+					{'Next'}
+				</button>
+			</>;
 		}
 
 		render(App);
@@ -198,38 +200,37 @@ describe('async suspense', () => {
 		async () => {
 			let pending_render_count = 0;
 
-			component FilteredList({ queryTracked }: { queryTracked: Tracked<string> }) {
-				let &[query] = queryTracked;
-				let &[items] = trackAsync(
-					() => Promise.resolve(
-						!query ? ['apple', 'banana', 'cherry'] : ['avocado', 'blueberry', 'citrus'],
-					),
-				);
-
-				let &[filtered] = track(() => {
-					return items.filter((item: string) => item.includes(query));
-				});
-
-				<ul>
-					for (let item of filtered) {
-						<li>{item}</li>
-					}
-				</ul>
-
-				<pre>{JSON.stringify(items)}</pre>
+			function FilteredList({ queryTracked }: { queryTracked: Tracked<string> }) {
+				return <>
+					let &[query] = queryTracked;
+					let &[items] = trackAsync(
+						() => Promise.resolve(
+							!query ? ['apple', 'banana', 'cherry'] : ['avocado', 'blueberry', 'citrus'],
+						),
+					);
+					let &[filtered] = track(() => {
+						return items.filter((item: string) => item.includes(query));
+					});
+					<ul>
+						for (let item of filtered) {
+							<li>{item}</li>
+						}
+					</ul>
+					<pre>{JSON.stringify(items)}</pre>
+				</>;
 			}
 
-			component App() {
-				let &[query, queryTracked] = track('');
-
-				try {
-					<FilteredList {queryTracked} />
-				} pending {
-					pending_render_count += 1;
-					<p class="pending">{'loading...'}</p>
-				}
-
-				<button onClick={() => (query = 'a')}>{'Search'}</button>
+			function App() {
+				return <>
+					let &[query, queryTracked] = track('');
+					try {
+						<FilteredList {queryTracked} />
+					} pending {
+						pending_render_count += 1;
+						<p class="pending">{'loading...'}</p>
+					}
+					<button onClick={() => (query = 'a')}>{'Search'}</button>
+				</>;
 			}
 
 			render(App);
@@ -273,33 +274,33 @@ describe('async suspense', () => {
 	it('updates direct try-block trackAsync consumers and renders pending only once', async () => {
 		let pending_render_count = 0;
 
-		component App() {
-			let &[query] = track('');
-
-			try {
-				let &[items] = trackAsync(
-					() => Promise.resolve(
-						!query ? ['apple', 'banana', 'cherry'] : ['avocado', 'blueberry', 'citrus'],
-					),
-				);
-
-				let &[filtered] = track(() => {
-					return items.filter((item: string) => item.includes(query));
-				});
-
-				<ul>
-					for (let item of filtered) {
-						<li>{item}</li>
-					}
-				</ul>
+		function App() {
+			return <>
+				let &[query] = track('');
+				try {
+					let &[items] = trackAsync(
+						() => Promise.resolve(
+							!query ? ['apple', 'banana', 'cherry'] : ['avocado', 'blueberry', 'citrus'],
+						),
+					);
+
+					let &[filtered] = track(() => {
+						return items.filter((item: string) => item.includes(query));
+					});
 
-				<pre>{JSON.stringify(items)}</pre>
-			} pending {
-				pending_render_count += 1;
-				<p class="pending">{'loading...'}</p>
-			}
+					<ul>
+						for (let item of filtered) {
+							<li>{item}</li>
+						}
+					</ul>
 
-			<button onClick={() => (query = 'a')}>{'Search'}</button>
+					<pre>{JSON.stringify(items)}</pre>
+				} pending {
+					pending_render_count += 1;
+					<p class="pending">{'loading...'}</p>
+				}
+				<button onClick={() => (query = 'a')}>{'Search'}</button>
+			</>;
 		}
 
 		render(App);
@@ -338,48 +339,46 @@ describe('async suspense', () => {
 			let double_effect_runs = 0;
 			let quadruple_effect_runs = 0;
 			let times_rendered = 0;
-			component Child(&{ count }: { count: number }) {
-				const &[double]: [number] = trackAsync(() => {
-					const result = count * 2;
+			function Child(&{ count }: { count: number }) {
+				return <>
+					const &[double]: [number] = trackAsync(() => {
+						const result = count * 2;
 
-					return new Promise<number>((resolve) => {
-						resolve_double = () => resolve(result);
+						return new Promise<number>((resolve) => {
+							resolve_double = () => resolve(result);
+						});
 					});
-				});
+					const &[quadruple]: [number] = trackAsync(() => {
+						const result = double * 2;
 
-				const &[quadruple]: [number] = trackAsync(() => {
-					const result = double * 2;
-
-					return new Promise<number>((resolve) => {
-						resolve_quadruple = () => resolve(result);
+						return new Promise<number>((resolve) => {
+							resolve_quadruple = () => resolve(result);
+						});
 					});
-				});
-
-				effect(() => {
-					double;
-					double_effect_runs += 1;
-				});
-
-				effect(() => {
-					quadruple;
-					quadruple_effect_runs += 1;
-				});
-
-				// this is to make the times_rendered render together with double
-				<div class="double">{double + (++times_rendered - times_rendered)}</div>
-				<div class="quadruple">{quadruple}</div>
+					effect(() => {
+						double;
+						double_effect_runs += 1;
+					});
+					effect(() => {
+						quadruple;
+						quadruple_effect_runs += 1;
+					});
+					// this is to make the times_rendered render together with double
+					<div class="double">{double + (++times_rendered - times_rendered)}</div>
+					<div class="quadruple">{quadruple}</div>
+				</>;
 			}
 
-			component App() {
-				let &[count] = track(2);
-
-				try {
-					<Child {count} />
-				} pending {
-					<div class="pending">{'Loading...'}</div>
-				}
-
-				<button onClick={() => count++}>{'Increment'}</button>
+			function App() {
+				return <>
+					let &[count] = track(2);
+					try {
+						<Child {count} />
+					} pending {
+						<div class="pending">{'Loading...'}</div>
+					}
+					<button onClick={() => count++}>{'Increment'}</button>
+				</>;
 			}
 
 			render(App);
@@ -433,48 +432,46 @@ describe('async suspense', () => {
 			let double_effect_runs = 0;
 			let quadruple_effect_runs = 0;
 			let times_rendered = 0;
-			component Child(&{ count }: { count: number }) {
-				const &[double]: [number] = trackAsync(() => {
-					const result = count * 2;
+			function Child(&{ count }: { count: number }) {
+				return <>
+					const &[double]: [number] = trackAsync(() => {
+						const result = count * 2;
 
-					return new Promise<number>((resolve) => {
-						resolve_double = () => resolve(result);
+						return new Promise<number>((resolve) => {
+							resolve_double = () => resolve(result);
+						});
 					});
-				});
-
-				const &[quadruple]: [number] = trackAsync(() => {
-					const result = double * 2;
+					const &[quadruple]: [number] = trackAsync(() => {
+						const result = double * 2;
 
-					return new Promise<number>((resolve) => {
-						resolve_quadruple = () => resolve(result);
+						return new Promise<number>((resolve) => {
+							resolve_quadruple = () => resolve(result);
+						});
 					});
-				});
-
-				effect(() => {
-					double;
-					double_effect_runs += 1;
-				});
-
-				effect(() => {
-					quadruple;
-					quadruple_effect_runs += 1;
-				});
-
-				// this is to make the times_rendered render together with double
-				<div class="double">{double + (++times_rendered - times_rendered)}</div>
-				<div class="quadruple">{quadruple}</div>
+					effect(() => {
+						double;
+						double_effect_runs += 1;
+					});
+					effect(() => {
+						quadruple;
+						quadruple_effect_runs += 1;
+					});
+					// this is to make the times_rendered render together with double
+					<div class="double">{double + (++times_rendered - times_rendered)}</div>
+					<div class="quadruple">{quadruple}</div>
+				</>;
 			}
 
-			component App() {
-				let &[count] = track(2);
-
-				try {
-					<Child {count} />
-				} pending {
-					<div class="pending">{'Loading...'}</div>
-				}
-
-				<button onClick={() => count++}>{'Increment'}</button>
+			function App() {
+				return <>
+					let &[count] = track(2);
+					try {
+						<Child {count} />
+					} pending {
+						<div class="pending">{'Loading...'}</div>
+					}
+					<button onClick={() => count++}>{'Increment'}</button>
+				</>;
 			}
 
 			render(App);
@@ -526,38 +523,38 @@ describe('async suspense', () => {
 
 	it('resolves chained async values without explicit flushSync', async () => {
 		let times_rendered = 0;
-		component Child(&{ count }: { count: number }) {
-			const &[double]: [number] = trackAsync(() => {
-				const result = count * 2;
+		function Child(&{ count }: { count: number }) {
+			return <>
+				const &[double]: [number] = trackAsync(() => {
+					const result = count * 2;
 
-				return new Promise<number>((resolve) => {
-					setTimeout(() => resolve(result), 0);
+					return new Promise<number>((resolve) => {
+						setTimeout(() => resolve(result), 0);
+					});
 				});
-			});
-
-			const &[quadruple]: [number] = trackAsync(() => {
-				const result = double * 2;
+				const &[quadruple]: [number] = trackAsync(() => {
+					const result = double * 2;
 
-				return new Promise<number>((resolve) => {
-					setTimeout(() => resolve(result), 0);
+					return new Promise<number>((resolve) => {
+						setTimeout(() => resolve(result), 0);
+					});
 				});
-			});
-
-			// this is to make the times_rendered render together with double
-			<div class="double">{double + (++times_rendered - times_rendered)}</div>
-			<div class="quadruple">{quadruple}</div>
+				// this is to make the times_rendered render together with double
+				<div class="double">{double + (++times_rendered - times_rendered)}</div>
+				<div class="quadruple">{quadruple}</div>
+			</>;
 		}
 
-		component App() {
-			let &[count] = track(0);
-
-			<button onClick={() => count++}>{count}</button>
-
-			try {
-				<Child {count} />
-			} pending {
-				<div class="pending">{'Loading...'}</div>
-			}
+		function App() {
+			return <>
+				let &[count] = track(0);
+				<button onClick={() => count++}>{count}</button>
+				try {
+					<Child {count} />
+				} pending {
+					<div class="pending">{'Loading...'}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -585,38 +582,40 @@ describe('async suspense', () => {
 		async () => {
 			let resolve_fn: ((value: string[]) => void) | null = null;
 
-			component Child({ itemsTracked }: { itemsTracked: Tracked<string[]> }) {
-				try {
-					<div class="child-content">
-						{'child: '}
-						{itemsTracked.value.join(', ')}
-					</div>
-				} pending {
-					<div class="child-pending">{'child loading...'}</div>
-				}
+			function Child({ itemsTracked }: { itemsTracked: Tracked<string[]> }) {
+				return <>
+					try {
+						<div class="child-content">
+							{'child: '}
+							{itemsTracked.value.join(', ')}
+						</div>
+					} pending {
+						<div class="child-pending">{'child loading...'}</div>
+					}
+				</>;
 			}
 
-			component App() {
-				let &[query] = track('initial');
-
-				try {
-					let &[items, itemsTracked] = trackAsync(() => {
-						const q = query;
-						return new Promise<string[]>((resolve) => {
-							resolve_fn = resolve;
+			function App() {
+				return <>
+					let &[query] = track('initial');
+					try {
+						let &[items, itemsTracked] = trackAsync(() => {
+							const q = query;
+							return new Promise<string[]>((resolve) => {
+								resolve_fn = resolve;
+							});
 						});
-					});
 
-					<div class="parent-content">
-						{'parent: '}
-						{items.join(', ')}
-					</div>
-					<Child {itemsTracked} />
-				} pending {
-					<div class="parent-pending">{'parent loading...'}</div>
-				}
-
-				<button onClick={() => (query = 'next')}>{'Change'}</button>
+						<div class="parent-content">
+							{'parent: '}
+							{items.join(', ')}
+						</div>
+						<Child {itemsTracked} />
+					} pending {
+						<div class="parent-pending">{'parent loading...'}</div>
+					}
+					<button onClick={() => (query = 'next')}>{'Change'}</button>
+				</>;
 			}
 
 			render(App);
@@ -660,9 +659,11 @@ describe('async suspense', () => {
 	);
 
 	it('uses the root pending boundary when trackAsync has no local try/pending boundary', () => {
-		component App() {
-			let &[value] = trackAsync(() => Promise.resolve('test'));
-			<div>{value}</div>
+		function App() {
+			return <>
+				let &[value] = trackAsync(() => Promise.resolve('test'));
+				<div>{value}</div>
+			</>;
 		}
 
 		expect(() => {

package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap

@@ -52,7 +52,6 @@ exports[`basic client > rendering & text > should handle lexical scopes correctl
 <div>
   <section>
     Nested scope variable
-    <!---->
   </section>
   
 </div>