ripple 0.3.72 → 0.3.76

package/tests/server/switch.test.tsrx

@@ -1,131 +1,123 @@
 describe('SSR: switch statements', () => {
 	it('renders simple switch with literal cases', async () => {
-		function App() {
-			return <>
-				let value = 'b';
-				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() @{
+			let value = 'b';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@case 'b': {
+					<div>Case B</div>
+				}
+				@case 'c': {
+					<div>{'Case C'}</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
 		expect(body).toBeHtml('<div>Case B</div>');
 	});
 
-	it('renders a fall-through with an empty switch case', async () => {
-		function App() {
-			return <>
-				let value = 'b';
-				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>
-				}
-			</>;
+	it('renders an empty switch case without falling through', async () => {
+		function App() @{
+			let value = 'b';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@case 'b': {
+				}
+				@case 'c': {
+					<div>Case B or C</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div>Case B or C</div>');
+		expect(body).toBeHtml('');
 	});
 
-	it('renders a fall-through with a case that has elements', async () => {
-		function App() {
-			return <>
-				let value = 'a';
-				switch (value) {
-					case 'a':
-						<div>{'Case A'}</div>
-					case 'b':
-						<div>{'Case B'}</div>
-					case 'c':
-						<div>{'Case C'}</div>
-						break;
-					default:
-						<div>{'Default Case'}</div>
-				}
-			</>;
+	it('renders a case with elements without falling through', async () => {
+		function App() @{
+			let value = 'a';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@case 'b': {
+					<div>Case B</div>
+				}
+				@case 'c': {
+					<div>{'Case C'}</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div>Case A</div><div>Case B</div><div>Case C</div>');
+		expect(body).toBeHtml('<div>Case A</div>');
 	});
 
-	it('renders a fall-through with a default case in the middle', async () => {
-		function App() {
-			return <>
-				let value = 'x';
-				switch (value) {
-					case 'a':
-						<div>{'Case A'}</div>
-					default:
-						<div>{'Default Case'}</div>
-					case 'b':
-						<div>{'Case B'}</div>
-						break;
-					case 'c':
-						<div>{'Case C'}</div>
-						break;
-				}
-			</>;
+	it('renders a default case', async () => {
+		function App() @{
+			let value = 'x';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div>Default Case</div><div>Case B</div>');
+		expect(body).toBeHtml('<div>Default Case</div>');
 	});
 
-	it('renders bare text nodes in switch fall-through cases without element wrappers', async () => {
-		function App() {
-			return <>
-				let value = 'a';
-				<div>
-					<span>{'before'}</span>
-					switch (value) {
-						case 'a':
-							{'Case A'}
-						case 'b':
-							{'Case B'}
+	it('renders bare text nodes in switch cases without falling through', async () => {
+		function App() @{
+			let value = 'a';
+			<div>
+				<span>{'before'}</span>
+				@switch (value) {
+					@case 'a': {
+						<>Case A</>
+					}
+					@case 'b': {
+						<>Case B</>
 					}
-				</div>
-			</>;
+				}
+			</div>
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div><span>before</span>Case ACase B</div>');
+		expect(body).toBeHtml('<div><span>before</span>Case A</div>');
 	});
 
 	it('renders bare text nodes in switch cases without element wrappers', async () => {
-		function App() {
-			return <>
-				let value = 'a';
-				<div>
-					<span>{'before'}</span>
-					switch (value) {
-						case 'a':
-							{'Case A'}
-							break;
-						case 'b':
-							{'Case B'}
-							break;
+		function App() @{
+			let value = 'a';
+			<div>
+				<span>{'before'}</span>
+				@switch (value) {
+					@case 'a': {
+						<>Case A</>
 					}
-				</div>
-			</>;
+					@case 'b': {
+						<>Case B</>
+					}
+				}
+			</div>
 		}
 
 		const { body } = await render(App);

package/tests/server/track-async-serialization.test.tsrx

@@ -5,15 +5,13 @@ const TRACK_ASYNC_PUBLIC_ERROR_MESSAGE = 'An error occurred during async renderi
 
 describe('trackAsync serialization (server)', () => {
 	it('serializes resolved trackAsync data as a script tag in SSR output', async () => {
-		function App() {
-			return <>
-				try {
-					let &[data] = trackAsync(() => Promise.resolve('hello world'));
-					<p class="result">{data}</p>
-				} pending {
-					<p class="loading">{'loading...'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[data] = trackAsync(() => Promise.resolve('hello world'));
+				<p class="result">{data}</p>
+			} @pending {
+				<p class="loading">{'loading...'}</p>
+			}
 		}
 
 		const { body } = await render(App);
@@ -24,15 +22,13 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('serializes numeric trackAsync data correctly', async () => {
-		function App() {
-			return <>
-				try {
-					let &[count] = trackAsync(() => Promise.resolve(42));
-					<span class="count">{count}</span>
-				} pending {
-					<span>{'...'}</span>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[count] = trackAsync(() => Promise.resolve(42));
+				<span class="count">{count}</span>
+			} @pending {
+				<span>{'...'}</span>
+			}
 		}
 
 		const { body } = await render(App);
@@ -41,15 +37,13 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('serializes object trackAsync data correctly', async () => {
-		function App() {
-			return <>
-				try {
-					let &[data] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
-					<p>{data.name}</p>
-				} pending {
-					<p>{'...'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[data] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
+				<p>{data.name}</p>
+			} @pending {
+				<p>{'...'}</p>
+			}
 		}
 
 		const { body } = await render(App);
@@ -58,19 +52,17 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('serializes array trackAsync data correctly', async () => {
-		function App() {
-			return <>
-				try {
-					let &[items] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
-					<ul>
-						for (let item of items) {
-							<li>{item}</li>
-						}
-					</ul>
-				} pending {
-					<p>{'...'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[items] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
+				<ul>
+					@for (let item of items) {
+						<li>{item}</li>
+					}
+				</ul>
+			} @pending {
+				<p>{'...'}</p>
+			}
 		}
 
 		const { body } = await render(App);
@@ -79,17 +71,15 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('serializes rejected trackAsync as error envelope', async () => {
-		function App() {
-			return <>
-				try {
-					let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
-					<p class="result">{data}</p>
-				} pending {
-					<p class="loading">{'loading...'}</p>
-				} catch (e) {
-					<p class="error">{(e as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
+				<p class="result">{data}</p>
+			} @pending {
+				<p class="loading">{'loading...'}</p>
+			} @catch (e) {
+				<p class="error">{(e as Error).message}</p>
+			}
 		}
 
 		const { body } = await render(App);
@@ -101,25 +91,21 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('serializes error when child component error bubbles to parent catch', async () => {
-		function Child() {
-			return <>
-				try {
-					let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
-					<p class="result">{data}</p>
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				}
-			</>;
+		function Child() @{
+			@try {
+				let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
+				<p class="result">{data}</p>
+			} @pending {
+				<p class="pending">{'loading...'}</p>
+			}
 		}
 
-		function Parent() {
-			return <>
-				try {
-					<Child />
-				} catch (e) {
-					<p class="parent-error">{(e as Error).message}</p>
-				}
-			</>;
+		function Parent() @{
+			@try {
+				<Child />
+			} @catch (e) {
+				<p class="parent-error">{(e as Error).message}</p>
+			}
 		}
 
 		const { body } = await render(Parent);
@@ -131,19 +117,17 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('serializes sync trackAsync throw using original cause message', async () => {
-		function App() {
-			return <>
-				try {
-					let &[data] = trackAsync(() => {
-						throw new Error('sync failure');
-					});
-					<p class="result">{data}</p>
-				} pending {
-					<p class="loading">{'loading...'}</p>
-				} catch (e) {
-					<p class="error">{(e as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[data] = trackAsync(() => {
+					throw new Error('sync failure');
+				});
+				<p class="result">{data}</p>
+			} @pending {
+				<p class="loading">{'loading...'}</p>
+			} @catch (e) {
+				<p class="error">{(e as Error).message}</p>
+			}
 		}
 
 		const { body } = await render(App);
@@ -156,19 +140,17 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('escapes serialized error payload to keep script tag safe', async () => {
-		function App() {
-			return <>
-				try {
-					let &[data] = trackAsync(
-						() => Promise.reject(new Error('</script><div data-injected="1">boom</div>')),
-					);
-					<p class="result">{data}</p>
-				} pending {
-					<p class="loading">{'loading...'}</p>
-				} catch (e) {
-					<p class="error">{(e as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[data] = trackAsync(
+					() => Promise.reject(new Error('</script><div data-injected="1">boom</div>')),
+				);
+				<p class="result">{data}</p>
+			} @pending {
+				<p class="loading">{'loading...'}</p>
+			} @catch (e) {
+				<p class="error">{(e as Error).message}</p>
+			}
 		}
 
 		const { body } = await render(App);
@@ -182,17 +164,17 @@ describe('trackAsync serialization (server)', () => {
 	});
 
 	it('generates unique hashes for multiple trackAsync calls', async () => {
-		function App() {
-			return <>
-				try {
-					let &[a] = trackAsync(() => Promise.resolve('first'));
-					let &[b] = trackAsync(() => Promise.resolve('second'));
+		function App() @{
+			@try {
+				let &[a] = trackAsync(() => Promise.resolve('first'));
+				let &[b] = trackAsync(() => Promise.resolve('second'));
+				<>
 					<p>{a}</p>
 					<p>{b}</p>
-				} pending {
-					<p>{'...'}</p>
-				}
-			</>;
+				</>
+			} @pending {
+				<p>{'...'}</p>
+			}
 		}
 
 		const { body } = await render(App);