ripple 0.2.214 → 0.2.216

package/CHANGELOG.md

@@ -1,5 +1,90 @@
 # ripple
 
+## 0.2.216
+
+### Patch Changes
+
+- [#757](https://github.com/Ripple-TS/ripple/pull/757)
+  [`9fb507d`](https://github.com/Ripple-TS/ripple/commit/9fb507d76af6fd6a5c636af1976d1e03d3e869ac)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - fixes compiler error that was
+  generating async functions for call expressions inside if conditions when inside
+  async context
+
+- [#751](https://github.com/Ripple-TS/ripple/pull/751)
+  [`e1de4bb`](https://github.com/Ripple-TS/ripple/commit/e1de4bb9df75342a693cda24d0999a423db05ec4)
+  Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Fix
+  HMR "zoom" issue when a Ripple file is changed in the dev server.
+
+  When a layout component contained children with nested `if`/`for` blocks,
+  hydration would leave `hydrate_node` pointing deep inside the layout's root
+  element (e.g. a HYDRATION_END comment inside `<main>`). The `append()`
+  function's `parentNode === dom` check only handled direct children, so it missed
+  grandchild/deeper positions and incorrectly updated the branch block's `s.end`
+  to that deep internal node.
+
+  This caused two problems on HMR re-render:
+  1. `remove_block_dom(s.start, s.end)` removed wrong elements (the deep node was
+     treated as a sibling boundary, causing removal of unrelated content including
+     the root HYDRATION_END comment).
+  2. `target = hydrate_node` (set after the initial render) became `null` or
+     pointed outside the component's region, so new content was inserted at the
+     wrong DOM location — producing a layout that appeared "zoomed" because it
+     rendered outside its CSS container context.
+
+  The fix changes the `parentNode === dom` check to `dom.contains(hydrate_node)`,
+  consistent with the `anchor === dom` branch that already used `dom.contains()`.
+  This correctly resets `hydrate_node` to `dom`'s sibling level regardless of how
+  deeply nested it was inside `dom`.
+
+- [#764](https://github.com/Ripple-TS/ripple/pull/764)
+  [`95ea864`](https://github.com/Ripple-TS/ripple/commit/95ea8645b2cb27e2610a4ace4c8fb238c92d441a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fixes syntax color
+  highlighting for `pending`
+
+- Updated dependencies
+  [[`9fb507d`](https://github.com/Ripple-TS/ripple/commit/9fb507d76af6fd6a5c636af1976d1e03d3e869ac),
+  [`e1de4bb`](https://github.com/Ripple-TS/ripple/commit/e1de4bb9df75342a693cda24d0999a423db05ec4),
+  [`95ea864`](https://github.com/Ripple-TS/ripple/commit/95ea8645b2cb27e2610a4ace4c8fb238c92d441a)]:
+  - ripple@0.2.216
+
+## 0.2.215
+
+### Patch Changes
+
+- [#742](https://github.com/Ripple-TS/ripple/pull/742)
+  [`a9ecda4`](https://github.com/Ripple-TS/ripple/commit/a9ecda4e3f29e3b934d9f5ee80d55c059ba36ebe)
+  Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Fix
+  catch block not executing when used with pending block in try statements.
+  Previously, errors thrown inside async components within
+  `try { ... } pending { ... } catch { ... }` blocks were lost as unhandled
+  promise rejections. Now errors are properly caught and the catch block is
+  rendered. Also fixes the server-side rendering to not include pending content in
+  the final output when the async operation resolves or errors.
+
+- [#744](https://github.com/Ripple-TS/ripple/pull/744)
+  [`6653c5c`](https://github.com/Ripple-TS/ripple/commit/6653c5cebfbd4dce129906a25686ef9c63dc592a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix compiler analysis
+  incorrectly marking untrackable nodes as tracked. `MemberExpression` now only
+  enables tracking when the member or its property is actually marked as
+  `tracked`, and unconditional tracking side-effects were removed from
+  `CallExpression` and `NewExpression` visitors.
+
+  Also fixes the client transform for `TrackedExpression` in TypeScript mode to
+  emit a `['#v']` member access (marked as `tracked`) instead of the runtime
+  `_$_.get(...)` call, aligning TSX output with tracked-access semantics.
+
+- [#733](https://github.com/Ripple-TS/ripple/pull/733)
+  [`307dcf3`](https://github.com/Ripple-TS/ripple/commit/307dcf30f27dae987a19a59508cc2593c839eda3)
+  Thanks [@trueadm](https://github.com/trueadm)! - Fix client HMR updates when a
+  wrapped component has not mounted yet. The runtime now avoids calling `set()` on
+  an undefined tracked source and keeps wrapper HMR state synchronized across
+  update chains.
+- Updated dependencies
+  [[`a9ecda4`](https://github.com/Ripple-TS/ripple/commit/a9ecda4e3f29e3b934d9f5ee80d55c059ba36ebe),
+  [`6653c5c`](https://github.com/Ripple-TS/ripple/commit/6653c5cebfbd4dce129906a25686ef9c63dc592a),
+  [`307dcf3`](https://github.com/Ripple-TS/ripple/commit/307dcf30f27dae987a19a59508cc2593c839eda3)]:
+  - ripple@0.2.215
+
 ## 0.2.214
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.214",
+  "version": "0.2.216",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -96,6 +96,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.214"
+    "ripple": "0.2.216"
   }
 }

package/src/compiler/errors.js

@@ -9,9 +9,14 @@
  * @param {string | null} filename
  * @param {AST.Node} node
  * @param {RippleCompileError[]} [errors]
+ * @param {AST.CommentWithLocation[]} [comments]
  * @returns {void}
  */
-export function error(message, filename, node, errors) {
+export function error(message, filename, node, errors, comments) {
+	if (errors && comments && is_ripple_error_suppressed(node, comments)) {
+		return;
+	}
+
 	const error = /** @type {RippleCompileError} */ (new Error(message));
 
 	// same as the acorn compiler error
@@ -43,3 +48,30 @@ export function error(message, filename, node, errors) {
 	error.type = 'fatal';
 	throw error;
 }
+
+/**
+ * @param {AST.CommentWithLocation} comment
+ * @return {boolean}
+ */
+function is_ripple_error_suppress_comment(comment) {
+	const text = comment.value.trim();
+	return text.startsWith('@ripple-ignore') || text.startsWith('@ripple-expect-error');
+}
+
+/**
+ * @param {AST.Node} node
+ * @param {AST.CommentWithLocation[]} comments
+ */
+function is_ripple_error_suppressed(node, comments) {
+	if (node.loc) {
+		const node_start_line = node.loc.start.line;
+		for (const comment of comments) {
+			if (comment.type === 'Line' && comment.loc.start.line === node_start_line - 1) {
+				if (is_ripple_error_suppress_comment(comment)) {
+					return true;
+				}
+			}
+		}
+	}
+	return false;
+}

package/src/compiler/index.d.ts

@@ -101,6 +101,7 @@ interface SharedCompileOptions {
 }
 export interface CompileOptions extends SharedCompileOptions {
 	mode?: 'client' | 'server';
+	hmr?: boolean;
 }
 
 export interface ParseOptions {
@@ -115,8 +116,7 @@ export interface AnalyzeOptions extends ParseOptions, Pick<CompileOptions, 'mode
 }
 
 export interface VolarCompileOptions
-	extends Omit<ParseOptions, 'errors' | 'comments'>,
-		SharedCompileOptions {}
+	extends Omit<ParseOptions, 'errors' | 'comments'>, SharedCompileOptions {}
 
 export function parse(source: string, options?: ParseOptions): AST.Program;
 

package/src/compiler/index.js

@@ -34,7 +34,14 @@ export function compile(source, filename, options = {}) {
 					options?.minify_css ?? false,
 					options?.dev ?? false,
 				)
-			: transform_client(filename, source, analysis, false, options?.minify_css ?? false);
+			: transform_client(
+					filename,
+					source,
+					analysis,
+					false,
+					options?.minify_css ?? false,
+					options?.hmr ?? false,
+				);
 
 	return result;
 }

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

@@ -141,6 +141,7 @@ function error_return_keyword(node, context, message) {
 		context.state.analysis.module.filename,
 		return_keyword_node,
 		context.state.loose ? context.state.analysis.errors : undefined,
+		context.state.analysis.comments,
 	);
 }
 
@@ -281,6 +282,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					node,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		}
@@ -307,7 +309,13 @@ const visitors = {
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
-		if (context.state.metadata?.tracking === false && parent?.type !== 'AssignmentExpression') {
+		if (
+			context.state.metadata?.tracking === false &&
+			parent?.type !== 'AssignmentExpression' &&
+			(node.tracked ||
+				((node.property.type === 'Identifier' || node.property.type === 'Literal') &&
+					/** @type {AST.TrackedNode} */ (node.property).tracked))
+		) {
 			context.state.metadata.tracking = true;
 		}
 
@@ -321,6 +329,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					node,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			} else {
 				component.metadata.styleIdentifierPresent = true;
@@ -346,6 +355,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					node.property,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 
@@ -377,6 +387,7 @@ const visitors = {
 						context.state.analysis.module.filename,
 						node.property,
 						context.state.loose ? context.state.analysis.errors : undefined,
+						context.state.analysis.comments,
 					);
 				}
 			}
@@ -391,6 +402,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					node.object,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		}
@@ -416,13 +428,10 @@ const visitors = {
 				context.state.analysis.module.filename,
 				node.callee,
 				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
 			);
 		}
 
-		if (context.state.metadata?.tracking === false) {
-			context.state.metadata.tracking = true;
-		}
-
 		if (!is_inside_component(context, true)) {
 			mark_as_tracked(context.path);
 		}
@@ -431,9 +440,6 @@ const visitors = {
 	},
 
 	NewExpression(node, context) {
-		if (context.state.metadata?.tracking === false) {
-			context.state.metadata.tracking = true;
-		}
 		context.next();
 	},
 
@@ -447,6 +453,7 @@ const visitors = {
 					state.analysis.module.filename,
 					declarator.id,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 			const metadata = { tracking: false, await: false };
@@ -477,6 +484,7 @@ const visitors = {
 							state.analysis.module.filename,
 							path.node,
 							context.state.loose ? context.state.analysis.errors : undefined,
+							context.state.analysis.comments,
 						);
 					}
 				}
@@ -536,6 +544,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					props,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		}
@@ -582,6 +591,7 @@ const visitors = {
 							context.state.analysis.module.filename,
 							property,
 							context.state.loose ? context.state.analysis.errors : undefined,
+							context.state.analysis.comments,
 						);
 					}
 				}
@@ -639,6 +649,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					switch_case,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		}
@@ -712,6 +723,7 @@ const visitors = {
 				context.state.analysis.module.filename,
 				node.body,
 				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
 			);
 		}
 	},
@@ -734,6 +746,7 @@ const visitors = {
 				context.state.analysis.module.filename,
 				/** @type {AST.Identifier} */ (declaration.id),
 				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
 			);
 			// TODO: the client and server rendering doesn't currently support components
 			// If we're going to support this, we need to account also for anonymous object declaration
@@ -762,6 +775,7 @@ const visitors = {
 								context.state.analysis.module.filename,
 								decl.init,
 								context.state.loose ? context.state.analysis.errors : undefined,
+								context.state.analysis.comments,
 							);
 							continue;
 						}
@@ -773,6 +787,7 @@ const visitors = {
 								context.state.analysis.module.filename,
 								path.node,
 								context.state.loose ? context.state.analysis.errors : undefined,
+								context.state.analysis.comments,
 							);
 						}
 					}
@@ -783,6 +798,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					decl,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		} else if (node.specifiers) {
@@ -801,6 +817,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					specifier,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		} else {
@@ -809,6 +826,7 @@ const visitors = {
 				context.state.analysis.module.filename,
 				node,
 				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
 			);
 		}
 
@@ -863,6 +881,7 @@ const visitors = {
 				context.state.analysis.module.filename,
 				node.consequent,
 				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
 			);
 		}
 
@@ -879,6 +898,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					node.alternate,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 
@@ -966,6 +986,7 @@ const visitors = {
 					state.analysis.module.filename,
 					node.block,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 
@@ -982,6 +1003,7 @@ const visitors = {
 					state.analysis.module.filename,
 					node.pending,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		}
@@ -1009,6 +1031,30 @@ const visitors = {
 		context.next();
 	},
 
+	WhileStatement(node, context) {
+		if (is_inside_component(context)) {
+			error(
+				'While loops are not supported in components. Move the while loop into a function.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
+
+		context.next();
+	},
+
+	DoWhileStatement(node, context) {
+		if (is_inside_component(context)) {
+			error(
+				'Do...while loops are not supported in components. Move the do...while loop into a function.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
+
+		context.next();
+	},
+
 	JSXElement(node, context) {
 		const inside_tsx_compat = context.path.some((n) => n.type === 'TsxCompat');
 
@@ -1167,6 +1213,7 @@ const visitors = {
 								},
 							},
 							context.state.loose ? context.state.analysis.errors : undefined,
+							context.state.analysis.comments,
 						);
 					}
 					if (attr.name.type === 'Identifier') {
@@ -1178,6 +1225,21 @@ const visitors = {
 								state.analysis.module.filename,
 								attr,
 								context.state.loose ? context.state.analysis.errors : undefined,
+								context.state.analysis.comments,
+							);
+						}
+
+						if (
+							attr.value &&
+							attr.value.type === 'MemberExpression' &&
+							attr.value.object.type === 'StyleIdentifier'
+						) {
+							error(
+								'`#style` cannot be used directly on DOM elements. Pass the class to a child component instead.',
+								state.analysis.module.filename,
+								attr.value.object,
+								context.state.loose ? context.state.analysis.errors : undefined,
+								context.state.analysis.comments,
 							);
 						}
 
@@ -1205,6 +1267,7 @@ const visitors = {
 					state.analysis.module.filename,
 					node,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		} else {
@@ -1246,6 +1309,7 @@ const visitors = {
 						state.analysis.module.filename,
 						item,
 						context.state.loose ? context.state.analysis.errors : undefined,
+						context.state.analysis.comments,
 					);
 				}
 			}
@@ -1261,6 +1325,7 @@ const visitors = {
 						state.analysis.module.filename,
 						attribute,
 						context.state.loose ? context.state.analysis.errors : undefined,
+						context.state.analysis.comments,
 					);
 				}
 			}
@@ -1286,6 +1351,7 @@ const visitors = {
 				context.state.analysis.module.filename,
 				node.expression,
 				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
 			);
 		}
 
@@ -1320,6 +1386,7 @@ const visitors = {
 					context.state.analysis.module.filename,
 					adjusted_node,
 					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
 				);
 			}
 		}

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

@@ -236,18 +236,6 @@ function apply_selector(relative_selectors, rule, element, direction) {
 								selector: selector,
 							});
 						}
-
-						// Also store in top_scoped_classes if standalone selector
-						if (
-							is_standalone_class_selector(relative_selector, selector) &&
-							!top_scoped_classes.has(name)
-						) {
-							top_scoped_classes.set(name, {
-								start: selector.start,
-								end: selector.end,
-								selector: selector,
-							});
-						}
 					}
 				}
 			}
@@ -1090,6 +1078,31 @@ export function prune_css(css, element, styleClasses, topScopedClasses) {
 				node.metadata.used = true;
 			}
 
+			// Populate top_scoped_classes for truly standalone class selectors (for #style support).
+			// A class is standalone only when the entire effective selector chain (after resolving
+			// nesting and stripping :global) is a single RelativeSelector with a single ClassSelector.
+			// This prevents classes from compound selectors like `.wrapper .nested` or selectors
+			// inside :global() from being treated as valid #style targets.
+			if (selectors.length === 1) {
+				const sole_selector = selectors[0];
+				if (
+					!sole_selector.metadata.is_global &&
+					!sole_selector.metadata.is_global_like &&
+					sole_selector.selectors.length === 1 &&
+					sole_selector.selectors[0].type === 'ClassSelector'
+				) {
+					const class_selector = sole_selector.selectors[0];
+					const name = class_selector.name.replace(regex_backslash_and_following_character, '$1');
+					if (!top_scoped_classes.has(name)) {
+						top_scoped_classes.set(name, {
+							start: class_selector.start,
+							end: class_selector.end,
+							selector: class_selector,
+						});
+					}
+				}
+			}
+
 			context.next();
 		},
 		PseudoClassSelector(node, context) {

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

@@ -155,6 +155,7 @@ export function validate_nesting(element, context, errors) {
 						context.state.analysis.module.filename,
 						element,
 						errors,
+						context.state.analysis.comments,
 					);
 				} else {
 					// if my parent has a set of invalid children