fix: correctly infer <a> tag namespace (#14134)

`<a>` tags are valid in both the SVG and HTML namespace.  If there's no parent, we therefore have to look downwards to see if it's the parent of a SVG or HTML element.

fixes #7807
fixes #13793

Author: dummdidumm

.changeset/modern-pets-punch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly infer `<a>` tag namespace

packages/svelte/src/compiler/phases/2-analyze/types.d.ts

@@ -9,6 +9,10 @@ export interface AnalysisState {
 	analysis: ComponentAnalysis;
 	options: ValidatedCompileOptions;
 	ast_type: 'instance' | 'template' | 'module';
+	/**
+	 * Tag name of the parent element. `null` if the parent is `svelte:element`, `#snippet`, a component or the root.
+	 * Parent doesn't necessarily mean direct path predecessor because there could be `#each`, `#if` etc in-between.
+	 */
 	parent_element: string | null;
 	has_props_rune: boolean;
 	/** Which slots the current parent component has */

packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js

@@ -174,4 +174,17 @@ export function RegularElement(node, context) {
 	}
 
 	context.next({ ...context.state, parent_element: node.name });
+
+	// Special case: <a> tags are valid in both the SVG and HTML namespace.
+	// If there's no parent, look downwards to see if it's the parent of a SVG or HTML element.
+	if (node.name === 'a' && !context.state.parent_element) {
+		for (const child of node.fragment.nodes) {
+			if (child.type === 'RegularElement') {
+				if (child.metadata.svg && child.name !== 'svg') {
+					node.metadata.svg = true;
+					break;
+				}
+			}
+		}
+	}
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js

@@ -1,5 +1,5 @@
 /** @import { AST } from '#compiler' */
-/** @import { Context } from '../../types' */
+/** @import { AnalysisState, Context } from '../../types' */
 import * as e from '../../../../errors.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
 import { determine_slot } from '../../../../utils/slot.js';
@@ -96,6 +96,7 @@ export function visit_component(node, context) {
 	const component_slots = new Set();
 
 	for (const slot_name in nodes) {
+		/** @type {AnalysisState} */
 		const state = {
 			...context.state,
 			scope: node.metadata.scopes[slot_name],

packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/_config.js

@@ -0,0 +1,26 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<div><a><span>Hello</span></a></div>
+	<div><a><span>Hello</span></a></div>
+	<div><a><span>Hello</span></a></div>
+`,
+	test({ assert, target }) {
+		const div = target.querySelectorAll('div');
+		const a = target.querySelectorAll('a');
+		const span = target.querySelectorAll('span');
+
+		for (const element of div) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/1999/xhtml');
+		}
+
+		for (const element of a) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/1999/xhtml');
+		}
+
+		for (const element of span) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/1999/xhtml');
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/div.svelte

@@ -0,0 +1,7 @@
+<script>
+    let { children } = $props();
+</script>
+
+<div>
+    {@render children()}
+</div>

packages/svelte/tests/runtime-runes/samples/html-namespace-infer-a-tag/main.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Div from './div.svelte';
+</script>
+
+<div>
+	<a>
+		<span>Hello</span>
+	</a>
+</div>
+
+<div>
+	{#snippet test()}
+		<a>
+			<span>Hello</span>
+		</a>
+	{/snippet}
+	{@render test()}
+</div>
+
+<Div>
+  <a>
+    <span>Hello</span>
+  </a>
+</Div>

packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/_config.js

@@ -0,0 +1,26 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<svg><a><text>Hello</text></a></svg>
+	<svg><a><text>Hello</text></a></svg>
+	<svg><a><text>Hello</text></a></svg>
+`,
+	test({ assert, target }) {
+		const svg = target.querySelectorAll('svg');
+		const a = target.querySelectorAll('a');
+		const text = target.querySelectorAll('text');
+
+		for (const element of svg) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/2000/svg');
+		}
+
+		for (const element of a) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/2000/svg');
+		}
+
+		for (const element of text) {
+			assert.equal(element.namespaceURI, 'http://www.w3.org/2000/svg');
+		}
+	}
+});

packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/main.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Svg from './svg.svelte';
+</script>
+
+<svg>
+	<a>
+		<text>Hello</text>
+	</a>
+</svg>
+
+<svg>
+	{#snippet test()}
+		<a>
+			<text>Hello</text>
+		</a>
+	{/snippet}
+	{@render test()}
+</svg>
+
+<Svg>
+  <a>
+    <text>Hello</text>
+  </a>
+</Svg>

packages/svelte/tests/runtime-runes/samples/svg-namespace-infer-a-tag/svg.svelte

@@ -0,0 +1,7 @@
+<script>
+    let { children } = $props();
+</script>
+
+<svg>
+    {@render children()}
+</svg>