ripple 0.2.211 → 0.2.212

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # ripple
 
+## 0.2.212
+
+### Patch Changes
+
+- Fix hydration error when component is last sibling - added `hydrate_advance()`
+  to safely advance hydration position at end of component content without
+  throwing when no next sibling exists
+
+- Updated dependencies []:
+  - ripple@0.2.212
+
 ## 0.2.211
 
 ### Patch Changes

package/README.md

@@ -5,5 +5,8 @@
 
 # What is Ripple?
 
+[![npm version](https://img.shields.io/npm/v/ripple?logo=npm)](https://www.npmjs.com/package/ripple)
+[![npm downloads](https://img.shields.io/npm/dm/ripple?logo=npm&label=downloads)](https://www.npmjs.com/package/ripple)
+
 Ripple is an elegant TypeScript UI framework. To find out more, view
 [Ripple's Github README](https://github.com/Ripple-TS/ripple).

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.211",
+  "version": "0.2.212",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -41,6 +41,9 @@
     "./compiler/internal/import": {
       "types": "./src/compiler/types/import.d.ts"
     },
+    "./compiler/internal/rpc": {
+      "types": "./src/compiler/types/rpc.d.ts"
+    },
     "./compiler/internal/identifier/utils": {
       "default": "./src/compiler/identifier-utils.js"
     },
@@ -93,6 +96,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.211"
+    "ripple": "0.2.212"
   }
 }

package/src/compiler/phases/3-transform/client/index.js

@@ -2308,13 +2308,17 @@ const visitors = {
 	},
 
 	TryStatement(node, context) {
-		if (context.state.to_ts) {
-			return transform_ts_child(node, context);
-		}
-
 		if (!is_inside_component(context)) {
+			if (context.state.to_ts) {
+				return transform_ts_child(node, SetContextForOutsideComponent(context));
+			}
+
 			return context.next();
 		}
+
+		if (context.state.to_ts) {
+			return transform_ts_child(node, context);
+		}
 		context.state.template?.push('<!>');
 
 		const id = context.state.flush_node?.();
@@ -2999,6 +3003,72 @@ function collect_returns_from_children(children) {
 	return returns;
 }
 
+/**
+ * Check if an Element has any dynamic content that would trigger flush_node().
+ * An Element has dynamic content if it has:
+ * - Dynamic attributes (tracked expressions in attribute values)
+ * - Control flow children (IfStatement, ForOfStatement, etc.)
+ * - Dynamic text children (non-Literal Text nodes)
+ * - Non-DOM element children (components)
+ * - Html children
+ * - Dynamic descendants (recursive)
+ * @param {AST.Element} element
+ * @returns {boolean}
+ */
+function element_has_dynamic_content(element) {
+	// Check for dynamic attributes
+	for (const attr of element.attributes) {
+		if (attr.type === 'Attribute') {
+			// Dynamic value expression (not null, not Literal)
+			if (attr.value !== null && attr.value.type !== 'Literal') {
+				return true;
+			}
+			// Tracked attribute name
+			if (attr.name.tracked) {
+				return true;
+			}
+		} else if (attr.type === 'SpreadAttribute' || attr.type === 'RefAttribute') {
+			return true;
+		}
+	}
+
+	// Check children for dynamic content
+	for (const child of element.children) {
+		if (
+			child.type === 'IfStatement' ||
+			child.type === 'TryStatement' ||
+			child.type === 'ForOfStatement' ||
+			child.type === 'SwitchStatement' ||
+			child.type === 'TsxCompat' ||
+			child.type === 'Html'
+		) {
+			return true;
+		}
+		if (child.type === 'Text' && child.expression.type !== 'Literal') {
+			return true;
+		}
+		// Non-DOM element (component)
+		if (
+			child.type === 'Element' &&
+			(child.id.type !== 'Identifier' || !is_element_dom_element(child))
+		) {
+			return true;
+		}
+		// Recursively check DOM element children
+		if (
+			child.type === 'Element' &&
+			child.id.type === 'Identifier' &&
+			is_element_dom_element(child)
+		) {
+			if (element_has_dynamic_content(child)) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
 /**
  *
  * @param {AST.Node[]} children
@@ -3286,6 +3356,77 @@ function transform_children(children, context) {
 					flush_node: /** @type {TransformClientState['flush_node']} */ (flush_node),
 					namespace: state.namespace,
 				});
+
+				// After processing an element's children via child()/sibling() navigation,
+				// hydrate_node is left deep inside the element. If there's a next sibling,
+				// we need to restore hydrate_node so sibling() navigation works correctly.
+				//
+				// We only need pop() when we actually DESCEND into the element, which happens when:
+				// - There are Element children (including DOM elements like <button>)
+				// - There are non-literal Text children (we navigate to set text content)
+				// - There are control flow / Html / component children
+				//
+				// The Element visitor already adds pop() for non-literal text, control flow,
+				// Html, and component (non-DOM element) children. We need to ALSO add pop()
+				// when there are DOM element children, which the Element visitor doesn't cover.
+				const next_node = normalized[node_idx + 1];
+				if (next_node && is_element_dom_element(node) && node.children.length > 0) {
+					// Check if any child is a DOM element - this causes navigation but
+					// the Element visitor doesn't add pop() for it
+					const has_dom_element_children = node.children.some(
+						(child) =>
+							child.type === 'Element' &&
+							child.id.type === 'Identifier' &&
+							is_element_dom_element(child),
+					);
+
+					// Check if the Element visitor already added pop()
+					const element_visitor_adds_pop = node.children.some(
+						(child) =>
+							child.type === 'IfStatement' ||
+							child.type === 'TryStatement' ||
+							child.type === 'ForOfStatement' ||
+							child.type === 'SwitchStatement' ||
+							child.type === 'TsxCompat' ||
+							child.type === 'Html' ||
+							(child.type === 'Element' &&
+								(child.id.type !== 'Identifier' || !is_element_dom_element(child))) ||
+							(child.type === 'Text' && child.expression.type !== 'Literal'),
+					);
+
+					// Add pop() if we have DOM element children AND the Element visitor didn't already add pop()
+					if (has_dom_element_children && !element_visitor_adds_pop) {
+						// Only add pop() if next_node will actually generate a sibling() call.
+						// Static Text nodes (Literals) and static Elements don't call flush_node().
+						let needs_sibling_call = false;
+						if (next_node.type === 'Element') {
+							// Static DOM elements with no dynamic content don't generate sibling()
+							if (is_element_dom_element(next_node)) {
+								needs_sibling_call = element_has_dynamic_content(next_node);
+							} else {
+								// Components always generate sibling()
+								needs_sibling_call = true;
+							}
+						} else if (next_node.type === 'Text') {
+							// Only dynamic text generates sibling()
+							needs_sibling_call = next_node.expression.type !== 'Literal';
+						} else if (
+							next_node.type === 'Html' ||
+							next_node.type === 'IfStatement' ||
+							next_node.type === 'TryStatement' ||
+							next_node.type === 'ForOfStatement' ||
+							next_node.type === 'SwitchStatement' ||
+							next_node.type === 'TsxCompat'
+						) {
+							needs_sibling_call = true;
+						}
+
+						if (needs_sibling_call) {
+							const id = flush_node();
+							state.init?.push(b.stmt(b.call('_$_.pop', id)));
+						}
+					}
+				}
 			} else if (node.type === 'TsxCompat') {
 				skipped = 0;
 

package/src/compiler/types/index.d.ts

@@ -8,12 +8,6 @@ import type { RippleCompileError, CompileOptions } from 'ripple/compiler';
 import type { Position } from 'acorn';
 import type { RequireAllOrNone } from '#helpers';
 
-export type RpcModules = Map<string, [string, string]>;
-
-declare global {
-	var rpc_modules: RpcModules | undefined;
-}
-
 export type NameSpace = keyof typeof NAMESPACE_URI;
 interface BaseNodeMetaData {
 	scoped?: boolean;
@@ -140,6 +134,7 @@ declare module 'estree' {
 		ServerIdentifier: ServerIdentifier;
 		Text: TextNode;
 		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
+		ParenthesizedExpression: ParenthesizedExpression;
 	}
 
 	// Missing estree type

package/src/compiler/types/rpc.d.ts

@@ -0,0 +1,5 @@
+export type RpcModules = Map<string, [string, string]>;
+
+declare global {
+	var rpc_modules: RpcModules | undefined;
+}

package/src/runtime/internal/client/hydration.js

@@ -28,6 +28,10 @@ export function hydrate_next() {
 	return set_hydrate_node(get_next_sibling(/** @type {Node} */ (hydrate_node)));
 }
 
+export function hydrate_advance() {
+	hydrate_node = get_next_sibling(/** @type {Node} */ (hydrate_node));
+}
+
 export function next(n = 1) {
 	if (hydrating) {
 		var node = hydrate_node;

package/src/runtime/internal/client/rpc.js

@@ -6,21 +6,49 @@ import * as devalue from 'devalue';
  */
 export async function rpc(hash, args) {
 	const body = devalue.stringify(args);
-	let data;
+	/** @type {Response} */
+	let response;
 
 	try {
-		const response = await fetch('/_$_ripple_rpc_$_/' + hash, {
+		response = await fetch('/_$_ripple_rpc_$_/' + hash, {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json',
 			},
 			body,
 		});
-		data = await response.text();
 	} catch (err) {
 		throw new Error('An error occurred while trying to call the server function.');
 	}
 
+	if (!response.ok) {
+		let message = `Server function call failed with status ${response.status}`;
+		let error_body;
+		try {
+			error_body = await response.text();
+		} catch {
+			// ignore parse errors, use default message
+		}
+
+		if (error_body) {
+			try {
+				const parsed = JSON.parse(error_body);
+
+				if (parsed && typeof parsed.error === 'string' && parsed.error.length > 0) {
+					message = parsed.error;
+				} else {
+					message = error_body;
+				}
+			} catch {
+				message = error_body;
+			}
+		}
+
+		throw new Error(message);
+	}
+
+	const data = await response.text();
+
 	if (data === '') {
 		throw new Error(
 			'The server function end-point did not return a response. Are you running a Ripple server?',

package/src/runtime/internal/client/template.js

@@ -8,7 +8,7 @@ import {
 	HYDRATION_START,
 	HYDRATION_END,
 } from '../../../constants.js';
-import { hydrate_next, hydrate_node, hydrating, pop } from './hydration.js';
+import { hydrate_advance, hydrate_next, hydrate_node, hydrating, pop } from './hydration.js';
 import { create_text, get_first_child, get_next_sibling, is_firefox } from './operations.js';
 import { active_block, active_namespace } from './runtime.js';
 
@@ -217,7 +217,9 @@ export function append(anchor, dom, skip_advance) {
 			}
 		}
 
-		hydrate_next();
+		// Only advance if there's a next sibling. At the end of a component's
+		// content, there might not be more siblings, and that's fine.
+		hydrate_advance();
 		return;
 	}
 	anchor.before(/** @type {Node} */ (dom));

package/tests/client/compiler/compiler.try-in-function.test.ripple

@@ -0,0 +1,159 @@
+import { compile_to_volar_mappings } from 'ripple/compiler';
+
+function count_occurrences(string: string, sub_string: string): number {
+	let count = 0;
+	let pos = string.indexOf(sub_string);
+
+	while (pos !== -1) {
+		count++;
+		pos = string.indexOf(sub_string, pos + sub_string.length);
+	}
+
+	return count;
+}
+
+// TryStatement in the Volar transform should behave like IfStatement and
+// SwitchStatement: try blocks inside functions within a component must not
+// be duplicated into the component body.
+
+describe('compiler > Volar transform does not duplicate try blocks from functions', () => {
+	it('try inside an async function', () => {
+		const source = `export component App() {
+	async function doWork() {
+		try {
+			await fetch('/api');
+		} catch (e) {
+			console.error(e);
+		}
+	}
+	<div onclick={doWork}>{"click"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(1);
+		expect(count_occurrences(result, 'catch')).toBe(1);
+		expect(count_occurrences(result, 'await fetch')).toBe(1);
+	});
+
+	it('try inside an arrow function', () => {
+		const source = `export component App() {
+	const doWork = async () => {
+		try {
+			await fetch('/api');
+		} catch (e) {}
+	};
+	<div onclick={doWork}>{"click"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(1);
+		expect(count_occurrences(result, 'await fetch')).toBe(1);
+	});
+
+	it('try-catch-finally inside a function', () => {
+		const source = `export component App() {
+	async function save() {
+		try {
+			await fetch('/save');
+		} catch (e) {
+			console.error(e);
+		} finally {
+			console.log('done');
+		}
+	}
+	<div onclick={save}>{"save"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(1);
+		expect(count_occurrences(result, 'catch')).toBe(1);
+		expect(count_occurrences(result, 'finally')).toBe(1);
+	});
+
+	it('try at component top level is preserved', () => {
+		const source = `export component App() {
+	try {
+		await fetch('/api');
+	} catch (e) {}
+	<div>{"hi"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(1);
+		expect(count_occurrences(result, 'await fetch')).toBe(1);
+	});
+
+	it('component-level try and function-level try coexist without duplication', () => {
+		const source = `export component App() {
+	try {
+		await fetch('/init');
+	} catch (e) {}
+
+	async function refresh() {
+		try {
+			await fetch('/refresh');
+		} catch (e) {}
+	}
+	<div onclick={refresh}>{"click"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(2);
+		expect(count_occurrences(result, 'await fetch(\'/init\')')).toBe(1);
+		expect(count_occurrences(result, 'await fetch(\'/refresh\')')).toBe(1);
+	});
+
+	it('try in nested functions', () => {
+		const source = `export component App() {
+	function outer() {
+		async function inner() {
+			try {
+				await fetch('/api');
+			} catch (e) {}
+		}
+	}
+	<div>{"hi"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(1);
+		expect(count_occurrences(result, 'await fetch')).toBe(1);
+	});
+
+	it('multiple functions with try blocks each appear once', () => {
+		const source = `export component App() {
+	async function load() {
+		try {
+			await fetch('/load');
+		} catch (e) {}
+	}
+	async function save() {
+		try {
+			await fetch('/save');
+		} catch (e) {}
+	}
+	<div>{"hi"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(2);
+		expect(count_occurrences(result, 'await fetch')).toBe(2);
+	});
+
+	it('try in object method', () => {
+		const source = `export component App() {
+	const handlers = {
+		async onClick() {
+			try {
+				await fetch('/api');
+			} catch (e) {}
+		}
+	};
+	<div>{"hi"}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(count_occurrences(result, 'try {')).toBe(1);
+		expect(count_occurrences(result, 'await fetch')).toBe(1);
+	});
+});

package/tests/hydration/basic.test.js

@@ -81,4 +81,27 @@ describe('hydration > basic', () => {
 		expect(container.querySelector('.playground-link')?.textContent).toBe('Playground');
 		expect(container.querySelector('.content')).toBeTruthy();
 	});
+
+	// Test for hydrate_advance() in append() - component as last sibling with no following siblings
+	it('hydrates component as last sibling (no following siblings)', async () => {
+		await hydrateComponent(
+			ServerComponents.ComponentAsLastSibling,
+			ClientComponents.ComponentAsLastSibling,
+		);
+		expect(container.querySelector('.wrapper')).toBeTruthy();
+		expect(container.querySelector('h1')?.textContent).toBe('Header');
+		expect(container.querySelector('p')?.textContent).toBe('Some content');
+		expect(container.querySelector('.last-child')?.textContent).toBe('I am the last child');
+	});
+
+	it('hydrates nested component with inner component as last sibling', async () => {
+		await hydrateComponent(
+			ServerComponents.NestedComponentAsLastSibling,
+			ClientComponents.NestedComponentAsLastSibling,
+		);
+		expect(container.querySelector('.outer')).toBeTruthy();
+		expect(container.querySelector('h2')?.textContent).toBe('Section title');
+		expect(container.querySelector('.inner span')?.textContent).toBe('Inner text');
+		expect(container.querySelector('.inner .last-child')?.textContent).toBe('I am the last child');
+	});
 });

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

@@ -21,6 +21,10 @@ 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);
+var root_21 = _$_.template(`<footer class="last-child">I am the last child</footer>`, 0);
+var root_22 = _$_.template(`<div class="wrapper"><h1>Header</h1><p>Some content</p><!></div>`, 0);
+var root_23 = _$_.template(`<div class="inner"><span>Inner text</span><!></div>`, 0);
+var root_24 = _$_.template(`<section class="outer"><h2>Section title</h2><!></section>`, 0);
 
 export function StaticText(__anchor, _, __block) {
 	_$_.push_component();
@@ -328,4 +332,65 @@ export function WebsiteIndex(__anchor, _, __block) {
 
 	_$_.append(__anchor, fragment_8);
 	_$_.pop_component();
+}
+
+function LastChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var footer_1 = root_21();
+
+	_$_.append(__anchor, footer_1);
+	_$_.pop_component();
+}
+
+export function ComponentAsLastSibling(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_11 = root_22();
+
+	{
+		var h1_1 = _$_.child(div_11);
+		var p_1 = _$_.sibling(h1_1);
+		var node_12 = _$_.sibling(p_1);
+
+		LastChild(node_12, {}, _$_.active_block);
+		_$_.pop(div_11);
+	}
+
+	_$_.append(__anchor, div_11);
+	_$_.pop_component();
+}
+
+function InnerContent(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_12 = root_23();
+
+	{
+		var span_5 = _$_.child(div_12);
+		var node_13 = _$_.sibling(span_5);
+
+		LastChild(node_13, {}, _$_.active_block);
+		_$_.pop(div_12);
+	}
+
+	_$_.append(__anchor, div_12);
+	_$_.pop_component();
+}
+
+export function NestedComponentAsLastSibling(__anchor, _, __block) {
+	_$_.push_component();
+
+	var section_1 = root_24();
+
+	{
+		var h2_1 = _$_.child(section_1);
+		var node_14 = _$_.sibling(h2_1);
+
+		InnerContent(node_14, {}, _$_.active_block);
+		_$_.pop(section_1);
+	}
+
+	_$_.append(__anchor, section_1);
+	_$_.pop_component();
 }