Fix fragment in tr printing incorrect output (#926)

* add test case * handle fragments in tables * WIP: use incorrect white space for tests to pass * bring back expected white space in test * appropriate whitespace fix * chore: changeset --------- Co-authored-by: Nate Moore <[email protected]>
withastro · Jan 4, 2024 · f9373f2 · f9373f2
1 parent b52f7d1
commit f9373f2
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 2 deletions.
diff --git a/.changeset/plenty-mice-beam.md b/.changeset/plenty-mice-beam.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fixes an issue where Astro fragments used inside a `table` element would cause lots of missing pieces of markup
diff --git a/internal/parser.go b/internal/parser.go
@@ -1785,10 +1785,9 @@ func inTableIM(p *parser) bool {
 		p.im = inExpressionIM
 		return true
 	case StartTagToken:
-		if isComponent(p.tok.Data) {
+		if isComponent(p.tok.Data) || isFragment(p.tok.Data) {
 			p.originalIM = inTableIM
 			p.im = inLiteralIM
-			p.exitLiteralIM = getExitLiteralFunc(p)
 			return false
 		}
 		switch p.tok.DataAtom {

diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
@@ -2086,6 +2086,99 @@ const content = "lol";
       }
     </table>Hello
   </body>
+</html>`,
+			},
+		},
+		{
+			name: "complex table",
+			source: `<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Astro Multi Table</title>
+    </head>
+    <body>
+        <main>
+            <section>
+                {Array(3).fill(false).map((item, idx) => <div>
+                    <div class="row">
+                        {'a'}
+                        <table>
+                            <thead>
+                                <tr>
+                                    <>{Array(7).fill(false).map((entry, index) => <th>A</th>)}</>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>)}
+            </section>
+            <section>
+                <div class="row">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>B</th>
+                                <th>B</th>
+                                <th>B</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr><td></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+    </body>
+</html>`,
+			want: want{
+				code: `<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Astro Multi Table</title>
+    ${$$renderHead($$result)}</head>
+    <body>
+        <main>
+            <section>
+                ${Array(3).fill(false).map((item, idx) => $$render` + BACKTICK + `<div>
+                    <div class="row">
+                        ${'a'}
+                        <table>
+                            <thead>
+                                <tr>
+                                    ${$$renderComponent($$result,'Fragment',Fragment,{},{"default": () => $$render` + BACKTICK + `${Array(7).fill(false).map((entry, index) => $$render` + BACKTICK + `<th>A</th>` + BACKTICK + `)}` + BACKTICK + `,})}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><td></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>` + BACKTICK + `)}
+            </section>
+            <section>
+                <div class="row">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>B</th>
+                                <th>B</th>
+                                <th>B</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr><td></td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </main>
+    </body>
 </html>`,
 			},
 		},