ripple 0.2.210 → 0.2.212

package/tests/hydration/components/composite.ripple

@@ -0,0 +1,37 @@
+export component Layout({ children }) {
+	<div class="layout">
+		<children />
+	</div>
+}
+
+export component SingleChild() {
+	<div class="single">{'single'}</div>
+}
+
+export component MultiRootChild() {
+	<h1>{'title'}</h1>
+	<p>{'description'}</p>
+}
+
+export component EmptyLayout() {
+	<Layout />
+}
+
+export component LayoutWithSingleChild() {
+	<Layout>
+		<SingleChild />
+	</Layout>
+}
+
+export component LayoutWithMultipleChildren() {
+	<Layout>
+		<SingleChild />
+		<div class="extra">{'extra'}</div>
+	</Layout>
+}
+
+export component LayoutWithMultiRootChild() {
+	<Layout>
+		<MultiRootChild />
+	</Layout>
+}

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

@@ -0,0 +1,196 @@
+// Minimal repro for hydration issue with if block containing children
+// Based on SidebarGroup pattern from website-new
+import { track } from 'ripple';
+
+export component IfWithChildren({ children }: { children: any }) {
+	let expanded = track(true);
+
+	<div class="container">
+		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
+		if (@expanded) {
+			<div class="content">
+				<children />
+			</div>
+		}
+	</div>
+}
+
+export component ChildItem({ text }: { text: string }) {
+	<div class="item">{text}</div>
+}
+
+export component TestIfWithChildren() {
+	<IfWithChildren>
+		<ChildItem text="Item 1" />
+		<ChildItem text="Item 2" />
+	</IfWithChildren>
+}
+
+// Simpler variant - if block with static children
+export component IfWithStaticChildren() {
+	let expanded = track(true);
+
+	<div class="container">
+		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
+		if (@expanded) {
+			<div class="content">
+				<span>{'Static child 1'}</span>
+				<span>{'Static child 2'}</span>
+			</div>
+		}
+	</div>
+}
+
+// Variant with sibling elements before the if block (like SidebarGroup)
+export component IfWithSiblingsAndChildren({ children }: { children: any }) {
+	let expanded = track(true);
+
+	<section class="group">
+		<div class="item" role="button" onClick={() => (@expanded = !@expanded)}>
+			<div class="indicator" />
+			<h2 class="text">{'Title'}</h2>
+			<div class="caret">
+				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+					<path d="m9 18 6-6-6-6" />
+				</svg>
+			</div>
+		</div>
+		if (@expanded) {
+			<div class="items">
+				<children />
+			</div>
+		}
+	</section>
+}
+
+export component TestIfWithSiblingsAndChildren() {
+	<IfWithSiblingsAndChildren>
+		<ChildItem text="Item A" />
+		<ChildItem text="Item B" />
+	</IfWithSiblingsAndChildren>
+}
+
+// Test case for hydration pop bug: element with nested children followed by dynamic if sibling
+// This tests that hydrate_node is properly restored after processing an element's children
+// before navigating to a dynamic sibling (if/for/switch)
+export component ElementWithChildrenThenIf() {
+	let show = track(true);
+
+	<div class="wrapper">
+		<div class="nested-parent">
+			<div class="nested-child">
+				<span class="deep">{'Deep content'}</span>
+			</div>
+		</div>
+		if (@show) {
+			<div class="conditional">{'Conditional content'}</div>
+		}
+	</div>
+
+	<button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>
+}
+
+// More complex: multiple levels of nesting before if sibling
+export component DeepNestingThenIf() {
+	let visible = track(true);
+
+	<section class="outer">
+		<article class="middle">
+			<div class="inner">
+				<p class="leaf">
+					<strong>{'Bold'}</strong>
+					<em>{'Italic'}</em>
+				</p>
+			</div>
+		</article>
+		if (@visible) {
+			<footer class="footer">{'Footer'}</footer>
+		}
+	</section>
+
+	<button class="btn" onClick={() => (@visible = !@visible)}>{'Toggle'}</button>
+}
+
+// Test case for CodeBlock pattern: element with only DOM element children (like buttons)
+// followed by another sibling element. This requires pop() to restore hydrate_node
+// because we descend into the first element to get the button children.
+export component DomElementChildrenThenSibling() {
+	let activeTab = track('code');
+
+	<div class="tabs">
+		<div class="tab-list">
+			<button
+				class="tab"
+				aria-selected={@activeTab === 'code' ? 'true' : 'false'}
+				onClick={() => (@activeTab = 'code')}
+			>
+				{'Code'}
+			</button>
+			<button
+				class="tab"
+				aria-selected={@activeTab === 'preview' ? 'true' : 'false'}
+				onClick={() => (@activeTab = 'preview')}
+			>
+				{'Preview'}
+			</button>
+		</div>
+		<div class="panel">
+			if (@activeTab === 'code') {
+				<pre class="code">{'const x = 1;'}</pre>
+			} else {
+				<div class="preview">{'Preview content'}</div>
+			}
+		</div>
+	</div>
+}
+
+// Test case for element with DOM children followed by static siblings that don't
+// generate sibling() calls. This was causing incorrect pop() generation before next().
+// Pattern: <ul> with dynamic <li> children -> static <h2> -> static <p> -> next()
+export component DomChildrenThenStaticSiblings() {
+	let count = track(0);
+
+	<div class="container">
+		<ul class="list">
+			<li class="item">
+				{'Item count: '}
+				{@count}
+			</li>
+			<li class="item">{'Another item'}</li>
+		</ul>
+		<h2 class="heading">{'Static Heading'}</h2>
+		<p class="para">{'Static paragraph'}</p>
+	</div>
+
+	<button class="inc" onClick={() => @count++}>{'Increment'}</button>
+}
+
+// Test case for completely static element children followed by static siblings.
+// Pattern from introduction page: <ul> with static <li> (strong, code, text)
+// followed by static <h2> and <p>. No pop() should be generated for these.
+export component StaticListThenStaticSiblings() {
+	<div class="wrapper">
+		<ul class="features">
+			<li>
+				<strong>{'Feature One'}</strong>
+				{': Description of feature one with '}
+				<code>{'code'}</code>
+				{' reference'}
+			</li>
+			<li>
+				<strong>{'Feature Two'}</strong>
+				{': Another feature description'}
+			</li>
+			<li>
+				<strong>{'Feature Three'}</strong>
+				{': Third feature'}
+			</li>
+		</ul>
+		<h2 class="section-heading">{'Section Heading'}</h2>
+		<p class="section-content">
+			{'Static paragraph with '}
+			<a href="/link">{'a link'}</a>
+			{' and more text.'}
+		</p>
+	</div>
+}

package/tests/hydration/composite.test.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+import * as ServerComponents from './compiled/server/composite.js';
+import * as ClientComponents from './compiled/client/composite.js';
+
+describe('hydration > composite', () => {
+	it('hydrates a layout with no children', async () => {
+		await hydrateComponent(ServerComponents.EmptyLayout, ClientComponents.EmptyLayout);
+		expect(container.innerHTML).toBeHtml('<div class=\"layout\"></div>');
+	});
+
+	it('hydrates a layout with a single child component', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithSingleChild,
+			ClientComponents.LayoutWithSingleChild,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><div class=\"single\">single</div></div>',
+		);
+	});
+
+	it('hydrates a layout with multiple children', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithMultipleChildren,
+			ClientComponents.LayoutWithMultipleChildren,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><div class=\"single\">single</div><div class=\"extra\">extra</div></div>',
+		);
+	});
+
+	it('hydrates a layout with a child that has multiple roots', async () => {
+		await hydrateComponent(
+			ServerComponents.LayoutWithMultiRootChild,
+			ClientComponents.LayoutWithMultiRootChild,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class=\"layout\"><h1>title</h1><p>description</p></div>',
+		);
+	});
+});

package/tests/hydration/if-children.test.js

@@ -0,0 +1,272 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'ripple';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/if-children.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/if-children.js';
+
+describe('hydration > if blocks with children', () => {
+	it('hydrates if block containing component children', async () => {
+		await hydrateComponent(
+			ServerComponents.TestIfWithChildren,
+			ClientComponents.TestIfWithChildren,
+		);
+
+		// Should render the children initially (expanded = true)
+		const items = container.querySelectorAll('.item');
+		expect(items.length).toBe(2);
+		expect(items[0]?.textContent).toBe('Item 1');
+		expect(items[1]?.textContent).toBe('Item 2');
+	});
+
+	it('hydrates if block with static children', async () => {
+		await hydrateComponent(
+			ServerComponents.IfWithStaticChildren,
+			ClientComponents.IfWithStaticChildren,
+		);
+
+		const content = container.querySelector('.content');
+		expect(content).not.toBeNull();
+		expect(content?.querySelectorAll('span').length).toBe(2);
+	});
+
+	it('toggles if block with component children after hydration', async () => {
+		await hydrateComponent(
+			ServerComponents.TestIfWithChildren,
+			ClientComponents.TestIfWithChildren,
+		);
+
+		// Initially expanded
+		expect(container.querySelectorAll('.item').length).toBe(2);
+
+		// Click to collapse
+		container.querySelector('.header')?.click();
+		flushSync();
+
+		// Children should be hidden
+		expect(container.querySelectorAll('.item').length).toBe(0);
+
+		// Click to expand
+		container.querySelector('.header')?.click();
+		flushSync();
+
+		// Children should be visible again
+		expect(container.querySelectorAll('.item').length).toBe(2);
+	});
+
+	it('hydrates if block with siblings and children (SidebarGroup pattern)', async () => {
+		await hydrateComponent(
+			ServerComponents.TestIfWithSiblingsAndChildren,
+			ClientComponents.TestIfWithSiblingsAndChildren,
+		);
+
+		// Should have the section structure
+		expect(container.querySelector('section.group')).not.toBeNull();
+		expect(container.querySelector('.item')).not.toBeNull();
+		expect(container.querySelector('.caret')).not.toBeNull();
+
+		// Children should be rendered inside .items
+		const items = container.querySelectorAll('.items .item');
+		expect(items.length).toBe(2);
+		expect(items[0]?.textContent).toBe('Item A');
+		expect(items[1]?.textContent).toBe('Item B');
+	});
+
+	it('toggles if block with siblings and children (SidebarGroup pattern)', async () => {
+		await hydrateComponent(
+			ServerComponents.TestIfWithSiblingsAndChildren,
+			ClientComponents.TestIfWithSiblingsAndChildren,
+		);
+
+		// Initially expanded
+		expect(container.querySelectorAll('.items .item').length).toBe(2);
+
+		// Click the .item div (not .item inside .items!) to toggle
+		container.querySelector('section.group > .item')?.click();
+		flushSync();
+
+		// Children should be hidden
+		expect(container.querySelector('.items')).toBeNull();
+
+		// Click to expand
+		container.querySelector('section.group > .item')?.click();
+		flushSync();
+
+		// Children should be visible again
+		expect(container.querySelectorAll('.items .item').length).toBe(2);
+	});
+
+	// Tests for hydration pop bug: element with nested children followed by dynamic if sibling
+	// This ensures hydrate_node is properly restored after processing an element's children
+	// before navigating to a dynamic sibling
+
+	it('hydrates element with nested children followed by if sibling', async () => {
+		await hydrateComponent(
+			ServerComponents.ElementWithChildrenThenIf,
+			ClientComponents.ElementWithChildrenThenIf,
+		);
+
+		// Verify structure hydrated correctly
+		expect(container.querySelector('.nested-parent')).not.toBeNull();
+		expect(container.querySelector('.nested-child')).not.toBeNull();
+		expect(container.querySelector('.deep')?.textContent).toBe('Deep content');
+		expect(container.querySelector('.conditional')?.textContent).toBe('Conditional content');
+	});
+
+	it('toggles if sibling after element with nested children', async () => {
+		await hydrateComponent(
+			ServerComponents.ElementWithChildrenThenIf,
+			ClientComponents.ElementWithChildrenThenIf,
+		);
+
+		// Initially visible
+		expect(container.querySelector('.conditional')).not.toBeNull();
+
+		// Toggle off
+		container.querySelector('.toggle')?.click();
+		flushSync();
+
+		// If content should be hidden, nested content should remain
+		expect(container.querySelector('.conditional')).toBeNull();
+		expect(container.querySelector('.deep')?.textContent).toBe('Deep content');
+
+		// Toggle back on
+		container.querySelector('.toggle')?.click();
+		flushSync();
+
+		expect(container.querySelector('.conditional')?.textContent).toBe('Conditional content');
+	});
+
+	it('hydrates deeply nested element followed by if sibling', async () => {
+		await hydrateComponent(ServerComponents.DeepNestingThenIf, ClientComponents.DeepNestingThenIf);
+
+		// Verify deep nesting structure
+		expect(container.querySelector('.outer')).not.toBeNull();
+		expect(container.querySelector('.middle')).not.toBeNull();
+		expect(container.querySelector('.inner')).not.toBeNull();
+		expect(container.querySelector('.leaf strong')?.textContent).toBe('Bold');
+		expect(container.querySelector('.leaf em')?.textContent).toBe('Italic');
+		expect(container.querySelector('.footer')?.textContent).toBe('Footer');
+	});
+
+	it('toggles if sibling after deeply nested element', async () => {
+		await hydrateComponent(ServerComponents.DeepNestingThenIf, ClientComponents.DeepNestingThenIf);
+
+		// Initially visible
+		expect(container.querySelector('.footer')).not.toBeNull();
+
+		// Toggle off
+		container.querySelector('.btn')?.click();
+		flushSync();
+
+		// Footer should be hidden, nested content should remain
+		expect(container.querySelector('.footer')).toBeNull();
+		expect(container.querySelector('.leaf strong')?.textContent).toBe('Bold');
+
+		// Toggle back on
+		container.querySelector('.btn')?.click();
+		flushSync();
+
+		expect(container.querySelector('.footer')?.textContent).toBe('Footer');
+	});
+
+	// Test for CodeBlock pattern: element with only DOM element children (buttons)
+	// followed by another sibling element
+
+	it('hydrates element with DOM element children followed by sibling (CodeBlock pattern)', async () => {
+		await hydrateComponent(
+			ServerComponents.DomElementChildrenThenSibling,
+			ClientComponents.DomElementChildrenThenSibling,
+		);
+
+		// Verify structure hydrated correctly
+		expect(container.querySelector('.tabs')).not.toBeNull();
+		expect(container.querySelector('.tab-list')).not.toBeNull();
+		expect(container.querySelectorAll('.tab').length).toBe(2);
+		expect(container.querySelector('.panel')).not.toBeNull();
+		expect(container.querySelector('.code')?.textContent).toBe('const x = 1;');
+	});
+
+	it('switches tabs in CodeBlock pattern after hydration', async () => {
+		await hydrateComponent(
+			ServerComponents.DomElementChildrenThenSibling,
+			ClientComponents.DomElementChildrenThenSibling,
+		);
+
+		// Initially on 'code' tab
+		expect(container.querySelector('.code')).not.toBeNull();
+		expect(container.querySelector('.preview')).toBeNull();
+
+		// Click preview tab
+		const tabs = container.querySelectorAll('.tab');
+		tabs[1]?.click();
+		flushSync();
+
+		// Should show preview, hide code
+		expect(container.querySelector('.code')).toBeNull();
+		expect(container.querySelector('.preview')?.textContent).toBe('Preview content');
+
+		// Click code tab
+		tabs[0]?.click();
+		flushSync();
+
+		// Should show code again
+		expect(container.querySelector('.code')?.textContent).toBe('const x = 1;');
+	});
+
+	// Test for element with DOM children followed by static siblings that don't
+	// generate sibling() calls. This was causing incorrect pop() generation before next().
+	it('hydrates element with DOM children followed by static siblings', async () => {
+		await hydrateComponent(
+			ServerComponents.DomChildrenThenStaticSiblings,
+			ClientComponents.DomChildrenThenStaticSiblings,
+		);
+
+		// Verify structure hydrated correctly
+		expect(container.querySelector('.container')).not.toBeNull();
+		expect(container.querySelector('.list')).not.toBeNull();
+		expect(container.querySelectorAll('.item').length).toBe(2);
+		expect(container.querySelector('.heading')?.textContent).toBe('Static Heading');
+		expect(container.querySelector('.para')?.textContent).toBe('Static paragraph');
+	});
+
+	it('updates reactive content in element with DOM children followed by static siblings', async () => {
+		await hydrateComponent(
+			ServerComponents.DomChildrenThenStaticSiblings,
+			ClientComponents.DomChildrenThenStaticSiblings,
+		);
+
+		// Initially count is 0
+		const items = container.querySelectorAll('.item');
+		expect(items[0]?.textContent).toBe('Item count: 0');
+
+		// Increment count
+		container.querySelector('.inc')?.click();
+		flushSync();
+
+		// Count should update, static siblings should remain unchanged
+		expect(items[0]?.textContent).toBe('Item count: 1');
+		expect(container.querySelector('.heading')?.textContent).toBe('Static Heading');
+		expect(container.querySelector('.para')?.textContent).toBe('Static paragraph');
+	});
+
+	// Test for completely static content - introduction page pattern
+	// No pop() should be generated for static elements
+	it('hydrates static list followed by static siblings (intro page pattern)', async () => {
+		await hydrateComponent(
+			ServerComponents.StaticListThenStaticSiblings,
+			ClientComponents.StaticListThenStaticSiblings,
+		);
+
+		// Verify static structure hydrated correctly
+		expect(container.querySelector('.wrapper')).not.toBeNull();
+		expect(container.querySelector('.features')).not.toBeNull();
+		expect(container.querySelectorAll('li').length).toBe(3);
+		expect(container.querySelector('li strong')?.textContent).toBe('Feature One');
+		expect(container.querySelector('li code')?.textContent).toBe('code');
+		expect(container.querySelector('.section-heading')?.textContent).toBe('Section Heading');
+		expect(container.querySelector('.section-content a')?.textContent).toBe('a link');
+	});
+});