Fix expression in th causing infinite loop (#954)

* add test * handle expression in `th` * chore: changeset * chore: use a descriptive test name * chore: remove outdated comment
withastro · Jan 30, 2024 · db93975 · db93975
1 parent 418558c
commit db93975
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/.changeset/young-cougars-enjoy.md b/.changeset/young-cougars-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fixes an issue where an expression inside a `th` tag would cause an infinite loop
diff --git a/internal/parser.go b/internal/parser.go
@@ -2762,7 +2762,7 @@ func inExpressionIM(p *parser) bool {
 			}
 		} else {
 			switch p.tok.DataAtom {
-			case a.Table, a.Tbody, a.Thead, a.Tr, a.Td:
+			case a.Table, a.Tbody, a.Thead, a.Tr, a.Td, a.Th:
 				p.im = inLiteralIM
 				p.originalIM = inExpressionIM
 				p.exitLiteralIM = getExitLiteralFunc(p)

diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
@@ -2412,6 +2412,100 @@ const content = "lol";
 </html>`,
 			},
 		},
+		{
+			name: "table with expression in 'th'",
+			source: `---
+const { title, footnotes, tables } = Astro.props;
+
+interface Table {
+	title: string;
+	data: any[];
+	showTitle: boolean;
+	footnotes: string;
+}
+console.log(tables);
+---
+
+<div>
+	<div>
+	<h2>
+		{title}
+	</h2>
+	{
+		tables.map((table: Table) => (
+		<>
+			<div>
+			<h3 class="text-3xl sm:text-5xl font-bold">{table.title}</h3>
+			<table>
+				<thead>
+				{Object.keys(table.data[0]).map((thead) => (
+					<th>{thead}</th>
+				))}
+				</thead>
+				<tbody>
+				{table.data.map((trow) => (
+					<tr>
+					{Object.values(trow).map((cell, index) => (
+						<td>
+						{cell}
+						</td>
+					))}
+					</tr>
+				))}
+				</tbody>
+			</table>
+			</div>
+		</>
+		))
+	}
+	</div>
+</div>`,
+			want: want{
+				frontmatter: []string{``, `const { title, footnotes, tables } = Astro.props;
+
+interface Table {
+	title: string;
+	data: any[];
+	showTitle: boolean;
+	footnotes: string;
+}
+console.log(tables);`},
+				code: `${$$maybeRenderHead($$result)}<div>
+	<div>
+	<h2>
+		${title}
+	</h2>
+	${
+		tables.map((table: Table) => (
+		$$render` + BACKTICK + `${$$renderComponent($$result,'Fragment',Fragment,{},({"default": () => $$render` + BACKTICK + `
+			<div>
+			<h3 class="text-3xl sm:text-5xl font-bold">${table.title}</h3>
+			<table>
+				<thead>
+				${Object.keys(table.data[0]).map((thead) => (
+					$$render` + BACKTICK + `<th>${thead}</th>` + BACKTICK + `
+				))}
+				</thead>
+				<tbody>
+				${table.data.map((trow) => (
+					$$render` + BACKTICK + `<tr>
+					${Object.values(trow).map((cell, index) => (
+						$$render` + BACKTICK + `<td>
+						${cell}
+						</td>` + BACKTICK + `
+					))}
+					</tr>` + BACKTICK + `
+				))}
+				</tbody>
+			</table>
+			</div>
+		` + BACKTICK + `,}))}` + BACKTICK + `
+		))
+	}
+	</div>
+</div>`,
+			},
+		},
 		{
 			name: "table expressions (no implicit tbody)",
 			source: `---