@ripple-ts/prettier-plugin 0.2.157 → 0.2.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/prettier-plugin",
-  "version": "0.2.157",
+  "version": "0.2.158",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "prettier": "^3.6.2",
-    "ripple": "0.2.157"
+    "ripple": "0.2.158"
   },
   "dependencies": {},
   "files": [

package/src/index.js

@@ -1168,6 +1168,11 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
+		case 'JSXExpressionContainer': {
+			nodeContent = concat(['{', path.call(print, 'expression'), '}']);
+			break;
+		}
+
 		case 'NewExpression':
 			nodeContent = printNewExpression(node, path, options, print);
 			break;
@@ -4325,29 +4330,59 @@ function printTsxCompat(node, path, options, print) {
 	}
 
 	// Print JSXElement children - they remain as JSX
-	// Filter out whitespace-only JSXText nodes
+	// Filter out whitespace-only JSXText nodes and merge adjacent text-like nodes
 	const finalChildren = [];
+	let accumulatedText = '';
 
 	for (let i = 0; i < node.children.length; i++) {
 		const child = node.children[i];
 
-		// Skip whitespace-only JSXText nodes
-		if (child.type === 'JSXText' && !child.value.trim()) {
-			continue;
-		}
+		// Check if this is a text-like node (JSXText or Identifier in JSX context)
+		const isTextLike = child.type === 'JSXText' || child.type === 'Identifier';
 
-		const printedChild = path.call(print, 'children', i);
-		finalChildren.push(printedChild);
+		if (isTextLike) {
+			// Get the text content
+			let text;
+			if (child.type === 'JSXText') {
+				text = child.value.trim();
+			} else if (child.type === 'Identifier') {
+				text = child.name;
+			}
 
-		if (i < node.children.length - 1) {
-			// Only add hardline if the next child is not whitespace-only
-			const nextChild = node.children[i + 1];
-			if (nextChild && !(nextChild.type === 'JSXText' && !nextChild.value.trim())) {
+			if (text) {
+				if (accumulatedText) {
+					accumulatedText += ' ' + text;
+				} else {
+					accumulatedText = text;
+				}
+			}
+		} else {
+			// Before adding non-text node, flush accumulated text
+			if (accumulatedText) {
+				if (finalChildren.length > 0) {
+					finalChildren.push(hardline);
+				}
+				finalChildren.push(accumulatedText);
+				accumulatedText = '';
+			}
+
+			if (finalChildren.length > 0) {
 				finalChildren.push(hardline);
 			}
+
+			const printedChild = path.call(print, 'children', i);
+			finalChildren.push(printedChild);
 		}
 	}
 
+	// Don't forget any remaining accumulated text
+	if (accumulatedText) {
+		if (finalChildren.length > 0) {
+			finalChildren.push(hardline);
+		}
+		finalChildren.push(accumulatedText);
+	}
+
 	// Format the TsxCompat element
 	const elementOutput = group([
 		tagName,
@@ -4404,26 +4439,45 @@ function printJSXElement(node, path, options, print) {
 		return concat(['<', tagName, attributesDoc, '></', tagName, '>']);
 	}
 
-	// Format children - filter out empty text nodes
+	// Format children - filter out empty text nodes and merge adjacent text nodes
 	const childrenDocs = [];
+	let currentText = '';
+
 	for (let i = 0; i < node.children.length; i++) {
 		const child = node.children[i];
 
 		if (child.type === 'JSXText') {
-			// Handle JSX text nodes - only include if not just whitespace
-			const text = child.value;
-			if (text.trim()) {
-				childrenDocs.push(text);
+			// Accumulate text content, preserving spaces between words
+			const trimmed = child.value.trim();
+			if (trimmed) {
+				if (currentText) {
+					currentText += ' ' + trimmed;
+				} else {
+					currentText = trimmed;
+				}
 			}
-		} else if (child.type === 'JSXExpressionContainer') {
-			// Handle JSX expression containers
-			childrenDocs.push(concat(['{', path.call(print, 'children', i, 'expression'), '}']));
 		} else {
-			// Handle nested JSX elements
-			childrenDocs.push(path.call(print, 'children', i));
+			// If we have accumulated text, push it before the non-text node
+			if (currentText) {
+				childrenDocs.push(currentText);
+				currentText = '';
+			}
+
+			if (child.type === 'JSXExpressionContainer') {
+				// Handle JSX expression containers
+				childrenDocs.push(concat(['{', path.call(print, 'children', i, 'expression'), '}']));
+			} else {
+				// Handle nested JSX elements
+				childrenDocs.push(path.call(print, 'children', i));
+			}
 		}
 	}
 
+	// Don't forget any remaining text
+	if (currentText) {
+		childrenDocs.push(currentText);
+	}
+
 	// Check if content can be inlined (single text node or single expression)
 	if (childrenDocs.length === 1 && typeof childrenDocs[0] === 'string') {
 		return concat(['<', tagName, attributesDoc, '>', childrenDocs[0], '</', tagName, '>']);

package/src/index.test.js

@@ -3812,6 +3812,82 @@ component Polygon() {
 				const result = await format(input, { singleQuote: true });
 				expect(result).toBeWithNewline(expected);
 			});
+
+			it('should format JSXExpressionContainer with function calls', async () => {
+				const input = `function foo(){return 123}component App(){<div><tsx:react>{foo()}</tsx:react></div>}`;
+
+				const expected = `function foo() {
+  return 123;
+}
+component App() {
+  <div>
+    <tsx:react>
+      {foo()}
+    </tsx:react>
+  </div>
+}`;
+
+				const result = await format(input);
+				expect(result).toBeWithNewline(expected);
+			});
+
+			it('should format JSXExpressionContainer with function calls', async () => {
+				const input = `function foo(){return 123}component App(){<div><tsx:react>{foo()}<div>Hello world</div>Hello world</tsx:react></div>}`;
+
+				const expected = `function foo() {
+  return 123;
+}
+component App() {
+  <div>
+    <tsx:react>
+      {foo()}
+      <div>Hello world</div>
+      Hello world
+    </tsx:react>
+  </div>
+}`;
+
+				const result = await format(input);
+				expect(result).toBeWithNewline(expected);
+			});
+
+			it('should format JSXExpressionContainer with function calls #2', async () => {
+				const input = `export component App() {
+	<tsx:react>
+		Hello world
+		<DemoContext.Provider value={"Hello from Context!"}>
+			<Child count={@count} />
+		</DemoContext.Provider>
+	</tsx:react>
+}`;
+				const expected = `export component App() {
+  <tsx:react>
+    Hello world
+    <DemoContext.Provider value={"Hello from Context!"}>
+      <Child count={@count} />
+    </DemoContext.Provider>
+  </tsx:react>
+}`;
+
+				const result = await format(input);
+				expect(result).toBeWithNewline(expected);
+			});
+			it('should format JSXExpressionContainer with complex expressions', async () => {
+				const input = `component App(){let count=track(0);<tsx:react><div>{count*2+10}</div>{getMessage("test")}</tsx:react>}`;
+
+				const expected = `component App() {
+  let count = track(0);
+  <tsx:react>
+    <div>
+      {count * 2 + 10}
+    </div>
+    {getMessage('test')}
+  </tsx:react>
+}`;
+
+				const result = await format(input, { singleQuote: true });
+				expect(result).toBeWithNewline(expected);
+			});
 		});
 	});
 });