ripple 0.3.71 → 0.3.74

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

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

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

@@ -21,6 +21,7 @@ exports[`basic client > attribute rendering > handles boolean attributes with no
 
 exports[`basic client > attribute rendering > handles boolean props correctly 1`] = `
 <div>
+  <!---->
   <div
     data-disabled=""
   />
@@ -28,6 +29,7 @@ exports[`basic client > attribute rendering > handles boolean props correctly 1`
     disabled=""
   />
   <!---->
+  <!---->
   
 </div>
 `;

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

@@ -2,6 +2,7 @@
 
 exports[`basic client > rendering & text > basic operations 1`] = `
 <div>
+  <!---->
   <div>
     0
   </div>
@@ -14,6 +15,7 @@ exports[`basic client > rendering & text > basic operations 1`] = `
   <div>
     2
   </div>
+  <!---->
   
 </div>
 `;
@@ -29,12 +31,14 @@ exports[`basic client > rendering & text > renders semi-dynamic text 1`] = `
 
 exports[`basic client > rendering & text > renders simple JS expression logic correctly 1`] = `
 <div>
+  <!---->
   <div>
     {"0":"Test"}
   </div>
   <div>
     1
   </div>
+  <!---->
   
 </div>
 `;