fix(formatter): apply correct layout to assignment expressions with a…

…wait and yield expressions (#615)

CHANGELOG.md

@@ -20,6 +20,10 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
 ### Formatter
 
+#### Bug fixes
+
+- Apply the correct layout when the right hand of an assignment expression is a await expression or a yield expression. Contributed by @ematipico
+
 ### JavaScript APIs
 
 ### Linter

crates/biome_js_formatter/src/utils/assignment_like.rs

@@ -687,7 +687,7 @@ impl AnyJsAssignmentLike {
             return Ok(AssignmentLikeLayout::BreakLeftHandSide);
         }
 
-        if self.should_break_after_operator(&right, f.context().comments())? {
+        if self.should_break_after_operator(&right, f)? {
             return Ok(AssignmentLikeLayout::BreakAfterOperator);
         }
 
@@ -885,15 +885,16 @@ impl AnyJsAssignmentLike {
     fn should_break_after_operator(
         &self,
         right: &RightAssignmentLike,
-        comments: &JsComments,
+        f: &Formatter<JsFormatContext>,
     ) -> SyntaxResult<bool> {
+        let comments = f.context().comments();
         let result = match right {
             RightAssignmentLike::AnyJsExpression(expression) => {
-                should_break_after_operator(expression, comments)?
+                should_break_after_operator(expression, comments, f)?
             }
             RightAssignmentLike::JsInitializerClause(initializer) => {
                 comments.has_leading_own_line_comment(initializer.syntax())
-                    || should_break_after_operator(&initializer.expression()?, comments)?
+                    || should_break_after_operator(&initializer.expression()?, comments, f)?
             }
             RightAssignmentLike::AnyTsType(AnyTsType::TsUnionType(ty)) => {
                 comments.has_leading_comments(ty.syntax())
@@ -909,6 +910,7 @@ impl AnyJsAssignmentLike {
 pub(crate) fn should_break_after_operator(
     right: &AnyJsExpression,
     comments: &JsComments,
+    f: &Formatter<JsFormatContext>,
 ) -> SyntaxResult<bool> {
     if comments.has_leading_own_line_comment(right.syntax())
         && !matches!(right, AnyJsExpression::JsxTagExpression(_))
@@ -941,7 +943,23 @@ pub(crate) fn should_break_after_operator(
 
         AnyJsExpression::JsClassExpression(class) => !class.decorators().is_empty(),
 
-        _ => false,
+        _ => {
+            let argument = match right {
+                AnyJsExpression::JsAwaitExpression(expression) => expression.argument().ok(),
+                AnyJsExpression::JsYieldExpression(expression) => {
+                    expression.argument().and_then(|arg| arg.expression().ok())
+                }
+                AnyJsExpression::JsUnaryExpression(expression) => expression.argument().ok(),
+                _ => None,
+            };
+
+            if let Some(argument) = argument {
+                matches!(argument, AnyJsExpression::AnyJsLiteralExpression(_))
+                    || is_poorly_breakable_member_or_call_chain(&argument, f)?
+            } else {
+                false
+            }
+        }
     };
 
     Ok(result)

crates/biome_js_formatter/tests/quick_test.rs

@@ -12,17 +12,8 @@ mod language {
 #[test]
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
-    let src = r#"
-        (action: h) => {}
-        (action?) => {}
-        (action
-        // yes
-        ) => {}
-        ({ action }) => {}
-        ([ action ]) => {}
-        (...action) => {}
-        (action = 1) => {}
-    "#;
+    let src =
+        r#"const { looooooooooooooooooooooooooooooooooooooooooooongValue } = await setup(2);"#;
     let syntax = JsFileSource::tsx();
     let tree = parse(
         src,
@@ -48,16 +39,8 @@ fn quick_test() {
     // I don't know why semicolons are added there, but it's not related to my code changes so ¯\_(ツ)_/¯
     assert_eq!(
         result.as_code(),
-        r#"(action: h) => {};
-(action?) => {};
-(
-	action,
-	// yes
-) => {};
-({ action }) => {};
-([action]) => {};
-(...action) => {};
-(action = 1) => {};
+        r#"const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+    await setup(2);
 "#
     );
 }

crates/biome_js_formatter/tests/specs/js/module/assignment/assignment.js

@@ -152,3 +152,11 @@ a =
         a: { t: c = b       }, loreum, ipsurm
     } = {}
 
+
+const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+	await setup(2);
+
+function* f() {
+	const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+		yield setup(2);
+}

crates/biome_js_formatter/tests/specs/js/module/assignment/assignment.js.snap

@@ -161,6 +161,14 @@ a =
     } = {}
 
 
+const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+	await setup(2);
+
+function* f() {
+	const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+		yield setup(2);
+}
+
 ```
 
 
@@ -407,6 +415,14 @@ a = {
 	loreum,
 	ipsurm,
 } = {};
+
+const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+	await setup(2);
+
+function* f() {
+	const { looooooooooooooooooooooooooooooooooooooooooooongValue } =
+		yield setup(2);
+}
 ```
 
 # Lines exceeding max width of 80 characters

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

@@ -26,6 +26,10 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
 ### Formatter
 
+#### Bug fixes
+
+- Apply the correct layout when the right hand of an assignment expression is a await expression or a yield expression. Contributed by @ematipico
+
 ### JavaScript APIs
 
 ### Linter