From f739b4772a4ad32c0fd337afb9d5594ebd776073 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 7 Jul 2020 23:23:00 +0800
Subject: [PATCH] error on expression scope store (#5079)

---
 CHANGELOG.md                                      |  1 +
 src/compiler/compile/Component.ts                 | 15 ++++++++++++---
 src/compiler/compile/nodes/shared/Expression.ts   | 13 ++++++++-----
 .../runtime/samples/store-shadow-scope/_config.js |  3 +++
 .../samples/store-shadow-scope/main.svelte        |  9 +++++++++
 .../store-template-expression-scope/_config.js    |  3 +++
 .../store-template-expression-scope/main.svelte   |  9 +++++++++
 7 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 test/runtime/samples/store-shadow-scope/_config.js
 create mode 100644 test/runtime/samples/store-shadow-scope/main.svelte
 create mode 100644 test/runtime/samples/store-template-expression-scope/_config.js
 create mode 100644 test/runtime/samples/store-template-expression-scope/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2de9bb5b2..9a4e588c9a 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 5f06de8e21..88fe197993 100644
--- a/src/compiler/compile/Component.ts
+++ b/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)`
+					});
+				}
 			}
 		}
 	}
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index d4a219418b..8bfc2bffce 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/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)) {
diff --git a/test/runtime/samples/store-shadow-scope/_config.js b/test/runtime/samples/store-shadow-scope/_config.js
new file mode 100644
index 0000000000..e2d6fc7808
--- /dev/null
+++ b/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)`
+};
diff --git a/test/runtime/samples/store-shadow-scope/main.svelte b/test/runtime/samples/store-shadow-scope/main.svelte
new file mode 100644
index 0000000000..72c4a06c2a
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/store-template-expression-scope/_config.js b/test/runtime/samples/store-template-expression-scope/_config.js
new file mode 100644
index 0000000000..e2d6fc7808
--- /dev/null
+++ b/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)`
+};
diff --git a/test/runtime/samples/store-template-expression-scope/main.svelte b/test/runtime/samples/store-template-expression-scope/main.svelte
new file mode 100644
index 0000000000..1c9ccb2933
--- /dev/null
+++ b/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();
+	}} />