fix

Author: Rich-Harris

packages/svelte/src/html-tree-validation.js

@@ -163,10 +163,12 @@ export function is_tag_valid_with_ancestor(child_tag, ancestors, child_loc, ance
 	}
 
 	if ('descendant' in disallowed && disallowed.descendant.includes(child_tag)) {
-		const child = child_loc ? `<${child_tag}> (${child_loc})` : `<${child_tag}>`;
-		const ancestor = ancestor_loc ? `<${ancestor_tag}> (${ancestor_loc})` : `<${ancestor_tag}>`;
+		const child = child_loc ? `\`<${child_tag}>\` (${child_loc})` : `\`<${child_tag}>\``;
+		const ancestor = ancestor_loc
+			? `\`<${ancestor_tag}>\` (${ancestor_loc})`
+			: `\`<${ancestor_tag}>\``;
 
-		return `\`${child}\` cannot be a descendant of \`${ancestor}\``;
+		return `${child} cannot be a descendant of ${ancestor}`;
 	}
 
 	return null;
@@ -186,23 +188,23 @@ export function is_tag_valid_with_parent(child_tag, parent_tag, child_loc, paren
 
 	const disallowed = disallowed_children[parent_tag];
 
-	const child = child_loc ? `<${child_tag}> (${child_loc})` : `<${child_tag}>`;
-	const parent = parent_loc ? `<${parent_tag}> (${parent_loc})` : `<${parent_tag}>`;
+	const child = child_loc ? `\`<${child_tag}>\` (${child_loc})` : `\`<${child_tag}>\``;
+	const parent = parent_loc ? `\`<${parent_tag}>\` (${parent_loc})` : `\`<${parent_tag}>\``;
 
 	if (disallowed) {
 		if ('direct' in disallowed && disallowed.direct.includes(child_tag)) {
-			return `\`${child}\` cannot be a direct child of \`${parent}\``;
+			return `${child} cannot be a direct child of ${parent}`;
 		}
 
 		if ('descendant' in disallowed && disallowed.descendant.includes(child_tag)) {
-			return `\`${child}\` cannot be a child of \`${parent}\``;
+			return `${child} cannot be a child of ${parent}`;
 		}
 
 		if ('only' in disallowed && disallowed.only) {
 			if (disallowed.only.includes(child_tag)) {
 				return null;
 			} else {
-				return `\`${child}\` cannot be a child of \`${parent}\`. \`<${parent_tag}>\` only allows these children: ${disallowed.only.map((d) => `\`<${d}>\``).join(', ')}`;
+				return `${child} cannot be a child of ${parent}. \`<${parent_tag}>\` only allows these children: ${disallowed.only.map((d) => `\`<${d}>\``).join(', ')}`;
 			}
 		}
 	}
@@ -220,16 +222,16 @@ export function is_tag_valid_with_parent(child_tag, parent_tag, child_loc, paren
 		case 'frame':
 		case 'head':
 		case 'html':
-			return `\`${child}\` cannot be a child of \`${parent}\``;
+			return `${child} cannot be a child of ${parent}`;
 		case 'thead':
 		case 'tbody':
 		case 'tfoot':
-			return `\`${child}\` must be the child of a \`<table>\`, not a \`${parent}\``;
+			return `${child} must be the child of a \`<table>\`, not a ${parent}`;
 		case 'td':
 		case 'th':
-			return `\`${child}\` must be the child of a \`<tr>\`, not a \`${parent}\``;
+			return `${child} must be the child of a \`<tr>\`, not a ${parent}`;
 		case 'tr':
-			return `\`<tr>\` must be the child of a \`<thead>\`, \`<tbody>\`, or \`<tfoot>\`, not a \`${parent}\``;
+			return `\`<tr>\` must be the child of a \`<thead>\`, \`<tbody>\`, or \`<tfoot>\`, not a ${parent}`;
 	}
 
 	return null;

packages/svelte/tests/runtime-runes/samples/invalid-html-ssr-ancestor/_config.js

@@ -12,7 +12,7 @@ export default test({
 	mode: ['hydrate'],
 
 	errors: [
-		'node_invalid_placement_ssr: `<form> (form.svelte:1:0)` cannot be a descendant of `<form> (main.svelte:5:0)`\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
+		'node_invalid_placement_ssr: `<form>` (form.svelte:1:0) cannot be a descendant of `<form>` (main.svelte:5:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
 	],
 
 	warnings: [

packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js

@@ -12,8 +12,8 @@ export default test({
 	mode: ['hydrate'],
 
 	errors: [
-		'node_invalid_placement_ssr: `<h1> (h1.svelte:1:0)` cannot be a child of `<p> (main.svelte:6:0)`\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.',
-		'node_invalid_placement_ssr: `<form> (form.svelte:1:0)` cannot be a child of `<form> (main.svelte:9:0)`\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
+		'node_invalid_placement_ssr: `<h1>` (h1.svelte:1:0) cannot be a child of `<p>` (main.svelte:6:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.',
+		'node_invalid_placement_ssr: `<form>` (form.svelte:1:0) cannot be a child of `<form>` (main.svelte:9:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
 	],
 
 	warnings: [

packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js

@@ -6,6 +6,6 @@ export default test({
 	},
 
 	errors: [
-		'node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0) cannot contain `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1) (`<p>` cannot be a child of `<p>`)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
+		'node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1) cannot be a child of `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
 	]
 });

packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html

@@ -1 +1 @@
-<script>console.error("node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0) cannot contain `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1) (`<p>` cannot be a child of `<p>`)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.")</script>
+<script>console.error("node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1) cannot be a child of `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.")</script>