ripple 0.2.208 → 0.2.211

package/tests/hydration/components/return.ripple

@@ -0,0 +1,564 @@
+// Return statement components for hydration testing
+import { track } from 'ripple';
+
+// Basic return - skips content after direct return
+export component DirectReturn() {
+	<div class="before">{'before'}</div>
+	return;
+	<div class="after">{'after'}</div>
+}
+
+// Conditional return - condition is true, skips rest
+export component ConditionalReturnTrue() {
+	let condition = true;
+
+	if (condition) {
+		<div class="guard">{'guard hit'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Conditional return - condition is false, shows rest
+export component ConditionalReturnFalse() {
+	let condition = false;
+
+	if (condition) {
+		<div class="guard">{'guard hit'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Content before and after return guard
+export component ContentBeforeAfterReturn() {
+	let shouldReturn = true;
+
+	<div class="before">{'before'}</div>
+	if (shouldReturn) {
+		<div class="guard">{'guard'}</div>
+		return;
+	}
+	<div class="after">{'after'}</div>
+}
+
+// Multiple elements after guard when condition is false
+export component MultipleElementsAfterGuard() {
+	let shouldReturn = false;
+
+	if (shouldReturn) {
+		<div class="guard">{'guard'}</div>
+		return;
+	}
+	<div class="first">{'first'}</div>
+	<div class="second">{'second'}</div>
+}
+
+// Multiple sequential returns - first hits
+export component MultipleReturnsFirstHits() {
+	let a = true;
+	let b = true;
+
+	if (a) {
+		<div class="first">{'first guard'}</div>
+		return;
+	}
+	if (b) {
+		<div class="second">{'second guard'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Multiple sequential returns - second hits
+export component MultipleReturnsSecondHits() {
+	let a = false;
+	let b = true;
+
+	if (a) {
+		<div class="first">{'first guard'}</div>
+		return;
+	}
+	if (b) {
+		<div class="second">{'second guard'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Multiple sequential returns - none hit
+export component MultipleReturnsNoneHit() {
+	let a = false;
+	let b = false;
+
+	if (a) {
+		<div class="first">{'first guard'}</div>
+		return;
+	}
+	if (b) {
+		<div class="second">{'second guard'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Nested returns - both conditions true
+export component NestedReturnsAllTrue() {
+	let a = true;
+	let b = true;
+
+	if (a) {
+		<div class="a">{'a is true'}</div>
+		if (b) {
+			<div class="b">{'b is true'}</div>
+			return;
+		}
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Nested returns - inner condition false
+export component NestedReturnsInnerFalse() {
+	let a = true;
+	let b = false;
+
+	if (a) {
+		<div class="a">{'a is true'}</div>
+		if (b) {
+			<div class="b">{'b is true'}</div>
+			return;
+		}
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Nested returns - outer condition false
+export component NestedReturnsOuterFalse() {
+	let a = false;
+	let b = true;
+
+	if (a) {
+		<div class="a">{'a is true'}</div>
+		if (b) {
+			<div class="b">{'b is true'}</div>
+			return;
+		}
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Deeply nested returns (3 levels) - all true
+export component DeeplyNestedReturnsAllTrue() {
+	let a = true;
+	let b = true;
+	let c = true;
+
+	if (a) {
+		<div class="a">{'a'}</div>
+		if (b) {
+			<div class="b">{'b'}</div>
+			if (c) {
+				<div class="c">{'c'}</div>
+				return;
+			}
+		}
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Deeply nested returns (3 levels) - innermost false
+export component DeeplyNestedReturnsInnermostFalse() {
+	let a = true;
+	let b = true;
+	let c = false;
+
+	if (a) {
+		<div class="a">{'a'}</div>
+		if (b) {
+			<div class="b">{'b'}</div>
+			if (c) {
+				<div class="c">{'c'}</div>
+				return;
+			}
+		}
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Return with else-if chain - first condition
+export component ElseIfChainFirst() {
+	let value = 1;
+
+	if (value === 1) {
+		<div class="one">{'one'}</div>
+		return;
+	} else if (value === 2) {
+		<div class="two">{'two'}</div>
+		return;
+	} else {
+		<div class="other">{'other'}</div>
+		return;
+	}
+	<div class="never">{'never reached'}</div>
+}
+
+// Return with else-if chain - second condition
+export component ElseIfChainSecond() {
+	let value = 2;
+
+	if (value === 1) {
+		<div class="one">{'one'}</div>
+		return;
+	} else if (value === 2) {
+		<div class="two">{'two'}</div>
+		return;
+	} else {
+		<div class="other">{'other'}</div>
+		return;
+	}
+	<div class="never">{'never reached'}</div>
+}
+
+// Return with else-if chain - else condition
+export component ElseIfChainElse() {
+	let value = 3;
+
+	if (value === 1) {
+		<div class="one">{'one'}</div>
+		return;
+	} else if (value === 2) {
+		<div class="two">{'two'}</div>
+		return;
+	} else {
+		<div class="other">{'other'}</div>
+		return;
+	}
+	<div class="never">{'never reached'}</div>
+}
+
+// Return with else branch that does not return
+export component ReturnWithElseNoReturn() {
+	let condition = false;
+
+	if (condition) {
+		<div class="true">{'condition true'}</div>
+		return;
+	} else {
+		<div class="false">{'condition false'}</div>
+	}
+	<div class="after">{'after if-else'}</div>
+}
+
+// Return with else branch that also returns
+export component ReturnWithElseBothReturn() {
+	let condition = false;
+
+	if (condition) {
+		<div class="true">{'condition true'}</div>
+		return;
+	} else {
+		<div class="false">{'condition false'}</div>
+		return;
+	}
+	<div class="never">{'never reached'}</div>
+}
+
+// Reactive return - starts true, can toggle to false
+export component ReactiveReturnTrueToFalse() {
+	let condition = track(true);
+
+	<button
+		class="toggle"
+		onClick={() => {
+			@condition = !@condition;
+		}}
+	>
+		{'Toggle'}
+	</button>
+	if (@condition) {
+		<div class="guard">{'guard hit'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Reactive return - starts false, can toggle to true
+export component ReactiveReturnFalseToTrue() {
+	let condition = track(false);
+
+	<button
+		class="toggle"
+		onClick={() => {
+			@condition = !@condition;
+		}}
+	>
+		{'Toggle'}
+	</button>
+	if (@condition) {
+		<div class="guard">{'guard hit'}</div>
+		return;
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Reactive nested return - only inner condition (b) is tracked
+export component ReactiveNestedReturn() {
+	let a = true;
+	let b = track(true);
+
+	<button
+		class="toggle"
+		onClick={() => {
+			@b = !@b;
+		}}
+	>
+		{'Toggle'}
+	</button>
+	if (a) {
+		<div class="a">{'a'}</div>
+		if (@b) {
+			<div class="b">{'b'}</div>
+			return;
+		}
+	}
+	<div class="rest">{'rest'}</div>
+}
+
+// Return inside nested element scope
+export component ReturnInNestedElement() {
+	let show = true;
+
+	<div class="outer">
+		<span class="label">{'outer'}</span>
+		if (show) {
+			<p class="inner">{'inner'}</p>
+			return;
+		}
+	</div>
+	<div class="after">{'after'}</div>
+}
+
+// Return with multiple elements before and after
+export component ReturnWithMultipleElements() {
+	let shouldReturn = true;
+
+	<h1 class="title">{'title'}</h1>
+	<p class="desc">{'description'}</p>
+	if (shouldReturn) {
+		<div class="guard">{'guard'}</div>
+		<span class="guard-span">{'guard span'}</span>
+		return;
+	}
+	<footer class="footer">{'footer'}</footer>
+	<nav class="nav">{'nav'}</nav>
+}
+
+// Return at the beginning of component
+export component ReturnAtBeginning() {
+	if (true) {
+		<div class="early">{'early exit'}</div>
+		return;
+	}
+	<div class="never1">{'never reached 1'}</div>
+	<div class="never2">{'never reached 2'}</div>
+}
+
+// Return at the end of component (after all content)
+export component ReturnAtEnd() {
+	<div class="first">{'first'}</div>
+	<div class="second">{'second'}</div>
+	if (true) {
+		<div class="third">{'third'}</div>
+		return;
+	}
+}
+
+// Multiple sibling returns at same level
+export component MultipleSiblingReturns() {
+	let mode = 'b';
+
+	if (mode === 'a') {
+		<div class="mode-a">{'mode A'}</div>
+		return;
+	}
+
+	if (mode === 'b') {
+		<div class="mode-b">{'mode B'}</div>
+		return;
+	}
+
+	if (mode === 'c') {
+		<div class="mode-c">{'mode C'}</div>
+		return;
+	}
+
+	<div class="default">{'default mode'}</div>
+}
+
+// Reactive sibling returns - cycles first -> second -> fallback
+export component ReactiveSiblingReturns() {
+	let mode = track('first');
+
+	<button
+		class="toggle"
+		onClick={() => {
+			if (@mode === 'first') {
+				@mode = 'second';
+			} else if (@mode === 'second') {
+				@mode = 'none';
+			} else {
+				@mode = 'first';
+			}
+		}}
+	>
+		{'Toggle'}
+	</button>
+
+	if (@mode === 'first') {
+		<div class="first">{'first guard'}</div>
+		return;
+	}
+
+	if (@mode === 'second') {
+		<div class="second">{'second guard'}</div>
+		return;
+	}
+
+	<div class="rest">{'rest'}</div>
+}
+
+// Reactive nested returns with tracked outer and inner conditions
+export component ReactiveOuterInnerReturns() {
+	let a = track(true);
+	let b = track(true);
+
+	<button
+		class="toggle-a"
+		onClick={() => {
+			@a = !@a;
+		}}
+	>
+		{'Toggle A'}
+	</button>
+
+	<button
+		class="toggle-b"
+		onClick={() => {
+			@b = !@b;
+		}}
+	>
+		{'Toggle B'}
+	</button>
+
+	if (@a) {
+		<div class="a">{'a'}</div>
+		if (@b) {
+			<div class="b">{'b'}</div>
+			return;
+		}
+	}
+
+	<div class="rest">{@a ? 'a-on rest' : 'a-off rest'}</div>
+}
+
+// Reactive else-if return chain that transitions between return and non-return states
+export component ReactiveElseIfReturns() {
+	let status = track(0);
+
+	<button
+		class="toggle"
+		onClick={() => {
+			@status = (@status + 1) % 3;
+		}}
+	>
+		{'Toggle'}
+	</button>
+
+	if (@status === 0) {
+		<div class="zero">{'zero'}</div>
+		return;
+	} else if (@status === 1) {
+		<div class="one">{'one'}</div>
+		return;
+	}
+
+	<div class="rest">{'rest'}</div>
+	<div class="tail">{'tail'}</div>
+}
+
+// Deeply nested independent return guards with multiple root-level siblings
+export component ReactiveDeepNestedIndependentReturns() {
+	let c1 = track(false);
+	let c2 = track(false);
+	let c3 = track(false);
+	let c4 = track(false);
+
+	<button
+		class="toggle-c1"
+		onClick={() => {
+			@c1 = !@c1;
+		}}
+	>
+		{'Toggle C1'}
+	</button>
+	<button
+		class="toggle-c2"
+		onClick={() => {
+			@c2 = !@c2;
+		}}
+	>
+		{'Toggle C2'}
+	</button>
+	<button
+		class="toggle-c3"
+		onClick={() => {
+			@c3 = !@c3;
+		}}
+	>
+		{'Toggle C3'}
+	</button>
+	<button
+		class="toggle-c4"
+		onClick={() => {
+			@c4 = !@c4;
+		}}
+	>
+		{'Toggle C4'}
+	</button>
+
+	<div class="top">{'top'}</div>
+
+	if (@c1) {
+		<div class="hit-1">{'hit-1'}</div>
+		return;
+	}
+
+	<div class="middle">{'middle'}</div>
+	<section class="nest-1">
+		<div class="nest-1-a">{'nest-1-a'}</div>
+		if (@c2) {
+			<div class="hit-2">{'hit-2'}</div>
+			return;
+		}
+
+		<div class="nest-1-b">{'nest-1-b'}</div>
+		<section class="nest-2">
+			<div class="nest-2-a">{'nest-2-a'}</div>
+			if (@c3) {
+				<div class="hit-3">{'hit-3'}</div>
+				return;
+			}
+
+			<div class="nest-2-b">{'nest-2-b'}</div>
+			if (@c4) {
+				<div class="hit-4">{'hit-4'}</div>
+				return;
+			}
+		</section>
+	</section>
+
+	<div class="root-1">{'root-1'}</div>
+	<div class="root-2">{'root-2'}</div>
+	<div class="root-3">{'root-3'}</div>
+	<div class="root-4">{'root-4'}</div>
+}

package/tests/hydration/components/switch.ripple

@@ -0,0 +1,51 @@
+import { track } from 'ripple';
+
+export component SwitchStatic() {
+	const status = 'success';
+	switch (status) {
+		case 'success':
+			<div class="status-success">{'Success'}</div>
+			break;
+		case 'error':
+			<div class="status-error">{'Error'}</div>
+			break;
+		default:
+			<div class="status-unknown">{'Unknown'}</div>
+	}
+}
+
+export component SwitchReactive() {
+	let status = track<'a' | 'b' | 'c'>('a');
+	<button
+		class="toggle"
+		onClick={() => {
+			if (@status === 'a') @status = 'b';
+			else if (@status === 'b') @status = 'c';
+			else @status = 'a';
+		}}
+	>
+		{'Toggle'}
+	</button>
+	switch (@status) {
+		case 'a':
+			<div class="case-a">{'Case A'}</div>
+			break;
+		case 'b':
+			<div class="case-b">{'Case B'}</div>
+			break;
+		default:
+			<div class="case-c">{'Case C'}</div>
+	}
+}
+
+export component SwitchFallthrough() {
+	const val = 1;
+	switch (val) {
+		case 1:
+		case 2:
+			<div class="case-1-2">{'1 or 2'}</div>
+			break;
+		default:
+			<div class="case-other">{'Other'}</div>
+	}
+}

package/tests/hydration/composite.test.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+import * as ServerComponents from './compiled/server/composite.js';
+import * as ClientComponents from './compiled/client/composite.js';
+
+describe('hydration > composite', () => {
+	it('hydrates a layout with no children', async () => {
+		await hydrateComponent(ServerComponents.EmptyLayout, ClientComponents.EmptyLayout);
+		expect(container.innerHTML).toBeHtml('<div class=\"layout\"></div>');
+	});
+
+	it('hydrates a layout with a single child component', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithSingleChild,
+			ClientComponents.LayoutWithSingleChild,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><div class=\"single\">single</div></div>',
+		);
+	});
+
+	it('hydrates a layout with multiple children', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithMultipleChildren,
+			ClientComponents.LayoutWithMultipleChildren,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><div class=\"single\">single</div><div class=\"extra\">extra</div></div>',
+		);
+	});
+
+	it('hydrates a layout with a child that has multiple roots', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithMultiRootChild,
+			ClientComponents.LayoutWithMultiRootChild,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><h1>title</h1><p>description</p></div>',
+		);
+	});
+});