add further cases where {@html} uses an anchor (#5061)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix placement of `{@html}` when used at the root of a slot or the root of a component ([#5012](https://github.com/sveltejs/svelte/issues/5012))
 * Fix handling of `import`ed value that is used as a store and is also mutated ([#5019](https://github.com/sveltejs/svelte/issues/5019))
 * Do not display `a11y-missing-content` warning on elements with `contenteditable` bindings ([#5020](https://github.com/sveltejs/svelte/issues/5020))
 * Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033))

src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts

@@ -39,7 +39,7 @@ export default class RawMustacheTagWrapper extends Tag {
 		}
 
 		else {
-			const needs_anchor = in_head || (this.next && !this.next.is_dom_node());
+			const needs_anchor = in_head || (this.next ? !this.next.is_dom_node() : (!this.parent || !this.parent.is_dom_node()));
 
 			const html_tag = block.get_unique_name('html_tag');
 			const html_anchor = needs_anchor && block.get_unique_name('html_anchor');

test/runtime/samples/raw-mustache-as-root/RawMustache.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let content;
+</script>
+
+{@html content}

test/runtime/samples/raw-mustache-as-root/_config.js

@@ -0,0 +1,33 @@
+export default {
+	html: `
+		<button>Switch</button>
+		<p>Another first line</p>
+		<p>This line should be last.</p>
+	`,
+	async test({ assert, target, window }) {
+		const btn = target.querySelector("button");
+		const clickEvent = new window.MouseEvent("click");
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>First line</p>
+				<p>This line should be last.</p>
+			`
+		);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>Another first line</p>
+				<p>This line should be last.</p>
+			`
+		);
+	},
+};

test/runtime/samples/raw-mustache-as-root/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import RawMustache from './RawMustache.svelte';
+
+	let content1 = `<p>First line</p>`;
+	let content2 = `<p>Another first line</p>`;
+
+	let show = false;
+	$: content = show ? content1 : content2;
+</script>
+
+<button on:click={() => show = !show}>
+	Switch
+</button>
+
+<RawMustache {content} />
+
+<p>This line should be last.</p>

test/runtime/samples/raw-mustache-before-element/Component.svelte

@@ -0,0 +1,2 @@
+<slot />
+<p>This line should be last.</p>

test/runtime/samples/raw-mustache-before-element/_config.js

@@ -1,3 +1,33 @@
 export default {
-	html: `<p>x<span>baz</span></p>`
+	html: `
+		<button>Switch</button>
+		<p>Another first line</p>
+		<p>This line should be last.</p>
+	`,
+	async test({ assert, target, window }) {
+		const btn = target.querySelector("button");
+		const clickEvent = new window.MouseEvent("click");
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>First line</p>
+				<p>This line should be last.</p>
+			`
+		);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>Another first line</p>
+				<p>This line should be last.</p>
+			`
+		);
+	},
 };

test/runtime/samples/raw-mustache-before-element/main.svelte

@@ -1 +1,17 @@
-<p>{@html 'x'}<span>baz</span></p>
+<script>
+	import Component from './Component.svelte';
+
+	let content1 = `<p>First line</p>`;
+	let content2 = `<p>Another first line</p>`
+
+	let show = false;
+	$: content = show ? content1 : content2;
+</script>
+
+<button on:click={() => show = !show}>
+	Switch
+</button>
+
+<Component>
+	{@html content}
+</Component>

test/runtime/samples/raw-mustache-inside-slot/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `<p>x<span>baz</span></p>`
+};

test/runtime/samples/raw-mustache-inside-slot/main.svelte

@@ -0,0 +1 @@
+<p>{@html 'x'}<span>baz</span></p>