fix(js_formatter): break long destructuring binding pattern (#2185)

CHANGELOG.md

@@ -23,6 +23,10 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 ### Formatter
 
+#### Bug fixes
+
+- Fix [#2172](https://github.com/biomejs/biome/issues/2172) by breaking long object destructuring patterns. Contributed by @ah-yu
+
 ### JavaScript APIs
 
 ### Linter

crates/biome_js_formatter/src/js/bindings/object_binding_pattern_property.rs

@@ -1,6 +1,6 @@
 use crate::prelude::*;
 
-use biome_formatter::write;
+use biome_formatter::{format_args, write};
 use biome_js_syntax::JsObjectBindingPatternProperty;
 use biome_js_syntax::JsObjectBindingPatternPropertyFields;
 
@@ -20,14 +20,17 @@ impl FormatNodeRule<JsObjectBindingPatternProperty> for FormatJsObjectBindingPat
             init,
         } = node.as_fields();
 
+        let group_id = f.group_id("assignment");
+
         write![
             f,
-            [
+            [group(&format_args![
                 member.format(),
                 colon_token.format(),
-                space(),
-                pattern.format(),
-            ]
+                group(&indent(&soft_line_break_or_space())).with_group_id(Some(group_id)),
+                line_suffix_boundary(),
+                indent_if_group_breaks(&pattern.format(), group_id)
+            ])]
         ]?;
 
         if let Some(init) = init {

crates/biome_js_formatter/tests/specs/js/module/binding/object_binding.js

@@ -2,3 +2,4 @@ let {a}=b
 let {d,b:c}=d
 let {x,y=c,z:pp=f,...g}=h
 let {aaaaaaaaaaaaaaaaaaaa,bbbbbbbbbbbbbbbbbbbb=cccccccccccccccccccc,dddddddddddddddddddd:eeeeeeeeeeeeeeeeeeee=ffffffffffffffffffff,...gggggggggggggggggggg}=h
+let {looooooooooooooooooooooooooooooooooooooooooong: loooooooooooooooooooooooooooooooooooooooooong }=h

crates/biome_js_formatter/tests/specs/js/module/binding/object_binding.js.snap

@@ -2,15 +2,14 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: js/module/binding/object_binding.js
 ---
-
 # Input
 
 ```js
 let {a}=b
 let {d,b:c}=d
 let {x,y=c,z:pp=f,...g}=h
 let {aaaaaaaaaaaaaaaaaaaa,bbbbbbbbbbbbbbbbbbbb=cccccccccccccccccccc,dddddddddddddddddddd:eeeeeeeeeeeeeeeeeeee=ffffffffffffffffffff,...gggggggggggggggggggg}=h
-
+let {looooooooooooooooooooooooooooooooooooooooooong: loooooooooooooooooooooooooooooooooooooooooong }=h
 ```
 
 
@@ -46,6 +45,10 @@ let {
 	dddddddddddddddddddd: eeeeeeeeeeeeeeeeeeee = ffffffffffffffffffff,
 	...gggggggggggggggggggg
 } = h;
+let {
+	looooooooooooooooooooooooooooooooooooooooooong:
+		loooooooooooooooooooooooooooooooooooooooooong,
+} = h;
 ```
 
 ## Output 2
@@ -76,6 +79,8 @@ let {
 	dddddddddddddddddddd: eeeeeeeeeeeeeeeeeeee = ffffffffffffffffffff,
 	...gggggggggggggggggggg
 } = h;
+let {
+	looooooooooooooooooooooooooooooooooooooooooong:
+		loooooooooooooooooooooooooooooooooooooooooong,
+} = h;
 ```
-
-

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

@@ -29,6 +29,10 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 ### Formatter
 
+#### Bug fixes
+
+- Fix [#2172](https://github.com/biomejs/biome/issues/2172) by breaking long object destructuring patterns. Contributed by @ah-yu
+
 ### JavaScript APIs
 
 ### Linter