fix(js_formatter): fix invalid formatting of expanded bindings for As…

…Needed arrow parens (#1449)

CHANGELOG.md

@@ -105,6 +105,8 @@ Biome now scores 97% compatibility with Prettier and features more than 180 lint
 
 - Fix [#1171](https://github.com/biomejs/biome/issues/1171). Correctly format empty statement with comment inside arrow body when used as single argument in call expression. Contributed by @kalleep
 
+- Fix [#1106](https://github.com/biomejs/biome/issues/1106). Fix invalid formatting of single bindings when Arrow Parentheses is set to "AsNeeded" and the expression breaks over multiple lines. [#1449](https://github.com/biomejs/biome/pull/1449) Contributed by @faultyserver
+
 ### JavaScript APIs
 
 ### Linter

crates/biome_js_formatter/src/js/expressions/arrow_function_expression.rs

@@ -225,14 +225,13 @@ fn format_signature(
                 AnyJsArrowFunctionParameters::AnyJsBinding(binding) => {
                     let should_hug =
                         is_test_call_argument(arrow.syntax())? || is_first_or_last_call_argument;
-
                     let parentheses_not_needed = can_avoid_parentheses(arrow, f);
 
                     if !parentheses_not_needed {
                         write!(f, [text("(")])?;
                     }
 
-                    if should_hug {
+                    if should_hug || parentheses_not_needed {
                         write!(f, [binding.format()])?;
                     } else {
                         write!(

crates/biome_js_formatter/tests/specs/js/module/arrow/assignment_binding_line_break.js

@@ -0,0 +1,4 @@
+const foo = bar => `This is a string that's long enough to wrap and contains an interpolated value ${bar}
+and then a newline`
+
+const foo = bar => `This is a string that's long enough to wrap and contains an interpolated value ${bar} and then a newline`

crates/biome_js_formatter/tests/specs/js/module/arrow/assignment_binding_line_break.js.snap

@@ -0,0 +1,85 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: js/module/arrow/assignment_binding_line_break.js
+---
+
+# Input
+
+```js
+const foo = bar => `This is a string that's long enough to wrap and contains an interpolated value ${bar}
+and then a newline`
+
+const foo = bar => `This is a string that's long enough to wrap and contains an interpolated value ${bar} and then a newline`
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+JSX quote style: Double Quotes
+Quote properties: As needed
+Trailing comma: All
+Semicolons: Always
+Arrow parentheses: Always
+Bracket spacing: true
+Bracket same line: false
+-----
+
+```js
+const foo = (
+	bar,
+) => `This is a string that's long enough to wrap and contains an interpolated value ${bar}
+and then a newline`;
+
+const foo = (bar) =>
+	`This is a string that's long enough to wrap and contains an interpolated value ${bar} and then a newline`;
+```
+
+# Lines exceeding max width of 80 characters
+```
+    3: ) => `This is a string that's long enough to wrap and contains an interpolated value ${bar}
+    7: 	`This is a string that's long enough to wrap and contains an interpolated value ${bar} and then a newline`;
+```
+
+## Output 2
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+JSX quote style: Double Quotes
+Quote properties: As needed
+Trailing comma: All
+Semicolons: Always
+Arrow parentheses: As needed
+Bracket spacing: true
+Bracket same line: false
+-----
+
+```js
+const foo =
+	bar => `This is a string that's long enough to wrap and contains an interpolated value ${bar}
+and then a newline`;
+
+const foo = bar =>
+	`This is a string that's long enough to wrap and contains an interpolated value ${bar} and then a newline`;
+```
+
+# Lines exceeding max width of 80 characters
+```
+    2: 	bar => `This is a string that's long enough to wrap and contains an interpolated value ${bar}
+    6: 	`This is a string that's long enough to wrap and contains an interpolated value ${bar} and then a newline`;
+```
+
+

crates/biome_js_formatter/tests/specs/ts/arrow/parameter_default_binding_line_break.ts

@@ -0,0 +1,21 @@
+class T {
+    // This aggregates all values per `timestamp`
+    calculateTotalsPerTimestamp(
+      getName: (
+        timestamp: number,
+        countArray: {count: number}[],
+        i: number
+      ) => number = timestamp => timestamp * 1000
+    ): SeriesDataUnit[] {
+    }
+
+    calculateTotalsPerTimestamp(
+      getName: (
+        timestamp: number
+      ) => number = 
+      timestamp => timestamp * 1000
+    ) {
+
+
+    }
+  }

crates/biome_js_formatter/tests/specs/ts/arrow/parameter_default_binding_line_break.ts.snap

@@ -0,0 +1,105 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: ts/arrow/parameter_default_binding_line_break.ts
+---
+
+# Input
+
+```ts
+class T {
+    // This aggregates all values per `timestamp`
+    calculateTotalsPerTimestamp(
+      getName: (
+        timestamp: number,
+        countArray: {count: number}[],
+        i: number
+      ) => number = timestamp => timestamp * 1000
+    ): SeriesDataUnit[] {
+    }
+
+    calculateTotalsPerTimestamp(
+      getName: (
+        timestamp: number
+      ) => number = 
+      timestamp => timestamp * 1000
+    ) {
+
+
+    }
+  }
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+JSX quote style: Double Quotes
+Quote properties: As needed
+Trailing comma: All
+Semicolons: Always
+Arrow parentheses: Always
+Bracket spacing: true
+Bracket same line: false
+-----
+
+```ts
+class T {
+	// This aggregates all values per `timestamp`
+	calculateTotalsPerTimestamp(
+		getName: (
+			timestamp: number,
+			countArray: { count: number }[],
+			i: number,
+		) => number = (timestamp) => timestamp * 1000,
+	): SeriesDataUnit[] {}
+
+	calculateTotalsPerTimestamp(
+		getName: (timestamp: number) => number = (timestamp) => timestamp * 1000,
+	) {}
+}
+```
+
+## Output 2
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+JSX quote style: Double Quotes
+Quote properties: As needed
+Trailing comma: All
+Semicolons: Always
+Arrow parentheses: As needed
+Bracket spacing: true
+Bracket same line: false
+-----
+
+```ts
+class T {
+	// This aggregates all values per `timestamp`
+	calculateTotalsPerTimestamp(
+		getName: (
+			timestamp: number,
+			countArray: { count: number }[],
+			i: number,
+		) => number = timestamp => timestamp * 1000,
+	): SeriesDataUnit[] {}
+
+	calculateTotalsPerTimestamp(
+		getName: (timestamp: number) => number = timestamp => timestamp * 1000,
+	) {}
+}
+```
+
+

website/src/content/docs/internals/changelog.mdx

@@ -111,6 +111,8 @@ Biome now scores 97% compatibility with Prettier and features more than 180 lint
 
 - Fix [#1171](https://github.com/biomejs/biome/issues/1171). Correctly format empty statement with comment inside arrow body when used as single argument in call expression. Contributed by @kalleep
 
+- Fix [#1106](https://github.com/biomejs/biome/issues/1106). Fix invalid formatting of single bindings when Arrow Parentheses is set to "AsNeeded" and the expression breaks over multiple lines. [#1449](https://github.com/biomejs/biome/pull/1449) Contributed by @faultyserver
+
 ### JavaScript APIs
 
 ### Linter