ripple 0.3.68 → 0.3.70

package/tests/server/streaming-ssr.test.tsrx

@@ -2,8 +2,8 @@ import { create_ssr_stream } from 'ripple/server';
 
 describe('create_ssr_stream', () => {
 	it('renders SSR HTML into the injected sink and exposes a web stream', async () => {
-		component App() {
-			<div>{'Hello, streaming SSR!'}</div>
+		function App() {
+			return <><div>{'Hello, streaming SSR!'}</div></>;
 		}
 
 		const { stream, sink } = create_ssr_stream();
@@ -16,8 +16,8 @@ describe('create_ssr_stream', () => {
 	});
 
 	it('closes the public stream when streaming finishes successfully', async () => {
-		component App() {
-			<p>{'stream closed'}</p>
+		function App() {
+			return <><p>{'stream closed'}</p></>;
 		}
 
 		const { stream, sink } = create_ssr_stream();
@@ -42,74 +42,3 @@ describe('create_ssr_stream', () => {
 		expect(terminal_read.done).toBe(true);
 	});
 });
-
-// import { renderToStream } from 'ripple/server';
-
-// describe('render to stream', () => {
-// test('renderToStream renders a simple component', async ({ expect }) => {
-// 	component Basic() {
-// 		<div>{'Hello, streaming SSR!'}</div>
-// 	}
-
-// 	const stream = renderToStream(Basic);
-
-// 	let result = '';
-// 	await new Promise((resolve) => {
-// 		stream.on('data', (chunk) => {
-// 			result += chunk.toString();
-// 		});
-// 		stream.on('end', resolve);
-// 	});
-
-// 	expect(result).toBe('<div>Hello, streaming SSR!</div>');
-// });
-
-// test('renderToStream handles async components', async ({ expect }) => {
-// 	component AsyncComponent() {
-// 		await new Promise((resolve) => setTimeout(resolve, 10));
-// 		<p>{'Async content loaded.'}</p>
-// 	}
-
-// 	const stream = renderToStream(AsyncComponent);
-
-// 	let result = '';
-// 	await new Promise((resolve) => {
-// 		stream.on('data', (chunk) => {
-// 			result += chunk.toString();
-// 		});
-// 		stream.on('end', resolve);
-// 	});
-
-// 	expect(result).toBe('<p>Async content loaded.</p>');
-// });
-
-// test('renderToStream handles await blocks with pending state', async ({ expect }) => {
-// 	component AwaitComponent() {
-// 		let data = 'initial';
-// 		await new Promise((resolve) => setTimeout(() => {
-// 			data = 'resolved';
-// 			resolve('');
-// 		}, 20));
-// 		try {
-// 			<div>
-// 				{'Data: '}
-// 				{data}
-// 			</div>
-// 		} pending {
-// 			<div>{'Loading...'}</div>
-// 		}
-// 	}
-
-// 	const stream = renderToStream(AwaitComponent);
-
-// 	let result = '';
-// 	await new Promise((resolve) => {
-// 		stream.on('data', (chunk) => {
-// 			result += chunk.toString();
-// 		});
-// 		stream.on('end', resolve);
-// 	});
-
-// 	expect(result).toBe('<!--[--><div>Loading...</div><div>Data: resolved</div><!--]-->');
-// });
-// });

package/tests/server/style-identifier.test.tsrx

@@ -1,21 +1,27 @@
 import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-describe('{style} directive (server)', () => {
+const external_styles = <style>
+	.external {
+		color: tomato;
+	}
+</style>;
+
+describe('style class maps (server)', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via {style}', async () => {
-			component Child({ className }: { className: string }) {
-				<div class={className}>{'styled child'}</div>
+		it('passes scoped classes to a child component via a style expression', async () => {
+			function Child({ className }: { className: string }) {
+				return <><div class={className}>{'styled child'}</div></>;
 			}
 
-			component Parent() {
-				<Child className={style 'highlight'} />
-
-				<style>
+			function Parent() {
+				const styles = <style>
 					.highlight {
 						color: red;
 					}
-				</style>
+				</style>;
+
+				return <><Child className={styles.highlight} /></>;
 			}
 
 			const { body } = await render(Parent);
@@ -29,23 +35,25 @@ describe('{style} directive (server)', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple {style} classes to a child component', async () => {
-			component Child({ primary, secondary }: { primary: string; secondary: string }) {
-				<div class={primary}>{'primary'}</div>
-				<span class={secondary}>{'secondary'}</span>
+		it('passes multiple style expression classes to a child component', async () => {
+			function Child({ primary, secondary }: { primary: string; secondary: string }) {
+				return <>
+					<div class={primary}>{'primary'}</div>
+					<span class={secondary}>{'secondary'}</span>
+				</>;
 			}
 
-			component Parent() {
-				<Child primary={style 'primary'} secondary={style 'secondary'} />
-
-				<style>
+			function Parent() {
+				const styles = <style>
 					.primary {
 						color: blue;
 					}
 					.secondary {
 						color: gray;
 					}
-				</style>
+				</style>;
+
+				return <><Child primary={styles.primary} secondary={styles.secondary} /></>;
 			}
 
 			const { body } = await render(Parent);
@@ -68,19 +76,19 @@ describe('{style} directive (server)', () => {
 	});
 
 	describe('parent styling applied to child', () => {
-		it('allows parent to style child elements via {style} prop', async () => {
-			component Button({ extraClass }: { extraClass?: string }) {
-				<button class={extraClass ?? ''}>{'Click me'}</button>
+		it('allows parent to style child elements via a style expression prop', async () => {
+			function Button({ extraClass }: { extraClass?: string }) {
+				return <><button class={extraClass ?? ''}>{'Click me'}</button></>;
 			}
 
-			component App() {
-				<Button extraClass={style 'fancy'} />
-
-				<style>
+			function App() {
+				const styles = <style>
 					.fancy {
 						background: gold;
 					}
-				</style>
+				</style>;
+
+				return <><Button extraClass={styles.fancy} /></>;
 			}
 
 			const { body } = await render(App);
@@ -93,25 +101,26 @@ describe('{style} directive (server)', () => {
 			expect(classes.some((cls: string) => cls === 'fancy')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent {style} class', async () => {
-			component Card({ className }: { className?: string }) {
-				<div class={['card-base', className ?? '']}>{'card content'}</div>
-
-				<style>
-					.card-base {
-						border: 1px solid black;
-					}
-				</style>
+		it('child can combine its own classes with a parent style expression class', async () => {
+			function Card({ className }: { className?: string }) {
+				return <>
+					<div class={['card-base', className ?? '']}>{'card content'}</div>
+					<style>
+						.card-base {
+							border: 1px solid black;
+						}
+					</style>
+				</>;
 			}
 
-			component App() {
-				<Card className={style 'themed'} />
-
-				<style>
+			function App() {
+				const styles = <style>
 					.themed {
 						background: purple;
 					}
-				</style>
+				</style>;
+
+				return <><Card className={styles.themed} /></>;
 			}
 
 			const { body } = await render(App);
@@ -124,56 +133,57 @@ describe('{style} directive (server)', () => {
 			expect(classes.some((cls: string) => cls === 'themed')).toBe(true);
 		});
 
-		it(
-			'passes standalone class to child even when it also appears in descendant context',
-			async () => {
-				component Child({ cls }: { cls: string }) {
-					<span class={cls}>{'text'}</span>
-				}
+		it('passes a standalone class even when it also appears in descendant context', async () => {
+			function Child({ cls }: { cls: string }) {
+				return <><span class={cls}>{'text'}</span></>;
+			}
+
+			function App() {
+				const styles = <style>
+					.dual {
+						color: blue;
+					}
+					.parent .dual {
+						font-weight: bold;
+					}
+				</style>;
 
-				component App() {
+				return <>
 					<div class="parent">
-						<Child cls={style 'dual'} />
+						<Child cls={styles.dual} />
 					</div>
+				</>;
+			}
 
-					<style>
-						.dual {
-							color: blue;
-						}
-						.parent .dual {
-							font-weight: bold;
-						}
-					</style>
-				}
-
-				const { body } = await render(App);
-				const { document } = parseHtml(body);
+			const { body } = await render(App);
+			const { document } = parseHtml(body);
 
-				const span = document.querySelector('span');
-				expect(span).toBeTruthy();
-				const classes = Array.from(span.classList);
-				expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
-				expect(classes.some((cls: string) => cls === 'dual')).toBe(true);
-			},
-		);
+			const span = document.querySelector('span');
+			expect(span).toBeTruthy();
+			const classes = Array.from(span.classList);
+			expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
+			expect(classes.some((cls: string) => cls === 'dual')).toBe(true);
+		});
 	});
 
-	it('passes scoped class to a dynamic child component via {style}', async () => {
-		component Child({ cls }: { cls: string }) {
-			<span class={cls}>{'text'}</span>
+	it('passes scoped classes to a dynamic child component via a style expression', async () => {
+		function Child({ cls }: { cls: string }) {
+			return <><span class={cls}>{'text'}</span></>;
 		}
 
-		component Parent() {
-			let dynamic = track(() => Child);
-			<div class="wrapper">
-				<@dynamic cls={style 'text'} />
-			</div>
-
-			<style>
+		function Parent() {
+			const styles = <style>
 				.text {
 					color: red;
 				}
-			</style>
+			</style>;
+
+			return <>
+				let dynamic = track(() => Child);
+				<div class="wrapper">
+					<@dynamic cls={styles.text} />
+				</div>
+			</>;
 		}
 
 		const { body } = await render(Parent);
@@ -186,34 +196,60 @@ describe('{style} directive (server)', () => {
 		expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 	});
 
-	it('preserves caller scoped hash through wrapper children', async () => {
-		component Wrapper({ children }) {
-			<div class="green">
-				{'Wrapper'}
-				{children}
-			</div>
-
-			<style>
-				.green {
-					color: green;
-				}
-			</style>
+	it('passes style expression classes declared outside the component', async () => {
+		function Child({ cls }: { cls: string }) {
+			return <><span class={cls}>{'text'}</span></>;
 		}
 
-		component Child() {
-			<div class="red">{'Child'}</div>
+		function Parent() {
+			return <Child cls={external_styles.external} />;
+		}
 
-			<style>
-				.red {
-					color: red;
-				}
-			</style>
+		const { body, css } = await render(Parent);
+		const { document } = parseHtml(body);
+
+		const span = document.querySelector('span');
+		expect(span).toBeTruthy();
+		const classes = Array.from(span.classList);
+		expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
+		expect(classes.some((cls: string) => cls === 'external')).toBe(true);
+
+		expect(css.size).toBeGreaterThan(0);
+		expect(Array.from(css).some((hash: string) => hash.startsWith('tsrx-'))).toBe(true);
+	});
+
+	it('preserves caller scoped hash through wrapper children', async () => {
+		function Wrapper({ children }) {
+			return <>
+				<div class="green">
+					{'Wrapper'}
+					{children}
+				</div>
+				<style>
+					.green {
+						color: green;
+					}
+				</style>
+			</>;
+		}
+
+		function Child() {
+			return <>
+				<div class="red">{'Child'}</div>
+				<style>
+					.red {
+						color: red;
+					}
+				</style>
+			</>;
 		}
 
-		component App() {
-			<Wrapper>
-				<Child />
-			</Wrapper>
+		function App() {
+			return <>
+				<Wrapper>
+					<Child />
+				</Wrapper>
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -232,22 +268,22 @@ describe('{style} directive (server)', () => {
 	});
 
 	it('applies caller scoped hash to slotted children through dynamic components', async () => {
-		component Wrapper({ children }) {
-			<section>{children}</section>
+		function Wrapper({ children }) {
+			return <><section>{children}</section></>;
 		}
 
-		component App() {
-			const DynamicWrapper = track(() => Wrapper);
-
-			<@DynamicWrapper>
-				<div class="green">{'Slotted child'}</div>
-			</@DynamicWrapper>
-
-			<style>
-				.green {
-					color: green;
-				}
-			</style>
+		function App() {
+			return <>
+				const DynamicWrapper = track(() => Wrapper);
+				<@DynamicWrapper>
+					<div class="green">{'Slotted child'}</div>
+				</@DynamicWrapper>
+				<style>
+					.green {
+						color: green;
+					}
+				</style>
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -261,40 +297,42 @@ describe('{style} directive (server)', () => {
 	});
 
 	describe('server compiler output', () => {
-		it('inlines scoped class strings', () => {
+		it('emits style class maps', () => {
 			const source = `
-component Child({ cls }: { cls: string }) {
+function Child({ cls }: { cls: string }) { return <>
 	<div class={cls}>{'text'}</div>
-}
-export component App() {
-	<Child cls={style 'highlight'} />
-
-	<style>
+</>; }
+export function App() {
+	const styles = <style>
 		.highlight {
 			color: red;
 		}
-	</style>
+	</style>;
+
+	return <>
+		<Child cls={styles.highlight} />
+	</>;
 }`;
 			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
 			expect(code).toContain('highlight');
-			expect(code).toMatch(/tsrx-[a-z0-9]+/);
+			expect(code).toMatch(/tsrx-[a-z0-9]+ highlight/);
 			expect(code).toContain('register_css');
 		});
 
 		it('includes CSS hash in rendered HTML', async () => {
-			component Child({ cls }: { cls: string }) {
-				<div class={cls}>{'hello'}</div>
+			function Child({ cls }: { cls: string }) {
+				return <><div class={cls}>{'hello'}</div></>;
 			}
 
-			component App() {
-				<Child cls={style 'styled'} />
-
-				<style>
+			function App() {
+				const styles = <style>
 					.styled {
 						font-weight: bold;
 					}
-				</style>
+				</style>;
+
+				return <><Child cls={styles.styled} /></>;
 			}
 
 			const { body, css } = await render(App);