error on expression scope store (#5079)

Author: tanhauhau

CHANGELOG.md

@@ -9,6 +9,7 @@
 * Do not display `a11y-missing-content` warning on elements with `contenteditable` bindings ([#5020](https://github.com/sveltejs/svelte/issues/5020))
 * Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033))
 * Fix collapsing HTML with static content ([#5040](https://github.com/sveltejs/svelte/issues/5040))
+* Prevent use of `$store` at compile time when top-level `store` has been shadowed ([#5048](https://github.com/sveltejs/svelte/issues/5048))
 * Update `<select>` with one-way `value` binding when the available `<option>`s change ([#5051](https://github.com/sveltejs/svelte/issues/5051))
 * Fix published `tweened` types so the `.set()` and `.update()` options are optional ([#5062](https://github.com/sveltejs/svelte/issues/5062))
 * Fix contextual `bind:this` inside `{#each}` block ([#5067](https://github.com/sveltejs/svelte/issues/5067))

src/compiler/compile/Component.ts

@@ -836,7 +836,7 @@ export default class Component {
 		});
 	}
 
-	warn_on_undefined_store_value_references(node, parent, scope) {
+	warn_on_undefined_store_value_references(node, parent, scope: Scope) {
 		if (
 			node.type === 'LabeledStatement' &&
 			node.label.name === '$' &&
@@ -852,8 +852,17 @@ export default class Component {
 			const object = get_object(node);
 			const { name } = object;
 
-			if (name[0] === '$' && !scope.has(name)) {
-				this.warn_if_undefined(name, object, null);
+			if (name[0] === '$') {
+				if (!scope.has(name)) {
+					this.warn_if_undefined(name, object, null);
+				}
+
+				if (name[1] !== '$' && scope.has(name.slice(1)) && scope.find_owner(name.slice(1)) !== this.instance_scope) {
+					this.error(node, {
+						code: `contextual-store`,
+						message: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
+					});
+				}
 			}
 		}
 	}

src/compiler/compile/nodes/shared/Expression.ts

@@ -78,11 +78,14 @@ export default class Expression {
 
 					if (scope.has(name)) return;
 
-					if (name[0] === '$' && template_scope.names.has(name.slice(1))) {
-						component.error(node, {
-							code: `contextual-store`,
-							message: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
-						});
+					if (name[0] === '$') {
+						const store_name = name.slice(1);
+						if (template_scope.names.has(store_name) || scope.has(store_name)) {
+							component.error(node, {
+								code: `contextual-store`,
+								message: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
+							});
+						}
 					}
 
 					if (template_scope.is_let(name)) {

test/runtime/samples/store-shadow-scope/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
+};

test/runtime/samples/store-shadow-scope/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store';
+	const store = writable();
+
+	function foo() {
+		let store = 1;
+		$store = 2;
+	}
+</script>

test/runtime/samples/store-template-expression-scope/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
+};

test/runtime/samples/store-template-expression-scope/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store';
+	const store = writable();
+</script>
+
+<button
+	on:click={(store) => {
+		$store = Math.random();
+	}} />