ripple 0.3.72 → 0.3.76

package/tests/client/basic/basic.get-set.test.tsrx

@@ -2,11 +2,9 @@ import { effect, flushSync, track, untrack } from 'ripple';
 
 describe('basic client > tracked value access', () => {
 	it('gets tracked value', () => {
-		function Test() {
-			return <>
-				let count = track(0);
-				<div>{count.value}</div>
-			</>;
+		function Test() @{
+			let count = track(0);
+			<div>{count.value}</div>
 		}
 
 		render(Test);
@@ -16,12 +14,12 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('gets tracked value after mutation', () => {
-		function Test() {
-			return <>
-				let &[count] = track(0);
+		function Test() @{
+			let &[count] = track(0);
+			<>
 				<p>{count}</p>
 				<button onClick={() => count++}>{'increment'}</button>
-			</>;
+			</>
 		}
 
 		render(Test);
@@ -37,9 +35,9 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('gets tracked value after multiple mutations', () => {
-		function Test() {
-			return <>
-				let &[count] = track(0);
+		function Test() @{
+			let &[count] = track(0);
+			<>
 				<p>{count}</p>
 				<button
 					onClick={() => {
@@ -47,10 +45,8 @@ describe('basic client > tracked value access', () => {
 						count++;
 						count++;
 					}}
-				>
-					{'increment'}
-				</button>
-			</>;
+				>{'increment'}</button>
+			</>
 		}
 
 		render(Test);
@@ -66,12 +62,12 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('sets tracked value', () => {
-		function Test() {
-			return <>
-				let count = track(0);
+		function Test() @{
+			let count = track(0);
+			<>
 				<p>{count.value}</p>
 				<button onClick={() => (count.value = 10)}>{'set to 10'}</button>
-			</>;
+			</>
 		}
 
 		render(Test);
@@ -87,9 +83,9 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('sets tracked value multiple times', () => {
-		function Test() {
-			return <>
-				let count = track(0);
+		function Test() @{
+			let count = track(0);
+			<>
 				<p>{count.value}</p>
 				<button
 					onClick={() => {
@@ -97,10 +93,8 @@ describe('basic client > tracked value access', () => {
 						count.value = 15;
 						count.value = 25;
 					}}
-				>
-					{'set multiple times'}
-				</button>
-			</>;
+				>{'set multiple times'}</button>
+			</>
 		}
 
 		render(Test);
@@ -116,12 +110,12 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('sets tracked value based on previous value', () => {
-		function Test() {
-			return <>
-				let count = track(0);
+		function Test() @{
+			let count = track(0);
+			<>
 				<p>{count.value}</p>
 				<button onClick={() => (count.value = count.value + 10)}>{'add 10'}</button>
-			</>;
+			</>
 		}
 
 		render(Test);
@@ -143,9 +137,9 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('sets tracked value multiple times based on previous value', () => {
-		function Test() {
-			return <>
-				let count = track(0);
+		function Test() @{
+			let count = track(0);
+			<>
 				<p>{count.value}</p>
 				<button
 					onClick={() => {
@@ -153,10 +147,8 @@ describe('basic client > tracked value access', () => {
 						count.value = count.value + 15;
 						count.value = count.value + 25;
 					}}
-				>
-					{'add multiple times'}
-				</button>
-			</>;
+				>{'add multiple times'}</button>
+			</>
 		}
 
 		render(Test);
@@ -182,11 +174,9 @@ describe('basic client > tracked value access', () => {
 			return track(0);
 		}
 
-		function Test() {
-			return <>
-				let count = store();
-				<p>{count.value}</p>
-			</>;
+		function Test() @{
+			let count = store();
+			<p>{count.value}</p>
 		}
 
 		render(Test);
@@ -200,12 +190,12 @@ describe('basic client > tracked value access', () => {
 			return track(0);
 		}
 
-		function Test() {
-			return <>
-				let count = store();
+		function Test() @{
+			let count = store();
+			<>
 				<p>{count.value}</p>
 				<button onClick={() => (count.value = 50)}>{'set to 50'}</button>
-			</>;
+			</>
 		}
 
 		render(Test);
@@ -221,16 +211,16 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('works with effects', () => {
-		function Test() {
-			return <>
-				let count = track(0);
-				let double = track(0);
-				effect(() => {
-					double.value = count.value * 2;
-				});
+		function Test() @{
+			let count = track(0);
+			let double = track(0);
+			effect(() => {
+				double.value = count.value * 2;
+			});
+			<>
 				<p>{double.value}</p>
 				<button onClick={() => (count.value = count.value + 1)}>{'increment'}</button>
-			</>;
+			</>
 		}
 
 		render(Test);
@@ -251,18 +241,18 @@ describe('basic client > tracked value access', () => {
 	});
 
 	it('works with effects and untrack', () => {
-		function Test() {
-			return <>
-				let count = track(0);
-				let double = track(0);
-				effect(() => {
-					untrack(() => {
-						double.value = count.value * 2;
-					});
+		function Test() @{
+			let count = track(0);
+			let double = track(0);
+			effect(() => {
+				untrack(() => {
+					double.value = count.value * 2;
 				});
+			});
+			<>
 				<p>{double.value}</p>
 				<button onClick={() => (count.value = count.value + 1)}>{'increment'}</button>
-			</>;
+			</>
 		}
 
 		render(Test);

package/tests/client/basic/basic.hmr.test.tsrx

@@ -19,8 +19,8 @@ describe('basic client > hmr', () => {
 	});
 
 	it('removes DOM when an HMR-wrapped root is unmounted', () => {
-		function App() {
-			return <><div class="hmr-root">{'hmr root'}</div></>;
+		function App() @{
+			<div class="hmr-root">{'hmr root'}</div>
 		}
 
 		const cleanup = mount(hmr(App), { target: container });
@@ -37,19 +37,17 @@ describe('basic client > hmr', () => {
 	it('runs child teardowns when an HMR-wrapped root is unmounted', () => {
 		let teardown_count = 0;
 
-		function Child() {
-			return <>
-				effect(() => {
-					return () => {
-						teardown_count++;
-					};
-				});
-				<span class="hmr-child">{'child'}</span>
-			</>;
+		function Child() @{
+			effect(() => {
+				return () => {
+					teardown_count++;
+				};
+			});
+			<span class="hmr-child">{'child'}</span>
 		}
 
-		function App() {
-			return <><Child /></>;
+		function App() @{
+			<Child />
 		}
 
 		const cleanup = mount(hmr(App), { target: container });
@@ -76,12 +74,10 @@ describe('basic client > hmr', () => {
 		};
 
 		try {
-			function App() {
-				return <>
-					<div class="owned-root">
-						<span>{'child'}</span>
-					</div>
-				</>;
+			function App() @{
+				<div class="owned-root">
+					<span>{'child'}</span>
+				</div>
 			}
 
 			const cleanup = mount(App, { target: container });

package/tests/client/basic/basic.reactivity.test.tsrx

@@ -3,37 +3,31 @@ import { effect, flushSync, track, untrack } from 'ripple';
 
 describe('basic client > reactivity', () => {
 	it('renders multiple reactive lexical blocks', () => {
-		function Basic() {
-			return <>
+		function Basic() @{
+			let obj = {
+				count: track(0),
+			};
+			let b = {
+				count: track(0),
+			};
+			<>
 				<div>
-					let obj = {
-						count: track(0),
-					};
-
 					<span>{obj.count.value}</span>
 				</div>
 				<div>
-					let b = {
-						count: track(0),
-					};
-
 					<button
 						onClick={() => {
 							b.count.value--;
 						}}
-					>
-						{'-'}
-					</button>
+					>{'-'}</button>
 					<span class="count">{b.count.value}</span>
 					<button
 						onClick={() => {
 							b.count.value++;
 						}}
-					>
-						{'+'}
-					</button>
+					>{'+'}</button>
 				</div>
-			</>;
+			</>
 		}
 		render(Basic);
 
@@ -51,38 +45,32 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('renders multiple reactive lexical blocks with complexity', () => {
-		function Basic() {
-			return <>
-				const count = 'count';
+		function Basic() @{
+			const count = 'count';
+			let obj = {
+				count: track(0),
+			};
+			let b = {
+				count: track(0),
+			};
+			<>
 				<div>
-					let obj = {
-						count: track(0),
-					};
-
 					<span>{obj[count].value}</span>
 				</div>
 				<div>
-					let b = {
-						count: track(0),
-					};
-
 					<button
 						onClick={() => {
 							b[count].value--;
 						}}
-					>
-						{'-'}
-					</button>
+					>{'-'}</button>
 					<span class="count">{b[count].value}</span>
 					<button
 						onClick={() => {
 							b[count].value++;
 						}}
-					>
-						{'+'}
-					</button>
+					>{'+'}</button>
 				</div>
-			</>;
+			</>
 		}
 		render(Basic);
 
@@ -100,20 +88,22 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('renders with computed reactive state', () => {
-		function Basic() {
-			return <>
-				let &[count] = track(5);
+		function Basic() @{
+			let &[count] = track(5);
+			<>
 				<div class="count">{count}</div>
-				<div class="doubled">{count * 2}</div>
-				<div class="is-even">{count % 2 === 0 ? 'Even' : 'Odd'}</div>
+				<div class="doubled">
+					{count * 2}
+				</div>
+				<div class="is-even">
+					{count % 2 === 0 ? 'Even' : 'Odd'}
+				</div>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(Basic);
@@ -138,12 +128,26 @@ describe('basic client > reactivity', () => {
 	it('basic reactivity with standard arrays should work', () => {
 		let logs: string[] = [];
 
-		function App() {
-			return <>
-				let first = track(0);
-				let second = track(0);
-				const arr = [first, second];
-				const total = track(() => arr.reduce((a, b) => a + b.value, 0));
+		function App() @{
+			let first = track(0);
+			let second = track(0);
+			const arr = [first, second];
+			const total = track(() => arr.reduce((a, b) => a + b.value, 0));
+			effect(() => {
+				let _arr: number[] = [];
+
+				arr.forEach((item) => {
+					_arr.push(item.value);
+				});
+
+				logs.push(_arr.join(', '));
+			});
+			effect(() => {
+				if (arr.map((a) => a.value).includes(1)) {
+					logs.push('arr includes 1');
+				}
+			});
+			<>
 				<button
 					onClick={() => {
 						first.value++;
@@ -158,25 +162,19 @@ describe('basic client > reactivity', () => {
 				>
 					{'second: ' + second.value}
 				</button>
-				effect(() => {
-					let _arr: number[] = [];
-
-					arr.forEach((item) => {
-						_arr.push(item.value);
-					});
-
-					logs.push(_arr.join(', '));
-				});
-				effect(() => {
-					if (arr.map((a) => a.value).includes(1)) {
-						logs.push('arr includes 1');
-					}
-				});
-				<div>{'Sum: ' + total.value}</div>
-				<div>{'Comma Separated: ' + arr.map((a) => a.value).join(', ')}</div>
-				<div>{'Number to string: ' + arr.map((a) => String(a.value))}</div>
-				<div>{'Even numbers: ' + arr.map((a) => a.value).filter((a) => a % 2 === 0)}</div>
-			</>;
+				<div>
+					{'Sum: ' + total.value}
+				</div>
+				<div>
+					{'Comma Separated: ' + arr.map((a) => a.value).join(', ')}
+				</div>
+				<div>
+					{'Number to string: ' + arr.map((a) => String(a.value))}
+				</div>
+				<div>
+					{'Even numbers: ' + arr.map((a) => a.value).filter((a) => a % 2 === 0)}
+				</div>
+			</>
 		}
 
 		render(App);
@@ -211,18 +209,16 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('uses track get and set where both mutate value', () => {
-		function App() {
-			return <>
-				let &[count] = track(0, (v) => v + 1, (v) => v * 2);
+		function App() @{
+			let &[count] = track(0, (v) => v + 1, (v) => v * 2);
+			<>
 				<div class="count">{count}</div>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(App);
@@ -238,18 +234,16 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('uses track get and set where set only mutates value', () => {
-		function App() {
-			return <>
-				let &[count] = track(1, (v) => v, (v) => v * 2);
+		function App() @{
+			let &[count] = track(1, (v) => v, (v) => v * 2);
+			<>
 				<div class="count">{count}</div>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(App);
@@ -265,18 +259,16 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('uses track get and set where get only mutates value', () => {
-		function App() {
-			return <>
-				let &[count] = track(0, (v) => v + 1, (v) => v);
+		function App() @{
+			let &[count] = track(0, (v) => v + 1, (v) => v);
+			<>
 				<div class="count">{count}</div>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(App);
@@ -294,20 +286,18 @@ describe('basic client > reactivity', () => {
 	it('passes in next and prev to track set function', () => {
 		let logs: number[] = [];
 
-		function App() {
-			return <>
-				let &[count] = track(0, (v) => v, (next, prev) => {
-					logs.push(prev, next);
-					return next;
-				});
+		function App() @{
+			let &[count] = track(0, (v) => v, (next, prev) => {
+				logs.push(prev, next);
+				return next;
+			});
+			<>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-			</>;
+				>{'Increment'}</button>
+			</>
 		}
 
 		render(App);
@@ -320,15 +310,13 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
-		function Basic() {
-			return <>
-				let &[count] = track(0);
-				const &[doubled] = track(0, undefined, (value) => {
-					count += value;
-					return value;
-				});
-				<p>{doubled}</p>
-			</>;
+		function Basic() @{
+			let &[count] = track(0);
+			const &[doubled] = track(0, undefined, (value) => {
+				count += value;
+				return value;
+			});
+			<p>{doubled}</p>
 		}
 
 		render(Basic);
@@ -339,13 +327,12 @@ describe('basic client > reactivity', () => {
 	it('unwraps tracked values inside effect', () => {
 		let state: { count?: number } = {};
 
-		function Basic() {
-			return <>
-				let &[count] = track(0);
-				effect(() => {
-					state.count = count;
-				});
-			</>;
+		function Basic() @{
+			let &[count] = track(0);
+			effect(() => {
+				state.count = count;
+			});
+			<></>
 		}
 
 		render(Basic);
@@ -364,20 +351,19 @@ describe('basic client > reactivity', () => {
 			finalValue?: number;
 		} = {};
 
-		function Basic() {
-			return <>
-				let &[count] = track(5);
-				effect(() => {
-					untrack(() => {
-						state.initialValue = count;
-						state.preIncrement = ++count;
-						state.postIncrement = count++;
-						state.preDecrement = --count;
-						state.postDecrement = count--;
-						state.finalValue = count;
-					});
+		function Basic() @{
+			let &[count] = track(5);
+			effect(() => {
+				untrack(() => {
+					state.initialValue = count;
+					state.preIncrement = ++count;
+					state.postIncrement = count++;
+					state.preDecrement = --count;
+					state.postDecrement = count--;
+					state.finalValue = count;
 				});
-			</>;
+			});
+			<></>
 		}
 
 		render(Basic);
@@ -392,12 +378,12 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('returns the same tracked object if plain track is called with a tracked object', () => {
-		function App() {
-			return <>
-				const t = track({ a: 1, b: 2, c: 3 });
-				const doublet = track(t);
-				<pre>{t === doublet}</pre>
-			</>;
+		function App() @{
+			const t = track({ a: 1, b: 2, c: 3 });
+			const doublet = track(t);
+			<pre>
+				{t === doublet}
+			</pre>
 		}
 
 		render(App);