WIP

Author: trueadm

packages/svelte/src/ambient.d.ts

@@ -255,7 +255,7 @@ declare namespace $effect {
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
-	export function lazy(state: any, fn: () => void | (() => void)): void;
+	export function lazy(state: any[], fn: () => void | (() => void)): void;
 
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -103,20 +103,28 @@ export function CallExpression(node, context) {
 				}
 				const state_ref = node.arguments[0];
 
-				if (state_ref.type !== 'Identifier') {
-					throw new Error('Bad $effect.lazy, first argument must be an identifier');
+				if (state_ref.type !== 'ArrayExpression') {
+					throw new Error('Bad $effect.lazy, first argument must be an array of $state references');
 				}
 				const scope = context.state.scope;
-				const binding = /** @type {Binding} */ (scope.get(state_ref.name));
-
-				if (binding === null || binding.kind !== 'state') {
-					throw new Error('Bad $effect.lazy link, must be a local reference to $state');
+				for (const element of state_ref.elements) {
+					if (element === null || element.type !== 'Identifier') {
+						throw new Error(
+							'Bad $effect.lazy, first argument must be an array of $state references'
+						);
+					}
+
+					const binding = /** @type {Binding} */ (scope.get(element.name));
+
+					if (binding === null || binding.kind !== 'state') {
+						throw new Error('Bad $effect.lazy link, must be a local reference to $state');
+					}
+					const id = scope.generate('effect');
+					(binding.linked_effects ??= []).push(id);
+					/** @type {SimpleCallExpression} */ (node).metadata = {
+						id
+					};
 				}
-				const id = scope.generate('effect');
-				(binding.linked_effects ??= []).push(id);
-				/** @type {SimpleCallExpression} */ (node).metadata = {
-					id
-				};
 			} else if (node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
 			}

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

@@ -1,4 +1,4 @@
-/** @import { Expression, Property, ExpressionStatement, ObjectExpression, Identifier } from 'estree' */
+/** @import { Expression, Property, ExpressionStatement, ObjectExpression, Identifier, ArrayExpression } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
 import { get_rune } from '../../../scope.js';
@@ -26,7 +26,7 @@ export function ExpressionStatement(node, context) {
 			const expr = b.call(
 				'$.lazy_effect',
 				/** @type {Expression} */ (func),
-				/** @type {Identifier} */ (node.expression.arguments[0])
+				/** @type {ArrayExpression} */ (node.expression.arguments[0])
 			);
 			expr.callee.loc = node.expression.callee.loc; // ensure correct mapping
 

packages/svelte/src/internal/client/reactivity/effects.js

@@ -1,4 +1,4 @@
-/** @import { ComponentContext, ComponentContextLegacy, Derived, Effect, Reaction, TemplateNode, TransitionManager } from '#client' */
+/** @import { ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
 import {
 	check_dirtiness,
 	component_context,
@@ -16,7 +16,8 @@ import {
 	set_is_flushing_effect,
 	set_signal_status,
 	untrack,
-	skip_reaction
+	skip_reaction,
+	new_deps
 } from '../runtime.js';
 import {
 	DIRTY,
@@ -221,10 +222,10 @@ export function user_effect(fn) {
 /**
  * Internal representation of `$effect.lazy(...)`
  * @param {() => void | (() => void)} fn
- * @param {Derived} state
+ * @param {Derived[]} states
  * @returns {Effect}
  */
-export function lazy_effect(fn, state) {
+export function lazy_effect(fn, states) {
 	validate_effect('$effect.lazy');
 	if (DEV) {
 		define_property(fn, 'name', {
@@ -236,8 +237,15 @@ export function lazy_effect(fn, state) {
 		LAZY_EFFECT,
 		() => {
 			var teardown = fn();
+			if (new_deps !== null) {
+				for (var i = new_deps.length - 1; i >= 0; i--) {
+					if (states.includes(/** @type {Derived} */ (new_deps[i]))) {
+						new_deps.splice(i, 1);
+					}
+				}
+			}
 			var current_effect = /** @type {Effect} */ (active_reaction);
-			(current_effect.deriveds ??= []).push(state);
+			(current_effect.deriveds ??= []).push(...states);
 
 			return teardown;
 		},

packages/svelte/types/index.d.ts

@@ -2569,7 +2569,7 @@ declare namespace $effect {
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
-	export function lazy(state: any, fn: () => void | (() => void)): void;
+	export function lazy(state: any[], fn: () => void | (() => void)): void;
 
 	/**
 	 * The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.