ripple 0.3.85 → 0.3.86

package/tests/hydration/compiled/server/if-fragment-controlflow.js

@@ -0,0 +1,227 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/server';
+
+export function IfFragmentForElement() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-c"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><span class="after">after</span><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfFragmentForIfIf() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><!--[-->';
+
+				if (muzes.length > 0) {
+					__out += '<span class="has-items">has items</span>';
+				}
+
+				__out += '<!--]--><!--[-->';
+
+				if (muzes.length === 0) {
+					__out += '<span class="empty">empty</span>';
+				}
+
+				__out += '<!--]--><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfFragmentElements() {
+	return _$_.tsrx_element(() => {
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-b"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[--><p class="muze">b</p><p class="muze">c</p><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function ComponentBodyFragmentControlFlow() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[--><!--[-->';
+
+			for (const muze of muzes) {
+				__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+			}
+
+			__out += '<!--]--><span class="after">after</span><!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function ComponentBodyCodeBlockControlFlow() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+			_$_.output_push(__out);
+			__out = '';
+
+			_$_.render_expression(_$_.tsrx_element(() => {
+				let __out = '';
+				const rows = muzes;
+
+				__out += '<!--[-->';
+
+				for (const muze of rows) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]-->';
+				_$_.output_push(__out);
+			}));
+
+			__out += '<span class="after">after</span><!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfCodeBlockControlFlow() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-f"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[-->';
+				_$_.output_push(__out);
+				__out = '';
+
+				_$_.render_expression(_$_.tsrx_element(() => {
+					let __out = '';
+					const rows = muzes;
+
+					__out += '<!--[-->';
+
+					for (const muze of rows) {
+						__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+					}
+
+					__out += '<!--]-->';
+					_$_.output_push(__out);
+				}));
+
+				__out += '<span class="after">after</span><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfElseFragment() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = false;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-d"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<span class="loading">loading</span>';
+			} else {
+				__out += '<!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><span class="after">after</span><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfDivFragment() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-e"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<section><!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><span class="after">after</span><!--]--></section>';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}

package/tests/hydration/components/if-fragment-controlflow.tsrx

@@ -0,0 +1,145 @@
+// Hydration repro: an @if body whose only child is a fragment containing
+// control-flow siblings (@for / @if). The fragment is lowered to a nested
+// tsrx_element rendered via an expression container, which introduces client
+// placeholder `<!>` nodes that the SSR markup has no dedicated marker for — so
+// the hydration cursor must still line up with the server's control-flow
+// boundary comments.
+
+// @for + trailing element sibling inside the fragment.
+export function IfFragmentForElement() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	const hasLoaded = true;
+	<div class="feed-c">
+		@if (hasLoaded) {
+			<>
+				@for (const muze of muzes; key muze.muzeId) {
+					<p class="muze">{muze.muzeId}</p>
+				}
+				<span class="after">{'after'}</span>
+			</>
+		}
+	</div>
+}
+
+// @for + @if + @if siblings inside the fragment (the originally reported shape).
+export function IfFragmentForIfIf() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	const hasLoaded = true;
+	<div class="feed">
+		@if (hasLoaded) {
+			<>
+				@for (const muze of muzes; key muze.muzeId) {
+					<p class="muze">{muze.muzeId}</p>
+				}
+				@if (muzes.length > 0) {
+					<span class="has-items">{'has items'}</span>
+				}
+				@if (muzes.length === 0) {
+					<span class="empty">{'empty'}</span>
+				}
+			</>
+		}
+	</div>
+}
+
+// Control variant that already worked: fragment of plain elements (no control
+// flow). Guards against a regression in the simple case.
+export function IfFragmentElements() @{
+	const hasLoaded = true;
+	<div class="feed-b">
+		@if (hasLoaded) {
+			<>
+				<p class="muze">{'b'}</p>
+				<p class="muze">{'c'}</p>
+			</>
+		}
+	</div>
+}
+
+// Regression guard: a COMPONENT-body fragment containing control flow must keep
+// working WITHOUT an extra block marker — it reuses the component's own
+// boundary, so the control_flow_branch_body marker must NOT be emitted here.
+export function ComponentBodyFragmentControlFlow() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	<>
+		@for (const muze of muzes; key muze.muzeId) {
+			<p class="muze">{muze.muzeId}</p>
+		}
+		<span class="after">{'after'}</span>
+	</>
+}
+
+// Component-body fragment whose first child is a `@{}` code block that renders
+// control flow. The code block lowers to a render_expression(tsrx_element) on
+// the client and emits its own SSR marker; hydration must keep the code block's
+// boundary aligned.
+export function ComponentBodyCodeBlockControlFlow() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	<>
+		@{
+			const rows = muzes;
+			@for (const muze of rows; key muze.muzeId) {
+				<p class="muze">{muze.muzeId}</p>
+			}
+		}
+		<span class="after">{'after'}</span>
+	</>
+}
+
+// @if branch fragment whose first child is a `@{}` code block that renders
+// control flow. The fragment is a control-flow branch body, so it is bracketed
+// via the control_flow_branch_body flag.
+export function IfCodeBlockControlFlow() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	const hasLoaded = true;
+	<div class="feed-f">
+		@if (hasLoaded) {
+			<>
+				@{
+					const rows = muzes;
+					@for (const muze of rows; key muze.muzeId) {
+						<p class="muze">{muze.muzeId}</p>
+					}
+				}
+				<span class="after">{'after'}</span>
+			</>
+		}
+	</div>
+}
+
+// @else branch whose body is a fragment of control-flow siblings.
+export function IfElseFragment() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	const hasLoaded = false;
+	<div class="feed-d">
+		@if (hasLoaded) {
+			<span class="loading">{'loading'}</span>
+		} @else {
+			<>
+				@for (const muze of muzes; key muze.muzeId) {
+					<p class="muze">{muze.muzeId}</p>
+				}
+				<span class="after">{'after'}</span>
+			</>
+		}
+	</div>
+}
+
+// Fragment-in-element nested inside a control-flow branch: the inner `<>` is a
+// child of <section>, not the direct branch body.
+export function IfDivFragment() @{
+	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+	const hasLoaded = true;
+	<div class="feed-e">
+		@if (hasLoaded) {
+			<section>
+				<>
+					@for (const muze of muzes; key muze.muzeId) {
+						<p class="muze">{muze.muzeId}</p>
+					}
+					<span class="after">{'after'}</span>
+				</>
+			</section>
+		}
+	</div>
+}

package/tests/hydration/if-fragment-controlflow.test.js

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+import * as ServerComponents from './compiled/server/if-fragment-controlflow.js';
+import * as ClientComponents from './compiled/client/if-fragment-controlflow.js';
+
+describe('hydration > @if body is a fragment of control-flow siblings', () => {
+	it('hydrates @for + element sibling', async () => {
+		await hydrateComponent(
+			ServerComponents.IfFragmentForElement,
+			ClientComponents.IfFragmentForElement,
+		);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.after')).not.toBeNull();
+	});
+
+	it('hydrates @for + @if + @if siblings', async () => {
+		await hydrateComponent(ServerComponents.IfFragmentForIfIf, ClientComponents.IfFragmentForIfIf);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.has-items')).not.toBeNull();
+		expect(container.querySelector('.empty')).toBeNull();
+	});
+
+	it('hydrates a fragment of plain elements (control)', async () => {
+		await hydrateComponent(
+			ServerComponents.IfFragmentElements,
+			ClientComponents.IfFragmentElements,
+		);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+	});
+
+	it('hydrates a component-body fragment with control flow (no extra marker)', async () => {
+		await hydrateComponent(
+			ServerComponents.ComponentBodyFragmentControlFlow,
+			ClientComponents.ComponentBodyFragmentControlFlow,
+		);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.after')).not.toBeNull();
+	});
+
+	it('hydrates a component-body fragment leading with a @{} code block of control flow', async () => {
+		await hydrateComponent(
+			ServerComponents.ComponentBodyCodeBlockControlFlow,
+			ClientComponents.ComponentBodyCodeBlockControlFlow,
+		);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.after')).not.toBeNull();
+	});
+
+	it('hydrates an @if branch fragment leading with a @{} code block of control flow', async () => {
+		await hydrateComponent(
+			ServerComponents.IfCodeBlockControlFlow,
+			ClientComponents.IfCodeBlockControlFlow,
+		);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.after')).not.toBeNull();
+	});
+
+	it('hydrates an @else branch fragment of control-flow siblings', async () => {
+		await hydrateComponent(ServerComponents.IfElseFragment, ClientComponents.IfElseFragment);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.after')).not.toBeNull();
+		expect(container.querySelector('.loading')).toBeNull();
+	});
+
+	it('hydrates a fragment-in-element nested in a control-flow branch', async () => {
+		await hydrateComponent(ServerComponents.IfDivFragment, ClientComponents.IfDivFragment);
+		expect(Array.from(container.querySelectorAll('.muze')).map((n) => n.textContent)).toEqual([
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.after')).not.toBeNull();
+	});
+});