Allow arg hugging for non-concise arrow functions with return type (#10316)

changelog_unreleased/typescript/10316.md

@@ -0,0 +1,21 @@
+#### Allow hugging arguments that are non-concise arrow functions with return type annotations (#10316 by @thorn0)
+
+<!-- prettier-ignore -->
+```ts
+// Input
+users.map((user: User): User => {
+  return user;
+})
+
+// Prettier stable
+users.map(
+  (user: User): User => {
+    return user;
+  }
+);
+
+// Prettier main
+users.map((user: User): User => {
+  return user;
+})
+```

src/language-js/print/call-arguments.js

@@ -240,7 +240,9 @@ function couldGroupArg(arg) {
       // });
       (!arg.returnType ||
         !arg.returnType.typeAnnotation ||
-        arg.returnType.typeAnnotation.type !== "TSTypeReference") &&
+        arg.returnType.typeAnnotation.type !== "TSTypeReference" ||
+        // https://github.com/prettier/prettier/issues/7542
+        isNonEmptyBlockStatement(arg.body)) &&
       (arg.body.type === "BlockStatement" ||
         arg.body.type === "ArrowFunctionExpression" ||
         arg.body.type === "ObjectExpression" ||
@@ -297,4 +299,12 @@ function isReactHookCallWithDepsArray(args) {
   );
 }
 
+function isNonEmptyBlockStatement(node) {
+  return (
+    node.type === "BlockStatement" &&
+    (node.body.some((node) => node.type !== "EmptyStatement") ||
+      hasComment(node, CommentCheckFlags.Dangling))
+  );
+}
+
 module.exports = printCallArguments;

tests/typescript/typeparams/print-width-120/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue-7542.ts - {"printWidth":120} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 120
+                                                                                                                        | printWidth
+=====================================input======================================
+export const Foo = forwardRef((props: FooProps, ref: Ref<HTMLElement>): JSX.Element => {
+  return <div />;
+});
+
+export const Bar = forwardRef((props: BarProps, ref: Ref<HTMLElement>): JSX.Element | null => {
+  return <div />;
+});
+
+users.map((user: User): User => {
+  return user;
+})
+
+users.map((user: User): User => {
+  ; // comment
+})
+
+users.map((user: User): User => {
+  // comment
+})
+
+=====================================output=====================================
+export const Foo = forwardRef((props: FooProps, ref: Ref<HTMLElement>): JSX.Element => {
+  return <div />;
+});
+
+export const Bar = forwardRef((props: BarProps, ref: Ref<HTMLElement>): JSX.Element | null => {
+  return <div />;
+});
+
+users.map((user: User): User => {
+  return user;
+});
+
+users.map((user: User): User => {
+  // comment
+});
+
+users.map((user: User): User => {
+  // comment
+});
+
+================================================================================
+`;

tests/typescript/typeparams/print-width-120/issue-7542.ts

@@ -0,0 +1,19 @@
+export const Foo = forwardRef((props: FooProps, ref: Ref<HTMLElement>): JSX.Element => {
+  return <div />;
+});
+
+export const Bar = forwardRef((props: BarProps, ref: Ref<HTMLElement>): JSX.Element | null => {
+  return <div />;
+});
+
+users.map((user: User): User => {
+  return user;
+})
+
+users.map((user: User): User => {
+  ; // comment
+})
+
+users.map((user: User): User => {
+  // comment
+})

tests/typescript/typeparams/print-width-120/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["typescript"], { printWidth: 120 });