From c0a357c2629e519d283529ba9a094088554f6403 Mon Sep 17 00:00:00 2001
From: Tom <tombliboo40@gmail.com>
Date: Wed, 27 Dec 2023 20:52:58 +0800
Subject: [PATCH] fix: support hydrating around `<noscript>` (#9953)

* add test

* fix: support hydrating around `<noscript>`

* changeset
---
 .changeset/smart-zebras-pay.md                        |  5 +++++
 .../phases/3-transform/client/visitors/template.js    | 11 +++++++----
 .../phases/3-transform/server/transform-server.js     |  6 ++----
 .../svelte/src/compiler/phases/3-transform/utils.js   |  8 +-------
 .../tests/hydration/samples/noscript/_before.html     |  2 ++
 .../tests/hydration/samples/noscript/main.svelte      |  9 +++++++++
 6 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/smart-zebras-pay.md
 create mode 100644 packages/svelte/tests/hydration/samples/noscript/_before.html
 create mode 100644 packages/svelte/tests/hydration/samples/noscript/main.svelte

diff --git a/.changeset/smart-zebras-pay.md b/.changeset/smart-zebras-pay.md
new file mode 100644
index 0000000000..77f1c723b1
--- /dev/null
+++ b/.changeset/smart-zebras-pay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: support hydrating around `<noscript>`
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 70ef7bc84b..30461ca169 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/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,
-		false
+		context.state.options.preserveComments
 	);
 
 	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,
-			false
+			state.options.preserveComments
 		);
 
 		for (const node of hoisted) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index cdba265aaa..e5fcdd415d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/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,
-		true
+		context.state.options.preserveComments
 	);
 
 	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,
-			true
+			state.options.preserveComments
 		);
 
 		for (const node of hoisted) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 9c7a559394..b7592f6f81 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/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_noscript
+	preserve_comments
 ) {
 	/** @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' ||
diff --git a/packages/svelte/tests/hydration/samples/noscript/_before.html b/packages/svelte/tests/hydration/samples/noscript/_before.html
new file mode 100644
index 0000000000..34ac9d9bc3
--- /dev/null
+++ b/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-->
diff --git a/packages/svelte/tests/hydration/samples/noscript/main.svelte b/packages/svelte/tests/hydration/samples/noscript/main.svelte
new file mode 100644
index 0000000000..ed6f644820
--- /dev/null
+++ b/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>