Merge branch 'main' into tanlh/feat/better-snippet-error

Author: Rich-Harris

.changeset/afraid-kids-hide.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: throw error when auto-subscribed store variable shadow by local variable

.changeset/shy-fishes-drive.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: fix string name of reactive map and set iterator

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -302,23 +302,26 @@ export function analyze_component(root, source, options) {
 					declaration.initial.source.value === 'svelte/store'
 				))
 		) {
-			let is_nested_store_subscription = false;
-			for (const reference of references) {
+			let is_nested_store_subscription_node = undefined;
+			search: for (const reference of references) {
 				for (let i = reference.path.length - 1; i >= 0; i--) {
 					const scope =
 						scopes.get(reference.path[i]) ||
 						module.scopes.get(reference.path[i]) ||
 						instance.scopes.get(reference.path[i]);
 					if (scope) {
 						const owner = scope?.owner(store_name);
-						is_nested_store_subscription =
-							!!owner && owner !== module.scope && owner !== instance.scope;
+						if (!!owner && owner !== module.scope && owner !== instance.scope) {
+							is_nested_store_subscription_node = reference.node;
+							break search;
+						}
 						break;
 					}
 				}
 			}
-			if (is_nested_store_subscription) {
-				error(references[0].node, 'illegal-store-subscription');
+
+			if (is_nested_store_subscription_node) {
+				error(is_nested_store_subscription_node, 'illegal-store-subscription');
 			}
 
 			if (options.runes !== false) {

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -356,8 +356,6 @@ const validation = {
 			if (binding.kind === 'snippet') {
 				error(node, 'invalid-snippet-assignment');
 			}
-
-			// TODO handle mutations of non-state/props in runes mode
 		}
 
 		if (node.name === 'group') {

packages/svelte/src/reactivity/map.js

@@ -136,14 +136,15 @@ export class ReactiveMap extends Map {
 
 	values() {
 		get(this.#version);
-		return map(this.#sources.values(), get);
+		return map(this.#sources.values(), get, 'Map Iterator');
 	}
 
 	entries() {
 		get(this.#version);
 		return map(
 			this.#sources.entries(),
-			([key, source]) => /** @type {[K, V]} */ ([key, get(source)])
+			([key, source]) => /** @type {[K, V]} */ ([key, get(source)]),
+			'Map Iterator'
 		);
 	}
 

packages/svelte/src/reactivity/set.js

@@ -132,15 +132,15 @@ export class ReactiveSet extends Set {
 
 	keys() {
 		get(this.#version);
-		return this.#sources.keys();
+		return map(this.#sources.keys(), (key) => key, 'Set Iterator');
 	}
 
 	values() {
 		return this.keys();
 	}
 
 	entries() {
-		return map(this.keys(), (key) => /** @type {[T, T]} */ ([key, key]));
+		return map(this.keys(), (key) => /** @type {[T, T]} */ ([key, key]), 'Set Iterator');
 	}
 
 	[Symbol.iterator]() {

packages/svelte/src/reactivity/utils.js

@@ -3,9 +3,10 @@
  * @template U
  * @param {Iterable<T>} iterable
  * @param {(value: T) => U} fn
+ * @param {string} name
  * @returns {IterableIterator<U>}
  */
-export function map(iterable, fn) {
+export function map(iterable, fn, name) {
 	return {
 		[Symbol.iterator]: get_this,
 		next() {
@@ -14,6 +15,10 @@ export function map(iterable, fn) {
 			}
 
 			return { done: true, value: undefined };
+		},
+		// @ts-expect-error
+		get [Symbol.toStringTag]() {
+			return name;
 		}
 	};
 }

packages/svelte/tests/compiler-errors/samples/store-shadow-scope-2/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'illegal-store-subscription',
+		message: 'Cannot subscribe to stores that are not declared at the top level of the component',
+		position: [142, 147]
+	}
+});

packages/svelte/tests/compiler-errors/samples/store-shadow-scope-2/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { writable } from 'svelte/store';
+	const user = writable(0);
+	const users = [];
+	$: selected = users.find(user => user.id == $user);
+
+	$: console.log($user);
+</script>

packages/svelte/tests/compiler-errors/samples/store-shadow-scope-3/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'illegal-store-subscription',
+		message: 'Cannot subscribe to stores that are not declared at the top level of the component',
+		position: [167, 172]
+	}
+});

packages/svelte/tests/compiler-errors/samples/store-shadow-scope-3/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { writable } from 'svelte/store';
+	const user = writable(0);
+	const users = [];
+
+	$: console.log($user);
+	$: selected = users.find(user => user.id == $user);
+</script>

packages/svelte/tests/runtime-runes/samples/reactive-to-string/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<div>[object Set Iterator] [object Set Iterator] [object Set Iterator]</div>
+		<div>[object Set Iterator] [object Set Iterator] [object Set Iterator]</div>
+		<div>[object Map Iterator] [object Map Iterator] [object Map Iterator]</div>
+		<div>[object Map Iterator] [object Map Iterator] [object Map Iterator]</div>
+	`
+});

packages/svelte/tests/runtime-runes/samples/reactive-to-string/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { Set as ReactiveSet, Map as ReactiveMap } from 'svelte/reactivity';
+
+	let map = new Map();
+	let set = new Set();
+	let rmap = new ReactiveMap();
+	let rset = new ReactiveSet();
+</script>
+
+<div>{rset.entries()} {rset.keys()} {rset.values()}</div>
+<div>{set.entries()} {set.keys()} {set.values()}</div>
+<div>{rmap.entries()} {rmap.keys()} {rmap.values()}</div>
+<div>{map.entries()} {map.keys()} {map.values()}</div>