html anchor in head (#5071)

Author: tanhauhau

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 * Support nullish coalescing (`??`) and optional chaining (`?.`) operators ([#1972](https://github.com/sveltejs/svelte/issues/1972))
 * Support `import.meta` ([#4379](https://github.com/sveltejs/svelte/issues/4379))
-* 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 placement of `{@html}` when used at the root of a slot, at the root of a component, or in `<svelte:head>` ([#5012](https://github.com/sveltejs/svelte/issues/5012), [#5071](https://github.com/sveltejs/svelte/pull/5071))
 * 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

@@ -51,7 +51,7 @@ export default class RawMustacheTagWrapper extends Tag {
 				content => x`${html_tag}.p(${content})`
 			);
 
-			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
+			const update_anchor = needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
 
 			block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${update_anchor});`);
 			block.chunks.mount.push(b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`);

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

@@ -1,33 +1,3 @@
 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>
-			`
-		);
-	},
+	html: `<p>x<span>baz</span></p>`
 };

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

@@ -1,17 +1 @@
-<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>
+<p>{@html 'x'}<span>baz</span></p>

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

@@ -0,0 +1,16 @@
+export default {
+	async test({ assert, target, window }) {
+		const btn = target.querySelector("button");
+		const clickEvent = new window.MouseEvent("click");
+
+		assert.equal(window.document.head.innerHTML.includes('<style>body { color: blue; }</style><style>body { color: green; }</style>'), true);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.equal(window.document.head.innerHTML.includes('<style>body { color: red; }</style><style>body { color: green; }</style>'), true);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.equal(window.document.head.innerHTML.includes('<style>body { color: blue; }</style><style>body { color: green; }</style>'), true);
+	},
+};

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

@@ -0,0 +1,16 @@
+<script>
+	let content1 = `<style>body { color: red; }</style>`;
+	let content2 = `<style>body { color: blue; }</style>`
+
+	let show = false;
+	$: content = show ? content1 : content2;
+</script>
+
+<button on:click={() => show = !show}>
+	Switch
+</button>
+
+<svelte:head>
+	{@html content}
+	<style>body { color: green; }</style>
+</svelte:head>

test/runtime/samples/raw-mustache-before-element/Component.svelte renamed to test/runtime/samples/raw-mustache-inside-slot/Component.svelte

@@ -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-inside-slot/_config.js

@@ -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>