Update mutable objects and arrays properly

src/compile/nodes/shared/Tag.ts

@@ -10,8 +10,19 @@ export default class Tag extends Node {
 		this.expression = new Expression(component, this, scope, info.expression);
 
 		this.should_cache = (
-			info.expression.type !== 'Identifier' ||
+			(info.expression.type !== 'Identifier' || (this.expression.dependencies.size && scope.names.has(info.expression.name))) &&
-			(this.expression.dependencies.size && scope.names.has(info.expression.name))
+			!this.contains_mutable_expression()
 		);
 	}
+
+	contains_mutable_expression() {
+		const { node: expression } = this.expression;
+
+		if (expression.type !== 'MemberExpression') return false;
+
+		const { name } = expression.object;
+		const variable = this.component.var_lookup.get(name);
+
+		return variable && variable.mutated;
+	}
 }

test/runtime/samples/reactive-values-mutable-array/_config.js

@@ -0,0 +1,14 @@
+export default {
+	html: `
+		Array in Object: 2,0,1<br>
+		Array in Array in Object: 6,5,3,4
+	`,
+	async test({ assert, target }) {
+		await new Promise(res => setTimeout(res, 1));
+
+		assert.htmlEqual(target.innerHTML, `
+			Array in Object: 2,1,2<br>
+			Array in Array in Object: 3,5,3,4
+		`);
+	}
+};

test/runtime/samples/reactive-values-mutable-array/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	let obj = {
+		arr: [2, 0, 1],
+		arr2: [[6, 5], 3, 4]
+	};
+
+	function change() {
+		obj.arr = obj.arr.sort();
+		obj.arr[0]++
+		obj.arr[0] += 1
+		obj.arr[0] = 2
+		obj.arr2[0][0]++
+		obj.arr2[0][0] = 3
+	}
+
+	setTimeout(change, 1);
+</script>
+
+Array in Object: {obj.arr}<br>
+Array in Array in Object: {obj.arr2}