@tsrx/prettier-plugin 0.3.28 → 0.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -26,11 +26,11 @@
   "devDependencies": {
     "@types/node": "^24.3.0",
     "prettier": "^3.8.3",
-    "ripple": "0.3.28"
+    "ripple": "0.3.30"
   },
   "dependencies": {
-    "@tsrx/core": "0.0.8",
-    "@tsrx/ripple": "0.0.10"
+    "@tsrx/core": "0.0.10",
+    "@tsrx/ripple": "0.0.12"
   },
   "files": [
     "src/"

package/src/index.js

@@ -5554,6 +5554,7 @@ function createElementLevelCommentPartsTrimmed(comments) {
 
 /**
  * Print a Tsx node - renders Ripple template children inside <tsx>...</tsx>
+ * or fragment shorthand <>...</> when the original source used a fragment.
  * @param {AST.Tsx} node - The Tsx node
  * @param {AstPath<AST.Tsx>} path - The AST path
  * @param {RippleFormatOptions} options - Prettier options
@@ -5561,8 +5562,9 @@ function createElementLevelCommentPartsTrimmed(comments) {
  * @returns {Doc}
  */
 function printTsx(node, path, options, print) {
-	const tagName = '<tsx>';
-	const closingTagName = '</tsx>';
+	const is_fragment = !node.openingElement?.name;
+	const tagName = is_fragment ? '<>' : '<tsx>';
+	const closingTagName = is_fragment ? '</>' : '</tsx>';
 
 	const hasChildren = Array.isArray(node.children) && node.children.length > 0;
 
@@ -5947,6 +5949,31 @@ function printMemberExpressionSimple(node, options, computed = false) {
 	return '';
 }
 
+/**
+ * Check whether an attribute value can expand into multiline content.
+ * @param {AST.Expression | null | undefined} value - The attribute value node
+ * @param {boolean} [is_nested_in_object=false] - Whether this value is nested within an object literal
+ * @returns {boolean}
+ */
+function is_attribute_value_breakable(value, is_nested_in_object = false) {
+	if (!value) return false;
+
+	switch (value.type) {
+		case 'ConditionalExpression':
+			// Keep simple top-level ternary attributes inline when they fit.
+			// We only force-break when a conditional is nested in an object literal value.
+			return is_nested_in_object;
+		case 'ObjectExpression':
+			return value.properties.some(
+				(property) =>
+					property.type === 'Property' &&
+					is_attribute_value_breakable(/** @type {AST.Expression} */ (property.value), true),
+			);
+		default:
+			return false;
+	}
+}
+
 /**
  * Print a Ripple Element node
  * @param {AST.Element} element - The element node
@@ -6070,7 +6097,12 @@ function printElement(element, path, options, print) {
 				parts.push(attrLineBreak);
 				const attrDoc = print(attrPath);
 				parts.push(attrDoc);
-				if (!hasBreakingAttribute && willBreak(attrDoc)) {
+				const attr_node = /** @type {AST.Attribute | AST.SpreadAttribute} */ (attrPath.node);
+				if (
+					!hasBreakingAttribute &&
+					(willBreak(attrDoc) ||
+						(attr_node.type === 'Attribute' && is_attribute_value_breakable(attr_node.value)))
+				) {
 					hasBreakingAttribute = true;
 				}
 				return parts;

package/src/index.test.js

@@ -926,7 +926,7 @@ export component Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should prefer breaking attributes over breaking expression values (multiline object)', async () => {
+		it('should prefer breaking attributes over inline breakable object values', async () => {
 			const input = `component App() {
   <div class={styles.item} data-active={state.active ? "true" : "false"} style={{ gridTemplateColumns: Icon ? "16px minmax(0, 1fr) auto" : "minmax(0, 1fr) auto" }}>
     {'content'}
@@ -936,21 +936,17 @@ export component Test({ a, b }: Props) {}`;
   <div
     class={styles.item}
     data-active={state.active ? 'true' : 'false'}
-    style={{
-      gridTemplateColumns: Icon
-        ? '16px minmax(0, 1fr) auto'
-        : 'minmax(0, 1fr) auto',
-    }}
+    style={{ gridTemplateColumns: Icon ? '16px minmax(0, 1fr) auto' : 'minmax(0, 1fr) auto' }}
   >
     {'content'}
   </div>
 }`;
 
-			const result = await format(input, { singleQuote: true, printWidth: 80 });
+			const result = await format(input, { singleQuote: true, printWidth: 200 });
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should prefer breaking attributes over breaking expression values (multiline object, bracketSameLine)', async () => {
+		it('should prefer breaking attributes over inline breakable object values (bracketSameLine)', async () => {
 			const input = `component App() {
   <div class={styles.item} data-active={state.active ? "true" : "false"} style={{ gridTemplateColumns: Icon ? "16px minmax(0, 1fr) auto" : "minmax(0, 1fr) auto" }}>
     {'content'}
@@ -960,18 +956,14 @@ export component Test({ a, b }: Props) {}`;
   <div
     class={styles.item}
     data-active={state.active ? 'true' : 'false'}
-    style={{
-      gridTemplateColumns: Icon
-        ? '16px minmax(0, 1fr) auto'
-        : 'minmax(0, 1fr) auto',
-    }}>
+    style={{ gridTemplateColumns: Icon ? '16px minmax(0, 1fr) auto' : 'minmax(0, 1fr) auto' }}>
     {'content'}
   </div>
 }`;
 
 			const result = await format(input, {
 				singleQuote: true,
-				printWidth: 80,
+				printWidth: 200,
 				bracketSameLine: true,
 			});
 			expect(result).toBeWithNewline(expected);
@@ -991,6 +983,18 @@ export component Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should keep short top-level ternary attributes inline when they fit', async () => {
+			const input = `component App() {
+  <div class={selected === 0 ? "selected" : ""}>{\`div 1\`}</div>
+}`;
+			const expected = `component App() {
+  <div class={selected === 0 ? 'selected' : ''}>{\`div 1\`}</div>
+}`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should not format function parameter spread', async () => {
 			const expected = `component Two({ arg1, ...rest }) {}`;
 
@@ -1935,6 +1939,40 @@ files = [...(files ?? []), ...dt.files];`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should preserve fragment shorthand in class methods', async () => {
+			const input = `class Foo {
+	bar() {
+		return <>{"Hello"}</>;
+	}
+}`;
+
+			const expected = `class Foo {
+  bar() {
+    return <>{'Hello'}</>;
+  }
+}`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should preserve explicit tsx blocks in class methods', async () => {
+			const input = `class Foo {
+	bar() {
+		return <tsx>{"Hello"}</tsx>;
+	}
+}`;
+
+			const expected = `class Foo {
+  bar() {
+    return <tsx>{'Hello'}</tsx>;
+  }
+}`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should format class with a literal component method', async () => {
 			const input = `class TestClass {
   component 'something'() {