ripple 0.2.208 → 0.2.210

package/tests/hydration/for.test.js

@@ -114,4 +114,367 @@ describe('hydration > for blocks', () => {
 		expect(user2?.querySelector('.name')?.textContent).toBe('Bob');
 		expect(user2?.querySelector('.role')?.textContent).toBe('User');
 	});
+
+	it('hydrates keyed for loop and reorders items', async () => {
+		await hydrateComponent(
+			ServerComponents.KeyedForLoopReorder,
+			ClientComponents.KeyedForLoopReorder,
+		);
+
+		// Initial order: First, Second, Third
+		let listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('First');
+		expect(listItems[1]?.textContent).toBe('Second');
+		expect(listItems[2]?.textContent).toBe('Third');
+
+		// Reorder to: Third, First, Second
+		container.querySelector('.reorder')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('Third');
+		expect(listItems[1]?.textContent).toBe('First');
+		expect(listItems[2]?.textContent).toBe('Second');
+	});
+
+	it('hydrates keyed for loop and updates item properties', async () => {
+		await hydrateComponent(
+			ServerComponents.KeyedForLoopUpdate,
+			ClientComponents.KeyedForLoopUpdate,
+		);
+
+		expect(container.querySelector('.item-1')?.textContent).toBe('Item 1');
+		expect(container.querySelector('.item-2')?.textContent).toBe('Item 2');
+
+		container.querySelector('.update')?.click();
+		flushSync();
+
+		expect(container.querySelector('.item-1')?.textContent).toBe('Updated');
+		expect(container.querySelector('.item-2')?.textContent).toBe('Item 2');
+	});
+
+	it('hydrates for loop with mixed add/remove/reorder operations', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopMixedOperations,
+			ClientComponents.ForLoopMixedOperations,
+		);
+
+		// Initial: A, B, C, D
+		let listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(4);
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[3]?.textContent).toBe('D');
+
+		// After shuffle: D, C, A, E
+		container.querySelector('.shuffle')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(4);
+		expect(listItems[0]?.textContent).toBe('D');
+		expect(listItems[1]?.textContent).toBe('C');
+		expect(listItems[2]?.textContent).toBe('A');
+		expect(listItems[3]?.textContent).toBe('E');
+	});
+
+	it('hydrates for loop inside if block', async () => {
+		await hydrateComponent(ServerComponents.ForLoopInsideIf, ClientComponents.ForLoopInsideIf);
+
+		// Initially visible with X, Y, Z
+		expect(container.querySelector('.list')).not.toBeNull();
+		expect(container.querySelectorAll('li').length).toBe(3);
+
+		// Add item while visible
+		container.querySelector('.add')?.click();
+		flushSync();
+		expect(container.querySelectorAll('li').length).toBe(4);
+
+		// Hide list
+		container.querySelector('.toggle')?.click();
+		flushSync();
+		expect(container.querySelector('.list')).toBeNull();
+
+		// Show list again
+		container.querySelector('.toggle')?.click();
+		flushSync();
+		expect(container.querySelector('.list')).not.toBeNull();
+		expect(container.querySelectorAll('li').length).toBe(4);
+	});
+
+	it('hydrates for loop transitioning from empty to populated', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopEmptyToPopulated,
+			ClientComponents.ForLoopEmptyToPopulated,
+		);
+
+		expect(container.querySelector('.list')?.querySelectorAll('li').length).toBe(0);
+
+		container.querySelector('.populate')?.click();
+		flushSync();
+
+		const listItems = container.querySelector('.list')?.querySelectorAll('li');
+		expect(listItems?.length).toBe(3);
+		expect(listItems?.[0]?.textContent).toBe('One');
+		expect(listItems?.[1]?.textContent).toBe('Two');
+		expect(listItems?.[2]?.textContent).toBe('Three');
+	});
+
+	it('hydrates for loop transitioning from populated to empty', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopPopulatedToEmpty,
+			ClientComponents.ForLoopPopulatedToEmpty,
+		);
+
+		expect(container.querySelector('.list')?.querySelectorAll('li').length).toBe(3);
+
+		container.querySelector('.clear')?.click();
+		flushSync();
+
+		expect(container.querySelector('.list')?.querySelectorAll('li').length).toBe(0);
+	});
+
+	it('hydrates nested for loops with reactivity', async () => {
+		await hydrateComponent(
+			ServerComponents.NestedForLoopReactive,
+			ClientComponents.NestedForLoopReactive,
+		);
+
+		// Initial: 2x2 grid
+		expect(container.querySelectorAll('[class^="row-"]').length).toBe(2);
+		expect(container.querySelector('.cell-0-0')?.textContent).toBe('1');
+
+		// Add row
+		container.querySelector('.add-row')?.click();
+		flushSync();
+		expect(container.querySelectorAll('[class^="row-"]').length).toBe(3);
+		expect(container.querySelector('.cell-2-0')?.textContent).toBe('5');
+		expect(container.querySelector('.cell-2-1')?.textContent).toBe('6');
+
+		// Update cell
+		container.querySelector('.update-cell')?.click();
+		flushSync();
+		expect(container.querySelector('.cell-0-0')?.textContent).toBe('99');
+	});
+
+	it('hydrates for loop with deeply nested data', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopDeeplyNested,
+			ClientComponents.ForLoopDeeplyNested,
+		);
+
+		// Check department structure
+		expect(container.querySelector('.dept-d1 .dept-name')?.textContent).toBe('Engineering');
+		expect(container.querySelector('.dept-d2 .dept-name')?.textContent).toBe('Design');
+
+		// Check team structure
+		expect(container.querySelector('.team-t1 .team-name')?.textContent).toBe('Frontend');
+		expect(container.querySelector('.team-t2 .team-name')?.textContent).toBe('Backend');
+		expect(container.querySelector('.team-t3 .team-name')?.textContent).toBe('UX');
+
+		// Check members
+		const frontendMembers = container.querySelectorAll('.team-t1 .member');
+		expect(frontendMembers.length).toBe(2);
+		expect(frontendMembers[0]?.textContent).toBe('Alice');
+		expect(frontendMembers[1]?.textContent).toBe('Bob');
+
+		const uxMembers = container.querySelectorAll('.team-t3 .member');
+		expect(uxMembers.length).toBe(3);
+	});
+
+	it('hydrates for loop with index that updates on prepend', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopIndexUpdate,
+			ClientComponents.ForLoopIndexUpdate,
+		);
+
+		// Initial: [0] First, [1] Second, [2] Third
+		let listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('[0] First');
+		expect(listItems[1]?.textContent).toBe('[1] Second');
+		expect(listItems[2]?.textContent).toBe('[2] Third');
+
+		// Prepend: [0] Zeroth, [1] First, [2] Second, [3] Third
+		container.querySelector('.prepend')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(4);
+		expect(listItems[0]?.textContent).toBe('[0] Zeroth');
+		expect(listItems[1]?.textContent).toBe('[1] First');
+		expect(listItems[2]?.textContent).toBe('[2] Second');
+		expect(listItems[3]?.textContent).toBe('[3] Third');
+	});
+
+	it('hydrates keyed for loop with index', async () => {
+		await hydrateComponent(
+			ServerComponents.KeyedForLoopWithIndex,
+			ClientComponents.KeyedForLoopWithIndex,
+		);
+
+		// Initial order
+		let listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('[0] a: Alpha');
+		expect(listItems[1]?.textContent).toBe('[1] b: Beta');
+		expect(listItems[2]?.textContent).toBe('[2] c: Gamma');
+		expect(listItems[0]?.getAttribute('data-index')).toBe('0');
+
+		// Rotate: Beta, Gamma, Alpha
+		container.querySelector('.reorder')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('[0] b: Beta');
+		expect(listItems[1]?.textContent).toBe('[1] c: Gamma');
+		expect(listItems[2]?.textContent).toBe('[2] a: Alpha');
+		expect(listItems[0]?.getAttribute('data-index')).toBe('0');
+		expect(listItems[2]?.getAttribute('data-index')).toBe('2');
+	});
+
+	it('hydrates for loop with sibling elements', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopWithSiblings,
+			ClientComponents.ForLoopWithSiblings,
+		);
+
+		expect(container.querySelector('.before')?.textContent).toBe('Before');
+		expect(container.querySelector('.after')?.textContent).toBe('After');
+		expect(container.querySelectorAll('[class^="item-"]').length).toBe(2);
+
+		container.querySelector('.add')?.click();
+		flushSync();
+
+		expect(container.querySelector('.before')?.textContent).toBe('Before');
+		expect(container.querySelector('.after')?.textContent).toBe('After');
+		expect(container.querySelectorAll('[class^="item-"]').length).toBe(3);
+		expect(container.querySelector('.item-C')).not.toBeNull();
+	});
+
+	it('hydrates for loop items with their own reactive state', async () => {
+		await hydrateComponent(ServerComponents.ForLoopItemState, ClientComponents.ForLoopItemState);
+
+		// Initial state: all unchecked
+		const checkboxes = container.querySelectorAll('.checkbox');
+		expect(checkboxes.length).toBe(3);
+
+		expect(container.querySelector('.todo-1 span')?.className).toBe('pending');
+		expect(container.querySelector('.todo-2 span')?.className).toBe('pending');
+
+		// Check the first todo
+		/** @type {HTMLInputElement} */ (checkboxes[0])?.click();
+		flushSync();
+
+		expect(container.querySelector('.todo-1 span')?.className).toBe('completed');
+		expect(container.querySelector('.todo-2 span')?.className).toBe('pending');
+	});
+
+	it('hydrates for loop with single item', async () => {
+		await hydrateComponent(ServerComponents.ForLoopSingleItem, ClientComponents.ForLoopSingleItem);
+
+		const listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(1);
+		expect(listItems[0]?.textContent).toBe('Only');
+	});
+
+	it('hydrates for loop adding at beginning', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopAddAtBeginning,
+			ClientComponents.ForLoopAddAtBeginning,
+		);
+
+		let listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(2);
+		expect(listItems[0]?.textContent).toBe('B');
+
+		container.querySelector('.prepend')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(3);
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[1]?.textContent).toBe('B');
+		expect(listItems[2]?.textContent).toBe('C');
+	});
+
+	it('hydrates for loop adding in middle', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopAddInMiddle,
+			ClientComponents.ForLoopAddInMiddle,
+		);
+
+		let listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(2);
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[1]?.textContent).toBe('C');
+
+		container.querySelector('.insert')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(3);
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[1]?.textContent).toBe('B');
+		expect(listItems[2]?.textContent).toBe('C');
+	});
+
+	it('hydrates for loop removing from middle', async () => {
+		await hydrateComponent(
+			ServerComponents.ForLoopRemoveFromMiddle,
+			ClientComponents.ForLoopRemoveFromMiddle,
+		);
+
+		let listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(3);
+		expect(listItems[1]?.textContent).toBe('B');
+
+		container.querySelector('.remove-middle')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems.length).toBe(2);
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[1]?.textContent).toBe('C');
+	});
+
+	it('hydrates for loop with large list', async () => {
+		await hydrateComponent(ServerComponents.ForLoopLargeList, ClientComponents.ForLoopLargeList);
+
+		const listItems = container.querySelectorAll('.large-list li');
+		expect(listItems.length).toBe(50);
+		expect(listItems[0]?.textContent).toBe('Item 1');
+		expect(listItems[49]?.textContent).toBe('Item 50');
+	});
+
+	it('hydrates for loop with swap operation', async () => {
+		await hydrateComponent(ServerComponents.ForLoopSwap, ClientComponents.ForLoopSwap);
+
+		let listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[3]?.textContent).toBe('D');
+
+		container.querySelector('.swap')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('D');
+		expect(listItems[1]?.textContent).toBe('B');
+		expect(listItems[2]?.textContent).toBe('C');
+		expect(listItems[3]?.textContent).toBe('A');
+	});
+
+	it('hydrates for loop with reverse operation', async () => {
+		await hydrateComponent(ServerComponents.ForLoopReverse, ClientComponents.ForLoopReverse);
+
+		let listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('A');
+		expect(listItems[3]?.textContent).toBe('D');
+
+		container.querySelector('.reverse')?.click();
+		flushSync();
+
+		listItems = container.querySelectorAll('li');
+		expect(listItems[0]?.textContent).toBe('D');
+		expect(listItems[1]?.textContent).toBe('C');
+		expect(listItems[2]?.textContent).toBe('B');
+		expect(listItems[3]?.textContent).toBe('A');
+	});
 });

package/tests/hydration/head.test.js

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/head.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/head.js';
+
+describe('hydration > head', () => {
+	beforeEach(() => {
+		// Clean up head elements from previous tests (except title)
+		const headChildren = Array.from(document.head.children);
+		for (const child of headChildren) {
+			if (child.tagName !== 'TITLE') {
+				child.remove();
+			}
+		}
+		// Reset title
+		document.title = '';
+	});
+
+	it('hydrates static title element', async () => {
+		await hydrateComponent(ServerComponents.StaticTitle, ClientComponents.StaticTitle);
+		expect(document.title).toBe('Static Test Title');
+		expect(container.innerHTML).toBeHtml('<div>Content</div>');
+	});
+
+	it('hydrates reactive title element', async () => {
+		await hydrateComponent(ServerComponents.ReactiveTitle, ClientComponents.ReactiveTitle);
+		expect(document.title).toBe('Initial Title');
+		expect(container.querySelector('span')?.textContent).toBe('Initial Title');
+	});
+
+	it('hydrates multiple head elements', async () => {
+		await hydrateComponent(
+			ServerComponents.MultipleHeadElements,
+			ClientComponents.MultipleHeadElements,
+		);
+		expect(document.title).toBe('Page Title');
+
+		// Check meta tag
+		const metaTag = document.querySelector('meta[name="description"]');
+		expect(metaTag?.getAttribute('content')).toBe('Page description');
+
+		// Check link tag
+		const linkTag = document.querySelector('link[rel="stylesheet"]');
+		expect(linkTag?.getAttribute('href')).toBe('/styles.css');
+
+		expect(container.innerHTML).toBeHtml('<div>Page content</div>');
+	});
+
+	it('hydrates reactive meta tags', async () => {
+		await hydrateComponent(ServerComponents.ReactiveMetaTags, ClientComponents.ReactiveMetaTags);
+		expect(document.title).toBe('My Page');
+
+		// Note: Reactive attributes in head elements are not fully supported yet during hydration
+		// The meta tag is created but the content attribute may not be set correctly during hydration
+		// This is a known limitation that will be addressed in future updates
+
+		expect(container.querySelector('div')?.textContent).toBe('Initial description');
+	});
+
+	it('hydrates title with template literal', async () => {
+		await hydrateComponent(ServerComponents.TitleWithTemplate, ClientComponents.TitleWithTemplate);
+		expect(document.title).toBe('Hello World!');
+		expect(container.querySelector('div')?.textContent).toBe('World');
+	});
+
+	it('hydrates empty title', async () => {
+		await hydrateComponent(ServerComponents.EmptyTitle, ClientComponents.EmptyTitle);
+		expect(document.title).toBe('');
+		expect(container.innerHTML).toBeHtml('<div>Empty title test</div>');
+	});
+
+	it('hydrates title with conditional content', async () => {
+		await hydrateComponent(ServerComponents.ConditionalTitle, ClientComponents.ConditionalTitle);
+		expect(document.title).toBe('App - Main Page');
+		expect(container.querySelector('div')?.textContent).toBe('Main Page');
+	});
+
+	it('hydrates title with computed value', async () => {
+		await hydrateComponent(ServerComponents.ComputedTitle, ClientComponents.ComputedTitle);
+		expect(document.title).toBe('Count: 0');
+		expect(container.querySelector('span')?.textContent).toBe('0');
+	});
+
+	it('hydrates multiple head blocks', async () => {
+		await hydrateComponent(
+			ServerComponents.MultipleHeadBlocks,
+			ClientComponents.MultipleHeadBlocks,
+		);
+		expect(document.title).toBe('First Head');
+
+		const metaTag = document.querySelector('meta[name="author"]');
+		expect(metaTag?.getAttribute('content')).toBe('Test Author');
+
+		expect(container.innerHTML).toBeHtml('<div>Content</div>');
+	});
+
+	it('hydrates simple head element', async () => {
+		await hydrateComponent(ServerComponents.HeadWithStyle, ClientComponents.HeadWithStyle);
+		expect(document.title).toBe('Styled Page');
+		expect(container.innerHTML).toBeHtml('<div>Styled content</div>');
+	});
+});

package/tests/hydration/html.test.js

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/html.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/html.js';
+
+describe('hydration > html tags', () => {
+	it('hydrates static html content', async () => {
+		await hydrateComponent(ServerComponents.StaticHtml, ClientComponents.StaticHtml);
+		expect(container.innerHTML).toBeHtml('<div><p><strong>Bold</strong> text</p></div>');
+	});
+
+	it('hydrates dynamic html content', async () => {
+		await hydrateComponent(ServerComponents.DynamicHtml, ClientComponents.DynamicHtml);
+		expect(container.innerHTML).toBeHtml('<div><p>Dynamic <span>HTML</span> content</p></div>');
+	});
+
+	it('hydrates empty html content', async () => {
+		await hydrateComponent(ServerComponents.EmptyHtml, ClientComponents.EmptyHtml);
+		expect(container.innerHTML).toBeHtml('<div></div>');
+	});
+
+	it('hydrates complex nested html', async () => {
+		await hydrateComponent(ServerComponents.ComplexHtml, ClientComponents.ComplexHtml);
+		expect(container.innerHTML).toBeHtml(
+			'<section><div class="nested"><span>Nested <em>content</em></span></div></section>',
+		);
+	});
+
+	it('hydrates multiple html blocks', async () => {
+		await hydrateComponent(ServerComponents.MultipleHtml, ClientComponents.MultipleHtml);
+		expect(container.innerHTML).toBeHtml(
+			'<div><p>First paragraph</p><p>Second paragraph</p></div>',
+		);
+	});
+
+	it('hydrates html with reactivity', async () => {
+		const { container } = await hydrateComponent(
+			ServerComponents.HtmlWithReactivity,
+			ClientComponents.HtmlWithReactivity,
+		);
+		expect(container.innerHTML).toBeHtml('<div><p>Count: 0</p><button>Increment</button></div>');
+	});
+});

package/tests/hydration/portal.test.js

@@ -0,0 +1,71 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { flushSync } from 'ripple';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+// Import server-compiled components
+import * as ServerComponents from './compiled/server/portal.js';
+// Import client-compiled components
+import * as ClientComponents from './compiled/client/portal.js';
+
+describe('hydration > portals', () => {
+	afterEach(() => {
+		// Clean up any leftover portal content from document.body
+		const portals = document.body.querySelectorAll('.portal-content');
+		portals.forEach((el) => el.remove());
+	});
+
+	it('hydrates component with portal gracefully without breaking', async () => {
+		// The main goal is that hydration doesn't throw errors
+		await hydrateComponent(ServerComponents.SimplePortal, ClientComponents.SimplePortal);
+
+		// Flush any pending updates
+		flushSync();
+
+		// Main content should be in the container
+		expect(container.querySelector('.container')).toBeTruthy();
+		expect(container.querySelector('h1')?.textContent).toBe('Main Content');
+
+		// Portal content should NOT be in the container (it's in document.body)
+		expect(container.querySelector('.portal-content')).toBeNull();
+
+		// Note: Portal content rendering to document.body during hydration may vary
+		// The important thing is that hydration doesn't break
+	});
+
+	it('hydrates component with portal and main content', async () => {
+		await hydrateComponent(
+			ServerComponents.PortalWithMainContent,
+			ClientComponents.PortalWithMainContent,
+		);
+
+		// Flush any pending updates
+		flushSync();
+
+		// Main content and footer should be in container
+		expect(container.querySelector('.main-content')?.textContent).toBe('Main page content');
+		expect(container.querySelector('.footer')?.textContent).toBe('Footer');
+
+		// Portal content should be in document.body
+		expect(document.body.querySelector('.portal-content')).toBeTruthy();
+		expect(document.body.querySelector('.portal-content')?.textContent).toBe('Modal content');
+	});
+
+	it('hydrates nested content with portal gracefully', async () => {
+		// The main goal is that hydration doesn't throw errors
+		await hydrateComponent(
+			ServerComponents.NestedContentWithPortal,
+			ClientComponents.NestedContentWithPortal,
+		);
+
+		// Flush any pending updates
+		flushSync();
+
+		// Nested content should be in container
+		expect(container.querySelector('.outer')).toBeTruthy();
+		expect(container.querySelector('.inner')).toBeTruthy();
+		expect(container.querySelector('span')?.textContent).toBe('Nested content');
+
+		// Portal content may or may not render during hydration - that's ok
+		// The important thing is no hydration errors
+	});
+});