From 6b9b8af050eb0eacb9f7891816dff429d6d7238d Mon Sep 17 00:00:00 2001
From: Sina Salahshour <sina.salahshour.32@gmail.com>
Date: Thu, 19 Oct 2023 11:58:33 +0330
Subject: [PATCH] fix: ignore comments while comparing nodes in node_match
 (#9197)

related to issue #9088
it doesn't solve the main problem of dependencies getting invalidated whenever value of a variable gets changed.
but it fixes the behavior difference between the code with and without comments
---
 .changeset/thirty-steaks-dream.md             |  5 +++++
 .../compiler/compile/render_dom/invalidate.js |  2 +-
 .../svelte/src/compiler/utils/nodes_match.js  |  6 +++---
 .../SomeComponent.svelte                      | 20 +++++++++++++++++++
 .../comment-effect-on-reactivity/_config.js   |  9 +++++++++
 .../comment-effect-on-reactivity/main.svelte  |  8 ++++++++
 6 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/thirty-steaks-dream.md
 create mode 100644 packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte
 create mode 100644 packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte

diff --git a/.changeset/thirty-steaks-dream.md b/.changeset/thirty-steaks-dream.md
new file mode 100644
index 000000000000..a14677bad7d1
--- /dev/null
+++ b/.changeset/thirty-steaks-dream.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore trailing comments when comparing nodes
diff --git a/packages/svelte/src/compiler/compile/render_dom/invalidate.js b/packages/svelte/src/compiler/compile/render_dom/invalidate.js
index 83423e952bc3..a007d1af7dbd 100644
--- a/packages/svelte/src/compiler/compile/render_dom/invalidate.js
+++ b/packages/svelte/src/compiler/compile/render_dom/invalidate.js
@@ -50,7 +50,7 @@ export function invalidate(renderer, scope, node, names, main_execution_context
 	if (
 		node.type === 'AssignmentExpression' &&
 		node.operator === '=' &&
-		nodes_match(node.left, node.right) &&
+		nodes_match(node.left, node.right, ['trailingComments','leadingComments']) &&
 		tail.length === 0
 	) {
 		return get_invalidated(head, node);
diff --git a/packages/svelte/src/compiler/utils/nodes_match.js b/packages/svelte/src/compiler/utils/nodes_match.js
index ff841d5f02f7..2337416f0eed 100644
--- a/packages/svelte/src/compiler/utils/nodes_match.js
+++ b/packages/svelte/src/compiler/utils/nodes_match.js
@@ -1,4 +1,4 @@
-export function nodes_match(a, b) {
+export function nodes_match(a, b, ignoreKeys=[]) {
 	if (!!a !== !!b) return false;
 	if (Array.isArray(a) !== Array.isArray(b)) return false;
 
@@ -8,8 +8,8 @@ export function nodes_match(a, b) {
 			return a.every((child, i) => nodes_match(child, b[i]));
 		}
 
-		const a_keys = Object.keys(a).sort();
-		const b_keys = Object.keys(b).sort();
+		const a_keys = Object.keys(a).sort().filter(key => !ignoreKeys.includes(key));
+		const b_keys = Object.keys(b).sort().filter(key => !ignoreKeys.includes(key));
 
 		if (a_keys.length !== b_keys.length) return false;
 
diff --git a/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte
new file mode 100644
index 000000000000..5c7f400318a2
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/SomeComponent.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let objectProp;
+	let count = 0;
+	$: objectPropCopy = [...objectProp];
+
+	$: incrementCount(), console.log('propDependencyChanged', objectProp);
+	const incrementCount = () => {
+		count++;
+	};
+	const clickAction = () => {
+		//note that this file shouldn't be formatted and the trailing comment must be rightnext to the variable name
+		// prettier-ignore
+		objectPropCopy = objectPropCopy// trailing comment
+	};
+</script>
+
+<button on:click={clickAction}>click me!</button>
+
+{objectPropCopy}
+<div id="render-count">{count}</div>
diff --git a/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js
new file mode 100644
index 000000000000..d1b7d61dcc8d
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/_config.js
@@ -0,0 +1,9 @@
+export default {
+	async test({ assert, target, window }) {
+		const incrementButton = target.querySelector('button');
+
+		assert.equal(target.querySelector('#render-count').innerHTML, '1');
+		await incrementButton.dispatchEvent(new window.MouseEvent('click'));
+		assert.equal(target.querySelector('#render-count').innerHTML, '2');
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte
new file mode 100644
index 000000000000..6d1985392a4d
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/comment-effect-on-reactivity/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import SomeComponent from './SomeComponent.svelte';
+	let objectProp = ['name', 'age'];
+
+	// look in SomeComponent.svelte for explaination
+</script>
+
+<SomeComponent {objectProp} />