@tsrx/prettier-plugin 0.3.63 → 0.3.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsrx/prettier-plugin",
-  "version": "0.3.63",
+  "version": "0.3.65",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -27,7 +27,7 @@
     "prettier": "^3.8.3"
   },
   "dependencies": {
-    "@tsrx/core": "0.1.12"
+    "@tsrx/core": "0.1.13"
   },
   "files": [
     "src/"

package/src/index.js

@@ -14,7 +14,7 @@
  * @typedef {((path: AstPath) => Doc) & ((path: AstPath, args: PrintArgs) => Doc)} PrintFn
  */
 
-/** @typedef {Partial<Pick<ParserOptions, 'singleQuote' | 'jsxSingleQuote' | 'semi' | 'trailingComma' | 'useTabs' | 'tabWidth' | 'singleAttributePerLine' | 'bracketSameLine' | 'bracketSpacing' | 'arrowParens' | 'originalText'>> & { locStart: (node: AST.NodeWithLocation) => number, locEnd: (node: AST.NodeWithLocation) => number }} RippleFormatOptions */
+/** @typedef {Partial<Pick<ParserOptions, 'singleQuote' | 'jsxSingleQuote' | 'semi' | 'trailingComma' | 'useTabs' | 'tabWidth' | 'singleAttributePerLine' | 'bracketSameLine' | 'bracketSpacing' | 'arrowParens' | 'originalText' | 'printWidth'>> & { locStart: (node: AST.NodeWithLocation) => number, locEnd: (node: AST.NodeWithLocation) => number }} RippleFormatOptions */
 
 /** @typedef {{ isInAttribute?: boolean, isInArray?: boolean, allowInlineObject?: boolean, isConditionalTest?: boolean, isNestedConditional?: boolean, suppressLeadingComments?: boolean, suppressExpressionLeadingComments?: boolean, isInlineContext?: boolean, isStatement?: boolean, isLogicalAndOr?: boolean, allowShorthandProperty?: boolean, isFirstChild?: boolean, skipComponentLabel?: boolean, noBreakInside?: boolean, expandLastArg?: boolean }} PrintArgs */
 
@@ -1506,6 +1506,15 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
+		case 'TSSatisfiesExpression': {
+			nodeContent = [
+				path.call(print, 'expression'),
+				' satisfies ',
+				path.call(print, 'typeAnnotation'),
+			];
+			break;
+		}
+
 		case 'TSNonNullExpression': {
 			nodeContent = [path.call(print, 'expression'), '!'];
 			break;
@@ -1923,8 +1932,23 @@ function printRippleNode(node, path, options, print, args) {
 		case 'LogicalExpression': {
 			const logicalParent = path.getParentNode();
 			let logicalResult;
-			// Don't add indent if we're in a conditional test context
-			if (args?.isConditionalTest) {
+			const rightIsNullLiteral = node.right.type === 'Literal' && node.right.value === null;
+			const shouldKeepNullishFallbackInline =
+				node.operator === '??' &&
+				rightIsNullLiteral &&
+				(node.left.type === 'CallExpression' ||
+					node.left.type === 'ChainExpression' ||
+					node.left.type === 'NewExpression');
+			if (shouldKeepNullishFallbackInline) {
+				logicalResult = group([
+					path.call(print, 'left'),
+					' ',
+					node.operator,
+					' ',
+					path.call(print, 'right'),
+				]);
+			} else if (args?.isConditionalTest) {
+				// Don't add indent if we're in a conditional test context
 				logicalResult = group([
 					path.call((childPath) => print(childPath, { isConditionalTest: true }), 'left'),
 					' ',
@@ -2814,36 +2838,40 @@ function printArrowFunction(node, path, options, print, args) {
 		parts.push(': ', path.call(print, 'returnType'));
 	}
 
-	parts.push(' => ');
-
 	// For block statements, print the body directly to get proper formatting
 	if (node.body.type === 'BlockStatement') {
+		parts.push(' => ');
 		parts.push(path.call(print, 'body'));
 	} else {
 		// For expression bodies, check if we need to wrap in parens
 		// Wrap ObjectExpression, AssignmentExpression, and SequenceExpression in parens
 		// to avoid ambiguity with block statements or to clarify intent
 		const bodyDoc = path.call(print, 'body');
+		const groupId = Symbol('arrow');
+		const shouldBreakBody = shouldBreakArrowExpressionBody(node.body, options, args);
+		/** @type {Doc | Doc[]} */
+		let bodyContent;
 		if (
 			node.body.type === 'ObjectExpression' ||
 			node.body.type === 'AssignmentExpression' ||
-			node.body.type === 'SequenceExpression' ||
-			(args?.isInAttribute && isTemplateExpression(node.body))
+			node.body.type === 'SequenceExpression'
 		) {
-			parts.push('(');
-			if (isTemplateExpression(node.body)) {
-				parts.push(indent([hardline, bodyDoc]));
-				parts.push(hardline);
-			} else {
-				parts.push(bodyDoc);
-			}
-			parts.push(')');
+			bodyContent = ['(', bodyDoc, ')'];
 		} else {
-			parts.push(bodyDoc);
+			bodyContent = bodyDoc;
+		}
+		if (shouldBreakBody) {
+			parts.push(' =>', indent([hardline, bodyContent]));
+		} else {
+			parts.push(
+				' =>',
+				group(indent(line), { id: groupId }),
+				indentIfBreak(bodyContent, { groupId }),
+			);
 		}
 	}
 
-	return parts;
+	return group(parts);
 }
 
 /**
@@ -2861,6 +2889,15 @@ function isTemplateExpression(node) {
 	);
 }
 
+/**
+ * Check whether a braced attribute expression should close on its own line.
+ * @param {AST.Node} node - The expression inside the attribute braces
+ * @returns {boolean}
+ */
+function shouldBreakAttributeExpressionClosingBrace(node) {
+	return node.type === 'ArrowFunctionExpression' && node.body && isTemplateExpression(node.body);
+}
+
 /**
  * Print an export default declaration
  * @param {AST.ExportDefaultDeclaration} node - The export default node
@@ -3053,6 +3090,37 @@ function shouldHugArrowFunctions(args) {
 	return firstBlockIndex === 0;
 }
 
+/**
+ * Check whether a node's original source span exceeds the configured print width.
+ * @param {AST.NodeWithLocation} node - The node to check
+ * @param {RippleFormatOptions} options - Prettier options
+ * @returns {boolean}
+ */
+function sourceSpanExceedsPrintWidth(node, options) {
+	const printWidth = options.printWidth ?? 80;
+	if (!options.originalText || node.start === undefined || node.end === undefined) {
+		return false;
+	}
+	return options.originalText.slice(node.start, node.end).length > printWidth;
+}
+
+/**
+ * Check if an arrow expression body should break immediately after `=>`.
+ * @param {AST.Expression} node - The arrow body expression
+ * @param {RippleFormatOptions} options - Prettier options
+ * @param {PrintArgs} [args] - Additional context arguments
+ * @returns {boolean}
+ */
+function shouldBreakArrowExpressionBody(node, options, args) {
+	if (args?.isInAttribute && isTemplateExpression(node)) {
+		return true;
+	}
+	return (
+		(node.type === 'BinaryExpression' || node.type === 'LogicalExpression') &&
+		sourceSpanExceedsPrintWidth(/** @type {AST.NodeWithLocation} */ (node), options)
+	);
+}
+
 /**
  * Print call expression arguments
  * @param {AstPath<AST.CallExpression>} path - The call path
@@ -5727,7 +5795,7 @@ function printTsx(node, path, options, print) {
 		return [tagName, closingTagName];
 	}
 
-	if (printedChildren.length > 1) {
+	if (!is_fragment || printedChildren.length > 1) {
 		return group([
 			tagName,
 			indent([hardline, join(hardline, printedChildren)]),
@@ -6141,11 +6209,15 @@ function printJSXAttribute(attr, path, options, print) {
 	}
 
 	if (attr.value.type === 'JSXExpressionContainer') {
+		const expression = attr.value.expression;
 		const exprDoc = path.call(
 			(valuePath) => print(valuePath, { isInAttribute: true }),
 			'value',
 			'expression',
 		);
+		if (shouldBreakAttributeExpressionClosingBrace(expression)) {
+			return [name, '={', exprDoc, hardline, '}'];
+		}
 		return [name, '={', exprDoc, '}'];
 	}
 
@@ -6723,6 +6795,9 @@ function printAttribute(node, path, options, print) {
 			parts.push('={');
 			// Pass inline context for attribute values (keep objects compact)
 			parts.push(path.call((attrPath) => print(attrPath, { isInAttribute: true }), 'value'));
+			if (shouldBreakAttributeExpressionClosingBrace(node.value)) {
+				parts.push(hardline);
+			}
 			parts.push('}');
 		}
 	}

package/src/index.test.js

@@ -200,6 +200,58 @@ describe('prettier-plugin', () => {
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should format explicit tsx arrow returns like tsrx blocks', async () => {
+			const input = `component Test(props) {
+	const func = (item) => <tsx><ItemView item={item} onSelect={props.onSelect} /></tsx>;
+
+	<List
+		items={props.items}
+		renderItem={(item) => <tsx><ItemView item={item} onSelect={props.onSelect} /></tsx>}
+	/>
+}`;
+			const expected = `component Test(props) {
+  const func = (item) => <tsx>
+    <ItemView item={item} onSelect={props.onSelect} />
+  </tsx>;
+
+  <List
+    items={props.items}
+    renderItem={(item) =>
+      <tsx>
+        <ItemView item={item} onSelect={props.onSelect} />
+      </tsx>
+    }
+  />
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('should format template arrow returns in tsx attributes like ripple attributes', async () => {
+			const input = `component Test(props) {
+	const view = <tsx>
+		<List
+			items={props.items}
+			renderItem={(item) => <tsx><ItemView item={item} onSelect={props.onSelect} /></tsx>}
+		/>
+	</tsx>;
+}`;
+			const expected = `component Test(props) {
+  const view = <tsx>
+    <List
+      items={props.items}
+      renderItem={(item) =>
+        <tsx>
+          <ItemView item={item} onSelect={props.onSelect} />
+        </tsx>
+      }
+    />
+  </tsx>;
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should preserve comments before expressions after nested tsx and tsrx blocks', async () => {
 			const input = `component App() {
 	const content = <tsx>
@@ -255,7 +307,7 @@ describe('prettier-plugin', () => {
 }`,
 					expected: `component Test() {
   <A
-    fallback={(error) => (
+    fallback={(error) =>
       <>
         <B
           id="xyz"
@@ -265,7 +317,7 @@ describe('prettier-plugin', () => {
           otherProp={2}
         />
       </>
-    )}
+    }
   />
 }`,
 				},
@@ -279,7 +331,7 @@ describe('prettier-plugin', () => {
 }`,
 					expected: `component Test() {
   <A
-    fallback={(error) => (
+    fallback={(error) =>
       <tsx>
         <B
           id="xyz"
@@ -289,7 +341,7 @@ describe('prettier-plugin', () => {
           otherProp={2}
         />
       </tsx>
-    )}
+    }
   />
 }`,
 				},
@@ -303,7 +355,7 @@ describe('prettier-plugin', () => {
 }`,
 					expected: `component Test() {
   <A
-    fallback={(error) => (
+    fallback={(error) =>
       <tsrx>
         <B
           id="xyz"
@@ -313,7 +365,7 @@ describe('prettier-plugin', () => {
           otherProp={2}
         />
       </tsrx>
-    )}
+    }
   />
 }`,
 				},
@@ -327,7 +379,7 @@ describe('prettier-plugin', () => {
 }`,
 					expected: `component Test() {
   <A
-    fallback={(error) => (
+    fallback={(error) =>
       <tsx:react>
         <B
           id="xyz"
@@ -337,7 +389,7 @@ describe('prettier-plugin', () => {
           otherProp={2}
         />
       </tsx:react>
-    )}
+    }
   />
 }`,
 				},
@@ -1015,7 +1067,9 @@ import { Something, type Props, track } from 'ripple';`;
 const foo = <tsx><Bar {...props} /></tsx>;`;
 
 			const expected = `const props = {};
-const foo = <tsx><Bar {...props} /></tsx>;`;
+const foo = <tsx>
+  <Bar {...props} />
+</tsx>;`;
 
 			const result = await format(input, { singleQuote: true });
 			expect(result).toBeWithNewline(expected);
@@ -1380,6 +1434,31 @@ import { effect, track } from 'ripple';`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should break arrow before a long generic optional call with nullish fallback', async () => {
+			const input = `const test = () => menuRef.current?.querySelector<HTMLElement>(
+        "[role=\\"menuitem\\"]:not([aria-disabled=\\"true\\"])",
+      ) ??
+        null`;
+			const expected = `const test = () =>
+  menuRef.current?.querySelector<HTMLElement>(
+    '[role="menuitem"]:not([aria-disabled="true"])',
+  ) ?? null;`;
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
+		it('keeps nullish fallback inline in a conditional test', async () => {
+			const input = `const test = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])') ?? null ? a : b;`;
+			const expected = `const test =
+  menuRef.current?.querySelector<HTMLElement>(
+    '[role="menuitem"]:not([aria-disabled="true"])',
+  ) ?? null
+    ? a
+    : b;`;
+			const result = await format(input, { singleQuote: true });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('does not add spaces around inlined array elements in destructured arguments', async () => {
 			const expected = `for (const [key, value] of Object.entries(attributes).filter(([_key, value]) => value !== '')) {
 }
@@ -2254,7 +2333,9 @@ files = [...(files ?? []), ...dt.files];`;
 
 			const expected = `class Foo {
   bar() {
-    return <tsx>{'Hello'}</tsx>;
+    return <tsx>
+      {'Hello'}
+    </tsx>;
   }
 }`;
 
@@ -2613,6 +2694,35 @@ component Child({ something }) {
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('prints satisfies expressions in switch default cases', async () => {
+			const input = `export component Test(props: { status: "ok" | "error" }) {
+  switch (props.status) {
+    case "ok":
+      <div>"ok"</div>
+      return
+    case "error":
+      <div>"error"</div>
+      return
+    default:
+      props.status satisfies never
+  }
+}`;
+			const expected = `export component Test(props: { status: "ok" | "error" }) {
+  switch (props.status) {
+    case "ok":
+      <div>"ok"</div>
+      return;
+    case "error":
+      <div>"error"</div>
+      return;
+    default:
+      props.status satisfies never;
+  }
+}`;
+			const result = await format(input);
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('prints function with a rest parameter correctly', async () => {
 			const expected = `function TestRest(...args: string[]) {
   console.log(args);