Merge pull request #2161 from sveltejs/gh-2129

Prevent reactive declaration assignees from being dependencies

src/compile/Component.ts

@@ -1042,15 +1042,17 @@ export default class Component {
 						}
 
 						if (node.type === 'AssignmentExpression') {
-							assignees.add(getObject(node.left).name);
+							const { name } = getObject(node.left)
+							assignees.add(name);
+							dependencies.delete(name);
 						} else if (node.type === 'UpdateExpression') {
-							assignees.add(getObject(node.argument).name);
+							const { name } = getObject(node.argument);
+							assignees.add(name);
+							dependencies.delete(name);
 						} else if (isReference(node, parent)) {
-							const object = getObject(node);
-							const { name } = object;
-
+							const { name } = getObject(node);
 							const owner = scope.findOwner(name);
-							if ((!owner || owner === component.instance_scope) && (name[0] === '$' || component.var_lookup.has(name))) {
+							if ((!owner || owner === component.instance_scope) && (name[0] === '$' || component.var_lookup.has(name)) && !assignees.has(name)) {
 								dependencies.add(name);
 							}
 

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -56,8 +56,8 @@ function instance($$self, $$props, $$invalidate) {
 		if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo);
 	};
 
-	$$self.$$.update = ($$dirty = { bar: 1, foo: 1 }) => {
-		if ($$dirty.bar || $$dirty.foo) {
+	$$self.$$.update = ($$dirty = { foo: 1 }) => {
+		if ($$dirty.foo) {
 			bar = foo * 2; $$invalidate('bar', bar);
 		}
 	};

test/js/samples/reactive-values-non-topologically-ordered/expected.js

@@ -22,11 +22,11 @@ function instance($$self, $$props, $$invalidate) {
 		if ('x' in $$props) $$invalidate('x', x = $$props.x);
 	};
 
-	$$self.$$.update = ($$dirty = { b: 1, x: 1, a: 1 }) => {
-		if ($$dirty.b || $$dirty.x) {
+	$$self.$$.update = ($$dirty = { x: 1, b: 1 }) => {
+		if ($$dirty.x) {
 			b = x; $$invalidate('b', b);
 		}
-		if ($$dirty.a || $$dirty.b) {
+		if ($$dirty.b) {
 			a = b; $$invalidate('a', a);
 		}
 	};

test/js/samples/reactive-values-non-writable-dependencies/expected.js

@@ -21,8 +21,8 @@ function instance($$self, $$props, $$invalidate) {
 
 	let max;
 
-	$$self.$$.update = ($$dirty = { max: 1, Math: 1, a: 1, b: 1 }) => {
-		if ($$dirty.max || $$dirty.a || $$dirty.b) {
+	$$self.$$.update = ($$dirty = { Math: 1, a: 1, b: 1 }) => {
+		if ($$dirty.a || $$dirty.b) {
 			max = Math.max(a, b); $$invalidate('max', max);
 		}
 	};

test/runtime/samples/reactive-values-overwrite/_config.js

@@ -11,11 +11,11 @@ export default {
 			<p>doubled: 4</p>
 		`);
 
-		component.doubled = 6;
+		component.doubled = 3;
 
-		assert.equal(component.doubled, 4);
+		assert.equal(component.doubled, 3);
 		assert.htmlEqual(target.innerHTML, `
-			<p>doubled: 4</p>
+			<p>doubled: 3</p>
 		`);
 	}
 };

test/runtime/samples/reactive-values-subscript-assignment/_config.js

@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component }) {
+		assert.deepEqual(component.foo, {});
+		component.bar = 'hello';
+		assert.deepEqual(component.foo, { hello: true });
+		component.bar = 'world';
+		assert.deepEqual(component.foo, { hello: true, world: true });
+		component.bar = false;
+		assert.deepEqual(component.foo, { hello: true, world: true });
+	}
+};

test/runtime/samples/reactive-values-subscript-assignment/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let foo = {};
+	export let bar;
+	$: if (bar) {
+		foo[bar] = true;
+	}
+</script>