Fix expression parsing in foreign context (#1062)

Trombach · web-flow · commit 970f0853d873 · 2025-02-07T09:32:15.000Z
* fix(parser): persist the current namespace when adding an expression node

* test: add printer test for `image` tag inside svg context

* chore: add changeset
diff --git a/.changeset/plenty-geese-laugh.md b/.changeset/plenty-geese-laugh.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": patch
+---
+
+Fixes an issue when parsing elements inside foreign content (e.g. SVG), when they were inside an expression
diff --git a/internal/parser.go b/internal/parser.go
@@ -391,6 +391,7 @@ func (p *parser) addExpression() {
 		CustomElement: false,
 		HandledScript: false,
 		Loc:           p.generateLoc(),
+		Namespace:     p.top().Namespace,
 	})
 
 }
diff --git a/internal/printer/__printer_js__/namespace_is_preserved_when_inside_an_expression.snap b/internal/printer/__printer_js__/namespace_is_preserved_when_inside_an_expression.snap
@@ -0,0 +1,41 @@
+
+[TestPrinter/namespace_is_preserved_when_inside_an_expression - 1]
+## Input
+
+```
+<svg>{<image />}</svg>
+```
+
+## Output
+
+```js
+import {
+  Fragment,
+  render as $$render,
+  createAstro as $$createAstro,
+  createComponent as $$createComponent,
+  renderComponent as $$renderComponent,
+  renderHead as $$renderHead,
+  maybeRenderHead as $$maybeRenderHead,
+  unescapeHTML as $$unescapeHTML,
+  renderSlot as $$renderSlot,
+  mergeSlots as $$mergeSlots,
+  addAttribute as $$addAttribute,
+  spreadAttributes as $$spreadAttributes,
+  defineStyleVars as $$defineStyleVars,
+  defineScriptVars as $$defineScriptVars,
+  renderTransition as $$renderTransition,
+  createTransitionScope as $$createTransitionScope,
+  renderScript as $$renderScript,
+  createMetadata as $$createMetadata
+} from "http://localhost:3000/";
+
+export const $$metadata = $$createMetadata(import.meta.url, { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
+
+const $$Component = $$createComponent(($$result, $$props, $$slots) => {
+
+return $$render`${$$maybeRenderHead($$result)}<svg>${$$render`<image></image>`}</svg>`;
+}, undefined, undefined);
+export default $$Component;
+```
+---
diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
@@ -905,8 +905,8 @@ import Widget2 from '../components/Widget2.astro';
 		{
 			// maintain the original behavior, though it may be
 			// unneeded as renderScript is now on by default
-			name:   "script external in expression (renderScript: false)",
-			source: `<main>{<script src="./hello.js"></script>}`,
+			name:     "script external in expression (renderScript: false)",
+			source:   `<main>{<script src="./hello.js"></script>}`,
 			filename: "/src/pages/index.astro",
 		},
 		{
@@ -2072,6 +2072,10 @@ const meta = { title: 'My App' };
 	</body>
 </html>`,
 		},
+		{
+			name:   "namespace is preserved when inside an expression",
+			source: `<svg>{<image />}</svg>`,
+		},
 	}
 	for _, tt := range tests {
 		if tt.only {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@astrojs/compiler": patch
 +---
++
 +Fixes an issue when parsing elements inside foreign content (e.g. SVG), when they were inside an expression
Original file line number	Diff line number	Diff line change
`@@ -391,6 +391,7 @@ func (p *parser) addExpression() {`
`391`	`391`	`CustomElement: false,`
`392`	`392`	`HandledScript: false,`
`393`	`393`	`Loc: p.generateLoc(),`
	`394`	`+ Namespace: p.top().Namespace,`
`394`	`395`	`})`
`395`	`396`
`396`	`397`	`}`