ripple 0.2.140 → 0.2.142

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.140",
+  "version": "0.2.142",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.140"
+    "ripple": "0.2.142"
   }
 }

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

@@ -169,14 +169,18 @@ function RipplePlugin(config) {
 					}
 
 					if (inComponent) {
-						// Inside nested functions (scopeStack.length >= 5), treat < as relational/generic operator
-						// At component top-level (scopeStack.length <= 4), apply JSX detection logic
+						// Check if we're inside a nested function (arrow function, function expression, etc.)
+						// We need to distinguish between being inside a function vs just being in nested scopes
+						// (like for loops, if blocks, JSX elements, etc.)
+						const nestedFunctionContext = this.context.some((ctx) => ctx.token === 'function');
+
+						// Inside nested functions, treat < as relational/generic operator
 						// BUT: if the < is followed by /, it's a closing JSX tag, not a less-than operator
 						const nextChar =
 							this.pos + 1 < this.input.length ? this.input.charCodeAt(this.pos + 1) : -1;
 						const isClosingTag = nextChar === 47; // '/'
 
-						if (this.scopeStack.length >= 5 && !isClosingTag) {
+						if (nestedFunctionContext && !isClosingTag) {
 							// Inside function - treat as TypeScript generic, not JSX
 							++this.pos;
 							return this.finishToken(tt.relational, '<');

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

@@ -109,7 +109,7 @@ const visitors = {
 		const parent = context.path.at(-1);
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			binding &&
 			context.state.inside_server_block &&
 			context.state.scope.server_block
@@ -144,7 +144,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -155,7 +155,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -191,7 +191,7 @@ const visitors = {
 					error(
 						`Directly accessing internal property "${propertyName}" of a tracked object is not allowed. Use \`get(${node.object.name})\` or \`@${node.object.name}\` instead.`,
 						context.state.analysis.module.filename,
-						node.property
+						node.property,
 					);
 				}
 			}
@@ -205,7 +205,7 @@ const visitors = {
 					`Accessing a tracked object directly is not allowed, use the \`@\` prefix to read the value inside a tracked object - for example \`@${node.object.name}${node.property.type === 'Identifier' ? `.${node.property.name}` : ''}\``,
 					context.state.analysis.module.filename,
 					node,
-				)
+				);
 			}
 		}
 
@@ -259,8 +259,11 @@ const visitors = {
 					const callee = declarator.init.callee;
 					// Check if it's a call to `track` or `tracked`
 					if (
-						(callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'tracked')) ||
-						(callee.type === 'MemberExpression' && callee.property.type === 'Identifier' && (callee.property.name === 'track' || callee.property.name === 'tracked'))
+						(callee.type === 'Identifier' &&
+							(callee.name === 'track' || callee.name === 'tracked')) ||
+						(callee.type === 'MemberExpression' &&
+							callee.property.type === 'Identifier' &&
+							(callee.property.name === 'track' || callee.property.name === 'tracked'))
 					) {
 						binding.metadata = { ...binding.metadata, is_tracked_object: true };
 					}
@@ -623,7 +626,6 @@ const visitors = {
 			context.state.analysis.module.filename,
 			node,
 		);
-
 	},
 
 	Element(node, context) {
@@ -829,7 +831,7 @@ const visitors = {
 				error(
 					'`await` is not allowed in client-side control-flow statements',
 					context.state.analysis.module.filename,
-					node
+					node,
 				);
 			}
 		}

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

@@ -198,7 +198,7 @@ const visitors = {
 								...node.metadata,
 								original_name: node.name,
 								is_capitalized: true,
-							}
+							},
 						};
 						return b.member(capitalized_node, b.literal('#v'), true);
 					}
@@ -552,7 +552,7 @@ const visitors = {
 								...pattern.metadata,
 								original_name: pattern.name,
 								is_capitalized: true,
-							}
+							},
 						};
 					}
 					return pattern;
@@ -560,7 +560,7 @@ const visitors = {
 					return {
 						...pattern,
 						elements: pattern.elements.map((element) =>
-							element ? capitalize_pattern(element) : element
+							element ? capitalize_pattern(element) : element,
 						),
 					};
 				} else if (pattern.type === 'ObjectPattern') {
@@ -1007,7 +1007,7 @@ const visitors = {
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
 					const hash_arg = scoping_hash ? b.literal(scoping_hash) : undefined;
-					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
+					const is_html = context.state.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
 						local_updates.push(
@@ -1379,7 +1379,7 @@ const visitors = {
 		}
 
 		const left = object(argument);
-		const binding = context.state.scope.get(left.name);
+		const binding = left && context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
 
 		if (left === argument) {
@@ -1896,7 +1896,10 @@ function transform_ts_child(node, context) {
 						},
 						end: {
 							line: node.loc.end.line,
-							column: closing_tag_start + 3 + (node.metadata?.original_name?.length || type_expression.length),
+							column:
+								closing_tag_start +
+								3 +
+								(node.metadata?.original_name?.length || type_expression.length),
 						},
 					};
 					// Add metadata if this was capitalized
@@ -2330,6 +2333,22 @@ function create_tsx_with_typescript_support() {
 
 	return {
 		...base_tsx,
+		// Custom handler for ArrayPattern to ensure typeAnnotation is visited
+		// esrap's TypeScript handler doesn't visit typeAnnotation for ArrayPattern (only for ObjectPattern)
+		ArrayPattern(node, context) {
+			context.write('[');
+			for (let i = 0; i < node.elements.length; i++) {
+				if (i > 0) context.write(', ');
+				if (node.elements[i]) {
+					context.visit(node.elements[i]);
+				}
+			}
+			context.write(']');
+			// Visit type annotation if present
+			if (node.typeAnnotation) {
+				context.visit(node.typeAnnotation);
+			}
+		},
 		// Custom handler for FunctionDeclaration to support component->function mapping
 		// Needed for volar mappings and intellisense on function or component keyword
 		FunctionDeclaration(node, context) {

package/src/compiler/utils.js

@@ -201,7 +201,9 @@ export function get_delegated_event(event_name, handler, state) {
 		if (binding != null) {
 			for (const { path } of binding.references) {
 				const parent = path.at(-1);
-				if (parent === undefined) return unhoisted;
+				if (parent === undefined) {
+					return unhoisted;
+				}
 
 				const grandparent = path.at(-2);
 
@@ -227,7 +229,11 @@ export function get_delegated_event(event_name, handler, state) {
 					) {
 						return unhoisted;
 					}
-				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
+				} else if (
+					parent.type !== 'FunctionDeclaration' &&
+					parent.type !== 'VariableDeclarator' &&
+					parent.type !== 'Attribute'
+				) {
 					return unhoisted;
 				}
 			}
@@ -262,24 +268,29 @@ export function get_delegated_event(event_name, handler, state) {
 
 	const visited_references = new Set();
 	const scope = target_function.metadata.scope;
-	for (const [reference] of scope.references) {
+	for (const [reference, ref_nodes] of scope.references) {
 		// Bail out if the arguments keyword is used or $host is referenced
 		if (reference === 'arguments') return unhoisted;
 
 		const binding = scope.get(reference);
 		const local_binding = state.scope.get(reference);
 
+		if (local_binding === null || binding == null) {
+			return unhoisted;
+		}
+
 		// If we are referencing a binding that is shadowed in another scope then bail out.
-		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+		if (local_binding.node !== binding.node) {
 			return unhoisted;
 		}
+		const is_tracked = ref_nodes.some(({ node }) => node.tracked);
 
 		if (
 			binding !== null &&
 			// Bail out if the the binding is a rest param
 			(binding.declaration_kind === 'rest_param' || // or any normal not reactive bindings that are mutated.
 				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
-				(binding.kind === 'normal' && binding.updated))
+				(binding.kind === 'normal' && !is_tracked && binding.updated))
 		) {
 			return unhoisted;
 		}
@@ -352,7 +363,7 @@ export function build_hoisted_params(node, context) {
 		}
 	} else {
 		for (const param of node.params) {
-			params.push(/** @type {Pattern} */(context.visit(param)));
+			params.push(/** @type {Pattern} */ (context.visit(param)));
 		}
 	}
 
@@ -554,7 +565,7 @@ export function is_ripple_import(callee, context) {
  * @returns {boolean}
  */
 export function is_declared_function_within_component(node, context) {
-	const component = context.path?.find(/** @param {RippleNode} n */(n) => n.type === 'Component');
+	const component = context.path?.find(/** @param {RippleNode} n */ (n) => n.type === 'Component');
 
 	if (node.type === 'Identifier' && component) {
 		const binding = context.state.scope.get(node.name);
@@ -611,8 +622,8 @@ export function visit_assignment_expression(node, context, build_assignment) {
 				assignment ??
 				b.assignment(
 					'=',
-					/** @type {Pattern} */(context.visit(path.node)),
-					/** @type {Expression} */(context.visit(value)),
+					/** @type {Pattern} */ (context.visit(path.node)),
+					/** @type {Expression} */ (context.visit(value)),
 				)
 			);
 		});
@@ -702,8 +713,8 @@ export function build_assignment(operator, left, right, context) {
 			object,
 			b.assignment(
 				operator,
-				/** @type {Pattern} */(context.visit(left)),
-				/** @type {Expression} */(context.visit(right)),
+				/** @type {Pattern} */ (context.visit(left)),
+				/** @type {Expression} */ (context.visit(right)),
 			),
 		);
 	}

package/src/runtime/date.js

@@ -64,7 +64,7 @@ export class TrackedDate extends Date {
 				proto[method] = function (...args) {
 					// @ts-ignore
 					var result = date_proto[method].apply(this, args);
-					set(this.#time, date_proto.getTime.call(this), this.#block);
+					set(this.#time, date_proto.getTime.call(this));
 					return result;
 				};
 			}

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

@@ -14,7 +14,7 @@ export {
 	set_selected,
 } from './render.js';
 
-export { render, render_spread, async, ref } from './blocks.js';
+export { render, render_spread, async, ref, branch } from './blocks.js';
 
 export { event, delegate } from './events.js';
 
@@ -47,6 +47,8 @@ export {
 	derived,
 	maybe_tracked,
 	tick,
+	proxy_tracked,
+	with_block,
 } from './runtime.js';
 
 export { composite } from './composite.js';

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

@@ -163,29 +163,29 @@ export function set_attributes(element, attributes) {
  * @param {Element} element
  * @param {string} key
  * @param {any} value
-*/
+ */
 function set_attribute_helper(element, key, value) {
-  if (key === 'class') {
-    const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
-    set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
-  } else if (key === '#class') {
-    // Special case for static class when spreading props
-    element.classList.add(value);
-  } else if (typeof key === 'string' && is_event_attribute(key)) {
-    // Handle event handlers in spread props
-    const event_name = get_attribute_event_name(key);
-
-    if (is_delegated(event_name)) {
-      // Use delegation for delegated events
-      /** @type {any} */ (element)['__' + event_name] = value;
-      delegate([event_name]);
-    } else {
-      // Use addEventListener for non-delegated events
-      event(event_name, element, value);
-    }
-  } else {
-    set_attribute(element, key, value);
-  }
+	if (key === 'class') {
+		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+		set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
+	} else if (key === '#class') {
+		// Special case for static class when spreading props
+		element.classList.add(value);
+	} else if (typeof key === 'string' && is_event_attribute(key)) {
+		// Handle event handlers in spread props
+		const event_name = get_attribute_event_name(key);
+
+		if (is_delegated(event_name)) {
+			// Use delegation for delegated events
+			/** @type {any} */ (element)['__' + event_name] = value;
+			delegate([event_name]);
+		} else {
+			// Use addEventListener for non-delegated events
+			event(event_name, element, value);
+		}
+	} else {
+		set_attribute(element, key, value);
+	}
 }
 
 /**
@@ -312,7 +312,7 @@ export function apply_element_spread(element, fn) {
 		for (const symbol of get_own_property_symbols(next)) {
 			// Ensure we are not trying to write to a proxied object
 			if (TRACKED_OBJECT in next) {
-				next = {...next};
+				next = { ...next };
 			}
 			var ref_fn = next[symbol];
 

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

@@ -30,7 +30,7 @@ import {
 import { capture, suspend } from './try.js';
 import {
 	define_property,
-	get_descriptors,
+	get_descriptor,
 	get_own_property_symbols,
 	is_array,
 	is_tracked_object,
@@ -135,6 +135,20 @@ export function run_teardown(block) {
 	}
 }
 
+/**
+ * @param {Block} block
+ * @param {() => void} fn
+ */
+export function with_block(block, fn) {
+	var prev_block = active_block;
+	active_block = block;
+	try {
+		return fn();
+	} finally {
+		active_block = prev_block;
+	}
+}
+
 /**
  * @param {Derived} computed
  */
@@ -372,35 +386,34 @@ export function track_split(v, l, b) {
 	var out = [];
 	/** @type {Record<string|symbol, any>} */
 	var rest = {};
-	/** @type {Record<PropertyKey, any | null>} */
-	var descriptors = get_descriptors(v);
+	/** @type {Record<PropertyKey, 1>} */
+	var done = {};
+	var props = Reflect.ownKeys(v);
 
-	for (let i = 0, key, t, exists = true; i < l.length; i++) {
+	for (let i = 0, key, t; i < l.length; i++) {
 		key = l[i];
 
-		if (is_tracked_object(v[key])) {
-			t = v[key];
+		if (props.includes(key)) {
+			if (is_tracked_object(v[key])) {
+				t = v[key];
+			} else {
+				t = tracked(undefined, b);
+				t = define_property(t, '__v', /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
+			}
 		} else {
 			t = tracked(undefined, b);
-			exists = !!descriptors[key];
-			if (exists) {
-				t = define_property(t, '__v', descriptors[key]);
-			}
 		}
 
 		out[i] = t;
-		if (exists) {
-			descriptors[key] = null;
-		}
+		done[key] = 1;
 	}
 
-	var props = Reflect.ownKeys(descriptors);
 	for (let i = 0, key; i < props.length; i++) {
 		key = props[i];
-		if (descriptors[key] === null) {
+		if (done[key]) {
 			continue;
 		}
-		define_property(rest, key, descriptors[key]);
+		define_property(rest, key, /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
 	}
 
 	out.push(tracked(rest, b));
@@ -903,34 +916,37 @@ export function flush_sync(fn) {
  */
 export function spread_props(fn, block) {
 	var computed = derived(fn, block);
+	return proxy_tracked(computed);
+}
 
+/**
+ * @param {Tracked | Derived} tracked
+ * @returns {Object}
+ */
+export function proxy_tracked(tracked) {
 	return new Proxy(
 		{},
 		{
-			get(target, property) {
-				const obj = get_derived(computed);
+			get(_, property) {
+				const obj = get(tracked);
 				return obj[property];
 			},
-			has(target, property) {
+			has(_, property) {
 				if (property === TRACKED_OBJECT) {
 					return true;
 				}
-				const obj = get_derived(computed);
+				const obj = get(tracked);
 				return property in obj;
 			},
-			getOwnPropertyDescriptor(target, key) {
-				const obj = get_derived(computed);
+			getOwnPropertyDescriptor(_, key) {
+				const obj = get(tracked);
 
 				if (key in obj) {
-					return {
-						enumerable: true,
-						configurable: true,
-						value: obj[key],
-					};
+					return get_descriptor(obj, key);
 				}
 			},
 			ownKeys() {
-				const obj = get_derived(computed);
+				const obj = get(tracked);
 				return Reflect.ownKeys(obj);
 			},
 		},