Collapse JSXExpressionContainer → AwaitExpression → JSXElement (#12109)

changelog_unreleased/javascript/12088.md

@@ -1,4 +1,4 @@
-#### Inline `await` expressions in JSX (#12088 by @j-f1)
+#### Inline `await` expressions in JSX (#12088 & #12109 by @j-f1)
 
 `await` expressions in JSX are now inlined if their argument would be inlined.
 
@@ -9,6 +9,11 @@
   someVeryLongExpression
 )}
 
+{await (
+  <div>Lorem ipsum ...</div>
+)}
+
+
 // Prettier stable
 {
   await Promise.all(
@@ -16,8 +21,20 @@
   )
 }
 
+{
+  await (
+    <div>Lorem ipsum ...</div>
+  )
+}
+
+
 // Prettier main
 {await Promise.all(
   someVeryLongExpression
 )}
+
+{await (
+  <div>Lorem ipsum ...</div>
+)}
+
 ```

src/language-js/print/jsx.js

@@ -510,7 +510,8 @@ function printJsxExpressionContainer(path, options, print) {
         node.type === "ObjectExpression" ||
         node.type === "ArrowFunctionExpression" ||
         (node.type === "AwaitExpression" &&
-          shouldInline(node.argument, node)) ||
+          (shouldInline(node.argument, node) ||
+            node.argument.type === "JSXElement")) ||
         isCallExpression(node) ||
         node.type === "FunctionExpression" ||
         node.type === "TemplateLiteral" ||

tests/format/jsx/jsx/__snapshots__/jsfmt.spec.js.snap

@@ -652,6 +652,12 @@ async function testFunction() {
     {hierarchyCriticism.IncongruousCooperate.MaterialEducation.OriginalArticulate.Parameter}
     {hierarchyCriticismIncongruousCooperateMaterialEducationOriginalArticulateParameter}
   </>
+
+  const jsx = <>
+    {await (<IncongruousCooperate>
+      material education original articulate parameter
+    </IncongruousCooperate>)}
+  </>
 }
 
 =====================================output=====================================
@@ -693,6 +699,16 @@ async function testFunction() {
       }
     </>
   );
+
+  const jsx = (
+    <>
+      {await (
+        <IncongruousCooperate>
+          material education original articulate parameter
+        </IncongruousCooperate>
+      )}
+    </>
+  );
 }
 
 ================================================================================
@@ -734,6 +750,12 @@ async function testFunction() {
     {hierarchyCriticism.IncongruousCooperate.MaterialEducation.OriginalArticulate.Parameter}
     {hierarchyCriticismIncongruousCooperateMaterialEducationOriginalArticulateParameter}
   </>
+
+  const jsx = <>
+    {await (<IncongruousCooperate>
+      material education original articulate parameter
+    </IncongruousCooperate>)}
+  </>
 }
 
 =====================================output=====================================
@@ -775,6 +797,16 @@ async function testFunction() {
       }
     </>
   );
+
+  const jsx = (
+    <>
+      {await (
+        <IncongruousCooperate>
+          material education original articulate parameter
+        </IncongruousCooperate>
+      )}
+    </>
+  );
 }
 
 ================================================================================
@@ -816,6 +848,12 @@ async function testFunction() {
     {hierarchyCriticism.IncongruousCooperate.MaterialEducation.OriginalArticulate.Parameter}
     {hierarchyCriticismIncongruousCooperateMaterialEducationOriginalArticulateParameter}
   </>
+
+  const jsx = <>
+    {await (<IncongruousCooperate>
+      material education original articulate parameter
+    </IncongruousCooperate>)}
+  </>
 }
 
 =====================================output=====================================
@@ -857,6 +895,16 @@ async function testFunction() {
       }
     </>
   );
+
+  const jsx = (
+    <>
+      {await (
+        <IncongruousCooperate>
+          material education original articulate parameter
+        </IncongruousCooperate>
+      )}
+    </>
+  );
 }
 
 ================================================================================
@@ -898,6 +946,12 @@ async function testFunction() {
     {hierarchyCriticism.IncongruousCooperate.MaterialEducation.OriginalArticulate.Parameter}
     {hierarchyCriticismIncongruousCooperateMaterialEducationOriginalArticulateParameter}
   </>
+
+  const jsx = <>
+    {await (<IncongruousCooperate>
+      material education original articulate parameter
+    </IncongruousCooperate>)}
+  </>
 }
 
 =====================================output=====================================
@@ -939,6 +993,16 @@ async function testFunction() {
       }
     </>
   );
+
+  const jsx = (
+    <>
+      {await (
+        <IncongruousCooperate>
+          material education original articulate parameter
+        </IncongruousCooperate>
+      )}
+    </>
+  );
 }
 
 ================================================================================

tests/format/jsx/jsx/await.js

@@ -26,4 +26,10 @@ async function testFunction() {
     {hierarchyCriticism.IncongruousCooperate.MaterialEducation.OriginalArticulate.Parameter}
     {hierarchyCriticismIncongruousCooperateMaterialEducationOriginalArticulateParameter}
   </>
+
+  const jsx = <>
+    {await (<IncongruousCooperate>
+      material education original articulate parameter
+    </IncongruousCooperate>)}
+  </>
 }