ripple 0.3.67 → 0.3.69

package/tests/hydration/components/switch.tsrx

@@ -1,129 +1,135 @@
 import { track } from 'ripple';
 
-export component SwitchStatic() {
-	const status: string = '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 function SwitchStatic() {
+	return <>
+		const status: string = '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 function SwitchReactive() {
+	return <>
+		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: number = 1;
-	switch (val) {
-		case 1:
-		case 2:
-			<div class="case-1-2">{'1 or 2'}</div>
-			break;
-		default:
-			<div class="case-other">{'Other'}</div>
-	}
+export function SwitchFallthrough() {
+	return <>
+		const val: number = 1;
+		switch (val) {
+			case 1:
+			case 2:
+				<div class="case-1-2">{'1 or 2'}</div>
+				break;
+			default:
+				<div class="case-other">{'Other'}</div>
+		}
+	</>;
 }
 
-export component SwitchNumericLevels() {
-	let &[level] = track<1 | 2 | 3>(1);
-	<button
-		class="level-toggle"
-		onClick={() => {
-			if (level === 1) level = 2;
-			else if (level === 2) level = 3;
-			else level = 1;
-		}}
-	>
-		{'Toggle Level'}
-	</button>
-	switch (level) {
-		case 1:
-			<div class="level-1">{'Level 1'}</div>
-			break;
-		case 2:
-			<div class="level-2">{'Level 2'}</div>
-			break;
-		case 3:
-			<div class="level-3">{'Level 3'}</div>
-			break;
-	}
+export function SwitchNumericLevels() {
+	return <>
+		let &[level] = track<1 | 2 | 3>(1);
+		<button
+			class="level-toggle"
+			onClick={() => {
+				if (level === 1) level = 2;
+				else if (level === 2) level = 3;
+				else level = 1;
+			}}
+		>
+			{'Toggle Level'}
+		</button>
+		switch (level) {
+			case 1:
+				<div class="level-1">{'Level 1'}</div>
+				break;
+			case 2:
+				<div class="level-2">{'Level 2'}</div>
+				break;
+			case 3:
+				<div class="level-3">{'Level 3'}</div>
+				break;
+		}
+	</>;
 }
 
-export component SwitchBlockScoped() {
-	let &[level] = track<1 | 2 | 3>(1);
-	<button
-		class="block-toggle"
-		onClick={() => {
-			if (level === 1) level = 2;
-			else if (level === 2) level = 3;
-			else level = 1;
-		}}
-	>
-		{'Toggle'}
-	</button>
-	switch (level) {
-		case 1: {
-			<div class="block-1">{'Block 1'}</div>
-			break;
+export function SwitchBlockScoped() {
+	return <>
+		let &[level] = track<1 | 2 | 3>(1);
+		<button
+			class="block-toggle"
+			onClick={() => {
+				if (level === 1) level = 2;
+				else if (level === 2) level = 3;
+				else level = 1;
+			}}
+		>
+			{'Toggle'}
+		</button>
+		switch (level) {
+			case 1:
+				<div class="block-1">{'Block 1'}</div>
+				break;
+			case 2:
+				<div class="block-2">{'Block 2'}</div>
+				break;
+			case 3:
+				<div class="block-3">{'Block 3'}</div>
+				break;
 		}
-		case 2: {
-			<div class="block-2">{'Block 2'}</div>
-			break;
-		}
-		case 3: {
-			<div class="block-3">{'Block 3'}</div>
-			break;
-		}
-	}
+	</>;
 }
 
-export component SwitchNoBreak() {
-	let &[level] = track<1 | 2 | 3>(1);
-	<button
-		class="nobreak-toggle"
-		onClick={() => {
-			if (level === 1) level = 2;
-			else if (level === 2) level = 3;
-			else level = 1;
-		}}
-	>
-		{'Toggle'}
-	</button>
-	switch (level) {
-		case 1: {
-			<div class="nobreak-1">{'NoBreak 1'}</div>
-		}
-		case 2: {
-			<div class="nobreak-2">{'NoBreak 2'}</div>
-		}
-		case 3: {
-			<div class="nobreak-3">{'NoBreak 3'}</div>
+export function SwitchNoBreak() {
+	return <>
+		let &[level] = track<1 | 2 | 3>(1);
+		<button
+			class="nobreak-toggle"
+			onClick={() => {
+				if (level === 1) level = 2;
+				else if (level === 2) level = 3;
+				else level = 1;
+			}}
+		>
+			{'Toggle'}
+		</button>
+		switch (level) {
+			case 1:
+				<div class="nobreak-1">{'NoBreak 1'}</div>
+			case 2:
+				<div class="nobreak-2">{'NoBreak 2'}</div>
+			case 3:
+				<div class="nobreak-3">{'NoBreak 3'}</div>
 		}
-	}
+	</>;
 }

package/tests/hydration/components/track-async-serialization.tsrx

@@ -8,111 +8,127 @@ module server {
 
 import { formatValue } from server;
 
-export component AsyncWithServerCall() {
-	let &[count] = track(0);
-
-	<button
-		class="increment"
-		onClick={() => {
-			count++;
-		}}
-	>
-		{'increment'}
-	</button>
-	try {
-		let &[data] = trackAsync(() => formatValue(count));
-		<p class="result">{data}</p>
-	} pending {
-		<p class="loading">{'loading...'}</p>
-	}
+export function AsyncWithServerCall() {
+	return <>
+		let &[count] = track(0);
+		<button
+			class="increment"
+			onClick={() => {
+				count++;
+			}}
+		>
+			{'increment'}
+		</button>
+		try {
+			let &[data] = trackAsync(() => formatValue(count));
+			<p class="result">{data}</p>
+		} pending {
+			<p class="loading">{'loading...'}</p>
+		}
+	</>;
 }
 
-export component AsyncSimpleValue() {
-	try {
-		let &[data] = trackAsync(() => Promise.resolve('hydrated value'));
-		<p class="result">{data}</p>
-	} pending {
-		<p class="loading">{'loading...'}</p>
-	}
+export function AsyncSimpleValue() {
+	return <>
+		try {
+			let &[data] = trackAsync(() => Promise.resolve('hydrated value'));
+			<p class="result">{data}</p>
+		} pending {
+			<p class="loading">{'loading...'}</p>
+		}
+	</>;
 }
 
-export component AsyncNumericValue() {
-	try {
-		let &[count] = trackAsync(() => Promise.resolve(42));
-		<span class="count">{count}</span>
-	} pending {
-		<span class="pending">{'...'}</span>
-	}
+export function AsyncNumericValue() {
+	return <>
+		try {
+			let &[count] = trackAsync(() => Promise.resolve(42));
+			<span class="count">{count}</span>
+		} pending {
+			<span class="pending">{'...'}</span>
+		}
+	</>;
 }
 
-export component AsyncObjectValue() {
-	try {
-		let &[user] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
-		<div class="user">
-			<span class="name">{user.name}</span>
-			<span class="age">{user.age}</span>
-		</div>
-	} pending {
-		<div class="loading">{'loading user...'}</div>
-	}
+export function AsyncObjectValue() {
+	return <>
+		try {
+			let &[user] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
+			<div class="user">
+				<span class="name">{user.name}</span>
+				<span class="age">{user.age}</span>
+			</div>
+		} pending {
+			<div class="loading">{'loading user...'}</div>
+		}
+	</>;
 }
 
-export component AsyncMultipleValues() {
-	try {
-		let &[first] = trackAsync(() => Promise.resolve('alpha'));
-		let &[second] = trackAsync(() => Promise.resolve('beta'));
-		<div class="multi">
-			<span class="first">{first}</span>
-			<span class="second">{second}</span>
-		</div>
-	} pending {
-		<div class="loading">{'loading...'}</div>
-	}
+export function AsyncMultipleValues() {
+	return <>
+		try {
+			let &[first] = trackAsync(() => Promise.resolve('alpha'));
+			let &[second] = trackAsync(() => Promise.resolve('beta'));
+			<div class="multi">
+				<span class="first">{first}</span>
+				<span class="second">{second}</span>
+			</div>
+		} pending {
+			<div class="loading">{'loading...'}</div>
+		}
+	</>;
 }
 
-export component AsyncWithCatch() {
-	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>
-	}
+export function AsyncWithCatch() {
+	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>
+		}
+	</>;
 }
 
-export component ChildWithError() {
-	try {
-		let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
-		<p class="result">{data}</p>
-	} pending {
-		<p class="pending">{'loading...'}</p>
-	}
+export function ChildWithError() {
+	return <>
+		try {
+			let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
+			<p class="result">{data}</p>
+		} pending {
+			<p class="pending">{'loading...'}</p>
+		}
+	</>;
 }
 
-export component ParentWithCatch() {
-	try {
-		<ChildWithError />
-	} catch (e) {
-		<p class="parent-error">{(e as Error).message}</p>
-	}
+export function ParentWithCatch() {
+	return <>
+		try {
+			<ChildWithError />
+		} catch (e) {
+			<p class="parent-error">{(e as Error).message}</p>
+		}
+	</>;
 }
 
-export component AsyncWithReactiveDependency() {
-	let &[count] = track(0);
-
-	<button
-		class="increment"
-		onClick={() => {
-			count++;
-		}}
-	>
-		{'increment'}
-	</button>
-	try {
-		let &[data] = trackAsync(() => Promise.resolve(`count-${count}`));
-		<p class="result">{data}</p>
-	} pending {
-		<p class="loading">{'loading...'}</p>
-	}
+export function AsyncWithReactiveDependency() {
+	return <>
+		let &[count] = track(0);
+		<button
+			class="increment"
+			onClick={() => {
+				count++;
+			}}
+		>
+			{'increment'}
+		</button>
+		try {
+			let &[data] = trackAsync(() => Promise.resolve(`count-${count}`));
+			<p class="result">{data}</p>
+		} pending {
+			<p class="loading">{'loading...'}</p>
+		}
+	</>;
 }

package/tests/hydration/components/try.tsrx

@@ -1,59 +1,74 @@
 import { trackAsync } from 'ripple';
 
-export component RootPending() {
-	<p class="root-pending">{'root loading...'}</p>
+export function RootPending() {
+	return <><p class="root-pending">{'root loading...'}</p></>;
 }
 
-export component RootCatch({ error, reset }: { error: Error; reset: () => void }) {
-	<section class="root-catch">
-		<p class="root-error">{error.message}</p>
-		<button class="root-reset" onClick={reset}>{'retry'}</button>
-	</section>
+export function RootCatch({ error, reset }: { error: Error; reset: () => void }) {
+	return <>
+		<section class="root-catch">
+			<p class="root-error">{error.message}</p>
+			<button class="root-reset" onClick={reset}>{'retry'}</button>
+		</section>
+	</>;
 }
 
-export component RootThrows() {
-	throw new Error('root exploded');
-	<p>{'should not render'}</p>
+export function RootThrows() {
+	return <>
+		throw new Error('root exploded');
+		<p>{'should not render'}</p>
+	</>;
 }
 
-export component RootAsyncDirect() {
-	let &[value] = trackAsync(() => Promise.resolve('root async value'));
-	<p class="root-async-value">{value}</p>
+export function RootAsyncDirect() {
+	return <>
+		let &[value] = trackAsync(() => Promise.resolve('root async value'));
+		<p class="root-async-value">{value}</p>
+	</>;
 }
 
-export component RootAsyncRejects() {
-	let &[value] = trackAsync(() => Promise.reject(new Error('root async failed')));
-	<p class="root-async-value">{value}</p>
+export function RootAsyncRejects() {
+	return <>
+		let &[value] = trackAsync(() => Promise.reject(new Error('root async failed')));
+		<p class="root-async-value">{value}</p>
+	</>;
 }
 
-export component AsyncListInTryPending() {
-	try {
-		<AsyncList />
-	} pending {
-		<p class="loading">{'loading...'}</p>
-	}
+export function AsyncListInTryPending() {
+	return <>
+		try {
+			<AsyncList />
+		} pending {
+			<p class="loading">{'loading...'}</p>
+		}
+	</>;
 }
 
-component AsyncList() {
-	let &[items] = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
-
-	<ul class="items">
-		for (let item of items) {
-			<li>{item}</li>
-		}
-	</ul>
+function AsyncList() {
+	return <>
+		let &[items] = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
+		<ul class="items">
+			for (let item of items) {
+				<li>{item}</li>
+			}
+		</ul>
+	</>;
 }
 
-export component AsyncTryWithLeadingSibling() {
-	<div class="before">{'before'}</div>
-	try {
-		<AsyncContent />
-	} pending {
-		<div class="loading">{'loading async content'}</div>
-	}
+export function AsyncTryWithLeadingSibling() {
+	return <>
+		<div class="before">{'before'}</div>
+		try {
+			<AsyncContent />
+		} pending {
+			<div class="loading">{'loading async content'}</div>
+		}
+	</>;
 }
 
-component AsyncContent() {
-	let &[value] = trackAsync(() => Promise.resolve('ready'));
-	<div class="resolved">{value}</div>
+function AsyncContent() {
+	return <>
+		let &[value] = trackAsync(() => Promise.resolve('ready'));
+		<div class="resolved">{value}</div>
+	</>;
 }

package/tests/hydration/html.test.js

@@ -172,7 +172,7 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('Footer');
 	});
 
-	it('hydrates article with {html} child then sibling (StylingPage pattern)', async () => {
+	it('hydrates article with innerHTML content then sibling (StylingPage pattern)', async () => {
 		await hydrateComponent(
 			ServerComponents.ArticleWithHtmlChildThenSibling,
 			ClientComponents.ArticleWithHtmlChildThenSibling,
@@ -183,7 +183,7 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('Footer');
 	});
 
-	it('hydrates INLINE article with {html} child then sibling (exact DocsLayout)', async () => {
+	it('hydrates INLINE article with innerHTML content then sibling (exact DocsLayout)', async () => {
 		await hydrateComponent(
 			ServerComponents.InlineArticleWithHtmlChild,
 			ClientComponents.InlineArticleWithHtmlChild,
@@ -234,7 +234,7 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('Footer');
 	});
 
-	it('hydrates template element with {html} content', async () => {
+	it('hydrates template element with innerHTML content', async () => {
 		await hydrateComponent(
 			ServerComponents.TemplateWithHtmlContent,
 			ClientComponents.TemplateWithHtmlContent,
@@ -244,7 +244,7 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('Main content');
 	});
 
-	it('hydrates template element with {html} and siblings', async () => {
+	it('hydrates template element with innerHTML and siblings', async () => {
 		await hydrateComponent(
 			ServerComponents.TemplateWithHtmlAndSiblings,
 			ClientComponents.TemplateWithHtmlAndSiblings,