ripple 0.3.71 → 0.3.74

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

@@ -3,30 +3,23 @@ import { RippleObject, effect, flushSync, track } from 'ripple';
 
 describe('composite > reactivity', () => {
 	it('renders composite components with object state', () => {
-		function Button({ obj }: { obj: { count: Tracked<number> } }) {
-			return <>
-				<button
-					class="count2"
-					onClick={() => {
-						obj.count.value++;
-					}}
-				>
-					{obj.count.value}
-				</button>
-			</>;
+		function Button({ obj }: { obj: { count: Tracked<number> } }) @{
+			<button
+				class="count2"
+				onClick={() => {
+					obj.count.value++;
+				}}
+			>{obj.count.value}</button>
 		}
 
-		function App() {
-			return <>
-				<div>
-					let obj = {
-						count: track(0),
-					};
-
-					<span class="count">{obj.count.value}</span>
-					<Button {obj} />
-				</div>
-			</>;
+		function App() @{
+			let obj = {
+				count: track(0),
+			};
+			<div>
+				<span class="count">{obj.count.value}</span>
+				<Button {obj} />
+			</div>
 		}
 
 		render(App);
@@ -41,41 +34,34 @@ describe('composite > reactivity', () => {
 	});
 
 	it('renders composite components with object state wrapped in an if statement', () => {
-		function Button({ obj }: { obj: { count: Tracked<number> } }) {
-			return <>
-				<button
-					class="count2"
-					onClick={() => {
-						obj.count.value++;
-					}}
-				>
-					{obj.count.value}
-				</button>
-			</>;
+		function Button({ obj }: { obj: { count: Tracked<number> } }) @{
+			<button
+				class="count2"
+				onClick={() => {
+					obj.count.value++;
+				}}
+			>{obj.count.value}</button>
 		}
 
-		function OtherComponent({ obj }: { obj: { count: Tracked<number> } }) {
-			return <><div class="count3">{obj.count.value}</div></>;
+		function OtherComponent({ obj }: { obj: { count: Tracked<number> } }) @{
+			<div class="count3">{obj.count.value}</div>
 		}
 
-		function App() {
-			return <>
-				<div>
-					let obj = {
-						count: track(0),
-					};
-
-					<span class="count">{obj.count.value}</span>
-					<span>{' '}</span>
-					if (obj) {
-						<Button {obj} />
-					}
-
-					if (obj) {
-						<OtherComponent {obj} />
-					}
-				</div>
-			</>;
+		function App() @{
+			let obj = {
+				count: track(0),
+			};
+			<div>
+				<span class="count">{obj.count.value}</span>
+				<span>{' '}</span>
+				@if (obj) {
+					<Button {obj} />
+				}
+
+				@if (obj) {
+					<OtherComponent {obj} />
+				}
+			</div>
 		}
 
 		render(App);
@@ -91,34 +77,29 @@ describe('composite > reactivity', () => {
 	});
 
 	it('parents and children have isolated state', () => {
-		function Button(props: { count: number }) {
-			return <>
-				let &[count] = track(() => props.count);
+		function Button(props: { count: number }) @{
+			let &[count] = track(() => props.count);
+			<button
+				onClick={() => {
+					count++;
+				}}
+			>
+				{'child: ' + count}
+			</button>
+		}
+
+		function App() @{
+			let &[count] = track(0);
+			<div>
 				<button
 					onClick={() => {
 						count++;
 					}}
 				>
-					{'child: ' + count}
+					{'parent: ' + count}
 				</button>
-			</>;
-		}
-
-		function App() {
-			return <>
-				<div>
-					let &[count] = track(0);
-
-					<button
-						onClick={() => {
-							count++;
-						}}
-					>
-						{'parent: ' + count}
-					</button>
-					<Button {count} />
-				</div>
-			</>;
+				<Button {count} />
+			</div>
 		}
 
 		render(App);
@@ -142,34 +123,29 @@ describe('composite > reactivity', () => {
 	});
 
 	it('parents and children have isolated connected state (destructured props)', () => {
-		function Button(&{ count }: { count: number }) {
-			return <>
-				let &[local_count] = track(() => count);
+		function Button(&{ count }: { count: number }) @{
+			let &[local_count] = track(() => count);
+			<button
+				onClick={() => {
+					local_count++;
+				}}
+			>
+				{'child: ' + local_count}
+			</button>
+		}
+
+		function App() @{
+			let &[count] = track(0);
+			<div>
 				<button
 					onClick={() => {
-						local_count++;
+						count++;
 					}}
 				>
-					{'child: ' + local_count}
+					{'parent: ' + count}
 				</button>
-			</>;
-		}
-
-		function App() {
-			return <>
-				<div>
-					let &[count] = track(0);
-
-					<button
-						onClick={() => {
-							count++;
-						}}
-					>
-						{'parent: ' + count}
-					</button>
-					<Button {count} />
-				</div>
-			</>;
+				<Button {count} />
+			</div>
 		}
 
 		render(App);
@@ -195,18 +171,18 @@ describe('composite > reactivity', () => {
 	it('handles spreading of props', () => {
 		let logs: string[] = [];
 
-		function App() {
-			return <>
-				let &[a] = track(1);
-				let &[b] = track(2);
-				let &[c] = track(3);
-				let &[obj] = track(
-					() => ({
-						a,
-						b,
-						c,
-					}),
-				);
+		function App() @{
+			let &[a] = track(1);
+			let &[b] = track(2);
+			let &[c] = track(3);
+			let &[obj] = track(
+				() => ({
+					a,
+					b,
+					c,
+				}),
+			);
+			<>
 				<Child {...obj} />
 				<button
 					onClick={() => {
@@ -214,19 +190,17 @@ describe('composite > reactivity', () => {
 						b++;
 						c++;
 					}}
-				>
-					{'Increment all'}
-				</button>
-			</>;
+				>{'Increment all'}</button>
+			</>
 		}
 
-		function Child(&{ a, b, c }: { a: number; b: number; c: number }) {
-			return <>
-				effect(() => {
-					logs.push(`Child effect: ${a}, ${b}, ${c}`);
-				});
-				<div>{a + ' ' + b + ' ' + c}</div>
-			</>;
+		function Child(&{ a, b, c }: { a: number; b: number; c: number }) @{
+			effect(() => {
+				logs.push(`Child effect: ${a}, ${b}, ${c}`);
+			});
+			<div>
+				{a + ' ' + b + ' ' + c}
+			</div>
 		}
 
 		render(App);
@@ -244,27 +218,23 @@ describe('composite > reactivity', () => {
 	});
 
 	it('keeps reactivity for spread props via intermediate components and lazy destructuring', () => {
-		function App() {
-			return <>
-				let &[count] = track(0);
-				<CounterWrapper {count} up={() => count++} down={() => count--} />
-			</>;
+		function App() @{
+			let &[count] = track(0);
+			<CounterWrapper {count} up={() => count++} down={() => count--} />
 		}
 
-		function CounterWrapper(props: Props) {
-			return <>
-				<div>
-					<Counter {...props} />
-				</div>
-			</>;
+		function CounterWrapper(props: Props) @{
+			<div>
+				<Counter {...props} />
+			</div>
 		}
 
-		function Counter(&{ count, up, down, ...rest }: Props) {
-			return <>
+		function Counter(&{ count, up, down, ...rest }: Props) @{
+			<>
 				<button onClick={() => up()}>{'UP'}</button>
 				<button onClick={() => down()}>{'DOWN'}</button>
 				<span {...rest}>{`Counter: ${count}`}</span>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -287,36 +257,32 @@ describe('composite > reactivity', () => {
 	});
 
 	it('keeps reactivity on elements for element spreads and adds / removes dynamic props', () => {
-		function App() {
-			return <>
-				let &[count] = track(0);
-				<CounterWrapper {count} up={() => count++} />
-			</>;
+		function App() @{
+			let &[count] = track(0);
+			<CounterWrapper {count} up={() => count++} />
 		}
 
-		function CounterWrapper(props: { count: number; up: () => void }) {
-			return <>
-				const more: {
-					double: Tracked<number>;
-					another?: number;
-					extra: number;
-				} = new RippleObject({
-					double: track(() => props.count * 2),
-					another: 0,
-					extra: 100,
-				});
-				effect(() => {
-					props.count;
-					if (props.count === 1) {
-						delete more.another;
-					} else if (props.count === 2) {
-						more.another = 0;
-					}
-				});
-				<div>
-					<Counter {...props} double={more.double} another={more.another} extra={more.extra} />
-				</div>
-			</>;
+		function CounterWrapper(props: { count: number; up: () => void }) @{
+			const more: {
+				double: Tracked<number>;
+				another?: number;
+				extra: number;
+			} = new RippleObject({
+				double: track(() => props.count * 2),
+				another: 0,
+				extra: 100,
+			});
+			effect(() => {
+				props.count;
+				if (props.count === 1) {
+					delete more.another;
+				} else if (props.count === 2) {
+					more.another = 0;
+				}
+			});
+			<div>
+				<Counter {...props} double={more.double} another={more.another} extra={more.extra} />
+			</div>
 		}
 
 		function Counter(&{
@@ -329,11 +295,11 @@ describe('composite > reactivity', () => {
 			double: Tracked<number>;
 			another?: number;
 			extra: number;
-		}) {
-			return <>
+		}) @{
+			<>
 				<div {...rest}>{`Counter: ${count} Double: ${rest.double.value}`}</div>
 				<button onClick={() => up()}>{'UP'}</button>
-			</>;
+			</>
 		}
 
 		render(App);

package/tests/client/composite/composite.render.test.tsrx

@@ -2,16 +2,16 @@ import { RippleArray, flushSync, track, type Component } from 'ripple';
 
 describe('composite > render', () => {
 	it('renders composite components', () => {
-		function Button(&{ count }: { count: number }) {
-			return <><div>{count}</div></>;
+		function Button(&{ count }: { count: number }) @{
+			<div>{count}</div>
 		}
 
-		function App() {
-			return <>
-				let &[count] = track(0);
+		function App() @{
+			let &[count] = track(0);
+			<>
 				<button onClick={() => count++}>{'Increment'}</button>
 				<Button {count} />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -30,28 +30,26 @@ describe('composite > render', () => {
 	});
 
 	it('correct handles passing through component props and children', () => {
-		function Button({ A, B, children }: { A: () => void; B: () => void; children: () => void }) {
-			return <>
-				<div>
-					<A />
-					{children}
-					<B />
-				</div>
-			</>;
+		function Button({ A, B, children }: { A: () => void; B: () => void; children: () => void }) @{
+			<div>
+				<A />
+				{children}
+				<B />
+			</div>
 		}
 
-		function App() {
-			return <>
-				function A() {
-					return <><div>{'I am A'}</div></>;
-				}
-				function B() {
-					return <><div>{'I am B'}</div></>;
-				}
-				<Button {A} {B}>
-					<div>{'other text'}</div>
-				</Button>
-			</>;
+		function A() @{
+			<div>{'I am A'}</div>
+		}
+
+		function B() @{
+			<div>{'I am B'}</div>
+		}
+
+		function App() @{
+			<Button {A} {B}>
+				<div>{'other text'}</div>
+			</Button>
 		}
 
 		render(App);
@@ -60,15 +58,13 @@ describe('composite > render', () => {
 	});
 
 	it('render simple text as children', () => {
-		function App() {
-			return <>
-				let name = 'Click Me';
-				<Child class="my-button">{name}</Child>
-			</>;
+		function App() @{
+			let name = 'Click Me';
+			<Child class="my-button">{name}</Child>
 		}
 
-		function Child({ children, ...rest }: { children: string; class: string }) {
-			return <><button {...rest}>{children}</button></>;
+		function Child({ children, ...rest }: { children: string; class: string }) @{
+			<button {...rest}>{children}</button>
 		}
 
 		render(App);
@@ -76,22 +72,18 @@ describe('composite > render', () => {
 	});
 
 	it('renders explicit text around children', () => {
-		function Frame({ children }) {
-			return <>
-				<div class="frame">
-					{'before'}
-					{children}
-					{'after'}
-				</div>
-			</>;
+		function Frame({ children }) @{
+			<div class="frame">
+				{'before'}
+				{children}
+				{'after'}
+			</div>
 		}
 
-		function App() {
-			return <>
-				<Frame>
-					<span class="middle">{'middle'}</span>
-				</Frame>
-			</>;
+		function App() @{
+			<Frame>
+				<span class="middle">{'middle'}</span>
+			</Frame>
 		}
 
 		render(App);
@@ -112,35 +104,35 @@ describe('composite > render', () => {
 	});
 
 	it('preserves distinct scoped ripple hashes for wrapper and child content', () => {
-		function App() {
-			return <>
-				function Wrapper({ children }) {
-					return <>
-						<div class="green">
-							{'Wrapper'}
-							{children}
-						</div>
-						<style>
-							.green {
-								color: green;
-							}
-						</style>
-					</>;
-				}
-				function Child() {
-					return <>
-						<div class="red">{'Child'}</div>
-						<style>
-							.red {
-								color: red;
-							}
-						</style>
-					</>;
-				}
-				<Wrapper>
-					<Child />
-				</Wrapper>
-			</>;
+		function Wrapper({ children }) @{
+			<>
+				<div class="green">
+					{'Wrapper'}
+					{children}
+				</div>
+				<style>
+					.green {
+						color: green;
+					}
+				</style>
+			</>
+		}
+
+		function Child() @{
+			<>
+				<div class="red">{'Child'}</div>
+				<style>
+					.red {
+						color: red;
+					}
+				</style>
+			</>
+		}
+
+		function App() @{
+			<Wrapper>
+				<Child />
+			</Wrapper>
 		}
 
 		render(App);
@@ -160,12 +152,12 @@ describe('composite > render', () => {
 	});
 
 	it('handles generics', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray<number>();
-				items.push.apply(items, [1, 2, 3, 4, 5]);
-				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
-			</>;
+		function ArrayTest() @{
+			let items = new RippleArray<number>();
+			items.push.apply(items, [1, 2, 3, 4, 5]);
+			<pre>
+				{items ? JSON.stringify(items) : 'Loading...'}
+			</pre>
 		}
 
 		render(ArrayTest);
@@ -180,18 +172,17 @@ describe('composite > render', () => {
 			children?: Component;
 			NonExistent?: Component;
 			[key: string]: any;
-		}) {
-			return <>
-				<div {...props}>
-					{children}
-					// @ts-expect-error - intentionally testing behavior when a component is undefined
-					<NonExistent />
-				</div>
-			</>;
+		}) @{
+			<div {...props}>
+				{children}
+
+				<NonExistent />
+				// @ts-expect-error - intentionally testing behavior when a component is undefined
+			</div>
 		}
 
-		function App() {
-			return <><Child /></>;
+		function App() @{
+			<Child />
 		}
 
 		render(App);
@@ -206,8 +197,8 @@ describe('composite > render', () => {
 
 describe('scoped styles with children', () => {
 	it('generates correct CSS hashes for wrapper and child with empty style in App', () => {
-		function Wrapper(&{ children }: { children?: Component }) {
-			return <>
+		function Wrapper(&{ children }: { children?: Component }) @{
+			<>
 				<div class="green">
 					{'Wrapper'}
 					{children}
@@ -217,27 +208,27 @@ describe('scoped styles with children', () => {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function Child() {
-			return <>
+		function Child() @{
+			<>
 				<div class="red">{'Child'}</div>
 				<style>
 					.red {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<Wrapper>
 					<Child />
 				</Wrapper>
 				<style></style>
-			</>;
+			</>
 		}
 
 		render(App);