ripple 0.3.83 → 0.3.85

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

@@ -6,15 +6,10 @@ import { trackAsync } from 'ripple/server';
 export function RootPending() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<p');
-			_$_.output_push(' class="root-pending"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('root loading...');
-			}
-
-			_$_.output_push('</p>');
+			__out += '<p class="root-pending">root loading...</p>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -22,32 +17,10 @@ export function RootPending() {
 export function RootCatch({ error, reset }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<section');
-			_$_.output_push(' class="root-catch"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('<p');
-				_$_.output_push(' class="root-error"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push(_$_.escape(error.message));
-				}
-
-				_$_.output_push('</p>');
-				_$_.output_push('<button');
-				_$_.output_push(' class="root-reset"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('retry');
-				}
-
-				_$_.output_push('</button>');
-			}
+			let __out = '';
 
-			_$_.output_push('</section>');
+			__out += '<section class="root-catch"><p class="root-error">' + _$_.escape(error.message) + '</p><button class="root-reset">retry</button></section>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -57,14 +30,10 @@ export function RootThrows() {
 		throw new Error('root exploded');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<p');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('should not render');
-			}
-
-			_$_.output_push('</p>');
+			__out += '<p>should not render</p>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -74,15 +43,10 @@ export function RootAsyncDirect() {
 		let lazy = _$_.track_async(() => Promise.resolve('root async value'), 'd6bf9e33');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<p');
-			_$_.output_push(' class="root-async-value"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push(_$_.escape(lazy.value));
-			}
-
-			_$_.output_push('</p>');
+			__out += '<p class="root-async-value">' + _$_.escape(lazy.value) + '</p>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -92,15 +56,10 @@ export function RootAsyncRejects() {
 		let lazy_1 = _$_.track_async(() => Promise.reject(new Error('root async failed')), 'd2fe7b64');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<p');
-			_$_.output_push(' class="root-async-value"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push(_$_.escape(lazy_1.value));
-			}
-
-			_$_.output_push('</p>');
+			__out += '<p class="root-async-value">' + _$_.escape(lazy_1.value) + '</p>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -109,7 +68,11 @@ export function AsyncListInTryPending() {
 	return _$_.tsrx_element(() => {
 		_$_.try_block(
 			() => {
-				_$_.output_push('<!--[-->');
+				let __out = '';
+
+				__out += '<!--[-->';
+				_$_.output_push(__out);
+				__out = '';
 
 				_$_.regular_block(() => {
 					{
@@ -120,25 +83,26 @@ export function AsyncListInTryPending() {
 					}
 				});
 
-				_$_.output_push('<!--]-->');
+				__out += '<!--]-->';
+				_$_.output_push(__out);
 			},
 			null,
 			() => {
-				_$_.output_push('<!--[-->');
+				let __out = '';
 
-				_$_.regular_block(() => {
-					_$_.output_push('<p');
-					_$_.output_push(' class="loading"');
-					_$_.output_push('>');
+				__out += '<!--[-->';
+				_$_.output_push(__out);
+				__out = '';
 
-					{
-						_$_.output_push('loading...');
-					}
+				_$_.regular_block(() => {
+					let __out = '';
 
-					_$_.output_push('</p>');
+					__out += '<p class="loading">loading...</p>';
+					_$_.output_push(__out);
 				});
 
-				_$_.output_push('<!--]-->');
+				__out += '<!--]-->';
+				_$_.output_push(__out);
 			}
 		);
 	});
@@ -149,28 +113,16 @@ function AsyncList() {
 		let lazy_2 = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']), 'b3d31627');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<ul');
-			_$_.output_push(' class="items"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('<!--[-->');
+			let __out = '';
 
-				for (let item of lazy_2.value) {
-					_$_.output_push('<li');
-					_$_.output_push('>');
+			__out += '<ul class="items"><!--[-->';
 
-					{
-						_$_.output_push(_$_.escape(item));
-					}
-
-					_$_.output_push('</li>');
-				}
-
-				_$_.output_push('<!--]-->');
+			for (let item of lazy_2.value) {
+				__out += '<li>' + _$_.escape(item) + '</li>';
 			}
 
-			_$_.output_push('</ul>');
+			__out += '<!--]--></ul>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -178,46 +130,40 @@ function AsyncList() {
 export function AsyncTryWithLeadingSibling() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<div');
-				_$_.output_push(' class="before"');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push('before');
-				}
+			__out += '<div class="before">before</div>';
+			_$_.output_push(__out);
+			__out = '';
 
-				_$_.output_push('</div>');
+			_$_.try_block(
+				() => {
+					let __out = '';
 
-				_$_.try_block(
-					() => {
-						_$_.output_push('<!--[-->');
+					__out += '<!--[-->';
 
-						{
-							const comp = AsyncContent;
-							const args = [{}];
+					{
+						const comp = AsyncContent;
+						const args = [{}];
 
-							_$_.render_component(comp, ...args);
-						}
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_component(comp, ...args);
+					}
 
-						_$_.output_push('<!--]-->');
-					},
-					null,
-					() => {
-						_$_.output_push('<!--[-->');
-						_$_.output_push('<div');
-						_$_.output_push(' class="loading"');
-						_$_.output_push('>');
+					__out += '<!--]-->';
+					_$_.output_push(__out);
+				},
+				null,
+				() => {
+					let __out = '';
 
-						{
-							_$_.output_push('loading async content');
-						}
+					__out += '<!--[--><div class="loading">loading async content</div><!--]-->';
+					_$_.output_push(__out);
+				}
+			);
 
-						_$_.output_push('</div>');
-						_$_.output_push('<!--]-->');
-					}
-				);
-			}
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -227,15 +173,10 @@ function AsyncContent() {
 		let lazy_3 = _$_.track_async(() => Promise.resolve('ready'), '15ea8758');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="resolved"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push(_$_.escape(lazy_3.value));
-			}
+			let __out = '';
 
-			_$_.output_push('</div>');
+			__out += '<div class="resolved">' + _$_.escape(lazy_3.value) + '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }

package/tests/hydration/components/html.tsrx

@@ -199,6 +199,81 @@ export function HtmlAfterSwitchInChildren() @{
 	</ContentWrapper>
 }
 
+// A component whose root is a single @if (root-controlled: no `<!>` wrapper),
+// used as the first child of a composite slot with following siblings — exercises
+// the hydration boundary advance for a root-controlled block inside a composite.
+function IfHeading({ primary, children }: { primary: boolean; children: any }) @{
+	@if (primary) {
+		<h1 class="heading">{children}</h1>
+	} @else {
+		<h2 class="heading">{children}</h2>
+	}
+}
+
+export function HtmlAfterIfInChildren() @{
+	<ContentWrapper>
+		<IfHeading primary={true}>{'Title'}</IfHeading>
+		<p>{'First paragraph'}</p>
+		<p>{'Second paragraph'}</p>
+		<CodeBlock code="const x = 1;" />
+		<p>{'After code'}</p>
+	</ContentWrapper>
+}
+
+// Root-controlled @for (sibling semantics via the ROOT_CONTROLLED flag) as a
+// composite child with following siblings.
+function ForList({ items }: { items: string[] }) @{
+	@for (const item of items) {
+		<span class="for-item">{item}</span>
+	}
+}
+
+export function HtmlAfterForInChildren() @{
+	<ContentWrapper>
+		<ForList items={['Title', 'Subtitle']} />
+		<p>{'First paragraph'}</p>
+		<CodeBlock code="const x = 1;" />
+		<p>{'After code'}</p>
+	</ContentWrapper>
+}
+
+// Root-controlled @try (async branches) as a composite child with siblings.
+function TryBox({ value }: { value: string }) @{
+	@try {
+		<div class="try-box">{value}</div>
+	} @catch (e) {
+		<span>{'error'}</span>
+	}
+}
+
+export function HtmlAfterTryInChildren() @{
+	<ContentWrapper>
+		<TryBox value="Title" />
+		<p>{'First paragraph'}</p>
+		<CodeBlock code="const x = 1;" />
+		<p>{'After code'}</p>
+	</ContentWrapper>
+}
+
+// Root-controlled single component: a component whose body is a single child
+// component (no `<!>` wrapper), used as a composite child with siblings.
+function Boxed({ children }: { children: any }) @{
+	<span class="boxed">{children}</span>
+}
+
+function IndirectHeading({ text }: { text: string }) @{
+	<Boxed>{text}</Boxed>
+}
+
+export function HtmlAfterComponentInChildren() @{
+	<ContentWrapper>
+		<IndirectHeading text="Title" />
+		<p>{'First paragraph'}</p>
+		<CodeBlock code="const x = 1;" />
+		<p>{'After code'}</p>
+	</ContentWrapper>
+}
+
 function NavItem(&{
 	href,
 	text: label,

package/tests/hydration/html.test.js

@@ -147,6 +147,56 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('After code');
 	});
 
+	it('hydrates html block after if-based component in children', async () => {
+		await hydrateComponent(
+			ServerComponents.HtmlAfterIfInChildren,
+			ClientComponents.HtmlAfterIfInChildren,
+		);
+		const html = container.innerHTML;
+		expect(html).toContain('Title');
+		expect(html).toContain('First paragraph');
+		expect(html).toContain('Second paragraph');
+		expect(html).toContain('const x = 1;');
+		expect(html).toContain('After code');
+	});
+
+	it('hydrates html block after for-based component in children', async () => {
+		await hydrateComponent(
+			ServerComponents.HtmlAfterForInChildren,
+			ClientComponents.HtmlAfterForInChildren,
+		);
+		const html = container.innerHTML;
+		expect(html).toContain('Title');
+		expect(html).toContain('Subtitle');
+		expect(html).toContain('First paragraph');
+		expect(html).toContain('const x = 1;');
+		expect(html).toContain('After code');
+	});
+
+	it('hydrates html block after try-based component in children', async () => {
+		await hydrateComponent(
+			ServerComponents.HtmlAfterTryInChildren,
+			ClientComponents.HtmlAfterTryInChildren,
+		);
+		const html = container.innerHTML;
+		expect(html).toContain('Title');
+		expect(html).toContain('First paragraph');
+		expect(html).toContain('const x = 1;');
+		expect(html).toContain('After code');
+	});
+
+	it('hydrates html block after single-component-root component in children', async () => {
+		await hydrateComponent(
+			ServerComponents.HtmlAfterComponentInChildren,
+			ClientComponents.HtmlAfterComponentInChildren,
+		);
+		const html = container.innerHTML;
+		expect(html).toContain('Title');
+		expect(html).toContain('First paragraph');
+		expect(html).toContain('const x = 1;');
+		expect(html).toContain('After code');
+	});
+
 	it('hydrates layout with sidebar (if-blocks) followed by main sibling', async () => {
 		await hydrateComponent(
 			ServerComponents.LayoutWithSidebarAndMain,

package/tests/server/compiler.test.tsrx

@@ -192,7 +192,9 @@ export default function A() @{
 
 		const result = compile(source, 'test.tsrx', { mode: 'server' }).code;
 
-		expect(result).toContain(`_$_.output_push('Hello')`);
+		// Indented text is trimmed to `Hello` and emitted as output (not a dangling
+		// `"Hello";`); the server accumulator merges it into the parent element.
+		expect(result).toContain(`__out += '<div>Hello</div>'`);
 		expect(result).not.toContain(`"Hello";`);
 	});
 
@@ -275,7 +277,9 @@ export function App() @{
 			{ mode: 'server' },
 		);
 
-		expect(result.code).toContain(`_$_.output_push('Rock &amp; "Roll"')`);
+		// Entities decode then re-escape for text (`&amp;`→`&`→`&amp;`, `&quot;`→`"`);
+		// the server accumulator merges the result into the parent element.
+		expect(result.code).toContain(`__out += '<div>Rock &amp; "Roll"</div>'`);
 	});
 
 	it('emits anonymous component expressions as arrows in SSR output', () => {

package/types/index.d.ts

@@ -69,6 +69,8 @@ export function tick(): Promise<void>;
 
 export function untrack<T>(fn: () => T): T;
 
+export function snapshot<T extends Iterable<unknown> | object>(value: T): T;
+
 export function flushSync<T>(fn?: () => T): T;
 
 export function effect(fn: (() => void) | (() => () => void)): void;