ripple 0.2.146 → 0.2.147

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.147",
   "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.147"
   }
 }

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/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');
 		});