@ripple-ts/prettier-plugin 0.2.176 → 0.2.178

package/package.json

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

package/src/index.js

@@ -4492,7 +4492,12 @@ function printJSXElement(node, path, options, print) {
 	if (hasAttributes) {
 		const attrs = openingElement.attributes.map((attr, i) => {
 			if (attr.type === 'JSXAttribute') {
-				return printJSXAttribute(attr, path, options, print, i);
+				return path.call(
+					(attrPath) => printJSXAttribute(attrPath.getValue(), attrPath, options, print),
+					'openingElement',
+					'attributes',
+					i,
+				);
 			} else if (attr.type === 'JSXSpreadAttribute') {
 				return concat([
 					'{...',
@@ -4625,7 +4630,7 @@ function printJSXFragment(node, path, options, print) {
 	return group(['<>', indent(concat([hardline, ...formattedChildren])), hardline, '</>']);
 }
 
-function printJSXAttribute(attr, path, options, print, index) {
+function printJSXAttribute(attr, path, options, print) {
 	const name = attr.name.name;
 
 	if (!attr.value) {
@@ -4638,23 +4643,8 @@ function printJSXAttribute(attr, path, options, print, index) {
 	}
 
 	if (attr.value.type === 'JSXExpressionContainer') {
-		// For JSXExpressionContainer, we need to access the expression inside
-		// Use a simple approach since we don't have direct path access here
-		const exprValue = attr.value.expression;
-		let exprStr;
-
-		if (exprValue.type === 'Literal' || exprValue.type === 'StringLiteral') {
-			exprStr = JSON.stringify(exprValue.value);
-		} else if (exprValue.type === 'Identifier') {
-			exprStr = (exprValue.tracked ? '@' : '') + exprValue.name;
-		} else if (exprValue.type === 'MemberExpression') {
-			exprStr = printMemberExpressionSimple(exprValue, options);
-		} else {
-			// For complex expressions, try to stringify
-			exprStr = '...';
-		}
-
-		return concat([name, '={', exprStr, '}']);
+		const exprDoc = path.call(print, 'value', 'expression');
+		return concat([name, '={', exprDoc, '}']);
 	}
 
 	return name;

package/src/index.test.js

@@ -4019,6 +4019,27 @@ component Polygon() {
 				expect(result).toBeWithNewline(expected);
 			});
 
+			it('should format JSX attributes with JSX elements correctly', async () => {
+				const input = `export component App() {
+	<tsx:react>
+		<Suspense fallback={<div>Loading...</div>}>
+			<Child />
+		</Suspense>
+	</tsx:react>
+}`;
+
+				const expected = `export component App() {
+  <tsx:react>
+    <Suspense fallback={<div>Loading...</div>}>
+      <Child />
+    </Suspense>
+  </tsx:react>
+}`;
+
+				const result = await format(input);
+				expect(result).toBeWithNewline(expected);
+			});
+
 			it('should format JSXFragment with text and elements mixed', async () => {
 				const input = `component App() {
 	<tsx:react>