ripple 0.2.146 → 0.2.148

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.146",
+  "version": "0.2.148",
   "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.146"
+    "ripple": "0.2.148"
   }
 }

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

@@ -976,6 +976,15 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'JSXExpressionContainer');
 			}
 
+			jsx_parseEmptyExpression() {
+				// Override to properly handle the range for JSXEmptyExpression
+				// The range should be from after { to before }
+				const node = this.startNodeAt(this.lastTokEnd, this.lastTokEndLoc);
+				node.end = this.start;
+				node.loc.end = this.startLoc;
+				return this.finishNodeAt(node, 'JSXEmptyExpression', this.start, this.startLoc);
+			}
+
 			jsx_parseTupleContainer() {
 				var t = this.startNode();
 				return (
@@ -1588,9 +1597,7 @@ function RipplePlugin(config) {
 					const node = this.jsx_parseExpressionContainer();
 					node.type = node.html ? 'Html' : 'Text';
 					delete node.html;
-					if (node.expression.type !== 'JSXEmptyExpression') {
-						body.push(node);
-					}
+					body.push(node);
 				} else if (this.type.label === '}') {
 					return;
 				} else if (this.type.label === 'jsxTagStart') {
@@ -1915,6 +1922,17 @@ function get_comment_handlers(source, comments, index = 0) {
 								return;
 							}
 						}
+						// Handle JSXEmptyExpression - these represent {/* comment */} in JSX
+						if (node.type === 'JSXEmptyExpression') {
+							// Collect all comments that fall within this JSXEmptyExpression
+							while (comments[0] && comments[0].start >= node.start && comments[0].end <= node.end) {
+								comment = /** @type {CommentWithLocation} */ (comments.shift());
+								(node.innerComments ||= []).push(comment);
+							}
+							if (node.innerComments && node.innerComments.length > 0) {
+								return;
+							}
+						}
 						// Handle empty Element nodes the same way as empty BlockStatements
 						if (node.type === 'Element' && (!node.children || node.children.length === 0)) {
 							if (comments[0].start < node.end && comments[0].end < node.end) {

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

@@ -45,8 +45,6 @@ function mark_control_flow_has_template(path) {
 
 function visit_function(node, context) {
 	node.metadata = {
-		hoisted: false,
-		hoisted_params: [],
 		scope: context.state.scope,
 		tracked: false,
 	};
@@ -722,12 +720,7 @@ const visitors = {
 							const handler = visit(attr.value, state);
 							const delegated_event = get_delegated_event(event_name, handler, state);
 
-							if (delegated_event !== null) {
-								if (delegated_event.hoisted) {
-									delegated_event.function.metadata.hoisted = true;
-									delegated_event.hoisted = true;
-								}
-
+							if (delegated_event) {
 								if (attr.metadata === undefined) {
 									attr.metadata = {};
 								}

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

@@ -17,7 +17,6 @@ import {
 } from '../../../../constants.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import {
-	build_hoisted_params,
 	is_inside_component,
 	build_assignment,
 	visit_assignment_expression,
@@ -75,16 +74,6 @@ function visit_function(node, context) {
 		}
 	}
 
-	if (metadata?.hoisted === true) {
-		const params = build_hoisted_params(node, context);
-
-		return /** @type {FunctionExpression} */ ({
-			...node,
-			params,
-			body: context.visit(node.body, state),
-		});
-	}
-
 	let body = context.visit(node.body, {
 		...state,
 		// we are new context so tracking no longer applies
@@ -132,13 +121,7 @@ function visit_head_element(node, context) {
 				'_$_.head',
 				b.arrow(
 					[b.id('__anchor')],
-					b.block([
-						...init,
-						...update.map((u) => {
-							debugger;
-						}),
-						...final,
-					]),
+					b.block([...init, ...update.map((u) => u.operation), ...final]),
 				),
 			),
 		);
@@ -985,21 +968,7 @@ const visitors = {
 									state.events.add(event_name);
 								}
 
-								// Hoist function if we can, otherwise we leave the function as is
-								if (attr.metadata.delegated.hoisted) {
-									if (attr.metadata.delegated.function === attr.value) {
-										const func_name = state.scope.root.unique('on_' + event_name);
-										state.hoisted.push(b.var(func_name, handler));
-										handler = func_name;
-									}
-
-									const hoisted_params = /** @type {Expression[]} */ (
-										attr.metadata.delegated.function.metadata.hoisted_params
-									);
-
-									const args = [handler, b.id('__block'), ...hoisted_params];
-									delegated_assignment = b.array(args);
-								} else if (
+								if (
 									(handler.type === 'Identifier' &&
 										is_declared_function_within_component(handler, context)) ||
 									handler.type === 'ArrowFunctionExpression' ||
@@ -2125,7 +2094,6 @@ function transform_ts_child(node, context) {
 			.map((child) => visit(child, state))
 			.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '');
 
-		debugger;
 		state.init.push(b.stmt(b.jsx_fragment(children)));
 	} else {
 		throw new Error('TODO');

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

@@ -323,8 +323,5 @@ export interface TransformContext {
  * Delegated event result
  */
 export interface DelegatedEventResult {
-	/** Whether event was hoisted */
-	hoisted: boolean;
-	/** The hoisted function */
 	function?: FunctionExpression | FunctionDeclaration | ArrowFunctionExpression;
 }

package/src/compiler/utils.js

@@ -169,206 +169,19 @@ export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
-const unhoisted = { hoisted: false };
-
 /**
- * Determines if an event handler can be hoisted for delegation
+ * Determines if an event handler can be delegated
  * @param {string} event_name
  * @param {Expression} handler
  * @param {CompilerState} state
- * @returns {DelegatedEventResult | null}
+ * @returns {boolean}
  */
 export function get_delegated_event(event_name, handler, state) {
 	// Handle delegated event handlers. Bail out if not a delegated event.
 	if (!handler || !is_delegated(event_name)) {
-		return null;
-	}
-
-	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
-	let target_function = null;
-	let binding = null;
-
-	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
-		target_function = handler;
-	} else if (handler.type === 'Identifier') {
-		binding = state.scope.get(handler.name);
-
-		if (state.analysis.module.scope.references.has(handler.name)) {
-			// If a binding with the same name is referenced in the module scope (even if not declared there), bail out
-			return unhoisted;
-		}
-
-		if (binding != null) {
-			for (const { path } of binding.references) {
-				const parent = path.at(-1);
-				if (parent === undefined) {
-					return unhoisted;
-				}
-
-				const grandparent = path.at(-2);
-
-				/** @type {Element | null} */
-				let element = null;
-				/** @type {string | null} */
-				let event_name = null;
-				if (
-					parent.type === 'Expression' &&
-					grandparent?.type === 'Attribute' &&
-					is_event_attribute(grandparent)
-				) {
-					element = /** @type {Element} */ (path.at(-3));
-					const attribute = /** @type {Attribute} */ (grandparent);
-					event_name = get_attribute_event_name(attribute.name.name);
-				}
-
-				if (element && event_name) {
-					if (
-						element.type !== 'Element' ||
-						element.metadata.has_spread ||
-						!is_delegated(event_name)
-					) {
-						return unhoisted;
-					}
-				} else if (
-					parent.type !== 'FunctionDeclaration' &&
-					parent.type !== 'VariableDeclarator' &&
-					parent.type !== 'Attribute'
-				) {
-					return unhoisted;
-				}
-			}
-		}
-
-		// If the binding is exported, bail out
-		if (
-			state.analysis?.exports?.find(
-				(/** @type {{name: string}} */ node) => node.name === handler.name,
-			)
-		) {
-			return unhoisted;
-		}
-
-		if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
-			const binding_type = binding.initial.type;
-
-			if (
-				binding_type === 'ArrowFunctionExpression' ||
-				binding_type === 'FunctionDeclaration' ||
-				binding_type === 'FunctionExpression'
-			) {
-				target_function = binding.initial;
-			}
-		}
-	}
-
-	// If we can't find a function, or the function has multiple parameters, bail out
-	if (target_function == null || target_function.params.length > 1) {
-		return unhoisted;
-	}
-
-	const visited_references = new Set();
-	const scope = target_function.metadata.scope;
-	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.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' && !is_tracked && binding.updated))
-		) {
-			return unhoisted;
-		}
-		visited_references.add(reference);
-	}
-
-	return { hoisted: true, function: target_function };
-}
-
-/**
- * @param {Node} node
- * @param {TransformContext} context
- * @returns {Identifier[]}
- */
-function get_hoisted_params(node, context) {
-	const scope = context.state.scope;
-
-	/** @type {Identifier[]} */
-	const params = [];
-
-	/**
-	 * We only want to push if it's not already present to avoid name clashing
-	 * @param {Identifier} id
-	 */
-	function push_unique(id) {
-		if (!params.find((param) => param.name === id.name)) {
-			params.push(id);
-		}
-	}
-
-	for (const [reference] of scope.references) {
-		let binding = scope.get(reference);
-
-		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
-			if (binding.kind === 'prop') {
-				push_unique(b.id('__props'));
-			} else if (binding.kind === 'for_pattern') {
-				push_unique(binding.metadata.pattern);
-			} else if (binding.kind === 'prop_fallback') {
-				push_unique(b.id(binding.node.name));
-			} else if (
-				// imports don't need to be hoisted
-				binding.declaration_kind !== 'import'
-			) {
-				// create a copy to remove start/end tags which would mess up source maps
-				push_unique(b.id(binding.node.name));
-			}
-		}
-	}
-	return params;
-}
-
-/**
- * Builds the parameter list for a hoisted function
- * @param {FunctionDeclaration|FunctionExpression|ArrowFunctionExpression} node
- * @param {TransformContext} context
- * @returns {Pattern[]}
- */
-export function build_hoisted_params(node, context) {
-	const hoisted_params = get_hoisted_params(node, context);
-	node.metadata.hoisted_params = hoisted_params;
-
-	/** @type {Pattern[]} */
-	const params = [];
-
-	if (node.params.length === 0) {
-		if (hoisted_params.length > 0) {
-			// For the event object
-			params.push(b.id(context.state.scope.generate('_')));
-		}
-	} else {
-		for (const param of node.params) {
-			params.push(/** @type {Pattern} */ (context.visit(param)));
-		}
+		return false;
 	}
-
-	params.push(...hoisted_params, b.id('__block'));
-	return params;
+	return true;
 }
 
 /**

package/tests/client/svg.test.ripple

@@ -1,7 +1,13 @@
 describe('SVG namespace handling', () => {
 	it('should render static SVG elements with correct namespace', () => {
 		component App() {
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				fill="none"
+				stroke="currentColor"
+			>
 				<path d="m14 12 4 4 4-4" />
 				<circle cx="12" cy="12" r="4" />
 				<rect x="4" y="4" width="16" height="16" />
@@ -32,9 +38,20 @@ describe('SVG namespace handling', () => {
 
 	it('should render dynamic SVG paths with for loop (original issue)', () => {
 		component App() {
-			const d = ["m14 12 4 4 4-4", "M18 16V7", "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", "M3.304 13h6.392"];
+			const d = [
+				'm14 12 4 4 4-4',
+				'M18 16V7',
+				'm2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16',
+				'M3.304 13h6.392',
+			];
 
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				fill="none"
+				stroke="currentColor"
+			>
 				for (const pathData of d) {
 					<path d={pathData} />
 				}
@@ -52,7 +69,12 @@ describe('SVG namespace handling', () => {
 
 		// Critical test: dynamic paths should have correct SVG namespace
 		expect(paths.length).toBe(4);
-		const expectedPaths = ["m14 12 4 4 4-4", "M18 16V7", "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", "M3.304 13h6.392"];
+		const expectedPaths = [
+			'm14 12 4 4 4-4',
+			'M18 16V7',
+			'm2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16',
+			'M3.304 13h6.392',
+		];
 		paths.forEach((path, i) => {
 			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
 			expect(path.getAttribute('d')).toBe(expectedPaths[i]);
@@ -60,7 +82,7 @@ describe('SVG namespace handling', () => {
 
 		// Verify paths are actually SVG elements (should have getBBox method)
 		// Note: getBBox might not work in test environment, so just check namespace
-		paths.forEach(path => {
+		paths.forEach((path) => {
 			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
 			expect(path.tagName.toLowerCase()).toBe('path');
 		});
@@ -68,9 +90,15 @@ describe('SVG namespace handling', () => {
 
 	it('should handle mixed static and dynamic SVG elements', () => {
 		component App() {
-			const dynamicPaths = ["M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z"];
-
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
+			const dynamicPaths = ['M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z'];
+
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				fill="none"
+				stroke="currentColor"
+			>
 				<circle cx="12" cy="12" r="10" />
 				for (const pathData of dynamicPaths) {
 					<path d={pathData} />
@@ -93,14 +121,16 @@ describe('SVG namespace handling', () => {
 		expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
 
 		// Verify content
-		expect(path.getAttribute('d')).toBe('M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z');
+		expect(path.getAttribute('d')).toBe(
+			'M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z',
+		);
 	});
 
 	it('should handle nested SVG groups with for loops', () => {
 		component App() {
 			const items = [
-				{ x: "10", y: "10", width: "20", height: "20" },
-				{ x: "40", y: "40", width: "20", height: "20" }
+				{ x: '10', y: '10', width: '20', height: '20' },
+				{ x: '40', y: '40', width: '20', height: '20' },
 			];
 
 			<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
@@ -123,7 +153,7 @@ describe('SVG namespace handling', () => {
 		expect(g.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		expect(rects.length).toBe(2);
 
-		rects.forEach(rect => {
+		rects.forEach((rect) => {
 			expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		});
 
@@ -200,22 +230,39 @@ describe('SVG namespace handling', () => {
 
 	it('should compare static vs dynamic SVG rendering (original problem case)', () => {
 		component App() {
-			const d = ["m14 12 4 4 4-4", "M18 16V7", "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", "M3.304 13h6.392"];
+			const d = [
+				'm14 12 4 4 4-4',
+				'M18 16V7',
+				'm2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16',
+				'M3.304 13h6.392',
+			];
 
 			<div class="container">
-				{/* Dynamic SVG - the original problem case */}
-				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" class="dynamic-svg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					fill="none"
+					stroke="currentColor"
+					class="dynamic-svg"
+				>
 					for (const path of d) {
 						<path d={path} />
 					}
 				</svg>
 
-				{/* Static SVG - always worked */}
-				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" class="static-svg">
-					<path d="m14 12 4 4 4-4"></path>
-					<path d="M18 16V7"></path>
-					<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"></path>
-					<path d="M3.304 13h6.392"></path>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					fill="none"
+					stroke="currentColor"
+					class="static-svg"
+				>
+					<path d="m14 12 4 4 4-4" />
+					<path d="M18 16V7" />
+					<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+					<path d="M3.304 13h6.392" />
 				</svg>
 			</div>
 		}
@@ -236,10 +283,10 @@ describe('SVG namespace handling', () => {
 		expect(staticPaths.length).toBe(4);
 
 		// All paths should have SVG namespace
-		dynamicPaths.forEach(path => {
+		dynamicPaths.forEach((path) => {
 			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		});
-		staticPaths.forEach(path => {
+		staticPaths.forEach((path) => {
 			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
 		});
 
@@ -249,11 +296,11 @@ describe('SVG namespace handling', () => {
 		});
 
 		// Critical test: all paths should be proper SVG elements
-		dynamicPaths.forEach(path => {
+		dynamicPaths.forEach((path) => {
 			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
 			expect(path.tagName.toLowerCase()).toBe('path');
 		});
-		staticPaths.forEach(path => {
+		staticPaths.forEach((path) => {
 			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
 			expect(path.tagName.toLowerCase()).toBe('path');
 		});