Merge pull request #2755 from EmilTholin/mutated-const-reative-dependency

Set mutated const variables as reactive dependencies

Author: Rich-Harris

src/compile/Component.ts

@@ -1114,9 +1114,11 @@ export default class Component {
 							if (!assignee_nodes.has(identifier)) {
 								const { name } = identifier;
 								const owner = scope.find_owner(name);
+								const component_var = component.var_lookup.get(name);
+								const is_writable_or_mutated = component_var && (component_var.writable || component_var.mutated);
 								if (
 									(!owner || owner === component.instance_scope) &&
-									(name[0] === '$' || component.var_lookup.has(name) && component.var_lookup.get(name).writable)
+									(name[0] === '$' || is_writable_or_mutated)
 								) {
 									dependencies.add(name);
 								}

src/compile/render-dom/index.ts

@@ -364,7 +364,7 @@ export default function dom(
 						}
 
 						const variable = component.var_lookup.get(n);
-						return variable && variable.writable;
+						return variable && (variable.writable || variable.mutated);
 					})
 					.map(n => `$$dirty.${n}`).join(' || ');
 

test/runtime/samples/reactive-value-mutate-const/_config.js

@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>Mutate a</button>
+		<div>{}</div>
+	`,
+
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Mutate a</button>
+			<div>{"foo":42}</div>
+		`);
+	}
+};

test/runtime/samples/reactive-value-mutate-const/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	const a = {};
+	const b = {};
+	$: b.foo = a.foo;
+</script>
+
+<button on:click={() => a.foo = 42}>Mutate a</button>
+<div>{JSON.stringify(b)}</div>
+