fix: format JSX expressions with 3+ roots (#392)

* fix: format JSX expressions with 3+ roots

* chore: changeset

.changeset/violet-days-attend.md

@@ -0,0 +1,5 @@
+---
+'prettier-plugin-astro': patch
+---
+
+Fix not being able to format expressions with more than 2 roots

src/printer/embed.ts

@@ -232,6 +232,18 @@ function makeNodeJSXCompatible<T>(node: any): T {
 					return result;
 				}
 
+				// If we have a previous children, and it's an element AND
+				// we have a next children, and it's also an element. Add the current children to the bundle
+				if (
+					previousChildren &&
+					isTagLikeNode(previousChildren) &&
+					nextChildren &&
+					isTagLikeNode(nextChildren)
+				) {
+					childBundle[childBundleIndex].push(child);
+					return result;
+				}
+
 				// If we have elements in our bundle, and there's no next children, or it's a text node
 				// Create a fake parent, and add all the previous encountered elements as children of it
 				if (

test/fixtures/other/expression-multiple-roots-stress/input.astro

@@ -0,0 +1,27 @@
+{
+	Promise.all([
+	[].map((something) => {
+		return [
+			<div></div>,
+			<div></div>,
+			<div></div>,
+			<div></div>
+		]
+	}),
+	[].map((something) => {
+		return <div></div><div></div><div></div><div></div>
+	}),
+	[].map((something) => {
+		return <div></div><div></div><div></div><div></div> + <div></div><div></div><div></div><div></div>
+	}),
+	[].map((something) => {
+		return <div></div><div></div><div></div><div></div> + {something: <div></div><div></div><div></div><div></div>}
+	}),
+
+	<div></div><div></div><div></div><div></div>
+	])
+}
+
+{
+	<div></div><div></div><div></div>
+}

test/fixtures/other/expression-multiple-roots-stress/output.astro

@@ -0,0 +1,76 @@
+{
+  Promise.all([
+    [].map((something) => {
+      return [<div />, <div />, <div />, <div />];
+    }),
+    [].map((something) => {
+      return (
+        <>
+          <div />
+          <div />
+          <div />
+          <div />
+        </>
+      );
+    }),
+    [].map((something) => {
+      return (
+        (
+          <>
+            <div />
+            <div />
+            <div />
+            <div />
+          </>
+        ) +
+        (
+          <>
+            <div />
+            <div />
+            <div />
+            <div />
+          </>
+        )
+      );
+    }),
+    [].map((something) => {
+      return (
+        (
+          <>
+            <div />
+            <div />
+            <div />
+            <div />
+          </>
+        ) +
+        {
+          something: (
+            <>
+              <div />
+              <div />
+              <div />
+              <div />
+            </>
+          ),
+        }
+      );
+    }),
+
+    <>
+      <div />
+      <div />
+      <div />
+      <div />
+    </>,
+  ])
+}
+
+{
+  (
+    <>
+      <div />
+      <div />
+      <div />
+    </>
+  )
+}

test/tests/other.test.ts

@@ -123,6 +123,12 @@ test(
 	'other/expression-multiple-roots'
 );
 
+test(
+	'Can format expressions who have multi-roots returns - extreme cases',
+	files,
+	'other/expression-multiple-roots-stress'
+);
+
 test('Can ignore self-closing elements', files, 'other/ignore-self-close');
 
 test('can format spread attributes', files, 'other/spread-attributes');