From 6da02329a3a4cf4902bbdbffc2adfdb88b1e3752 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 16 Dec 2018 13:46:36 -0500
Subject: [PATCH] allow $ references in reactive declarations

---
 src/compile/Component.ts                      | 15 ++++++++--
 .../_config.js                                | 28 +++++++++++++++++++
 .../main.html                                 |  8 ++++++
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.html

diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 75c557a11e..e2b7011622 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -813,10 +813,19 @@ export default class Component {
 							assignees.add(getObject(node.argument).name);
 							this.skip();
 						} else if (isReference(node, parent)) {
-							const { name } = getObject(node);
+							const object = getObject(node);
+							const { name } = object;
+
 							if (component.declarations.indexOf(name) !== -1) {
 								dependencies.add(name);
+							} else if (name[0] === '$') {
+								component.warn_if_undefined(object, null);
+
+								// cheeky hack
+								component.template_references.add(name);
+								dependencies.add(name);
 							}
+
 							this.skip();
 						}
 					},
@@ -907,7 +916,7 @@ export default class Component {
 	warn_if_undefined(node, template_scope: TemplateScope, allow_implicit?: boolean) {
 		let { name } = node;
 
-		if (allow_implicit && name[0] === '$') {
+		if (name[0] === '$') {
 			name = name.slice(1);
 			this.has_reactive_assignments = true;
 		}
@@ -915,7 +924,7 @@ export default class Component {
 		if (allow_implicit && !this.instance_script) return;
 		if (this.instance_scope && this.instance_scope.declarations.has(name)) return;
 		if (this.module_scope && this.module_scope.declarations.has(name)) return;
-		if (template_scope.names.has(name)) return;
+		if (template_scope && template_scope.names.has(name)) return;
 		if (globalWhitelist.has(name)) return;
 
 		this.warn(node, {
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js
new file mode 100644
index 0000000000..b2a5a8dba7
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js
@@ -0,0 +1,28 @@
+import { writable } from '../../../../store.js';
+
+export default {
+	props: {
+		count: writable(0)
+	},
+
+	html: `
+		<button>double 0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>double 2</button>
+		`);
+
+		await component.count.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>double 84</button>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.html b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.html
new file mode 100644
index 0000000000..3233d38d2d
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.html
@@ -0,0 +1,8 @@
+<script>
+	export let count;
+
+	let double;
+	$: double = $count * 2;
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">double {double}</button>
\ No newline at end of file