{@html} moves for slot on update

Author: tanhauhau

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>