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

Author: sina-salahshour

.changeset/thirty-steaks-dream.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ignore trailing comments when comparing nodes

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);

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;
 

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>

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');
+	}
+};

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} />