ripple 0.3.68 → 0.3.69

package/tests/client/switch.test.tsrx

@@ -2,25 +2,25 @@ import { flushSync, track } from 'ripple';
 
 describe('switch statements', () => {
 	it('renders simple switch with literal cases', () => {
-		component App() {
-			let &[value] = track('b');
-
-			<button onClick={() => (value = 'c')}>{'Change to C'}</button>
-			<button onClick={() => (value = 'a')}>{'Change to A'}</button>
-
-			switch (value) {
-				case 'a':
-					<div>{'Case A'}</div>
-					break;
-				case 'b':
-					<div>{'Case B'}</div>
-					break;
-				case 'c':
-					<div>{'Case C'}</div>
-					break;
-				default:
-					<div>{'Default Case'}</div>
-			}
+		function App() {
+			return <>
+				let &[value] = track('b');
+				<button onClick={() => (value = 'c')}>{'Change to C'}</button>
+				<button onClick={() => (value = 'a')}>{'Change to A'}</button>
+				switch (value) {
+					case 'a':
+						<div>{'Case A'}</div>
+						break;
+					case 'b':
+						<div>{'Case B'}</div>
+						break;
+					case 'c':
+						<div>{'Case C'}</div>
+						break;
+					default:
+						<div>{'Default Case'}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -37,21 +37,21 @@ describe('switch statements', () => {
 	});
 
 	it('renders switch with reactive discriminant', () => {
-		component App() {
-			let &[count] = track(1);
-
-			<button onClick={() => count++}>{'Increment'}</button>
-
-			switch (count) {
-				case 1:
-					<div>{'Count is 1'}</div>
-					break;
-				case 2:
-					<div>{'Count is 2'}</div>
-					break;
-				default:
-					<div>{'Count is other'}</div>
-			}
+		function App() {
+			return <>
+				let &[count] = track(1);
+				<button onClick={() => count++}>{'Increment'}</button>
+				switch (count) {
+					case 1:
+						<div>{'Count is 1'}</div>
+						break;
+					case 2:
+						<div>{'Count is 2'}</div>
+						break;
+					default:
+						<div>{'Count is other'}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -69,15 +69,15 @@ describe('switch statements', () => {
 	});
 
 	it('renders switch with default clause only', () => {
-		component App() {
-			let &[value] = track('x');
-
-			<button onClick={() => (value = 'y')}>{'Change Value'}</button>
-
-			switch (value) {
-				default:
-					<div>{'Default for ' + value}</div>
-			}
+		function App() {
+			return <>
+				let &[value] = track('x');
+				<button onClick={() => (value = 'y')}>{'Change Value'}</button>
+				switch (value) {
+					default:
+						<div>{'Default for ' + value}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -90,23 +90,23 @@ describe('switch statements', () => {
 	});
 
 	it('renders switch using empty case fall-through', () => {
-		component App() {
-			let &[value] = track('a');
-
-			<button onClick={() => (value = 'b')}>{'Change to B'}</button>
-			<button onClick={() => (value = 'c')}>{'Change to C'}</button>
-
-			switch (value) {
-				case 'a':
-					<div>{'Case A'}</div>
-					break;
-				case 'b':
-				case 'c':
-					<div>{'Case B or C'}</div>
-					break;
-				default:
-					<div>{'Default Case'}</div>
-			}
+		function App() {
+			return <>
+				let &[value] = track('a');
+				<button onClick={() => (value = 'b')}>{'Change to B'}</button>
+				<button onClick={() => (value = 'c')}>{'Change to C'}</button>
+				switch (value) {
+					case 'a':
+						<div>{'Case A'}</div>
+						break;
+					case 'b':
+					case 'c':
+						<div>{'Case B or C'}</div>
+						break;
+					default:
+						<div>{'Default Case'}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -132,31 +132,31 @@ describe('switch statements', () => {
 	});
 
 	it('renders switch with template content and reacts to tracked changes', () => {
-		component App() {
-			let &[status] = track('active');
-			let &[message] = track('');
-
-			<button onClick={() => (status = 'pending')}>{'Pending'}</button>
-			<button onClick={() => (status = 'completed')}>{'Completed'}</button>
-			<button onClick={() => (status = 'error')}>{'Error'}</button>
-
-			switch (status) {
-				case 'active':
-					message = 'Currently active.';
-					<div>{'Status: ' + message}</div>
-					break;
-				case 'pending':
-					message = 'Waiting for completion.';
-					<div>{'Status: ' + message}</div>
-					break;
-				case 'completed':
-					message = 'Task finished!';
-					<div class="success">{'Status: ' + message}</div>
-					break;
-				default:
-					message = 'An error occurred.';
-					<div class="error">{'Status: ' + message}</div>
-			}
+		function App() {
+			return <>
+				let &[status] = track('active');
+				let &[message] = track('');
+				<button onClick={() => (status = 'pending')}>{'Pending'}</button>
+				<button onClick={() => (status = 'completed')}>{'Completed'}</button>
+				<button onClick={() => (status = 'error')}>{'Error'}</button>
+				switch (status) {
+					case 'active':
+						message = 'Currently active.';
+						<div>{'Status: ' + message}</div>
+						break;
+					case 'pending':
+						message = 'Waiting for completion.';
+						<div>{'Status: ' + message}</div>
+						break;
+					case 'completed':
+						message = 'Task finished!';
+						<div class="success">{'Status: ' + message}</div>
+						break;
+					default:
+						message = 'An error occurred.';
+						<div class="error">{'Status: ' + message}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -184,35 +184,37 @@ describe('switch statements', () => {
 	it(
 		'renders switch with multiple non-empty fall-through cases and reacts to tracked changes without recreating DOM unnecessarily',
 		() => {
-			component App() {
-				let &[status] = track(0);
-				<div>
-					switch (status) {
-						case -1:
-						case 0:
-							<p>{' Idle'}</p>
-						case 1:
-							<p>{' Loading'}</p>
-						case 2:
-							<p>{' Success'}</p>
-							break;
-						default:
-							<p>{' Unknown status'}</p>
-							<p>{' Unknown 2'}</p>
-						case 3:
-							<p>{' Error'}</p>
-							<p>{' Error 2'}</p>
-							<p>{' Error 3'}</p>
-							break;
-					}
-				</div>
-				<button
-					onClick={() => {
-						status = (status + 1) % 5;
-					}}
-				>
-					{'Next Status'}
-				</button>
+			function App() {
+				return <>
+					let &[status] = track(0);
+					<div>
+						switch (status) {
+							case -1:
+							case 0:
+								<p>{' Idle'}</p>
+							case 1:
+								<p>{' Loading'}</p>
+							case 2:
+								<p>{' Success'}</p>
+								break;
+							default:
+								<p>{' Unknown status'}</p>
+								<p>{' Unknown 2'}</p>
+							case 3:
+								<p>{' Error'}</p>
+								<p>{' Error 2'}</p>
+								<p>{' Error 3'}</p>
+								break;
+						}
+					</div>
+					<button
+						onClick={() => {
+							status = (status + 1) % 5;
+						}}
+					>
+						{'Next Status'}
+					</button>
+				</>;
 			}
 
 			render(App);
@@ -252,33 +254,33 @@ describe('switch statements', () => {
 	it(
 		'renders a fall-through default in the middle of switch cases and reacts to changes without recreating DOM unnecessarily',
 		() => {
-			component App() {
-				let &[value] = track('x');
-
-				<button onClick={() => (value = 'a')}>{'Set A'}</button>
-				<button onClick={() => (value = 'b')}>{'Set B'}</button>
-				<button onClick={() => (value = 'c')}>{'Set C'}</button>
-				<button onClick={() => (value = 'x')}>{'Set X'}</button>
-
-				<div>
-					switch (value) {
-						case 'a':
-							<div>{' Case A'}</div>
-							break;
-						// NOTE: This should be the default in the middle of the cases
-						// However, jsdom (and other node-based dom libs) has a bug
-						// that breaks out of the switch even if the default doesn't have a break
-						// The browser works correctly.
-						// So, we're just using a defined case in the middle to simulate default.
-						case 'x':
-							<div>{' Default Case for ' + value}</div>
-						case 'b':
-							<div>{' Case B'}</div>
-							break;
-						case 'c':
-							<div>{' Case C'}</div>
-					}
-				</div>
+			function App() {
+				return <>
+					let &[value] = track('x');
+					<button onClick={() => (value = 'a')}>{'Set A'}</button>
+					<button onClick={() => (value = 'b')}>{'Set B'}</button>
+					<button onClick={() => (value = 'c')}>{'Set C'}</button>
+					<button onClick={() => (value = 'x')}>{'Set X'}</button>
+					<div>
+						switch (value) {
+							case 'a':
+								<div>{' Case A'}</div>
+								break;
+							// NOTE: This should be the default in the middle of the cases
+							// However, jsdom (and other node-based dom libs) has a bug
+							// that breaks out of the switch even if the default doesn't have a break
+							// The browser works correctly.
+							// So, we're just using a defined case in the middle to simulate default.
+							case 'x':
+								<div>{' Default Case for ' + value}</div>
+							case 'b':
+								<div>{' Case B'}</div>
+								break;
+							case 'c':
+								<div>{' Case C'}</div>
+						}
+					</div>
+				</>;
 			}
 
 			render(App);
@@ -318,18 +320,19 @@ describe('switch statements', () => {
 	);
 
 	it('renders bare text nodes in switch fall-through cases without element wrappers', () => {
-		component App() {
-			let value = 'a';
-
-			<div>
-				<span>{'before'}</span>
-				switch (value) {
-					case 'a':
-						{'Case A'}
-					case 'b':
-						{'Case B'}
-				}
-			</div>
+		function App() {
+			return <>
+				let value = 'a';
+				<div>
+					<span>{'before'}</span>
+					switch (value) {
+						case 'a':
+							{'Case A'}
+						case 'b':
+							{'Case B'}
+					}
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -337,20 +340,21 @@ describe('switch statements', () => {
 	});
 
 	it('renders bare text nodes in switch cases without element wrappers', () => {
-		component App() {
-			let value = 'a';
-
-			<div>
-				<span>{'before'}</span>
-				switch (value) {
-					case 'a':
-						{'Case A'}
-						break;
-					case 'b':
-						{'Case B'}
-						break;
-				}
-			</div>
+		function App() {
+			return <>
+				let value = 'a';
+				<div>
+					<span>{'before'}</span>
+					switch (value) {
+						case 'a':
+							{'Case A'}
+							break;
+						case 'b':
+							{'Case B'}
+							break;
+					}
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -358,33 +362,30 @@ describe('switch statements', () => {
 	});
 
 	it('renders switch with block-scoped cases and break inside blocks', () => {
-		component App() {
-			let &[level] = track(1);
-
-			<button
-				onClick={() => {
-					if (level === 1) level = 2;
-					else if (level === 2) level = 3;
-					else level = 1;
-				}}
-			>
-				{'Toggle'}
-			</button>
-
-			switch (level) {
-				case 1: {
-					<div class="level">{'Level 1'}</div>
-					break;
-				}
-				case 2: {
-					<div class="level">{'Level 2'}</div>
-					break;
-				}
-				case 3: {
-					<div class="level">{'Level 3'}</div>
-					break;
+		function App() {
+			return <>
+				let &[level] = track(1);
+				<button
+					onClick={() => {
+						if (level === 1) level = 2;
+						else if (level === 2) level = 3;
+						else level = 1;
+					}}
+				>
+					{'Toggle'}
+				</button>
+				switch (level) {
+					case 1:
+						<div class="level">{'Level 1'}</div>
+						break;
+					case 2:
+						<div class="level">{'Level 2'}</div>
+						break;
+					case 3:
+						<div class="level">{'Level 3'}</div>
+						break;
 				}
-			}
+			</>;
 		}
 
 		render(App);

package/tests/client/track-async-hydration.test.tsrx

@@ -5,13 +5,15 @@ describe('trackAsync hydration from serialized data (client)', () => {
 		// This test verifies the client runtime can parse the serialized script tags
 		// The full hydration round-trip is tested in hydration tests
 
-		component App() {
-			try {
-				let &[data] = trackAsync(() => Promise.resolve('fallback'));
-				<p class="result">{data}</p>
-			} pending {
-				<p class="loading">{'loading...'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[data] = trackAsync(() => Promise.resolve('fallback'));
+					<p class="result">{data}</p>
+				} pending {
+					<p class="loading">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -29,13 +31,15 @@ describe('trackAsync hydration from serialized data (client)', () => {
 		let resolve_fn: (value: number) => void;
 		const promise = new Promise<number>((r) => (resolve_fn = r));
 
-		component App() {
-			try {
-				let &[value] = trackAsync(() => promise);
-				<span class="value">{value}</span>
-			} pending {
-				<span class="pending">{'waiting'}</span>
-			}
+		function App() {
+			return <>
+				try {
+					let &[value] = trackAsync(() => promise);
+					<span class="value">{value}</span>
+				} pending {
+					<span class="pending">{'waiting'}</span>
+				}
+			</>;
 		}
 
 		render(App);

package/tests/client/tracked-index-access.test.tsrx

@@ -15,9 +15,11 @@ describe('client tracked numeric access', () => {
 	it('throws when tracked values are accessed through numeric properties', () => {
 		let value: any;
 
-		component Test() {
-			value = track(0);
-			<div />
+		function Test() {
+			return <>
+				value = track(0);
+				<div />
+			</>;
 		}
 
 		render(Test);
@@ -32,9 +34,11 @@ describe('client tracked numeric access', () => {
 	it('throws when derived values are accessed through numeric properties', () => {
 		let value: any;
 
-		component Test() {
-			value = track(() => 1);
-			<div />
+		function Test() {
+			return <>
+				value = track(() => 1);
+				<div />
+			</>;
 		}
 
 		render(Test);
@@ -50,10 +54,12 @@ describe('client tracked numeric access', () => {
 		let value: any;
 		let next: any;
 
-		component Test() {
-			value = track(0);
-			next = track(1);
-			<div />
+		function Test() {
+			return <>
+				value = track(0);
+				next = track(1);
+				<div />
+			</>;
 		}
 
 		render(Test);
@@ -72,10 +78,12 @@ describe('client tracked numeric access', () => {
 		let value: any;
 		let derived: any;
 
-		component Test() {
-			value = track(0);
-			derived = track(() => value.value + 1);
-			<div />
+		function Test() {
+			return <>
+				value = track(0);
+				derived = track(() => value.value + 1);
+				<div />
+			</>;
 		}
 
 		render(Test);
@@ -92,10 +100,12 @@ describe('client tracked numeric access', () => {
 		let value: any;
 		let derived: any;
 
-		component Test() {
-			value = track(0);
-			derived = track(() => value.value + 1);
-			<div />
+		function Test() {
+			return <>
+				value = track(0);
+				derived = track(() => value.value + 1);
+				<div />
+			</>;
 		}
 
 		render(Test);