ripple 0.2.211 → 0.2.213

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # ripple
 
+## 0.2.213
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.2.213
+
+## 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.213",
   "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.213"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -2667,7 +2667,7 @@ function get_comment_handlers(source, comments, index = 0) {
 		},
 
 		/**
-		 * @param {AST.Node} ast
+		 * @param {AST.Node | AST.CSS.StyleSheet} ast
 		 */
 		add_comments: (ast) => {
 			if (comments.length === 0) return;
@@ -2685,7 +2685,7 @@ function get_comment_handlers(source, comments, index = 0) {
 
 			walk(ast, null, {
 				_(node, { next, path }) {
-					const metadata = node?.metadata;
+					const metadata = /** @type {AST.Node} */ (node)?.metadata;
 
 					/**
 					 * Check if a comment is inside an attribute expression
@@ -2758,6 +2758,36 @@ function get_comment_handlers(source, comments, index = 0) {
 						return element;
 					}
 
+					// Skip CSS nodes entirely - they use CSS-local positions (relative to
+					// the <style> tag content) which would incorrectly match against
+					// absolute source positions of JS/HTML comments. Also consume any
+					// CSS comments (which have absolute positions) that fall within the
+					// parent <style> element's content range so they don't leak to
+					// subsequent JS nodes.
+					if (node.type === 'StyleSheet') {
+						const styleElement = /** @type {AST.Element & AST.NodeWithLocation | undefined} */ (
+							path.findLast(
+								(ancestor) =>
+									ancestor &&
+									ancestor.type === 'Element' &&
+									ancestor.id &&
+									/** @type {AST.Identifier} */ (ancestor.id).name === 'style',
+							)
+						);
+						if (styleElement) {
+							const cssStart =
+								/** @type {AST.NodeWithLocation} */ (styleElement.openingElement)?.end ??
+								styleElement.start;
+							const cssEnd =
+								/** @type {AST.NodeWithLocation} */ (styleElement.closingElement)?.start ??
+								styleElement.end;
+							while (comments[0] && comments[0].start >= cssStart && comments[0].end <= cssEnd) {
+								comments.shift();
+							}
+						}
+						return;
+					}
+
 					if (metadata && metadata.commentContainerId !== undefined) {
 						// For empty template elements, keep comments as `innerComments`.
 						// The Prettier plugin uses `innerComments` to preserve them and
@@ -2771,6 +2801,24 @@ function get_comment_handlers(source, comments, index = 0) {
 								comments[0].context.containerId === metadata.commentContainerId &&
 								comments[0].context.beforeMeaningfulChild
 							) {
+								// Check that the comment is actually in this element's own content
+								// area, not positionally inside a child element. This handles the
+								// case where jsx_parseOpeningElementAt() triggers jsx_readToken()
+								// before the child element is pushed to the parser's #path, causing
+								// comments inside the child to get the parent's containerId.
+								const commentStart = comments[0].start;
+								const isInsideChildElement = /** @type {AST.NodeWithChildren} */ (
+									node
+								).children?.some(
+									(child) =>
+										child &&
+										child.start !== undefined &&
+										child.end !== undefined &&
+										commentStart >= child.start &&
+										commentStart < child.end,
+								);
+								if (isInsideChildElement) break;
+
 								const elementComment = /** @type {AST.CommentWithLocation} */ (comments.shift());
 
 								(metadata.elementLeadingComments ||= []).push(elementComment);

package/src/compiler/phases/2-analyze/index.js

@@ -285,35 +285,19 @@ const visitors = {
 			}
 		}
 
-		if (
-			binding?.kind === 'prop' ||
-			binding?.kind === 'prop_fallback' ||
-			binding?.kind === 'for_pattern'
-		) {
-			mark_as_tracked(context.path);
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
-			}
-		}
-
-		if (
-			is_reference(node, /** @type {AST.Node} */ (parent)) &&
-			node.tracked &&
-			binding?.node !== node
-		) {
-			mark_as_tracked(context.path);
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
-			}
-		}
-
-		if (
-			is_reference(node, /** @type {AST.Node} */ (parent)) &&
-			node.tracked &&
-			binding?.node !== node
-		) {
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
+		if (node.tracked && binding) {
+			if (
+				binding.kind === 'prop' ||
+				binding.kind === 'prop_fallback' ||
+				binding.kind === 'for_pattern' ||
+				(is_reference(node, /** @type {AST.Node} */ (parent)) &&
+					node.tracked &&
+					binding.node !== node)
+			) {
+				mark_as_tracked(context.path);
+				if (context.state.metadata?.tracking === false) {
+					context.state.metadata.tracking = true;
+				}
 			}
 		}
 

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

@@ -116,7 +116,6 @@ function visit_function(node, context) {
 	if (
 		metadata?.tracked === true &&
 		!is_inside_component(context, true) &&
-		is_component_level_function(context) &&
 		body.type === 'BlockStatement'
 	) {
 		body = { ...body, body: [b.var('__block', b.call('_$_.scope')), ...body.body] };
@@ -2308,13 +2307,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 +3002,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 +3355,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
@@ -399,7 +394,9 @@ declare module 'estree' {
 		value: AST.Property['value'] | Component;
 	}
 
-	export type RippleAttribute = Attribute | SpreadAttribute | RefAttribute;
+	export type RippleAttribute = AST.Attribute | AST.SpreadAttribute | AST.RefAttribute;
+
+	export type NodeWithChildren = AST.Element | AST.TsxCompat;
 
 	export namespace CSS {
 		export interface BaseNode {

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.basic.test.ripple

@@ -357,4 +357,28 @@ export component App() {
 `;
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
+
+	it('should inject __block for track() calls inside class constructors', () => {
+		const source = `
+import { track } from 'ripple';
+
+class Store {
+	constructor() {
+		this.count = track(0);
+		this.items = #[1, 2, 3];
+	}
+}
+
+export component App() {
+	const store = new Store();
+	<div>{store.count}</div>
+}
+`;
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const code = result.js.code;
+
+		// The constructor's compiled output should contain __block = _$_.scope()
+		expect(code).toContain('__block');
+		expect(code).toContain('_$_.scope()');
+	});
 });

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);
+	});
+});