From d6668e8ea588a846b4475c14dfb0dff739ff8383 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 22 Jul 2021 22:59:11 +0800
Subject: [PATCH] [fix] store reactivity in reactive declarations (#6559)

---
 src/compiler/compile/Component.ts                 | 11 ++++++++++-
 .../App.svelte                                    |  8 ++++++++
 .../_config.js                                    | 15 +++++++++++++++
 .../main.svelte                                   | 12 ++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 26668da8c0..b94b108f43 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -666,8 +666,17 @@ export default class Component {
 			this.node_for_declaration.set(name, node);
 		});
 
-		globals.forEach((node, name) => {
+		// NOTE: add store variable first, then only $store value
+		// as `$store` will mark `store` variable as referenced and subscribable
+		const global_keys = Array.from(globals.keys());
+		const sorted_globals = [
+			...global_keys.filter(key => key[0] !== '$'),
+			...global_keys.filter(key => key[0] === '$')
+		];
+
+		sorted_globals.forEach(name => {
 			if (this.var_lookup.has(name)) return;
+			const node = globals.get(name);
 
 			if (this.injected_reactive_declaration_vars.has(name)) {
 				this.add_var({
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte
new file mode 100644
index 0000000000..250305b62c
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let store_container;
+
+	$: ({ store } = store_container);
+	$: value = $store;
+</script>
+<div>{value}</div>
+<div>{$store}</div>
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
new file mode 100644
index 0000000000..27189d58d7
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<div>Hello World</div>
+		<div>Hello World</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		await component.update_value('Hi Svelte');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>Hi Svelte</div>
+			<div>Hi Svelte</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte
new file mode 100644
index 0000000000..4e771617bb
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { writable } from 'svelte/store';
+	import Child from './App.svelte';
+
+	const store_container = { store: writable('Hello World') };
+
+	export function update_value(value) {
+		store_container.store = writable(value);
+	}
+</script>
+
+<Child {store_container} />