add test

Author: trueadm

packages/svelte/src/internal/client/runtime.js

@@ -1472,8 +1472,13 @@ function create_derived_proxy(signal, derived_value) {
 			const value = Reflect.get(target, prop, receiver);
 			const derived_value = /** @type {import('./types.js').DerivedSignalValue<V>} */ (signal.v);
 			const proxied_objects = /** @type {any} */ (derived_value.o);
-			const { k: keys, p: path } = proxied_objects.get(target);
+			const proxied_object = proxied_objects.get(target);
+			if (proxied_object === undefined) {
+				return value;
+			}
+			const { k: keys, p: path } = proxied_object;
 
+			// Only apply the proxing when we really need it. Otherwise avoid it entirely.
 			if (
 				effect_active_and_not_render_effect() &&
 				keys.has(prop) &&

packages/svelte/tests/runtime-runes/samples/derived-fine-grain-property-3/main.svelte

@@ -21,4 +21,4 @@
 
 <button onclick={() => a++}>a</button>
 <button onclick={() => b++}>b</button>
-<button onclick={() => c = !c}>b</button>
+<button onclick={() => c = !c}>c</button>

packages/svelte/tests/runtime-runes/samples/derived-fine-grain-property-4/_config.js

@@ -0,0 +1,40 @@
+import { test } from '../../test';
+import { log } from './log';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [btn1, btn2, btn3, btn4, btn5] = target.querySelectorAll('button');
+
+		log.length = 0;
+
+		await btn1?.click();
+		assert.deepEqual(log, ['f', [1, 0], 'first', 1]);
+
+		log.length = 0;
+
+		await btn5?.click();
+		assert.deepEqual(log, ['f', [0, 0], 'first', 0]);
+
+		await btn1?.click();
+		await btn1?.click();
+		await btn1?.click();
+
+		log.length = 0;
+
+		await btn5?.click();
+		assert.deepEqual(log, ['f', [4, 0], 'first', 4]);
+
+		log.length = 0;
+
+		await btn3?.click();
+		await btn3?.click();
+		await btn3?.click();
+
+		await btn5?.click();
+		assert.deepEqual(log, ['f', [3, 0], 'first', 3]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/derived-fine-grain-property-4/log.js

@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];

packages/svelte/tests/runtime-runes/samples/derived-fine-grain-property-4/main.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { log } from './log.js';
+
+	let a = $state(0);
+  let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+	let e = $state(true);
+  let f = $derived(e ? [ a, b ] : [ c, d ]);
+
+	$effect(() => {
+		log.push('f', f);
+	})
+
+	$effect(() => {
+		log.push('first', f?.[0]);
+	})
+
+	$effect(() => {
+		log.push('second', f?.[1]);
+	})
+</script>
+
+<button onclick={() => a++}>a</button>
+<button onclick={() => b++}>b</button>
+<button onclick={() => c++}>c</button>
+<button onclick={() => d++}>d</button>
+<button onclick={() => e = !e}>e</button>