chore: make $derived property accessing fine-grain reactive

add destructuring derived support

add destructuring derived support

add destructuring derived support

more fixes

better approach

fix runtime bug

cleanup

Completely new take

remove old code

tweaks

handle deep

alternative approach

alternative approach improves

simplify

revert other code

revert other code

revert other code

simplify

add bigint

fix issue

fix other issue

better way

add changeset

add tests

add more tests

better gc

better gc

simplift cleardown

Author: trueadm

.changeset/polite-clocks-speak.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: make $derived property accessing fine-grain reactive

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -278,15 +278,15 @@ export const javascript_visitors_runes = {
 
 			if (rune === '$derived') {
 				if (declarator.id.type === 'Identifier') {
-					declarations.push(b.declarator(declarator.id, b.call('$.derived', b.thunk(value))));
+					declarations.push(b.declarator(declarator.id, b.call('$.derived_proxy', b.thunk(value))));
 				} else {
 					const bindings = state.scope.get_bindings(declarator);
 					const id = state.scope.generate('derived_value');
 					declarations.push(
 						b.declarator(
 							b.id(id),
 							b.call(
-								'$.derived',
+								'$.derived_proxy',
 								b.thunk(
 									b.block([
 										b.let(declarator.id, value),

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

@@ -59,6 +59,9 @@ let current_queued_pre_and_render_effects = [];
 /** @type {import('./types.js').EffectSignal[]} */
 let current_queued_effects = [];
 
+/** @type {{t: import('./types.js').ComputationSignal, p: Array<string | symbol>, r: import('./types.js').ComputationSignal } | null} */
+let current_path = null;
+
 /** @type {Array<() => void>} */
 let current_queued_tasks = [];
 /** @type {Array<() => void>} */
@@ -79,6 +82,7 @@ let current_dependencies_index = 0;
 let current_untracked_writes = null;
 /** @type {null | import('./types.js').SignalDebug} */
 let last_inspected_signal = null;
+
 /** If `true`, `get`ting the signal should not register it as a dependency */
 export let current_untracking = false;
 /** Exists to opt out of the mutation validation for stores which may be set for the first time during a derivation */
@@ -327,23 +331,26 @@ function is_signal_dirty(signal) {
  */
 function execute_signal_fn(signal) {
 	const init = signal.i;
+	const flags = signal.f;
 	const previous_dependencies = current_dependencies;
 	const previous_dependencies_index = current_dependencies_index;
 	const previous_untracked_writes = current_untracked_writes;
 	const previous_consumer = current_consumer;
 	const previous_block = current_block;
 	const previous_component_context = current_component_context;
 	const previous_skip_consumer = current_skip_consumer;
-	const is_render_effect = (signal.f & RENDER_EFFECT) !== 0;
+	const is_render_effect = (flags & RENDER_EFFECT) !== 0;
 	const previous_untracking = current_untracking;
+	const previous_path = current_path;
 	current_dependencies = /** @type {null | import('./types.js').Signal[]} */ (null);
 	current_dependencies_index = 0;
 	current_untracked_writes = null;
 	current_consumer = signal;
 	current_block = signal.b;
 	current_component_context = signal.x;
-	current_skip_consumer = !is_flushing_effect && (signal.f & UNOWNED) !== 0;
+	current_skip_consumer = !is_flushing_effect && (flags & UNOWNED) !== 0;
 	current_untracking = false;
+	current_path = null;
 
 	// Render effects are invoked when the UI is about to be updated - run beforeUpdate at that point
 	if (is_render_effect && current_component_context?.u != null) {
@@ -364,6 +371,9 @@ function execute_signal_fn(signal) {
 		} else {
 			res = /** @type {() => V} */ (init)();
 		}
+		if (current_path !== null) {
+			push_derived_path();
+		}
 		let dependencies = /** @type {import('./types.js').Signal<unknown>[]} **/ (signal.d);
 		if (current_dependencies !== null) {
 			let i;
@@ -412,6 +422,10 @@ function execute_signal_fn(signal) {
 					if (consumers === null) {
 						dependency.c = [signal];
 					} else if (consumers[consumers.length - 1] !== signal) {
+						// TODO: should this be:
+						//
+						// } else if (!consumers.includes(signal)) {
+						//
 						consumers.push(signal);
 					}
 				}
@@ -430,6 +444,7 @@ function execute_signal_fn(signal) {
 		current_component_context = previous_component_context;
 		current_skip_consumer = previous_skip_consumer;
 		current_untracking = previous_untracking;
+		current_path = previous_path;
 	}
 }
 
@@ -495,13 +510,7 @@ function destroy_references(signal) {
 		let i;
 		for (i = 0; i < references.length; i++) {
 			const reference = references[i];
-			if ((reference.f & IS_EFFECT) !== 0) {
-				destroy_signal(reference);
-			} else {
-				destroy_references(reference);
-				remove_consumers(reference, 0);
-				reference.d = null;
-			}
+			destroy_signal(reference);
 		}
 	}
 }
@@ -931,6 +940,30 @@ export function unsubscribe_on_destroy(stores) {
 	});
 }
 
+function push_derived_path() {
+	const path =
+		/** @type {{t: import('./types.js').ComputationSignal, p: Array<string | symbol>, r: import('./types.js').ComputationSignal }} */ (
+			current_path
+		);
+	if (is_last_current_dependency(path.r)) {
+		if (current_dependencies === null) {
+			current_dependencies_index--;
+		} else {
+			current_dependencies.pop();
+		}
+	}
+	const derived_prop = derived(() => {
+		let value = /** @type {any} */ (get(path.t));
+		const property_path = path.p;
+		for (let i = 0; i < property_path.length; i++) {
+			value = value?.[property_path[i]];
+		}
+		return value;
+	});
+	current_path = null;
+	get(derived_prop);
+}
+
 /**
  * @template V
  * @param {import('./types.js').Signal<V>} signal
@@ -949,6 +982,10 @@ export function get(signal) {
 		return signal.v;
 	}
 
+	if (current_path !== null) {
+		push_derived_path();
+	}
+
 	if (is_signals_recorded) {
 		captured_signals.add(signal);
 	}
@@ -971,7 +1008,7 @@ export function get(signal) {
 		) {
 			if (current_dependencies === null) {
 				current_dependencies = [signal];
-			} else if (signal !== current_dependencies[current_dependencies.length - 1]) {
+			} else {
 				current_dependencies.push(signal);
 			}
 		}
@@ -1268,16 +1305,7 @@ export function destroy_signal(signal) {
 	const flags = signal.f;
 	destroy_references(signal);
 	remove_consumers(signal, 0);
-	signal.i =
-		signal.r =
-		signal.y =
-		signal.x =
-		signal.b =
-		// @ts-expect-error - this is fine, since we're assigning to null to clear out a destroyed signal
-		signal.v =
-		signal.d =
-		signal.c =
-			null;
+	signal.i = signal.r = signal.y = signal.x = signal.b = signal.d = signal.c = null;
 	set_signal_status(signal, DESTROYED);
 	if (destroy !== null) {
 		if (is_array(destroy)) {
@@ -1312,6 +1340,126 @@ export function derived(init) {
 	return signal;
 }
 
+/**
+ * @param {any} value
+ */
+function should_proxy_derived_value(value) {
+	let prototype;
+	return (
+		(typeof value === 'object' &&
+			value !== null &&
+			(prototype = get_prototype_of(value)) === object_prototype) ||
+		prototype === array_prototype
+	);
+}
+
+/**
+ * @param {import("./types.js").SourceSignal<unknown>} signal
+ */
+function is_last_current_dependency(signal) {
+	if (current_dependencies !== null) {
+		return current_dependencies[current_dependencies.length - 1] === signal;
+	} else if (current_consumer !== null && current_dependencies_index > 0) {
+		return current_consumer.d?.[current_dependencies_index - 1] === signal;
+	}
+	return false;
+}
+
+/**
+ * @template V
+ * @param {() => any} init
+ * @returns {import('./types.js').ComputationSignal<V>}
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export function derived_proxy(init) {
+	const derived_object = derived(init);
+	const proxied_objects = new Map();
+
+	/**
+	 * @param {V} value
+	 * @param {(string | symbol)[]} path
+	 * @returns {V}
+	 */
+	function proxify_object(value, path) {
+		const keys = new Set(Reflect.ownKeys(/** @type {object} */ (value)));
+		const proxy = new Proxy(value, handler);
+		proxied_objects.set(value, {
+			x: proxy,
+			k: keys,
+			p: path
+		});
+		return proxy;
+	}
+
+	const handler = {
+		/**
+		 * @param {any} target
+		 * @param {string | symbol} prop
+		 * @param {any} receiver
+		 */
+		get(target, prop, receiver) {
+			const value = Reflect.get(target, prop, receiver);
+			const { k: keys, p: path } = proxied_objects.get(target);
+
+			if (
+				(effect_active_and_not_render_effect() || updating_derived) &&
+				keys.has(prop) &&
+				is_last_current_dependency(proxied_derived)
+			) {
+				const type = typeof value;
+				let new_path;
+				// We only track paths for primitives or state objects, to avoid tracking objects
+				// that likely change all the time.
+				if (
+					value === void 0 ||
+					type === 'string' ||
+					type === 'number' ||
+					type === 'boolean' ||
+					type === 'symbol' ||
+					type === 'bigint' ||
+					type === null ||
+					STATE_SYMBOL in value
+				) {
+					new_path = [...path, prop];
+					if (current_path !== null) {
+						push_derived_path();
+					} else {
+						current_path = { t: derived_object, p: new_path, r: proxied_derived };
+					}
+				}
+				if (should_proxy_derived_value(value)) {
+					const possible_proxy = proxied_objects.get(value);
+					if (possible_proxy !== undefined) {
+						return possible_proxy.x;
+					}
+					if (!new_path) {
+						new_path = [...path, prop];
+					}
+					return proxify_object(value, new_path);
+				}
+			}
+			return value;
+		}
+	};
+
+	const proxied_derived = derived(() => {
+		const value = get(derived_object);
+		if (should_proxy_derived_value(value)) {
+			return proxify_object(value, []);
+		} else if (proxied_objects.size > 0) {
+			proxied_objects.clear();
+		}
+		return value;
+	});
+
+	// Cleanup when the derived is destroyed
+	proxied_derived.y = () => {
+		proxied_objects.clear();
+	};
+
+	return proxied_derived;
+}
+
 /**
  * @template V
  * @param {() => V} init
@@ -1397,6 +1545,13 @@ export function effect_active() {
 	return current_effect ? (current_effect.f & MANAGED) === 0 : false;
 }
 
+/**
+ * @returns {boolean}
+ */
+function effect_active_and_not_render_effect() {
+	return current_effect ? (current_effect.f & (MANAGED | RENDER_EFFECT)) === 0 : false;
+}
+
 /**
  * @param {() => void | (() => void)} init
  * @returns {import('./types.js').EffectSignal}

packages/svelte/src/internal/index.js

@@ -7,6 +7,7 @@ export {
 	source,
 	mutable_source,
 	derived,
+	derived_proxy,
 	derived_safe_equal,
 	prop,
 	user_effect,

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

@@ -0,0 +1,22 @@
+import { test } from '../../test';
+import { log } from './log';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		log.length = 0;
+
+		await btn1?.click();
+		assert.deepEqual(log, ['c', [1, 0], 'a', 1]);
+
+		log.length = 0;
+
+		await btn2?.click();
+		assert.deepEqual(log, ['c', [1, 1], 'b', 1]);
+	}
+});

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

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

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

@@ -0,0 +1,22 @@
+<script>
+	import { log } from './log.js';
+
+	let a = $state(0);
+  let b = $state(0);
+  let c = $derived([ a, b ]);
+
+	$effect(() => {
+		log.push('c', c);
+	})
+
+	$effect(() => {
+		log.push('a', c[0]);
+	})
+
+	$effect(() => {
+		log.push('b', c[1]);
+	})
+</script>
+
+<button onclick={() => a++}>a</button>
+<button onclick={() => b++}>b</button>