improve implementation to lazyily make proxy

better naming

fixup

simplify

add comments

Author: trueadm

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_proxy', b.thunk(value))));
+					declarations.push(b.declarator(declarator.id, b.call('$.derived', 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_proxy',
+								'$.derived',
 								b.thunk(
 									b.block([
 										b.let(declarator.id, value),

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

@@ -59,8 +59,8 @@ 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 {{ s: import('./types.js').ComputationSignal, p: Array<string | symbol> } | null} */
+let current_derived_proxy_property = null;
 
 /** @type {Array<() => void>} */
 let current_queued_tasks = [];
@@ -341,7 +341,7 @@ function execute_signal_fn(signal) {
 	const previous_skip_consumer = current_skip_consumer;
 	const is_render_effect = (flags & RENDER_EFFECT) !== 0;
 	const previous_untracking = current_untracking;
-	const previous_path = current_path;
+	const previous_derived_proxy_property = current_derived_proxy_property;
 	current_dependencies = /** @type {null | import('./types.js').Signal[]} */ (null);
 	current_dependencies_index = 0;
 	current_untracked_writes = null;
@@ -350,7 +350,7 @@ function execute_signal_fn(signal) {
 	current_component_context = signal.x;
 	current_skip_consumer = !is_flushing_effect && (flags & UNOWNED) !== 0;
 	current_untracking = false;
-	current_path = null;
+	current_derived_proxy_property = 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) {
@@ -371,8 +371,8 @@ function execute_signal_fn(signal) {
 		} else {
 			res = /** @type {() => V} */ (init)();
 		}
-		if (current_path !== null) {
-			push_derived_path();
+		if (current_derived_proxy_property !== null) {
+			capture_fine_grain_derived_property();
 		}
 		let dependencies = /** @type {import('./types.js').Signal<unknown>[]} **/ (signal.d);
 		if (current_dependencies !== null) {
@@ -444,7 +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;
+		current_derived_proxy_property = previous_derived_proxy_property;
 	}
 }
 
@@ -536,7 +536,7 @@ export function execute_effect(signal) {
 	if ((signal.f & DESTROYED) !== 0) {
 		return;
 	}
-	const teardown = signal.v;
+	const teardown = /** @type {null | (() => void)} */ (signal.v);
 	const previous_effect = current_effect;
 	current_effect = signal;
 
@@ -830,16 +830,30 @@ export async function tick() {
  * @returns {void}
  */
 function update_derived(signal, force_schedule) {
+	let derived_value =
+		/** @type {import('./types.js').DerivedSignalValue<V> | typeof UNINITIALIZED} */ (signal.v);
+	if (derived_value === UNINITIALIZED) {
+		signal.v = derived_value = /** @type {import('./types.js').DerivedSignalValue<V>} */ ({
+			p: null,
+			v: UNINITIALIZED,
+			o: null
+		});
+	}
 	const previous_updating_derived = updating_derived;
 	updating_derived = true;
+	if (derived_value.p !== null) {
+		derived_value.p = null;
+		derived_value.o?.clear();
+	}
 	destroy_references(signal);
 	const value = execute_signal_fn(signal);
 	updating_derived = previous_updating_derived;
 	const status = current_skip_consumer || (signal.f & UNOWNED) !== 0 ? DIRTY : CLEAN;
 	set_signal_status(signal, status);
 	const equals = /** @type {import('./types.js').EqualsFunctions} */ (signal.e);
-	if (!equals(value, signal.v)) {
-		signal.v = value;
+
+	if (!equals(value, derived_value.v)) {
+		derived_value.v = value;
 		mark_signal_consumers(signal, DIRTY, force_schedule);
 
 		// @ts-expect-error
@@ -939,36 +953,49 @@ 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 the `current_derived_proxy_property` is not `null` then that means we should look at the current
+ * property on the object and see if actually need original derived object dependency. For example,
+ * if you had this:
+ *
+ * a.b.c
+ *
+ * Under-the-hood, `a` might be a derived signal, so we'd call get() on it. Resulting in `a` being a dependency
+ * for the currently active effect. The accessors to `b` and `c` would result in the `current_derived_proxy_property`
+ * changing to include ['b', 'c'] in the `current_derived_proxy_property.p` paths property. We can then use that to
+ * determine a new derived temporary signal that encapsulates a.b.c. This temporarly signal then becomes the dependency
+ * and we no longer need to the original depdency to `a` for the current effect. Thus making
+ */
+function capture_fine_grain_derived_property() {
+	const derived_property =
+		/** @type {{ s: import('./types.js').ComputationSignal, p: Array<string | symbol> }} */ (
+			current_derived_proxy_property
 		);
-	if (is_last_current_dependency(path.r)) {
+	if (is_last_current_dependency(derived_property.s)) {
 		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;
+		let value = /** @type {any} */ (get(derived_property.s, true));
+		const property_path = derived_property.p;
 		for (let i = 0; i < property_path.length; i++) {
 			value = value?.[property_path[i]];
 		}
 		return value;
 	});
-	current_path = null;
-	get(derived_prop);
+	current_derived_proxy_property = null;
+	get(derived_prop, true);
 }
 
 /**
  * @template V
  * @param {import('./types.js').Signal<V>} signal
  * @returns {V}
  */
-export function get(signal) {
+export function get(signal, skip_derived_proxy = false) {
 	// @ts-expect-error
 	if (DEV && signal.inspect && inspect_fn) {
 		/** @type {import('./types.js').SignalDebug} */ (signal).inspect.add(inspect_fn);
@@ -977,12 +1004,16 @@ export function get(signal) {
 	}
 
 	const flags = signal.f;
+	const is_derived = (flags & DERIVED) !== 0;
+	let value = signal.v;
 	if ((flags & DESTROYED) !== 0) {
-		return signal.v;
+		return /** @type {V} */ (
+			is_derived ? /** @type {import('./types.js').DerivedSignalValue<V>} */ (value).v : value
+		);
 	}
 
-	if (current_path !== null) {
-		push_derived_path();
+	if (current_derived_proxy_property !== null) {
+		capture_fine_grain_derived_property();
 	}
 
 	if (is_signals_recorded) {
@@ -1022,18 +1053,47 @@ export function get(signal) {
 		}
 	}
 
-	if ((flags & DERIVED) !== 0 && is_signal_dirty(signal)) {
-		if (DEV) {
-			// we want to avoid tracking indirect dependencies
-			const previous_inspect_fn = inspect_fn;
-			inspect_fn = null;
-			update_derived(/** @type {import('./types.js').ComputationSignal<V>} **/ (signal), false);
-			inspect_fn = previous_inspect_fn;
-		} else {
-			update_derived(/** @type {import('./types.js').ComputationSignal<V>} **/ (signal), false);
+	if (is_derived) {
+		if (is_signal_dirty(signal)) {
+			if (DEV) {
+				// we want to avoid tracking indirect dependencies
+				const previous_inspect_fn = inspect_fn;
+				inspect_fn = null;
+				update_derived(/** @type {import('./types.js').ComputationSignal<V>} **/ (signal), false);
+				inspect_fn = previous_inspect_fn;
+			} else {
+				update_derived(/** @type {import('./types.js').ComputationSignal<V>} **/ (signal), false);
+			}
+		}
+		const derived_signal_value = /** @type {import('./types.js').DerivedSignalValue<V>} */ (
+			signal.v
+		);
+		const value = derived_signal_value.v;
+		// If we are working with a derived that might be an object or array, then we might also want to
+		// apply the fine-grain derived property heuristic to them. However, we only need this heuristic in some cases:
+		// - inside a user effect ($effect or $effect.pre)
+		// - inside another derived ($derived)
+		// Else we don't need to bother doing this as render effects and the rest of the internal architecture applys
+		// diffing which is more optimal than creating many derived signals. However, we can't do diffing inside user
+		// effects (far too many complications with cleanup functions etc).
+		if (
+			!skip_derived_proxy &&
+			is_runes(signal.x) &&
+			effect_active_and_not_render_effect() &&
+			should_proxy_derived_value(value)
+		) {
+			let proxy = derived_signal_value.p;
+			if (proxy === null) {
+				proxy = derived_signal_value.p = create_derived_proxy(
+					/** @type {import('./types.js').ComputationSignal<V>} **/ (signal),
+					value
+				);
+			}
+			return proxy;
 		}
+		return value;
 	}
-	return signal.v;
+	return /** @type {V} */ (signal.v);
 }
 
 /**
@@ -1366,30 +1426,36 @@ function is_last_current_dependency(signal) {
 
 /**
  * @template V
- * @param {() => any} init
- * @returns {import('./types.js').ComputationSignal<V>}
+ * @param {import("./types.js").ComputationSignal<V>} signal
+ * @param {V} value
+ * @param {ProxyHandler<any>} handler
+ * @param {(string | symbol)[]} path
+ * @returns {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;
-	}
+function proxify_object(signal, value, handler, path) {
+	const keys = new Set(Reflect.ownKeys(/** @type {object} */ (value)));
+	const proxy = new Proxy(value, handler);
+	const derived_value = /** @type {import('./types.js').DerivedSignalValue<V>} */ (signal.v);
+	let proxied_objects = derived_value.o;
+	if (proxied_objects === null) {
+		derived_value.o = proxied_objects = new Map();
+	}
+	proxied_objects.set(value, {
+		x: proxy,
+		k: keys,
+		p: path
+	});
+	return proxy;
+}
 
+/**
+ * @template V
+ * @param {import("./types.js").ComputationSignal<V>} signal
+ * @param {V} derived_value
+ * @returns {V}
+ */
+/*#__NO_SIDE_EFFECTS__*/
+function create_derived_proxy(signal, derived_value) {
 	const handler = {
 		/**
 		 * @param {any} target
@@ -1398,12 +1464,14 @@ export function derived_proxy(init) {
 		 */
 		get(target, prop, receiver) {
 			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);
 
 			if (
-				(effect_active_and_not_render_effect() || updating_derived) &&
+				effect_active_and_not_render_effect() &&
 				keys.has(prop) &&
-				is_last_current_dependency(proxied_derived)
+				is_last_current_dependency(signal)
 			) {
 				const type = typeof value;
 				let new_path;
@@ -1420,10 +1488,10 @@ export function derived_proxy(init) {
 					STATE_SYMBOL in value
 				) {
 					new_path = [...path, prop];
-					if (current_path !== null) {
-						push_derived_path();
+					if (current_derived_proxy_property !== null) {
+						capture_fine_grain_derived_property();
 					} else {
-						current_path = { t: derived_object, p: new_path, r: proxied_derived };
+						current_derived_proxy_property = { s: signal, p: new_path };
 					}
 				}
 				if (should_proxy_derived_value(value)) {
@@ -1434,29 +1502,14 @@ export function derived_proxy(init) {
 					if (!new_path) {
 						new_path = [...path, prop];
 					}
-					return proxify_object(value, new_path);
+					return proxify_object(signal, value, handler, 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;
+	return proxify_object(signal, derived_value, handler, []);
 }
 
 /**

packages/svelte/src/internal/client/types.d.ts

@@ -84,6 +84,12 @@ export type SourceSignalDebug = {
 	inspect: Set<Function>;
 };
 
+export type DerivedSignalValue<V> = {
+	v: V;
+	p: null | V;
+	o: null | Map<any, { x: any; k: Set<string | symbol>; p: Array<string | symbol> }>;
+};
+
 export type ComputationSignal<V = unknown> = {
 	/** block: The block associated with this effect/computed */
 	b: null | Block;
@@ -108,7 +114,7 @@ export type ComputationSignal<V = unknown> = {
 	/** references: Anything that a signal owns */
 	r: null | ComputationSignal[];
 	/** value: The latest value for this signal, doubles as the teardown for effects */
-	v: V;
+	v: V | DerivedSignalValue<V>;
 	/** level: the depth from the root signal, used for ordering render/pre-effects topologically **/
 	l: number;
 };

packages/svelte/src/internal/index.js

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