ripple 0.2.208 → 0.2.210

package/tests/client/try.test.ripple

@@ -0,0 +1,69 @@
+import { flushSync, track, TrackedArray } from 'ripple';
+
+describe('try block', () => {
+	it('does not crash when async component is used inside try/pending', async () => {
+		component App() {
+			try {
+				<AsyncChild />
+			} pending {
+				<p>{'loading...'}</p>
+			}
+		}
+
+		component AsyncChild() {
+			let data = await Promise.resolve(['a', 'b', 'c']);
+
+			<ul>
+				for (let item of data) {
+					<li>{item}</li>
+				}
+			</ul>
+		}
+
+		render(App);
+
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		const items = container.querySelectorAll('li');
+		expect(items.length).toBe(3);
+		expect(items[0].textContent).toBe('a');
+		expect(items[1].textContent).toBe('b');
+		expect(items[2].textContent).toBe('c');
+	});
+
+	it(
+		'does not crash when async component with tracked state is used inside try/pending',
+		async () => {
+			component App() {
+				let query = track('');
+
+				try {
+					<FilteredList {query} />
+				} pending {
+					<p>{'loading...'}</p>
+				}
+			}
+
+			component FilteredList({ query }: { query: any }) {
+				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
+				let list = TrackedArray.from(items);
+				let filtered = track(() => list.filter((item: string) => item.includes(@query)));
+
+				<ul>
+					for (let item of @filtered) {
+						<li>{item}</li>
+					}
+				</ul>
+			}
+
+			render(App);
+
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			flushSync();
+
+			const listItems = container.querySelectorAll('li');
+			expect(listItems.length).toBe(3);
+		},
+	);
+});

package/tests/client/typescript-generics.test.ripple

@@ -120,7 +120,7 @@ describe('generic patterns', () => {
 		component App() {
 			function getBuilder() {
 				return <T,>() => ({
-					build<V,T,U>(): { build: () => V; data: T; key: U } {
+					build<V, T, U>(): { build: () => V; data: T; key: U } {
 						return {
 							build(): V {
 								return 'test' as V;

package/tests/client/url/url.derived.test.ripple

@@ -7,7 +7,7 @@ describe('TrackedURL > derived', () => {
 			let userId = track(() => url.pathname.split('/').pop());
 			let activeTab = track(() => url.searchParams.get('tab'));
 
-			<button onClick={() => url.pathname = '/users/456'}>{'Change User'}</button>
+			<button onClick={() => (url.pathname = '/users/456')}>{'Change User'}</button>
 			<button onClick={() => url.searchParams.set('tab', 'settings')}>{'Change Tab'}</button>
 			<pre>{`User ID: ${@userId}`}</pre>
 			<pre>{`Active Tab: ${@activeTab}`}</pre>

package/tests/client/url/url.parsing.test.ripple

@@ -85,7 +85,7 @@ describe('TrackedURL > parsing', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://192.168.1.1:8080/path');
 
-			<button onClick={() => url.hostname = '10.0.0.1'}>{'Change IP'}</button>
+			<button onClick={() => (url.hostname = '10.0.0.1')}>{'Change IP'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.hostname}</pre>
 		}
@@ -110,7 +110,7 @@ describe('TrackedURL > parsing', () => {
 		component URLTest() {
 			const url = new TrackedURL('http://localhost:3000/api/data');
 
-			<button onClick={() => url.port = '8080'}>{'Change Port'}</button>
+			<button onClick={() => (url.port = '8080')}>{'Change Port'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.hostname}</pre>
 			<pre>{url.port}</pre>
@@ -138,7 +138,7 @@ describe('TrackedURL > parsing', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/api/v1/users/123/profile');
 
-			<button onClick={() => url.pathname = '/api/v2/users/456/settings'}>{'Change Path'}</button>
+			<button onClick={() => (url.pathname = '/api/v2/users/456/settings')}>{'Change Path'}</button>
 			<pre>{url.pathname}</pre>
 			<pre>{url.href}</pre>
 		}

package/tests/client/url/url.partial-removal.test.ripple

@@ -7,7 +7,7 @@ describe('TrackedURL > partials/removal', () => {
 
 			<pre>{url.port}</pre>
 			<pre>{url.host}</pre>
-			<button onClick={() => url.port = '8080'}>{'Add Port'}</button>
+			<button onClick={() => (url.port = '8080')}>{'Add Port'}</button>
 		}
 
 		render(URLTest);
@@ -56,7 +56,7 @@ describe('TrackedURL > partials/removal', () => {
 			const url = new TrackedURL('https://example.com/path');
 
 			<pre>{url.hash}</pre>
-			<button onClick={() => url.hash = '#section'}>{'Add Hash'}</button>
+			<button onClick={() => (url.hash = '#section')}>{'Add Hash'}</button>
 		}
 
 		render(URLTest);
@@ -77,7 +77,7 @@ describe('TrackedURL > partials/removal', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com:8080/path');
 
-			<button onClick={() => url.port = ''}>{'Remove Port'}</button>
+			<button onClick={() => (url.port = '')}>{'Remove Port'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.port}</pre>
 		}
@@ -102,7 +102,7 @@ describe('TrackedURL > partials/removal', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path#section');
 
-			<button onClick={() => url.hash = ''}>{'Remove Hash'}</button>
+			<button onClick={() => (url.hash = '')}>{'Remove Hash'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.hash}</pre>
 		}
@@ -129,7 +129,7 @@ describe('TrackedURL > partials/removal', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path?foo=bar');
 
-			<button onClick={() => url.search = ''}>{'Remove Search'}</button>
+			<button onClick={() => (url.search = '')}>{'Remove Search'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.search}</pre>
 			<pre>{url.searchParams.size}</pre>
@@ -159,7 +159,7 @@ describe('TrackedURL > partials/removal', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path');
 
-			<button onClick={() => url.hash = 'section'}>{'Set Hash'}</button>
+			<button onClick={() => (url.hash = 'section')}>{'Set Hash'}</button>
 			<pre>{url.hash}</pre>
 			<pre>{url.href}</pre>
 		}
@@ -185,7 +185,7 @@ describe('TrackedURL > partials/removal', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path');
 
-			<button onClick={() => url.search = 'foo=bar'}>{'Set Search'}</button>
+			<button onClick={() => (url.search = 'foo=bar')}>{'Set Search'}</button>
 			<pre>{url.search}</pre>
 			<pre>{url.href}</pre>
 		}

package/tests/client/url/url.reactivity.test.ripple

@@ -5,7 +5,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path');
 
-			<button onClick={() => url.protocol = 'http:'}>{'Change Protocol'}</button>
+			<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.protocol}</pre>
 			<pre>{url.origin}</pre>
@@ -33,7 +33,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path');
 
-			<button onClick={() => url.hostname = 'newdomain.com'}>{'Change Hostname'}</button>
+			<button onClick={() => (url.hostname = 'newdomain.com')}>{'Change Hostname'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.hostname}</pre>
 			<pre>{url.host}</pre>
@@ -61,7 +61,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com:8080/path');
 
-			<button onClick={() => url.port = '9090'}>{'Change Port'}</button>
+			<button onClick={() => (url.port = '9090')}>{'Change Port'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.port}</pre>
 			<pre>{url.host}</pre>
@@ -89,7 +89,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com:8080/path');
 
-			<button onClick={() => url.host = 'newdomain.com:9090'}>{'Change Host'}</button>
+			<button onClick={() => (url.host = 'newdomain.com:9090')}>{'Change Host'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.host}</pre>
 			<pre>{url.hostname}</pre>
@@ -122,7 +122,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/old-path');
 
-			<button onClick={() => url.pathname = '/new-path'}>{'Change Pathname'}</button>
+			<button onClick={() => (url.pathname = '/new-path')}>{'Change Pathname'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.pathname}</pre>
 		}
@@ -147,7 +147,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path?foo=bar');
 
-			<button onClick={() => url.search = '?baz=qux'}>{'Change Search'}</button>
+			<button onClick={() => (url.search = '?baz=qux')}>{'Change Search'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.search}</pre>
 		}
@@ -176,7 +176,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path#section1');
 
-			<button onClick={() => url.hash = '#section2'}>{'Change Hash'}</button>
+			<button onClick={() => (url.hash = '#section2')}>{'Change Hash'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.hash}</pre>
 		}
@@ -205,7 +205,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://user:pass@example.com/path');
 
-			<button onClick={() => url.username = 'newuser'}>{'Change Username'}</button>
+			<button onClick={() => (url.username = 'newuser')}>{'Change Username'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.username}</pre>
 		}
@@ -234,7 +234,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://user:pass@example.com/path');
 
-			<button onClick={() => url.password = 'newpass'}>{'Change Password'}</button>
+			<button onClick={() => (url.password = 'newpass')}>{'Change Password'}</button>
 			<pre>{url.href}</pre>
 			<pre>{url.password}</pre>
 		}
@@ -263,7 +263,7 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path?foo=bar#section');
 
-			<button onClick={() => url.href = 'https://newdomain.com:9090/newpath?baz=qux#newsection'}>
+			<button onClick={() => (url.href = 'https://newdomain.com:9090/newpath?baz=qux#newsection')}>
 				{'Change Href'}
 			</button>
 			<pre>{url.href}</pre>
@@ -309,9 +309,9 @@ describe('TrackedURL > reactivity', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com:8080/path');
 
-			<button onClick={() => url.protocol = 'http:'}>{'Change Protocol'}</button>
-			<button onClick={() => url.hostname = 'newdomain.com'}>{'Change Hostname'}</button>
-			<button onClick={() => url.port = '9090'}>{'Change Port'}</button>
+			<button onClick={() => (url.protocol = 'http:')}>{'Change Protocol'}</button>
+			<button onClick={() => (url.hostname = 'newdomain.com')}>{'Change Hostname'}</button>
+			<button onClick={() => (url.port = '9090')}>{'Change Port'}</button>
 			<pre>{url.origin}</pre>
 		}
 
@@ -386,7 +386,7 @@ describe('TrackedURL > reactivity', () => {
 			const url = new TrackedURL('https://example.com/path?foo=bar');
 			const params = url.searchParams;
 
-			<button onClick={() => url.search = '?baz=qux&test=value'}>{'Change Search'}</button>
+			<button onClick={() => (url.search = '?baz=qux&test=value')}>{'Change Search'}</button>
 			<pre>{url.search}</pre>
 			<pre>{params.get('foo')}</pre>
 			<pre>{params.get('baz')}</pre>
@@ -456,7 +456,7 @@ describe('TrackedURL > reactivity', () => {
 			const url = new TrackedURL('https://old.com/old?foo=bar#old');
 			const params = url.searchParams;
 
-			<button onClick={() => url.href = 'https://new.com:9090/new?baz=qux#new'}>
+			<button onClick={() => (url.href = 'https://new.com:9090/new?baz=qux#new')}>
 				{'Change Href'}
 			</button>
 			<pre>{params.get('foo')}</pre>

package/tests/client/url/url.serialization.test.ripple

@@ -5,7 +5,7 @@ describe('TrackedURL > serialization', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path?foo=bar#section');
 
-			<button onClick={() => url.pathname = '/newpath'}>{'Change Pathname'}</button>
+			<button onClick={() => (url.pathname = '/newpath')}>{'Change Pathname'}</button>
 			<pre>{url.toString()}</pre>
 		}
 
@@ -31,7 +31,7 @@ describe('TrackedURL > serialization', () => {
 		component URLTest() {
 			const url = new TrackedURL('https://example.com/path?foo=bar');
 
-			<button onClick={() => url.pathname = '/api'}>{'Change Pathname'}</button>
+			<button onClick={() => (url.pathname = '/api')}>{'Change Pathname'}</button>
 			<pre>{url.toJSON()}</pre>
 			<pre>{JSON.stringify({ url: url.toJSON() })}</pre>
 		}

package/tests/hydration/basic.test.js

@@ -58,4 +58,27 @@ describe('hydration > basic', () => {
 		await hydrateComponent(ServerComponents.ExpressionContent, ClientComponents.ExpressionContent);
 		expect(container.innerHTML).toBeHtml('<div>42</div><span>COMPUTED</span>');
 	});
+
+	it('hydrates static child component followed by sibling content', async () => {
+		await hydrateComponent(
+			ServerComponents.StaticChildWithSiblings,
+			ClientComponents.StaticChildWithSiblings,
+		);
+		expect(container.querySelector('.sr-only')?.textContent).toBe('heading');
+		expect(container.querySelectorAll('.subtitle').length).toBe(2);
+		expect(container.querySelector('.sibling1')?.textContent).toBe('bar');
+		expect(container.querySelector('.sibling2')?.textContent).toBe('bar');
+	});
+
+	it('hydrates website-like component structure', async () => {
+		await hydrateComponent(ServerComponents.WebsiteIndex, ClientComponents.WebsiteIndex);
+		expect(container.querySelector('.sr-only')?.textContent).toBe('Ripple');
+		expect(container.querySelector('.logo')).toBeTruthy();
+		expect(container.querySelector('.subtitle')?.textContent).toBe(
+			'the elegant TypeScript UI framework',
+		);
+		expect(container.querySelectorAll('.social-links').length).toBe(2);
+		expect(container.querySelector('.playground-link')?.textContent).toBe('Playground');
+		expect(container.querySelector('.content')).toBeTruthy();
+	});
 });

package/tests/hydration/build-components.js

@@ -20,18 +20,24 @@ const serverOutDir = join(__dirname, 'compiled', 'server');
 /**
  * Transform server-compiled code to use server runtime imports.
  * This is necessary because vitest runs with browser conditions, but
- * server-compiled code needs server's track() which has different internals.
+ * server-compiled code needs server's track() and Portal which have different internals.
  * @param {string} code - The compiled server code
  * @returns {string} - Transformed code with server-compatible imports
  */
 function transformServerImports(code) {
 	// Replace `import { track } from 'ripple'` with server version
-	// Use 'ripple/ssr' which always points to the server runtime,
+	// Replace `import { Portal } from 'ripple'` with server version
+	// Use 'ripple/server' which always points to the server runtime,
 	// bypassing the browser/default condition resolution
-	return code.replace(
+	let transformed = code.replace(
 		/import\s*\{\s*track\s*\}\s*from\s*['"]ripple['"]/g,
-		"import { track } from 'ripple/ssr'",
+		"import { track } from 'ripple/server'",
 	);
+	transformed = transformed.replace(
+		/import\s*\{\s*Portal\s*\}\s*from\s*['"]ripple['"]/g,
+		"import { Portal } from 'ripple/server'",
+	);
+	return transformed;
 }
 
 function buildComponents() {

package/tests/hydration/compiled/client/basic.js

@@ -12,6 +12,15 @@ var root_8 = _$_.template(`<!><!>`, 1);
 var root_9 = _$_.template(`<div> </div>`, 0);
 var root_10 = _$_.template(`<!>`, 1);
 var root_11 = _$_.template(`<div> </div><span> </span>`, 1);
+var root_12 = _$_.template(`<h1 class="sr-only">heading</h1><p class="subtitle">first paragraph</p><p class="subtitle">second paragraph</p>`, 1);
+var root_13 = _$_.template(`<!><span class="sibling1"> </span><span class="sibling2"> </span>`, 1);
+var root_14 = _$_.template(`<h1 class="sr-only">Ripple</h1><img src="/images/logo.png" alt="Logo" class="logo"><p class="subtitle">the elegant TypeScript UI framework</p>`, 1);
+var root_16 = _$_.template(`<a href="/playground" class="playground-link">Playground</a>`, 0);
+var root_15 = _$_.template(`<div class="social-links"><a href="https://github.com" class="github-link">GitHub</a><a href="https://discord.com" class="discord-link">Discord</a><!></div>`, 0);
+var root_17 = _$_.template(`<main><div class="container"><!></div></main>`, 0);
+var root_18 = _$_.template(`<div class="content"><p>Some content here</p></div>`, 0);
+var root_20 = _$_.template(`<!><!><!><!>`, 1);
+var root_19 = _$_.template(`<!>`, 1);
 
 export function StaticText(__anchor, _, __block) {
 	_$_.push_component();
@@ -27,7 +36,8 @@ export function MultipleElements(__anchor, _, __block) {
 
 	var fragment = root_1();
 
-	_$_.append(__anchor, fragment);
+	_$_.next(2);
+	_$_.append(__anchor, fragment, true);
 	_$_.pop_component();
 }
 
@@ -45,7 +55,8 @@ export function WithAttributes(__anchor, _, __block) {
 
 	var fragment_1 = root_3();
 
-	_$_.append(__anchor, fragment_1);
+	_$_.next();
+	_$_.append(__anchor, fragment_1, true);
 	_$_.pop_component();
 }
 
@@ -160,10 +171,161 @@ export function ExpressionContent(__anchor, _, __block) {
 		_$_.pop(span_2);
 	}
 
+	_$_.next();
+
 	_$_.render(() => {
 		_$_.set_text(text_3, _$_.with_scope(__block, () => text.toUpperCase()));
 	});
 
-	_$_.append(__anchor, fragment_4);
+	_$_.append(__anchor, fragment_4, true);
+	_$_.pop_component();
+}
+
+function StaticHeader(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_5 = root_12();
+
+	_$_.next(2);
+	_$_.append(__anchor, fragment_5, true);
+	_$_.pop_component();
+}
+
+export function StaticChildWithSiblings(__anchor, _, __block) {
+	_$_.push_component();
+
+	const foo = 'bar';
+	var fragment_6 = root_13();
+	var node_4 = _$_.first_child_frag(fragment_6);
+
+	StaticHeader(node_4, {}, _$_.active_block);
+
+	var span_3 = _$_.sibling(node_4);
+
+	{
+		var text_4 = _$_.child(span_3, true);
+
+		text_4.nodeValue = foo;
+		_$_.pop(span_3);
+	}
+
+	var span_4 = _$_.sibling(span_3);
+
+	{
+		var text_5 = _$_.child(span_4, true);
+
+		text_5.nodeValue = foo;
+		_$_.pop(span_4);
+	}
+
+	_$_.next();
+	_$_.append(__anchor, fragment_6, true);
+	_$_.pop_component();
+}
+
+function Header(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_7 = root_14();
+
+	_$_.next(2);
+	_$_.append(__anchor, fragment_7, true);
+	_$_.pop_component();
+}
+
+function Actions(__anchor, __props, __block) {
+	_$_.push_component();
+
+	var div_8 = root_15();
+
+	{
+		var a_2 = _$_.child(div_8);
+		var a_1 = _$_.sibling(a_2);
+		var node_5 = _$_.sibling(a_1);
+
+		{
+			var consequent = (__anchor) => {
+				var a_3 = root_16();
+
+				_$_.append(__anchor, a_3);
+			};
+
+			_$_.if(node_5, (__render) => {
+				if (_$_.get(_$_.fallback(__props.playgroundVisible, false))) __render(consequent);
+			});
+		}
+
+		_$_.pop(div_8);
+	}
+
+	_$_.append(__anchor, div_8);
+	_$_.pop_component();
+}
+
+function Layout(__anchor, __props, __block) {
+	_$_.push_component();
+
+	var main_1 = root_17();
+
+	{
+		var div_9 = _$_.child(main_1);
+
+		{
+			var node_6 = _$_.child(div_9);
+
+			_$_.composite(() => __props.children, node_6, {});
+			_$_.pop(div_9);
+		}
+	}
+
+	_$_.append(__anchor, main_1);
+	_$_.pop_component();
+}
+
+function Content(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_10 = root_18();
+
+	_$_.append(__anchor, div_10);
+	_$_.pop_component();
+}
+
+export function WebsiteIndex(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_8 = root_19();
+	var node_7 = _$_.first_child_frag(fragment_8);
+
+	Layout(
+		node_7,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_9 = root_20();
+				var node_8 = _$_.first_child_frag(fragment_9);
+
+				Header(node_8, {}, _$_.active_block);
+
+				var node_9 = _$_.sibling(node_8);
+
+				Actions(node_9, { playgroundVisible: true }, _$_.active_block);
+
+				var node_10 = _$_.sibling(node_9);
+
+				Content(node_10, {}, _$_.active_block);
+
+				var node_11 = _$_.sibling(node_10);
+
+				Actions(node_11, { playgroundVisible: false }, _$_.active_block);
+				_$_.append(__anchor, fragment_9);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment_8);
 	_$_.pop_component();
 }