fix: use safe-equals comparison for @const tags in legacy mode

fixes #10600

Author: dummdidumm

.changeset/chatty-beans-divide.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: use safe-equals comparison for `@const` tags in legacy mode

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

@@ -1789,15 +1789,17 @@ export const template_visitors = {
 		const declaration = node.declaration.declarations[0];
 		// TODO we can almost certainly share some code with $derived(...)
 		if (declaration.id.type === 'Identifier') {
-			state.init.push(
-				b.const(
-					declaration.id,
-					b.call(
-						'$.derived',
-						b.thunk(/** @type {import('estree').Expression} */ (visit(declaration.init)))
-					)
-				)
-			);
+			const fn = b.thunk(/** @type {import('estree').Expression} */ (visit(declaration.init)));
+			// In runes mode, we want things to be fine-grained - but not in legacy mode
+			if (state.options.runes) {
+				state.init.push(b.const(declaration.id, b.call('$.derived', fn)));
+			} else {
+				state.init.push(b.const(declaration.id, fn));
+				const binding = /** @type {import('#compiler').Binding} */ (
+					state.scope.get(declaration.id.name)
+				);
+				binding.expression = b.call(declaration.id);
+			}
 		} else {
 			const identifiers = extract_identifiers(declaration.id);
 			const tmp = b.id(state.scope.generate('computed_const'));
@@ -1822,11 +1824,21 @@ export const template_visitors = {
 				])
 			);
 
-			state.init.push(b.const(tmp, b.call('$.derived', fn)));
+			// In runes mode, we want things to be fine-grained - but not in legacy mode
+			if (state.options.runes) {
+				state.init.push(b.const(tmp, b.call('$.derived', fn)));
 
-			for (const node of identifiers) {
-				const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(node.name));
-				binding.expression = b.member(b.call('$.get', tmp), node);
+				for (const node of identifiers) {
+					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(node.name));
+					binding.expression = b.member(b.call('$.get', tmp), node);
+				}
+			} else {
+				state.init.push(b.const(tmp, fn));
+
+				for (const node of identifiers) {
+					const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(node.name));
+					binding.expression = b.member(b.call(tmp), node);
+				}
 			}
 		}
 	},

packages/svelte/tests/runtime-legacy/samples/const-tag-each-update/_config.js

@@ -0,0 +1,29 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Test ensures that the `const` tag is coarse-grained in legacy mode (i.e. always fires an update when the array changes)
+export default test({
+	html: `
+		<button>Show</button>
+		<p>0</p>
+		<p>1</p>
+		<p>2</p>
+		<p>3</p>
+	`,
+	async test({ target, assert }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Show</button>
+				<p>0 show (v_item) show (item)</p>
+				<p>1</p>
+				<p>2 show (v_item) show (item)</p>
+				<p>3</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/const-tag-each-update/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	export let items = {0:{clicked:false},length:4};
+</script>
+
+<button on:click={()=>{
+	items[0].clicked=true;
+	items[2]={clicked:true};
+}}>Show</button>
+
+{#each items as item, i}
+	{@const v_item=item}
+	<p>
+		{i}
+		{#if v_item?.clicked}
+			show (v_item)
+		{/if}
+		{#if item?.clicked}
+			show (item)
+		{/if}
+	</p>
+{/each}