reactive dependency not referenced can't set to undefined initially (#5600)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix setting reactive dependencies which don't appear in the template to `undefined` ([#5538](https://github.com/sveltejs/svelte/issues/5538))
 * Fix ordering of elements when using `{#if}` inside `{#key}` ([#5680](https://github.com/sveltejs/svelte/issues/5680))
 * Add `hasContext` lifecycle function ([#5690](https://github.com/sveltejs/svelte/pull/5690))
 * Fix missing `walk` types in `svelte/compiler` ([#5696](https://github.com/sveltejs/svelte/pull/5696))

src/compiler/compile/render_dom/Renderer.ts

@@ -111,8 +111,9 @@ export default class Renderer {
 
 				// these determine whether variable is included in initial context
 				// array, so must have the highest priority
-				if (variable.export_name) member.priority += 16;
-				if (variable.referenced) member.priority += 32;
+				if (variable.is_reactive_dependency && (variable.mutated || variable.reassigned)) member.priority += 16;
+				if (variable.export_name) member.priority += 32;
+				if (variable.referenced) member.priority += 64;
 			} else if (member.is_non_contextual) {
 				// determine whether variable is included in initial context
 				// array, so must have the highest priority
@@ -131,7 +132,7 @@ export default class Renderer {
 		while (i--) {
 			const member = this.context[i];
 			if (member.variable) {
-				if (member.variable.referenced || member.variable.export_name) break;
+				if (member.variable.referenced || member.variable.export_name || (member.variable.is_reactive_dependency && (member.variable.mutated || member.variable.reassigned))) break;
 			} else if (member.is_non_contextual) {
 				break;
 			}

test/js/samples/instrumentation-script-main-block/expected.js

@@ -62,7 +62,7 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [x];
+	return [x, y];
 }
 
 class Component extends SvelteComponent {

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

@@ -12,15 +12,15 @@ function instance($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*x*/ 1) {
-			$: $$invalidate(2, b = x);
+			$: $$invalidate(1, b = x);
 		}
 
-		if ($$self.$$.dirty & /*b*/ 4) {
+		if ($$self.$$.dirty & /*b*/ 2) {
 			$: a = b;
 		}
 	};
 
-	return [x];
+	return [x, b];
 }
 
 class Component extends SvelteComponent {

test/js/samples/unreferenced-state-not-invalidated/expected.js

@@ -64,7 +64,7 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	$: x = a * 2;
-	return [y];
+	return [y, b];
 }
 
 class Component extends SvelteComponent {

test/runtime/samples/reactive-value-dependency-not-referenced/_config.js

@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<p>42</p>
+		<p>42</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.updateStore(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>42</p>');
+
+		await component.updateStore(33);
+		assert.htmlEqual(target.innerHTML, '<p>33</p><p>42</p>');
+
+		await component.updateStore(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>42</p>');
+
+		await component.updateVar(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>undefined</p>');
+
+		await component.updateVar(33);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>33</p>');
+
+		await component.updateVar(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>undefined</p>');
+	}
+};

test/runtime/samples/reactive-value-dependency-not-referenced/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { writable } from 'svelte/store';
+	let store = writable(42);
+	let variable = 42;
+	let value;
+	let value2;
+	$: value = $store;
+	$: value2 = variable;
+
+	export function updateStore(value) {
+		store.set(value);
+	}
+	export function updateVar(value) {
+		variable = value;
+	}
+</script>
+
+<p>{ value }</p>
+<p>{ value2 }</p>