@tsrx/prettier-plugin 0.3.26 → 0.3.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@types/node": "^24.3.0",
     "prettier": "^3.8.3",
-    "ripple": "0.3.26"
+    "ripple": "0.3.27"
   },
   "dependencies": {
     "@tsrx/core": "0.0.7",

package/src/index.js

@@ -6047,35 +6047,47 @@ function printElement(element, path, options, print) {
 
 	const hasOpeningTagComments = openingTagCommentsSet.size > 0;
 	let attrIndex = 0;
+	let hasBreakingAttribute = false;
+	const attrDocs = hasAttributes
+		? path.map((attrPath) => {
+				const idx = attrIndex++;
+				const commentsForAttr = openingTagCommentsByAttrIndex.get(idx);
+				/** @type {Doc[]} */
+				const parts = [];
+				if (commentsForAttr) {
+					for (const comment of commentsForAttr) {
+						// Line comments (//) consume the rest of the line, so they must
+						// use hardline to force a break. Block comments can use normal breaks.
+						if (comment.type === 'Line') {
+							parts.push(hardline);
+							parts.push('//' + comment.value);
+						} else if (comment.type === 'Block') {
+							parts.push(attrLineBreak);
+							parts.push('/*' + comment.value + '*/');
+						}
+					}
+				}
+				parts.push(attrLineBreak);
+				const attrDoc = print(attrPath);
+				parts.push(attrDoc);
+				if (!hasBreakingAttribute && willBreak(attrDoc)) {
+					hasBreakingAttribute = true;
+				}
+				return parts;
+			}, 'attributes')
+		: [];
+	const shouldForceBreak = hasOpeningTagComments || hasBreakingAttribute;
 	const openingTag = group([
 		'<',
 		tagName,
 		hasAttributes
 			? indent([
-					...path.map((attrPath) => {
-						const idx = attrIndex++;
-						const commentsForAttr = openingTagCommentsByAttrIndex.get(idx);
-						/** @type {Doc[]} */
-						const parts = [];
-						if (commentsForAttr) {
-							for (const comment of commentsForAttr) {
-								// Line comments (//) consume the rest of the line, so they must
-								// use hardline to force a break. Block comments can use normal breaks.
-								if (comment.type === 'Line') {
-									parts.push(hardline);
-									parts.push('//' + comment.value);
-								} else if (comment.type === 'Block') {
-									parts.push(attrLineBreak);
-									parts.push('/*' + comment.value + '*/');
-								}
-							}
-						}
-						parts.push(attrLineBreak);
-						parts.push(print(attrPath));
-						return parts;
-					}, 'attributes'),
-					// Force the group to break when there are line comments in the opening tag
-					...(hasOpeningTagComments ? [breakParent] : []),
+					...attrDocs,
+					// Force the group to break when there are line comments in the opening tag,
+					// or when any attribute value would break (e.g. multiline objects, ternaries).
+					// This ensures attributes are broken onto separate lines rather than breaking
+					// expression values inline on the same line as the tag name.
+					...(shouldForceBreak ? [breakParent] : []),
 				])
 			: '',
 		// Add line break opportunity before > or />

package/src/index.test.js

@@ -926,6 +926,71 @@ export component Test({ a, b }: Props) {}`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should prefer breaking attributes over breaking expression values (multiline object)', 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'}
+  </div>
+}`;
+			const expected = `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'}
+  </div>
+}`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 80 });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should prefer breaking attributes over breaking expression values (multiline object, 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'}
+  </div>
+}`;
+			const expected = `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'}
+  </div>
+}`;
+
+			const result = await format(input, {
+				singleQuote: true,
+				printWidth: 80,
+				bracketSameLine: true,
+			});
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should keep attributes on same line when no attribute value breaks', async () => {
+			const input = `component App() {
+  <button class="test another" onClick={handler}>
+    {'Click Me'}
+  </button>
+}`;
+			const expected = `component App() {
+  <button class="test another" onClick={handler}>{'Click Me'}</button>
+}`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 80 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should not format function parameter spread', async () => {
 			const expected = `component Two({ arg1, ...rest }) {}`;