ripple 0.3.8 → 0.3.10

package/tests/hydration/compiled/server/if-children.js

@@ -3,68 +3,55 @@ import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';
 
-export async function IfWithChildren(__output, { children }) {
-	return _$_.async(async () => {
-		_$_.push_component();
+export function IfWithChildren(__output, { children }) {
+	_$_.push_component();
+
+	let lazy = _$_.track(true);
 
-		let lazy = _$_.track(true);
+	__output.push('<div');
+	__output.push(' class="container"');
+	__output.push('>');
 
+	{
 		__output.push('<div');
-		__output.push(' class="container"');
+		__output.push(' role="button"');
+		__output.push(' class="header"');
 		__output.push('>');
 
 		{
+			__output.push('Toggle');
+		}
+
+		__output.push('</div>');
+		__output.push('<!--[-->');
+
+		if (_$_.get(lazy)) {
 			__output.push('<div');
-			__output.push(' role="button"');
-			__output.push(' class="header"');
+			__output.push(' class="content"');
 			__output.push('>');
 
 			{
-				__output.push('Toggle');
+				_$_.render_expression(__output, children);
 			}
 
 			__output.push('</div>');
-			__output.push('<!--[-->');
-
-			if (_$_.get(lazy)) {
-				__output.push('<div');
-				__output.push(' class="content"');
-				__output.push('>');
-
-				{
-					{
-						const comp = children;
-						const args = [__output, {}];
-
-						if (comp?.async) {
-							await comp(...args);
-						} else if (comp) {
-							comp(...args);
-						}
-					}
-				}
-
-				__output.push('</div>');
-			}
-
-			__output.push('<!--]-->');
 		}
 
-		__output.push('</div>');
-		_$_.pop_component();
-	});
-}
+		__output.push('<!--]-->');
+	}
 
-IfWithChildren.async = true;
+	__output.push('</div>');
+	_$_.pop_component();
+}
 
-export function ChildItem(__output, { text }) {
+export function ChildItem(__output, { text: label }) {
 	_$_.push_component();
 	__output.push('<div');
 	__output.push(' class="item"');
 	__output.push('>');
 
 	{
-		__output.push(_$_.escape(text));
+		__output.push(_$_.escape(label));
 	}
 
 	__output.push('</div>');
@@ -80,7 +67,7 @@ export function TestIfWithChildren(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -98,7 +85,7 @@ export function TestIfWithChildren(__output) {
 					}
 
 					_$_.pop_component();
-				}
+				})
 			}
 		];
 
@@ -164,94 +151,81 @@ export function IfWithStaticChildren(__output) {
 	_$_.pop_component();
 }
 
-export async function IfWithSiblingsAndChildren(__output, { children }) {
-	return _$_.async(async () => {
-		_$_.push_component();
+export function IfWithSiblingsAndChildren(__output, { children }) {
+	_$_.push_component();
+
+	let lazy_2 = _$_.track(true);
 
-		let lazy_2 = _$_.track(true);
+	__output.push('<section');
+	__output.push(' class="group"');
+	__output.push('>');
 
-		__output.push('<section');
-		__output.push(' class="group"');
+	{
+		__output.push('<div');
+		__output.push(' role="button"');
+		__output.push(' class="item"');
 		__output.push('>');
 
 		{
 			__output.push('<div');
-			__output.push(' role="button"');
-			__output.push(' class="item"');
+			__output.push(' class="indicator"');
+			__output.push('>');
+			__output.push('</div>');
+			__output.push('<h2');
+			__output.push(' class="text"');
 			__output.push('>');
 
 			{
-				__output.push('<div');
-				__output.push(' class="indicator"');
-				__output.push('>');
-				__output.push('</div>');
-				__output.push('<h2');
-				__output.push(' class="text"');
-				__output.push('>');
+				__output.push('Title');
+			}
 
-				{
-					__output.push('Title');
-				}
+			__output.push('</h2>');
+			__output.push('<div');
+			__output.push(' class="caret"');
+			__output.push('>');
 
-				__output.push('</h2>');
-				__output.push('<div');
-				__output.push(' class="caret"');
+			{
+				__output.push('<svg');
+				__output.push(' xmlns="http://www.w3.org/2000/svg"');
+				__output.push(' width="18"');
+				__output.push(' height="18"');
+				__output.push(' viewBox="0 0 24 24"');
 				__output.push('>');
 
 				{
-					__output.push('<svg');
-					__output.push(' xmlns="http://www.w3.org/2000/svg"');
-					__output.push(' width="18"');
-					__output.push(' height="18"');
-					__output.push(' viewBox="0 0 24 24"');
+					__output.push('<path');
+					__output.push(' d="m9 18 6-6-6-6"');
 					__output.push('>');
-
-					{
-						__output.push('<path');
-						__output.push(' d="m9 18 6-6-6-6"');
-						__output.push('>');
-						__output.push('</path>');
-					}
-
-					__output.push('</svg>');
+					__output.push('</path>');
 				}
 
-				__output.push('</div>');
+				__output.push('</svg>');
 			}
 
 			__output.push('</div>');
-			__output.push('<!--[-->');
+		}
 
-			if (_$_.get(lazy_2)) {
-				__output.push('<div');
-				__output.push(' class="items"');
-				__output.push('>');
+		__output.push('</div>');
+		__output.push('<!--[-->');
 
-				{
-					{
-						const comp = children;
-						const args = [__output, {}];
-
-						if (comp?.async) {
-							await comp(...args);
-						} else if (comp) {
-							comp(...args);
-						}
-					}
-				}
+		if (_$_.get(lazy_2)) {
+			__output.push('<div');
+			__output.push(' class="items"');
+			__output.push('>');
 
-				__output.push('</div>');
+			{
+				_$_.render_expression(__output, children);
 			}
 
-			__output.push('<!--]-->');
+			__output.push('</div>');
 		}
 
-		__output.push('</section>');
-		_$_.pop_component();
-	});
-}
+		__output.push('<!--]-->');
+	}
 
-IfWithSiblingsAndChildren.async = true;
+	__output.push('</section>');
+	_$_.pop_component();
+}
 
 export function TestIfWithSiblingsAndChildren(__output) {
 	_$_.push_component();
@@ -262,7 +236,7 @@ export function TestIfWithSiblingsAndChildren(__output) {
 		const args = [
 			__output,
 			{
-				children: function children(__output) {
+				children: _$_.ripple_element(function render_children(__output) {
 					_$_.push_component();
 
 					{
@@ -280,7 +254,7 @@ export function TestIfWithSiblingsAndChildren(__output) {
 					}
 
 					_$_.pop_component();
-				}
+				})
 			}
 		];
 

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

@@ -27,7 +27,7 @@ export async function SimplePortal(__output) {
 					__output,
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-						children: function children(__output) {
+						children: _$_.ripple_element(function render_children(__output) {
 							_$_.push_component();
 							__output.push('<div');
 							__output.push(' class="portal-content"');
@@ -39,7 +39,7 @@ export async function SimplePortal(__output) {
 
 							__output.push('</div>');
 							_$_.pop_component();
-						}
+						})
 					}
 				];
 
@@ -88,7 +88,7 @@ export async function ConditionalPortal(__output) {
 						__output,
 						{
 							target: typeof document !== 'undefined' ? document.body : null,
-							children: function children(__output) {
+							children: _$_.ripple_element(function render_children(__output) {
 								_$_.push_component();
 								__output.push('<div');
 								__output.push(' class="portal-content"');
@@ -100,7 +100,7 @@ export async function ConditionalPortal(__output) {
 
 								__output.push('</div>');
 								_$_.pop_component();
-							}
+							})
 						}
 					];
 
@@ -146,7 +146,7 @@ export async function PortalWithMainContent(__output) {
 					__output,
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-						children: function children(__output) {
+						children: _$_.ripple_element(function render_children(__output) {
 							_$_.push_component();
 							__output.push('<div');
 							__output.push(' class="portal-content"');
@@ -158,7 +158,7 @@ export async function PortalWithMainContent(__output) {
 
 							__output.push('</div>');
 							_$_.pop_component();
-						}
+						})
 					}
 				];
 
@@ -219,7 +219,7 @@ export async function NestedContentWithPortal(__output) {
 					__output,
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-						children: function children(__output) {
+						children: _$_.ripple_element(function render_children(__output) {
 							_$_.push_component();
 							__output.push('<div');
 							__output.push(' class="portal-content"');
@@ -231,7 +231,7 @@ export async function NestedContentWithPortal(__output) {
 
 							__output.push('</div>');
 							_$_.pop_component();
-						}
+						})
 					}
 				];
 

package/tests/hydration/components/basic.ripple

@@ -1,4 +1,5 @@
 // Basic static components for hydration testing
+import { track } from 'ripple';
 import type { Children } from 'ripple';
 
 export component StaticText() {
@@ -60,9 +61,20 @@ export component WithGreeting() {
 
 export component ExpressionContent() {
 	const value = 42;
-	const text = 'computed';
+	const label = 'computed';
 	<div>{value}</div>
-	<span>{text.toUpperCase()}</span>
+	<span>{label.toUpperCase()}</span>
+}
+
+component TextProp(&{ children }: { children: string }) {
+	<div class="text-prop">{children}</div>
+}
+
+export component TextPropWithToggle() {
+	let &[show] = track(false);
+
+	<TextProp children={show ? 'hello' : ''} />
+	<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
 }
 
 // Test for static content in child component followed by sibling content
@@ -99,9 +111,7 @@ component Actions({ playgroundVisible = false }: { playgroundVisible: boolean })
 
 component Layout({ children }: { children: Children }) {
 	<main>
-		<div class="container">
-			<children />
-		</div>
+		<div class="container">{children}</div>
 	</main>
 }
 

package/tests/hydration/components/composite.ripple

@@ -1,8 +1,14 @@
 import type { Children } from 'ripple';
 
 export component Layout(&{ children }: { children?: Children }) {
+	<div class="layout">{children}</div>
+}
+
+export component TextWrappedLayout(&{ children }: { children?: Children }) {
 	<div class="layout">
-		<children />
+		{text 'before'}
+		{children}
+		{text 'after'}
 	</div>
 }
 
@@ -37,3 +43,9 @@ export component LayoutWithMultiRootChild() {
 		<MultiRootChild />
 	</Layout>
 }
+
+export component LayoutWithTextAroundChildren() {
+	<TextWrappedLayout>
+		<SingleChild />
+	</TextWrappedLayout>
+}

package/tests/hydration/components/hmr.ripple

@@ -11,9 +11,7 @@ import { track } from 'ripple';
 export component Layout({ children }: { children: any }) {
 	<div class="layout">
 		<nav class="nav">{'Navigation'}</nav>
-		<main class="main">
-			<children />
-		</main>
+		<main class="main">{children}</main>
 	</div>
 }
 

package/tests/hydration/components/html.ripple

@@ -38,9 +38,7 @@ export component HtmlWithReactivity() {
 
 export component HtmlWrapper({ children }: { children: any }) {
 	<div class="wrapper">
-		<div class="inner">
-			<children />
-		</div>
+		<div class="inner">{children}</div>
 	</div>
 }
 
@@ -105,9 +103,7 @@ export component DocLayout({
 	<div class="layout">
 		<div class="content-container">
 			<article>
-				<div>
-					<children />
-				</div>
+				<div>{children}</div>
 			</article>
 			if (editPath) {
 				<div class="edit-link">
@@ -168,14 +164,10 @@ export component HtmlWithUndefinedContent() {
 component DynamicHeading({ level, children }: { level: number; children: any }) {
 	switch (level) {
 		case 1: {
-			<h1 class="heading">
-				<children />
-			</h1>
+			<h1 class="heading">{children}</h1>
 		}
 		case 2: {
-			<h2 class="heading">
-				<children />
-			</h2>
+			<h2 class="heading">{children}</h2>
 		}
 	}
 }
@@ -193,9 +185,7 @@ component CodeBlock({ code }: { code: string }) {
 
 component ContentWrapper({ children }: { children: any }) {
 	<div class="wrapper">
-		<div class="inner">
-			<children />
-		</div>
+		<div class="inner">{children}</div>
 	</div>
 }
 
@@ -211,7 +201,7 @@ export component HtmlAfterSwitchInChildren() {
 
 component NavItem({
 	href,
-	text,
+	text: label,
 	active = false,
 }: {
 	href: string;
@@ -223,7 +213,7 @@ component NavItem({
 			<div class="indicator" />
 		}
 		<a {href}>
-			<span>{text}</span>
+			<span>{label}</span>
 		</a>
 	</div>
 }
@@ -236,9 +226,7 @@ component SidebarSection({ title, children }: { title: string; children: any })
 			<button onClick={() => (expanded = !expanded)}>{'Toggle'}</button>
 		</div>
 		if (expanded) {
-			<div class="section-items">
-				<children />
-			</div>
+			<div class="section-items">{children}</div>
 		}
 	</section>
 }
@@ -293,9 +281,7 @@ export component LayoutWithSidebarAndMain() {
 
 component ArticleWrapper({ children }: { children: any }) {
 	<article class="doc-content">
-		<div>
-			<children />
-		</div>
+		<div>{children}</div>
 	</article>
 }
 
@@ -341,9 +327,7 @@ export component ArticleWithHtmlChildThenSibling() {
 component InlineArticleLayout({ children }: { children: any }) {
 	<div class="content-container">
 		<article class="doc-content">
-			<div>
-				<children />
-			</div>
+			<div>{children}</div>
 		</article>
 		if (true) {
 			<div class="edit-link">
@@ -391,9 +375,7 @@ component DocsLayoutInner({
 					<div class="content">
 						<div class="content-container">
 							<article class="doc-content">
-								<div>
-									<children />
-								</div>
+								<div>{children}</div>
 							</article>
 							if (editPath) {
 								<div class="edit-link">
@@ -450,9 +432,7 @@ component DocsLayoutExact({
 					<div class="content">
 						<div class="content-container">
 							<article class="doc-content">
-								<div>
-									<children />
-								</div>
+								<div>{children}</div>
 							</article>
 							if (editPath) {
 								<div class="edit-link">
@@ -542,9 +522,7 @@ export component TemplateWithHtmlAndSiblings() {
 component LayoutWithTemplate({ children, data }: { children: any; data: object }) {
 	<div class="layout">
 		<template id="page-data">{html JSON.stringify(data)}</template>
-		<main>
-			<children />
-		</main>
+		<main>{children}</main>
 	</div>
 }
 

package/tests/hydration/components/if-children.ripple

@@ -9,15 +9,13 @@ export component IfWithChildren({ children }: { children: any }) {
 	<div class="container">
 		<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
 		if (expanded) {
-			<div class="content">
-				<children />
-			</div>
+			<div class="content">{children}</div>
 		}
 	</div>
 }
 
-export component ChildItem({ text }: { text: string }) {
-	<div class="item">{text}</div>
+export component ChildItem({ text: label }: { text: string }) {
+	<div class="item">{label}</div>
 }
 
 export component TestIfWithChildren() {
@@ -57,9 +55,7 @@ export component IfWithSiblingsAndChildren({ children }: { children: any }) {
 			</div>
 		</div>
 		if (expanded) {
-			<div class="items">
-				<children />
-			</div>
+			<div class="items">{children}</div>
 		}
 	</section>
 }

package/tests/hydration/composite.test.js

@@ -39,4 +39,15 @@ describe('hydration > composite', () => {
 			'<div class=\"layout\"><h1>title</h1><p>description</p></div>',
 		);
 	});
+
+	it('hydrates explicit text around children', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithTextAroundChildren,
+			ClientComponents.LayoutWithTextAroundChildren,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class="layout">before<div class="single">single</div>after</div>',
+		);
+		expect(container.querySelector('.layout')?.textContent).toBe('beforesingleafter');
+	});
 });

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

@@ -345,6 +345,56 @@ describe('basic server > attribute rendering', () => {
 		expect(body).toBeHtml('<input type="checkbox" disabled checked />');
 	});
 
+	it('renders formnovalidate as a boolean attribute', async () => {
+		component Basic() {
+			let &[formnovalidate] = track(true);
+
+			<button {formnovalidate}>{'Submit'}</button>
+		}
+
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+
+		const button = document.querySelector('button');
+
+		expect(button.hasAttribute('formnovalidate')).toBe(true);
+		expect(button.getAttribute('formnovalidate')).toBe('');
+		expect(body).toBeHtml('<button formnovalidate>Submit</button>');
+	});
+
+	it('renders hidden as a boolean attribute when true', async () => {
+		component Basic() {
+			let &[hidden] = track(true);
+
+			<div {hidden}>{'Hidden content'}</div>
+		}
+
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+
+		const div = document.querySelector('div');
+
+		expect(div.hasAttribute('hidden')).toBe(true);
+		expect(div.getAttribute('hidden')).toBe('');
+		expect(body).toBeHtml('<div hidden>Hidden content</div>');
+	});
+
+	it('does not render hidden when false', async () => {
+		component Basic() {
+			let &[hidden] = track(false);
+
+			<div {hidden}>{'Visible content'}</div>
+		}
+
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+
+		const div = document.querySelector('div');
+
+		expect(div.hasAttribute('hidden')).toBe(false);
+		expect(body).toBeHtml('<div>Visible content</div>');
+	});
+
 	it('render multiple dynamic attributes', async () => {
 		component Basic() {
 			let &[theme] = track('light');