fix: support hydrating around `<noscript>` (#9953)

* add test

* fix: support hydrating around `<noscript>`

* changeset

.changeset/smart-zebras-pay.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: support hydrating around `<noscript>`

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1015,8 +1015,7 @@ function create_block(parent, name, nodes, context) {
 		context.path,
 		namespace,
 		context.state.preserve_whitespace,
-		context.state.options.preserveComments,
+		context.state.options.preserveComments
-		false
 	);
 
 	if (hoisted.length === 0 && trimmed.length === 0) {
@@ -1823,6 +1822,11 @@ export const template_visitors = {
 		);
 	},
 	RegularElement(node, context) {
+		if (node.name === 'noscript') {
+			context.state.template.push('<!>');
+			return;
+		}
+
 		const metadata = context.state.metadata;
 		const child_metadata = {
 			...context.state.metadata,
@@ -2014,8 +2018,7 @@ export const template_visitors = {
 			context.path,
 			child_metadata.namespace,
 			state.preserve_whitespace,
-			state.options.preserveComments,
+			state.options.preserveComments
-			false
 		);
 
 		for (const node of hoisted) {

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -248,8 +248,7 @@ function create_block(parent, nodes, context, anchor) {
 		context.path,
 		namespace,
 		context.state.preserve_whitespace,
-		context.state.options.preserveComments,
+		context.state.options.preserveComments
-		true
 	);
 
 	if (hoisted.length === 0 && trimmed.length === 0 && !anchor) {
@@ -1186,8 +1185,7 @@ const template_visitors = {
 			inner_context.path,
 			metadata.namespace,
 			state.preserve_whitespace,
-			state.options.preserveComments,
+			state.options.preserveComments
-			true
 		);
 
 		for (const node of hoisted) {

packages/svelte/src/compiler/phases/3-transform/utils.js

@@ -83,7 +83,6 @@ export function is_hoistable_function(node) {
  * @param {import('#compiler').Namespace} namespace
  * @param {boolean} preserve_whitespace
  * @param {boolean} preserve_comments
- * @param {boolean} preserve_noscript
  */
 export function clean_nodes(
 	parent,
@@ -91,8 +90,7 @@ export function clean_nodes(
 	path,
 	namespace = 'html',
 	preserve_whitespace,
-	preserve_comments,
+	preserve_comments
-	preserve_noscript
 ) {
 	/** @type {import('#compiler').SvelteNode[]} */
 	const hoisted = [];
@@ -105,10 +103,6 @@ export function clean_nodes(
 			continue;
 		}
 
-		if (node.type === 'RegularElement' && node.name === 'noscript' && !preserve_noscript) {
-			continue;
-		}
-
 		if (
 			node.type === 'ConstTag' ||
 			node.type === 'DebugTag' ||

packages/svelte/tests/hydration/samples/noscript/_before.html

@@ -0,0 +1,2 @@
+<!--ssr:0--><noscript>JavaScript is required for this site.</noscript>
+<h1>Hello!</h1><p>Count: 0</p><!--ssr:0-->

packages/svelte/tests/hydration/samples/noscript/main.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { onMount } from "svelte";
+  let count = 0;
+  onMount(() => count++);
+</script>
+
+<noscript>JavaScript is required for this site.</noscript>
+
+<h1>Hello!</h1><p>Count: {count}</p>