ripple 0.2.208 → 0.2.210

package/tests/hydration/return.test.js

@@ -0,0 +1,544 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'ripple';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/return.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/return.js';
+
+describe('hydration > return statements', () => {
+	describe('basic returns', () => {
+		it('hydrates direct return - skips content after return', async () => {
+			await hydrateComponent(ServerComponents.DirectReturn, ClientComponents.DirectReturn);
+			expect(container.querySelector('.before')?.textContent).toBe('before');
+			expect(container.querySelector('.after')).toBeNull();
+		});
+
+		it('hydrates conditional return - condition true skips rest', async () => {
+			await hydrateComponent(
+				ServerComponents.ConditionalReturnTrue,
+				ClientComponents.ConditionalReturnTrue,
+			);
+			expect(container.querySelector('.guard')?.textContent).toBe('guard hit');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates conditional return - condition false shows rest', async () => {
+			await hydrateComponent(
+				ServerComponents.ConditionalReturnFalse,
+				ClientComponents.ConditionalReturnFalse,
+			);
+			expect(container.querySelector('.guard')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+		});
+
+		it('hydrates content before and after return guard', async () => {
+			await hydrateComponent(
+				ServerComponents.ContentBeforeAfterReturn,
+				ClientComponents.ContentBeforeAfterReturn,
+			);
+			expect(container.querySelector('.before')?.textContent).toBe('before');
+			expect(container.querySelector('.guard')?.textContent).toBe('guard');
+			expect(container.querySelector('.after')).toBeNull();
+		});
+
+		it('hydrates multiple elements after guard when condition is false', async () => {
+			await hydrateComponent(
+				ServerComponents.MultipleElementsAfterGuard,
+				ClientComponents.MultipleElementsAfterGuard,
+			);
+			expect(container.querySelector('.guard')).toBeNull();
+			expect(container.querySelector('.first')?.textContent).toBe('first');
+			expect(container.querySelector('.second')?.textContent).toBe('second');
+		});
+	});
+
+	describe('multiple sequential returns', () => {
+		it('hydrates multiple returns - first hits', async () => {
+			await hydrateComponent(
+				ServerComponents.MultipleReturnsFirstHits,
+				ClientComponents.MultipleReturnsFirstHits,
+			);
+			expect(container.querySelector('.first')?.textContent).toBe('first guard');
+			expect(container.querySelector('.second')).toBeNull();
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates multiple returns - second hits', async () => {
+			await hydrateComponent(
+				ServerComponents.MultipleReturnsSecondHits,
+				ClientComponents.MultipleReturnsSecondHits,
+			);
+			expect(container.querySelector('.first')).toBeNull();
+			expect(container.querySelector('.second')?.textContent).toBe('second guard');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates multiple returns - none hit', async () => {
+			await hydrateComponent(
+				ServerComponents.MultipleReturnsNoneHit,
+				ClientComponents.MultipleReturnsNoneHit,
+			);
+			expect(container.querySelector('.first')).toBeNull();
+			expect(container.querySelector('.second')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+		});
+
+		it('hydrates multiple sibling returns at same level', async () => {
+			await hydrateComponent(
+				ServerComponents.MultipleSiblingReturns,
+				ClientComponents.MultipleSiblingReturns,
+			);
+			expect(container.querySelector('.mode-a')).toBeNull();
+			expect(container.querySelector('.mode-b')?.textContent).toBe('mode B');
+			expect(container.querySelector('.mode-c')).toBeNull();
+			expect(container.querySelector('.default')).toBeNull();
+		});
+	});
+
+	describe('nested returns', () => {
+		it('hydrates nested returns - all conditions true', async () => {
+			await hydrateComponent(
+				ServerComponents.NestedReturnsAllTrue,
+				ClientComponents.NestedReturnsAllTrue,
+			);
+			expect(container.querySelector('.a')?.textContent).toBe('a is true');
+			expect(container.querySelector('.b')?.textContent).toBe('b is true');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates nested returns - inner condition false', async () => {
+			await hydrateComponent(
+				ServerComponents.NestedReturnsInnerFalse,
+				ClientComponents.NestedReturnsInnerFalse,
+			);
+			expect(container.querySelector('.a')?.textContent).toBe('a is true');
+			expect(container.querySelector('.b')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+		});
+
+		it('hydrates nested returns - outer condition false', async () => {
+			await hydrateComponent(
+				ServerComponents.NestedReturnsOuterFalse,
+				ClientComponents.NestedReturnsOuterFalse,
+			);
+			expect(container.querySelector('.a')).toBeNull();
+			expect(container.querySelector('.b')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+		});
+
+		it('hydrates deeply nested returns (3 levels) - all true', async () => {
+			await hydrateComponent(
+				ServerComponents.DeeplyNestedReturnsAllTrue,
+				ClientComponents.DeeplyNestedReturnsAllTrue,
+			);
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')?.textContent).toBe('b');
+			expect(container.querySelector('.c')?.textContent).toBe('c');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates deeply nested returns (3 levels) - innermost false', async () => {
+			await hydrateComponent(
+				ServerComponents.DeeplyNestedReturnsInnermostFalse,
+				ClientComponents.DeeplyNestedReturnsInnermostFalse,
+			);
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')?.textContent).toBe('b');
+			expect(container.querySelector('.c')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+		});
+	});
+
+	describe('else-if chains with returns', () => {
+		it('hydrates else-if chain - first condition', async () => {
+			await hydrateComponent(ServerComponents.ElseIfChainFirst, ClientComponents.ElseIfChainFirst);
+			expect(container.querySelector('.one')?.textContent).toBe('one');
+			expect(container.querySelector('.two')).toBeNull();
+			expect(container.querySelector('.other')).toBeNull();
+			expect(container.querySelector('.never')).toBeNull();
+		});
+
+		it('hydrates else-if chain - second condition', async () => {
+			await hydrateComponent(
+				ServerComponents.ElseIfChainSecond,
+				ClientComponents.ElseIfChainSecond,
+			);
+			expect(container.querySelector('.one')).toBeNull();
+			expect(container.querySelector('.two')?.textContent).toBe('two');
+			expect(container.querySelector('.other')).toBeNull();
+			expect(container.querySelector('.never')).toBeNull();
+		});
+
+		it('hydrates else-if chain - else condition', async () => {
+			await hydrateComponent(ServerComponents.ElseIfChainElse, ClientComponents.ElseIfChainElse);
+			expect(container.querySelector('.one')).toBeNull();
+			expect(container.querySelector('.two')).toBeNull();
+			expect(container.querySelector('.other')?.textContent).toBe('other');
+			expect(container.querySelector('.never')).toBeNull();
+		});
+	});
+
+	describe('return with else branches', () => {
+		it('hydrates return with else that does not return', async () => {
+			await hydrateComponent(
+				ServerComponents.ReturnWithElseNoReturn,
+				ClientComponents.ReturnWithElseNoReturn,
+			);
+			expect(container.querySelector('.true')).toBeNull();
+			expect(container.querySelector('.false')?.textContent).toBe('condition false');
+			expect(container.querySelector('.after')?.textContent).toBe('after if-else');
+		});
+
+		it('hydrates return with else that also returns', async () => {
+			await hydrateComponent(
+				ServerComponents.ReturnWithElseBothReturn,
+				ClientComponents.ReturnWithElseBothReturn,
+			);
+			expect(container.querySelector('.true')).toBeNull();
+			expect(container.querySelector('.false')?.textContent).toBe('condition false');
+			expect(container.querySelector('.never')).toBeNull();
+		});
+	});
+
+	describe('reactive returns', () => {
+		it('hydrates and toggles reactive return (true to false)', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveReturnTrueToFalse,
+				ClientComponents.ReactiveReturnTrueToFalse,
+			);
+
+			// Initially condition is true, so guard is shown, rest is hidden
+			expect(container.querySelector('.guard')?.textContent).toBe('guard hit');
+			expect(container.querySelector('.rest')).toBeNull();
+
+			// Toggle condition to false
+			container.querySelector('.toggle')?.click();
+			flushSync();
+
+			// Now rest should be shown
+			expect(container.querySelector('.guard')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+
+			// Toggle back to true
+			container.querySelector('.toggle')?.click();
+			flushSync();
+
+			expect(container.querySelector('.guard')?.textContent).toBe('guard hit');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates and toggles reactive return (false to true)', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveReturnFalseToTrue,
+				ClientComponents.ReactiveReturnFalseToTrue,
+			);
+
+			// Initially condition is false, so rest is shown
+			expect(container.querySelector('.guard')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+
+			// Toggle condition to true
+			container.querySelector('.toggle')?.click();
+			flushSync();
+
+			// Now guard should be shown, rest hidden
+			expect(container.querySelector('.guard')?.textContent).toBe('guard hit');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates and toggles reactive nested return', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveNestedReturn,
+				ClientComponents.ReactiveNestedReturn,
+			);
+
+			// Initially a=true and b=true - shows a, b, hides rest
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')?.textContent).toBe('b');
+			expect(container.querySelector('.rest')).toBeNull();
+
+			// Toggle b to false - rest should appear
+			container.querySelector('.toggle')?.click();
+			flushSync();
+
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+
+			// Toggle b back to true
+			container.querySelector('.toggle')?.click();
+			flushSync();
+
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')?.textContent).toBe('b');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates and cycles reactive sibling returns across all branches', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveSiblingReturns,
+				ClientComponents.ReactiveSiblingReturns,
+			);
+
+			// first
+			expect(container.querySelector('.first')?.textContent).toBe('first guard');
+			expect(container.querySelector('.second')).toBeNull();
+			expect(container.querySelector('.rest')).toBeNull();
+
+			// second
+			container.querySelector('.toggle')?.click();
+			flushSync();
+			expect(container.querySelector('.first')).toBeNull();
+			expect(container.querySelector('.second')?.textContent).toBe('second guard');
+			expect(container.querySelector('.rest')).toBeNull();
+
+			// fallback
+			container.querySelector('.toggle')?.click();
+			flushSync();
+			expect(container.querySelector('.first')).toBeNull();
+			expect(container.querySelector('.second')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+
+			// back to first
+			container.querySelector('.toggle')?.click();
+			flushSync();
+			expect(container.querySelector('.first')?.textContent).toBe('first guard');
+			expect(container.querySelector('.second')).toBeNull();
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates nested tracked returns when outer and inner conditions both change', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveOuterInnerReturns,
+				ClientComponents.ReactiveOuterInnerReturns,
+			);
+
+			// a=true, b=true
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')?.textContent).toBe('b');
+			expect(container.querySelector('.rest')).toBeNull();
+
+			// b=false => no early return, rest should appear in a-on mode
+			container.querySelector('.toggle-b')?.click();
+			flushSync();
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('a-on rest');
+
+			// a=false => outer block disappears, rest switches to a-off mode
+			container.querySelector('.toggle-a')?.click();
+			flushSync();
+			expect(container.querySelector('.a')).toBeNull();
+			expect(container.querySelector('.b')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('a-off rest');
+
+			// a=true (b still false) => a returns, rest switches back to a-on mode
+			container.querySelector('.toggle-a')?.click();
+			flushSync();
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('a-on rest');
+
+			// b=true => early return again, hide rest
+			container.querySelector('.toggle-b')?.click();
+			flushSync();
+			expect(container.querySelector('.a')?.textContent).toBe('a');
+			expect(container.querySelector('.b')?.textContent).toBe('b');
+			expect(container.querySelector('.rest')).toBeNull();
+		});
+
+		it('hydrates reactive else-if return chain through return and non-return states', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveElseIfReturns,
+				ClientComponents.ReactiveElseIfReturns,
+			);
+
+			// status=0
+			expect(container.querySelector('.zero')?.textContent).toBe('zero');
+			expect(container.querySelector('.one')).toBeNull();
+			expect(container.querySelector('.rest')).toBeNull();
+			expect(container.querySelector('.tail')).toBeNull();
+
+			// status=1
+			container.querySelector('.toggle')?.click();
+			flushSync();
+			expect(container.querySelector('.zero')).toBeNull();
+			expect(container.querySelector('.one')?.textContent).toBe('one');
+			expect(container.querySelector('.rest')).toBeNull();
+			expect(container.querySelector('.tail')).toBeNull();
+
+			// status=2
+			container.querySelector('.toggle')?.click();
+			flushSync();
+			expect(container.querySelector('.zero')).toBeNull();
+			expect(container.querySelector('.one')).toBeNull();
+			expect(container.querySelector('.rest')?.textContent).toBe('rest');
+			expect(container.querySelector('.tail')?.textContent).toBe('tail');
+
+			// status=0
+			container.querySelector('.toggle')?.click();
+			flushSync();
+			expect(container.querySelector('.zero')?.textContent).toBe('zero');
+			expect(container.querySelector('.one')).toBeNull();
+			expect(container.querySelector('.rest')).toBeNull();
+			expect(container.querySelector('.tail')).toBeNull();
+		});
+
+		it('hydrates deeply nested independent returns and keeps trailing root siblings aligned', async () => {
+			await hydrateComponent(
+				ServerComponents.ReactiveDeepNestedIndependentReturns,
+				ClientComponents.ReactiveDeepNestedIndependentReturns,
+			);
+
+			const expect_full_content = () => {
+				expect(container.querySelector('.top')?.textContent).toBe('top');
+				expect(container.querySelector('.middle')?.textContent).toBe('middle');
+				expect(container.querySelector('.nest-1-a')?.textContent).toBe('nest-1-a');
+				expect(container.querySelector('.nest-1-b')?.textContent).toBe('nest-1-b');
+				expect(container.querySelector('.nest-2-a')?.textContent).toBe('nest-2-a');
+				expect(container.querySelector('.nest-2-b')?.textContent).toBe('nest-2-b');
+				expect(container.querySelector('.root-1')?.textContent).toBe('root-1');
+				expect(container.querySelector('.root-2')?.textContent).toBe('root-2');
+				expect(container.querySelector('.root-3')?.textContent).toBe('root-3');
+				expect(container.querySelector('.root-4')?.textContent).toBe('root-4');
+			};
+
+			const expect_no_hits = () => {
+				expect(container.querySelector('.hit-1')).toBeNull();
+				expect(container.querySelector('.hit-2')).toBeNull();
+				expect(container.querySelector('.hit-3')).toBeNull();
+				expect(container.querySelector('.hit-4')).toBeNull();
+			};
+
+			expect_full_content();
+			expect_no_hits();
+
+			// C3 return: deep nested return should hide trailing root siblings
+			container.querySelector('.toggle-c3')?.click();
+			flushSync();
+			expect(container.querySelector('.hit-3')?.textContent).toBe('hit-3');
+			expect(container.querySelector('.top')?.textContent).toBe('top');
+			expect(container.querySelector('.middle')?.textContent).toBe('middle');
+			expect(container.querySelector('.nest-1-a')?.textContent).toBe('nest-1-a');
+			expect(container.querySelector('.nest-1-b')?.textContent).toBe('nest-1-b');
+			expect(container.querySelector('.nest-2-a')?.textContent).toBe('nest-2-a');
+			expect(container.querySelector('.nest-2-b')).toBeNull();
+			expect(container.querySelector('.root-1')).toBeNull();
+			expect(container.querySelector('.root-2')).toBeNull();
+			expect(container.querySelector('.root-3')).toBeNull();
+			expect(container.querySelector('.root-4')).toBeNull();
+
+			container.querySelector('.toggle-c3')?.click();
+			flushSync();
+			expect_full_content();
+			expect_no_hits();
+
+			// C1 return: earliest return should cut everything below top
+			container.querySelector('.toggle-c1')?.click();
+			flushSync();
+			expect(container.querySelector('.top')?.textContent).toBe('top');
+			expect(container.querySelector('.hit-1')?.textContent).toBe('hit-1');
+			expect(container.querySelector('.middle')).toBeNull();
+			expect(container.querySelector('.nest-1-a')).toBeNull();
+			expect(container.querySelector('.nest-1-b')).toBeNull();
+			expect(container.querySelector('.nest-2-a')).toBeNull();
+			expect(container.querySelector('.nest-2-b')).toBeNull();
+			expect(container.querySelector('.root-1')).toBeNull();
+			expect(container.querySelector('.root-2')).toBeNull();
+			expect(container.querySelector('.root-3')).toBeNull();
+			expect(container.querySelector('.root-4')).toBeNull();
+
+			container.querySelector('.toggle-c1')?.click();
+			flushSync();
+			expect_full_content();
+			expect_no_hits();
+
+			// C2 return: mid-level nested return should keep upper nested nodes, hide lower/root siblings
+			container.querySelector('.toggle-c2')?.click();
+			flushSync();
+			expect(container.querySelector('.top')?.textContent).toBe('top');
+			expect(container.querySelector('.middle')?.textContent).toBe('middle');
+			expect(container.querySelector('.nest-1-a')?.textContent).toBe('nest-1-a');
+			expect(container.querySelector('.hit-2')?.textContent).toBe('hit-2');
+			expect(container.querySelector('.nest-1-b')).toBeNull();
+			expect(container.querySelector('.nest-2-a')).toBeNull();
+			expect(container.querySelector('.nest-2-b')).toBeNull();
+			expect(container.querySelector('.root-1')).toBeNull();
+			expect(container.querySelector('.root-2')).toBeNull();
+			expect(container.querySelector('.root-3')).toBeNull();
+			expect(container.querySelector('.root-4')).toBeNull();
+
+			container.querySelector('.toggle-c2')?.click();
+			flushSync();
+			expect_full_content();
+			expect_no_hits();
+
+			// C4 return: deepest return should keep all nested parents but still hide root siblings
+			container.querySelector('.toggle-c4')?.click();
+			flushSync();
+			expect(container.querySelector('.top')?.textContent).toBe('top');
+			expect(container.querySelector('.middle')?.textContent).toBe('middle');
+			expect(container.querySelector('.nest-1-a')?.textContent).toBe('nest-1-a');
+			expect(container.querySelector('.nest-1-b')?.textContent).toBe('nest-1-b');
+			expect(container.querySelector('.nest-2-a')?.textContent).toBe('nest-2-a');
+			expect(container.querySelector('.nest-2-b')?.textContent).toBe('nest-2-b');
+			expect(container.querySelector('.hit-4')?.textContent).toBe('hit-4');
+			expect(container.querySelector('.root-1')).toBeNull();
+			expect(container.querySelector('.root-2')).toBeNull();
+			expect(container.querySelector('.root-3')).toBeNull();
+			expect(container.querySelector('.root-4')).toBeNull();
+
+			container.querySelector('.toggle-c4')?.click();
+			flushSync();
+			expect_full_content();
+			expect_no_hits();
+		});
+	});
+
+	describe('return in element scopes', () => {
+		it('hydrates return inside nested element scope', async () => {
+			await hydrateComponent(
+				ServerComponents.ReturnInNestedElement,
+				ClientComponents.ReturnInNestedElement,
+			);
+			expect(container.querySelector('.outer')).not.toBeNull();
+			expect(container.querySelector('.label')?.textContent).toBe('outer');
+			expect(container.querySelector('.inner')?.textContent).toBe('inner');
+			expect(container.querySelector('.after')).toBeNull();
+		});
+
+		it('hydrates return with multiple elements before and after', async () => {
+			await hydrateComponent(
+				ServerComponents.ReturnWithMultipleElements,
+				ClientComponents.ReturnWithMultipleElements,
+			);
+			expect(container.querySelector('.title')?.textContent).toBe('title');
+			expect(container.querySelector('.desc')?.textContent).toBe('description');
+			expect(container.querySelector('.guard')?.textContent).toBe('guard');
+			expect(container.querySelector('.guard-span')?.textContent).toBe('guard span');
+			expect(container.querySelector('.footer')).toBeNull();
+			expect(container.querySelector('.nav')).toBeNull();
+		});
+	});
+
+	describe('return position edge cases', () => {
+		it('hydrates return at the beginning of component', async () => {
+			await hydrateComponent(
+				ServerComponents.ReturnAtBeginning,
+				ClientComponents.ReturnAtBeginning,
+			);
+			expect(container.querySelector('.early')?.textContent).toBe('early exit');
+			expect(container.querySelector('.never1')).toBeNull();
+			expect(container.querySelector('.never2')).toBeNull();
+		});
+
+		it('hydrates return at the end of component', async () => {
+			await hydrateComponent(ServerComponents.ReturnAtEnd, ClientComponents.ReturnAtEnd);
+			expect(container.querySelector('.first')?.textContent).toBe('first');
+			expect(container.querySelector('.second')?.textContent).toBe('second');
+			expect(container.querySelector('.third')?.textContent).toBe('third');
+		});
+	});
+});

package/tests/hydration/switch.test.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'ripple';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/switch.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/switch.js';
+
+describe('hydration > switch blocks', () => {
+	it('hydrates static switch block', async () => {
+		await hydrateComponent(ServerComponents.SwitchStatic, ClientComponents.SwitchStatic);
+		expect(container.querySelector('.status-success')?.textContent).toBe('Success');
+	});
+
+	it('hydrates reactive switch block and updates', async () => {
+		await hydrateComponent(ServerComponents.SwitchReactive, ClientComponents.SwitchReactive);
+		const button = container.querySelector('.toggle');
+
+		expect(container.querySelector('.case-a')?.textContent).toBe('Case A');
+
+		button?.click();
+		flushSync();
+		expect(container.querySelector('.case-a')).toBeNull();
+		expect(container.querySelector('.case-b')?.textContent).toBe('Case B');
+
+		button?.click();
+		flushSync();
+		expect(container.querySelector('.case-b')).toBeNull();
+		expect(container.querySelector('.case-c')?.textContent).toBe('Case C');
+
+		button?.click();
+		flushSync();
+		expect(container.querySelector('.case-c')).toBeNull();
+		expect(container.querySelector('.case-a')?.textContent).toBe('Case A');
+	});
+
+	it('hydrates switch block with fallthrough', async () => {
+		await hydrateComponent(ServerComponents.SwitchFallthrough, ClientComponents.SwitchFallthrough);
+		expect(container.querySelector('.case-1-2')?.textContent).toBe('1 or 2');
+	});
+});

package/tests/server/basic.attributes.test.ripple

@@ -454,6 +454,6 @@ describe('basic server > attribute rendering', () => {
 		}
 
 		const { body } = await render(Basic);
-		expect(body).toBeHtml('<div data-disabled="" /><input disabled />');
+		expect(body).toBeHtml('<div data-disabled=""></div><input disabled />');
 	});
 });

package/tests/server/compiler.test.ripple

@@ -42,6 +42,28 @@ function getString(e: string = 'test') {
 
 		expect(result.js.code).toMatchSnapshot();
 	});
+
+	it('throws error for interpolating children as text in SSR mode', () => {
+		const source = `
+export component Layout({ children }) {
+		<div>{children}</div>
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
+			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+		);
+	});
+
+	it('throws error for interpolating props.children as text in SSR mode', () => {
+		const source = `
+export component Layout(props) {
+	<div>{props.children}</div>
+}`;
+
+		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
+			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+		);
+	});
 });
 
 describe('compiler server block tests', () => {

package/tests/server/composite.test.ripple

@@ -203,8 +203,11 @@ describe('generics', () => {
 					this.map = new Map<Key, Value>();
 				}
 			}
-			const gg = new Mapper<// key type
-			string /* value type */, number>();
+			const gg = new Mapper<
+				// key type
+				string /* value type */,
+				number
+			>();
 
 			// 33. Map of generic instance as key
 			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();