Merge pull request #2265 from sveltejs/gh-2119

Handle store assignments in reactive statements

src/compile/Component.ts

@@ -593,7 +593,7 @@ export default class Component {
 
 			const { type, name } = node.body.expression.left;
 
-			if (type === 'Identifier' && !this.var_lookup.has(name)) {
+			if (type === 'Identifier' && !this.var_lookup.has(name) && name[0] !== '$') {
 				this.injected_reactive_declaration_vars.add(name);
 			}
 		});
@@ -761,7 +761,7 @@ export default class Component {
 
 	rewrite_props(get_insert: (variable: Var) => string) {
 		const component = this;
-		const { code, instance_scope, instance_scope_map: map, component_options } = this;
+		const { code, instance_scope, instance_scope_map: map } = this;
 		let scope = instance_scope;
 
 		const coalesced_declarations = [];
@@ -1097,6 +1097,7 @@ export default class Component {
 						node.body.type === 'ExpressionStatement' &&
 						node.body.expression.type === 'AssignmentExpression' &&
 						node.body.expression.left.type === 'Identifier' &&
+						node.body.expression.left.name[0] !== '$' &&
 						this.var_lookup.get(node.body.expression.left.name).injected
 					)
 				});

src/compile/render-dom/index.ts

@@ -374,7 +374,7 @@ export default function dom(
 
 		const injected = Array.from(component.injected_reactive_declaration_vars).filter(name => {
 			const variable = component.var_lookup.get(name);
-			return variable.injected;
+			return variable.injected && variable.name[0] !== '$';
 		});
 
 		const reactive_store_declarations = reactive_stores.map(variable => {

test/runtime/samples/store-assignment-updates-reactive/_config.js

@@ -0,0 +1,42 @@
+import { writable } from '../../../../store.js';
+
+const c = writable(0);
+
+export default {
+	props: {
+		c
+	},
+
+	html: `
+		<p>a: 0</p>
+		<p>b: 0</p>
+		<p>c: 0</p>
+
+		<button>+1</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, `
+			<p>a: 1</p>
+			<p>b: 1</p>
+			<p>c: 1</p>
+
+			<button>+1</button>
+		`);
+
+		await component.c.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 42</p>
+			<p>b: 42</p>
+			<p>c: 42</p>
+
+			<button>+1</button>
+		`);
+	}
+};

test/runtime/samples/store-assignment-updates-reactive/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { writable } from '../../../../store.js';
+
+	const a = writable();
+	const b = writable();
+	export let c;
+
+	$: $a = $b;
+	$: $b = $c;
+
+	function increment() {
+		$c += 1;
+	}
+</script>
+
+<p>a: {$a}</p>
+<p>b: {$b}</p>
+<p>c: {$c}</p>
+
+<button on:click={increment}>+1</button>

test/runtime/samples/store-assignment-updates/_config.js

@@ -1,7 +1,6 @@
 import { writable } from '../../../../store.js';
 
 export default {
-	show: 1,
 	props: {
 		count: writable(0)
 	},