ripple 0.2.208 → 0.2.211

package/tests/hydration/compiled/server/switch.js

@@ -0,0 +1,130 @@
+import * as _$_ from 'ripple/internal/server';
+
+import { track } from 'ripple/server';
+
+export function SwitchStatic(__output) {
+	_$_.push_component();
+
+	const status = 'success';
+
+	__output.push('<!--[-->');
+
+	switch (status) {
+		case 'success':
+			__output.push('<div');
+			__output.push(' class="status-success"');
+			__output.push('>');
+			{
+				__output.push('Success');
+			}
+			__output.push('</div>');
+			break;
+
+		case 'error':
+			__output.push('<div');
+			__output.push(' class="status-error"');
+			__output.push('>');
+			{
+				__output.push('Error');
+			}
+			__output.push('</div>');
+			break;
+
+		default:
+			__output.push('<div');
+			__output.push(' class="status-unknown"');
+			__output.push('>');
+			{
+				__output.push('Unknown');
+			}
+			__output.push('</div>');
+	}
+
+	__output.push('<!--]-->');
+	_$_.pop_component();
+}
+
+export function SwitchReactive(__output) {
+	_$_.push_component();
+
+	let status = track('a');
+
+	__output.push('<button');
+	__output.push(' class="toggle"');
+	__output.push('>');
+
+	{
+		__output.push('Toggle');
+	}
+
+	__output.push('</button>');
+	__output.push('<!--[-->');
+
+	switch (_$_.get(status)) {
+		case 'a':
+			__output.push('<div');
+			__output.push(' class="case-a"');
+			__output.push('>');
+			{
+				__output.push('Case A');
+			}
+			__output.push('</div>');
+			break;
+
+		case 'b':
+			__output.push('<div');
+			__output.push(' class="case-b"');
+			__output.push('>');
+			{
+				__output.push('Case B');
+			}
+			__output.push('</div>');
+			break;
+
+		default:
+			__output.push('<div');
+			__output.push(' class="case-c"');
+			__output.push('>');
+			{
+				__output.push('Case C');
+			}
+			__output.push('</div>');
+	}
+
+	__output.push('<!--]-->');
+	_$_.pop_component();
+}
+
+export function SwitchFallthrough(__output) {
+	_$_.push_component();
+
+	const val = 1;
+
+	__output.push('<!--[-->');
+
+	switch (val) {
+		case 1:
+
+		case 2:
+			__output.push('<div');
+			__output.push(' class="case-1-2"');
+			__output.push('>');
+			{
+				__output.push('1 or 2');
+			}
+			__output.push('</div>');
+			break;
+
+		default:
+			__output.push('<div');
+			__output.push(' class="case-other"');
+			__output.push('>');
+			{
+				__output.push('Other');
+			}
+			__output.push('</div>');
+	}
+
+	__output.push('<!--]-->');
+	_$_.pop_component();
+}

package/tests/hydration/components/basic.ripple

@@ -63,3 +63,58 @@ export component ExpressionContent() {
 	<div>{value}</div>
 	<span>{text.toUpperCase()}</span>
 }
+
+// Test for static content in child component followed by sibling content
+component StaticHeader() {
+	<h1 class="sr-only">{'heading'}</h1>
+	<p class="subtitle">{'first paragraph'}</p>
+	<p class="subtitle">{'second paragraph'}</p>
+}
+
+export component StaticChildWithSiblings() {
+	const foo = 'bar';
+	<StaticHeader />
+	<span class="sibling1">{foo}</span>
+	<span class="sibling2">{foo}</span>
+}
+
+// Website-like components for testing complex hydration scenarios
+
+component Header() {
+	<h1 class="sr-only">{'Ripple'}</h1>
+	<img src="/images/logo.png" alt="Logo" class="logo" />
+	<p class="subtitle">{'the elegant TypeScript UI framework'}</p>
+}
+
+component Actions({ playgroundVisible = false }: { playgroundVisible: boolean }) {
+	<div class="social-links">
+		<a href="https://github.com" class="github-link">{'GitHub'}</a>
+		<a href="https://discord.com" class="discord-link">{'Discord'}</a>
+		if (playgroundVisible) {
+			<a href="/playground" class="playground-link">{'Playground'}</a>
+		}
+	</div>
+}
+
+component Layout({ children }) {
+	<main>
+		<div class="container">
+			<children />
+		</div>
+	</main>
+}
+
+component Content() {
+	<div class="content">
+		<p>{'Some content here'}</p>
+	</div>
+}
+
+export component WebsiteIndex() {
+	<Layout>
+		<Header />
+		<Actions playgroundVisible={true} />
+		<Content />
+		<Actions playgroundVisible={false} />
+	</Layout>
+}

package/tests/hydration/components/composite.ripple

@@ -0,0 +1,37 @@
+export component Layout({ children }) {
+	<div class="layout">
+		<children />
+	</div>
+}
+
+export component SingleChild() {
+	<div class="single">{'single'}</div>
+}
+
+export component MultiRootChild() {
+	<h1>{'title'}</h1>
+	<p>{'description'}</p>
+}
+
+export component EmptyLayout() {
+	<Layout />
+}
+
+export component LayoutWithSingleChild() {
+	<Layout>
+		<SingleChild />
+	</Layout>
+}
+
+export component LayoutWithMultipleChildren() {
+	<Layout>
+		<SingleChild />
+		<div class="extra">{'extra'}</div>
+	</Layout>
+}
+
+export component LayoutWithMultiRootChild() {
+	<Layout>
+		<MultiRootChild />
+	</Layout>
+}

package/tests/hydration/components/for.ripple

@@ -126,3 +126,406 @@ export component ForLoopComplexObjects() {
 		}
 	</div>
 }
+
+// Test reordering items in a keyed for loop
+export component KeyedForLoopReorder() {
+	let items = track([
+		{ id: 1, name: 'First' },
+		{ id: 2, name: 'Second' },
+		{ id: 3, name: 'Third' },
+	]);
+	<button
+		class="reorder"
+		onClick={() => {
+			@items = [@items[2], @items[0], @items[1]];
+		}}
+	>
+		{'Reorder'}
+	</button>
+	<ul>
+		for (const item of @items; key item.id) {
+			<li class={`item-${item.id}`}>{item.name}</li>
+		}
+	</ul>
+}
+
+// Test for loop with item property updates (keyed)
+export component KeyedForLoopUpdate() {
+	let items = track([
+		{ id: 1, name: 'Item 1' },
+		{ id: 2, name: 'Item 2' },
+	]);
+	<button
+		class="update"
+		onClick={() => {
+			@items = @items.map((item) => (item.id === 1 ? { ...item, name: 'Updated' } : item));
+		}}
+	>
+		{'Update'}
+	</button>
+	<ul>
+		for (const item of @items; key item.id) {
+			<li class={`item-${item.id}`}>{item.name}</li>
+		}
+	</ul>
+}
+
+// Test for loop with combined add/remove/reorder
+export component ForLoopMixedOperations() {
+	let items = track(['A', 'B', 'C', 'D']);
+	<button
+		class="shuffle"
+		onClick={() => {
+			// Remove B, add E, reorder to D, C, A, E
+			@items = ['D', 'C', 'A', 'E'];
+		}}
+	>
+		{'Shuffle'}
+	</button>
+	<ul>
+		for (const item of @items) {
+			<li class={`item-${item}`}>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop inside if block (combined control flow)
+export component ForLoopInsideIf() {
+	let showList = track(true);
+	let items = track(['X', 'Y', 'Z']);
+	<button
+		class="toggle"
+		onClick={() => {
+			@showList = !@showList;
+		}}
+	>
+		{'Toggle List'}
+	</button>
+	<button
+		class="add"
+		onClick={() => {
+			@items = [...@items, 'W'];
+		}}
+	>
+		{'Add Item'}
+	</button>
+	if (@showList) {
+		<ul class="list">
+			for (const item of @items) {
+				<li>{item}</li>
+			}
+		</ul>
+	}
+}
+
+// Test for loop that transitions from empty to populated
+export component ForLoopEmptyToPopulated() {
+	let items = track<string[]>([]);
+	<button
+		class="populate"
+		onClick={() => {
+			@items = ['One', 'Two', 'Three'];
+		}}
+	>
+		{'Populate'}
+	</button>
+	<ul class="list">
+		for (const item of @items) {
+			<li>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop that transitions from populated to empty
+export component ForLoopPopulatedToEmpty() {
+	let items = track(['One', 'Two', 'Three']);
+	<button
+		class="clear"
+		onClick={() => {
+			@items = [];
+		}}
+	>
+		{'Clear'}
+	</button>
+	<ul class="list">
+		for (const item of @items) {
+			<li>{item}</li>
+		}
+	</ul>
+}
+
+// Test nested for loops with reactivity
+export component NestedForLoopReactive() {
+	let grid = track([
+		[1, 2],
+		[3, 4],
+	]);
+	<button
+		class="add-row"
+		onClick={() => {
+			@grid = [...@grid, [5, 6]];
+		}}
+	>
+		{'Add Row'}
+	</button>
+	<button
+		class="update-cell"
+		onClick={() => {
+			const newGrid = @grid.map((row) => [...row]);
+			newGrid[0][0] = 99;
+			@grid = newGrid;
+		}}
+	>
+		{'Update Cell'}
+	</button>
+	<div class="grid">
+		for (const row of @grid; index rowIndex) {
+			<div class={`row-${rowIndex}`}>
+				for (const cell of row; index colIndex) {
+					<span class={`cell-${rowIndex}-${colIndex}`}>{cell}</span>
+				}
+			</div>
+		}
+	</div>
+}
+
+// Test for loop with deeply nested data
+export component ForLoopDeeplyNested() {
+	const departments = [
+		{
+			id: 'd1',
+			name: 'Engineering',
+			teams: [
+				{ id: 't1', name: 'Frontend', members: ['Alice', 'Bob'] },
+				{ id: 't2', name: 'Backend', members: ['Charlie'] },
+			],
+		},
+		{
+			id: 'd2',
+			name: 'Design',
+			teams: [
+				{ id: 't3', name: 'UX', members: ['Diana', 'Eve', 'Frank'] },
+			],
+		},
+	];
+	<div class="org">
+		for (const dept of departments; key dept.id) {
+			<div class={`dept-${dept.id}`}>
+				<h2 class="dept-name">{dept.name}</h2>
+				for (const team of dept.teams; key team.id) {
+					<div class={`team-${team.id}`}>
+						<h3 class="team-name">{team.name}</h3>
+						<ul>
+							for (const member of team.members) {
+								<li class="member">{member}</li>
+							}
+						</ul>
+					</div>
+				}
+			</div>
+		}
+	</div>
+}
+
+// Test for loop with index that gets updated
+export component ForLoopIndexUpdate() {
+	let items = track(['First', 'Second', 'Third']);
+	<button
+		class="prepend"
+		onClick={() => {
+			@items = ['Zeroth', ...@items];
+		}}
+	>
+		{'Prepend'}
+	</button>
+	<ul>
+		for (const item of @items; index i) {
+			<li class={`item-${i}`}>{`[${i}] ${item}`}</li>
+		}
+	</ul>
+}
+
+// Test keyed for loop with index
+export component KeyedForLoopWithIndex() {
+	let items = track([
+		{ id: 'a', value: 'Alpha' },
+		{ id: 'b', value: 'Beta' },
+		{ id: 'c', value: 'Gamma' },
+	]);
+	<button
+		class="reorder"
+		onClick={() => {
+			@items = [@items[1], @items[2], @items[0]];
+		}}
+	>
+		{'Rotate'}
+	</button>
+	<ul>
+		for (const item of @items; index i; key item.id) {
+			<li class={`item-${item.id}`} data-index={i}>{`[${i}] ${item.id}: ${item.value}`}</li>
+		}
+	</ul>
+}
+
+// Test for loop with sibling elements
+export component ForLoopWithSiblings() {
+	let items = track(['A', 'B']);
+	<div class="wrapper">
+		<header class="before">{'Before'}</header>
+		for (const item of @items) {
+			<div class={`item-${item}`}>{item}</div>
+		}
+		<footer class="after">{'After'}</footer>
+	</div>
+	<button
+		class="add"
+		onClick={() => {
+			@items = [...@items, 'C'];
+		}}
+	>
+		{'Add'}
+	</button>
+}
+
+// Test for loop items with their own reactive state
+export component ForLoopItemState() {
+	const initialItems = [
+		{ id: 1, text: 'Todo 1' },
+		{ id: 2, text: 'Todo 2' },
+		{ id: 3, text: 'Todo 3' },
+	];
+	<div>
+		for (const item of initialItems; key item.id) {
+			<TodoItem id={item.id} text={item.text} />
+		}
+	</div>
+}
+
+component TodoItem(props: { id: number; text: string }) {
+	let done = track(false);
+	<div class={`todo-${props.id}`}>
+		<input
+			type="checkbox"
+			class="checkbox"
+			checked={@done}
+			onChange={(e) => {
+				@done = (e.target as HTMLInputElement).checked;
+			}}
+		/>
+		<span class={@done ? 'completed' : 'pending'}>{props.text}</span>
+	</div>
+}
+
+// Test for loop with single item
+export component ForLoopSingleItem() {
+	const items = ['Only'];
+	<ul>
+		for (const item of items) {
+			<li class="single">{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop adding at beginning
+export component ForLoopAddAtBeginning() {
+	let items = track(['B', 'C']);
+	<button
+		class="prepend"
+		onClick={() => {
+			@items = ['A', ...@items];
+		}}
+	>
+		{'Prepend A'}
+	</button>
+	<ul>
+		for (const item of @items) {
+			<li class={`item-${item}`}>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop adding in the middle
+export component ForLoopAddInMiddle() {
+	let items = track(['A', 'C']);
+	<button
+		class="insert"
+		onClick={() => {
+			const copy = [...@items];
+			copy.splice(1, 0, 'B');
+			@items = copy;
+		}}
+	>
+		{'Insert B'}
+	</button>
+	<ul>
+		for (const item of @items) {
+			<li class={`item-${item}`}>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop removing from the middle
+export component ForLoopRemoveFromMiddle() {
+	let items = track(['A', 'B', 'C']);
+	<button
+		class="remove-middle"
+		onClick={() => {
+			@items = @items.filter((item) => item !== 'B');
+		}}
+	>
+		{'Remove B'}
+	</button>
+	<ul>
+		for (const item of @items) {
+			<li class={`item-${item}`}>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop with large list
+export component ForLoopLargeList() {
+	const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
+	<ul class="large-list">
+		for (const item of items; index i) {
+			<li class={`item-${i}`}>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop with swap operation
+export component ForLoopSwap() {
+	let items = track(['A', 'B', 'C', 'D']);
+	<button
+		class="swap"
+		onClick={() => {
+			const copy = [...@items];
+			[copy[0], copy[3]] = [copy[3], copy[0]];
+			@items = copy;
+		}}
+	>
+		{'Swap First and Last'}
+	</button>
+	<ul>
+		for (const item of @items) {
+			<li class={`item-${item}`}>{item}</li>
+		}
+	</ul>
+}
+
+// Test for loop with reverse operation
+export component ForLoopReverse() {
+	let items = track(['A', 'B', 'C', 'D']);
+	<button
+		class="reverse"
+		onClick={() => {
+			@items = [...@items].reverse();
+		}}
+	>
+		{'Reverse'}
+	</button>
+	<ul>
+		for (const item of @items) {
+			<li class={`item-${item}`}>{item}</li>
+		}
+	</ul>
+}