fix: incremental batches

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

@@ -23,14 +23,13 @@ export const BOUNDARY_EFFECT = 1 << 7;
  */
 export const CONNECTED = 1 << 9;
 export const CLEAN = 1 << 10;
-export const DIRTY = 1 << 11;
-export const MAYBE_DIRTY = 1 << 12;
 export const INERT = 1 << 13;
 export const DESTROYED = 1 << 14;
 /** Set once a reaction has run for the first time */
 export const REACTION_RAN = 1 << 15;
 /** Effect is in the process of getting destroyed. Can be observed in child teardown functions */
 export const DESTROYING = 1 << 25;
+export const EFFECT_LEGACY = 1 << 26;
 
 // Flags exclusive to effects
 /**
@@ -43,6 +42,7 @@ export const HEAD_EFFECT = 1 << 18;
 export const EFFECT_PRESERVED = 1 << 19;
 export const USER_EFFECT = 1 << 20;
 export const EFFECT_OFFSCREEN = 1 << 25;
+export const STATE_EAGER_EFFECT = 1 << 27;
 
 // Flags exclusive to deriveds
 /**

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

@@ -227,7 +227,15 @@ export function pop(component) {
 
 /** @returns {boolean} */
 export function is_runes() {
-	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
+	if (!legacy_mode_flag) {
+		return true;
+	}
+
+	// TODO feels like we could probably simplify this a bit. no tests fail without
+	// the first part, though would like to better understand usage before deleting
+	const context = component_context ?? active_reaction?.ctx ?? active_effect?.ctx;
+
+	return context?.l === null;
 }
 
 /**

packages/svelte/src/internal/client/dev/debug.js

@@ -7,19 +7,18 @@ import {
 	CLEAN,
 	CONNECTED,
 	DERIVED,
-	DIRTY,
 	EFFECT,
 	ASYNC,
 	DESTROYED,
 	INERT,
-	MAYBE_DIRTY,
 	RENDER_EFFECT,
 	ROOT_EFFECT,
 	WAS_MARKED,
 	MANAGED_EFFECT
 } from '#client/constants';
 import { snapshot } from '../../shared/clone.js';
-import { untrack } from '../runtime.js';
+import { get_cv, get_wv } from '../reactivity/batch.js';
+import { is_dirty, untrack } from '../runtime.js';
 
 /**
  *
@@ -77,8 +76,15 @@ export function log_effect_tree(effect, highlighted = [], depth = 0, is_reachabl
 	const flags = effect.f;
 	let label = effect_label(effect);
 
-	let status =
-		(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+	let status = 'clean';
+
+	if ((flags & (BRANCH_EFFECT | ROOT_EFFECT)) !== 0) {
+		if ((flags & CLEAN) === 0) status = 'dirty';
+	} else {
+		if (is_dirty(effect)) {
+			status = 'dirty';
+		}
+	}
 
 	let styles = [`font-weight: ${status === 'clean' ? 'normal' : 'bold'}`];
 
@@ -96,7 +102,7 @@ export function log_effect_tree(effect, highlighted = [], depth = 0, is_reachabl
 	}
 
 	// eslint-disable-next-line no-console
-	console.group(`%c${label} (${status})`, styles.join('; '));
+	console.group(`%c${label} (${status}) cv=${get_cv(effect)}`, styles.join('; '));
 
 	if (depth === 0) {
 		const callsite = new Error().stack
@@ -158,7 +164,7 @@ function log_dep(dep) {
 
 		// eslint-disable-next-line no-console
 		console.groupCollapsed(
-			`%c$derived %c${dep.label ?? '<unknown>'}`,
+			`%c$derived %c${dep.label ?? '<unknown>'} wv=${get_wv(derived)} cv=${get_cv(derived)}`,
 			'font-weight: bold; color: CornflowerBlue',
 			'font-weight: normal',
 			untrack(() => snapshot(derived.v))
@@ -175,7 +181,7 @@ function log_dep(dep) {
 	} else {
 		// eslint-disable-next-line no-console
 		console.log(
-			`%c$state %c${dep.label ?? '<unknown>'}`,
+			`%c$state %c${dep.label ?? '<unknown>'} wv=${get_wv(dep)}`,
 			'font-weight: bold; color: CornflowerBlue',
 			'font-weight: normal',
 			untrack(() => snapshot(dep.v))
@@ -201,8 +207,6 @@ export function log_reactions(signal) {
 		const names = [];
 
 		if ((flags & CLEAN) !== 0) names.push('CLEAN');
-		if ((flags & DIRTY) !== 0) names.push('DIRTY');
-		if ((flags & MAYBE_DIRTY) !== 0) names.push('MAYBE_DIRTY');
 		if ((flags & CONNECTED) !== 0) names.push('CONNECTED');
 		if ((flags & WAS_MARKED) !== 0) names.push('WAS_MARKED');
 		if ((flags & INERT) !== 0) names.push('INERT');
@@ -259,7 +263,7 @@ export function log_reactions(signal) {
 				} else {
 					// It's an effect
 					const label = effect_label(/** @type {Effect} */ (reaction), true);
-					const status = (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+					const status = is_dirty(reaction) ? 'dirty' : 'clean';
 
 					// Collect parent statuses
 					/** @type {string[]} */
@@ -380,8 +384,7 @@ export function log_inconsistent_branches(effect) {
 		const is_branch = (flags & BRANCH_EFFECT) !== 0;
 
 		if (is_branch) {
-			const status =
-				(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+			const status = (flags & CLEAN) !== 0 ? 'clean' : 'dirty';
 
 			/** @type {BranchInfo[]} */
 			const child_branches = [];

packages/svelte/src/internal/client/dev/tracing.js

@@ -4,6 +4,7 @@ import { snapshot } from '../../shared/clone.js';
 import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
 import { active_reaction, untrack } from '../runtime.js';
+import { get_cv, get_wv } from '../reactivity/batch.js';
 
 /**
  * @typedef {{
@@ -27,7 +28,7 @@ function log_entry(signal, entry) {
 
 	const type = get_type(signal);
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
-	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
+	const dirty = get_wv(signal) > get_cv(current_reaction);
 	const style = dirty
 		? 'color: CornflowerBlue; font-weight: bold'
 		: 'color: grey; font-weight: normal';

packages/svelte/src/internal/client/dom/blocks/boundary.js

@@ -1,11 +1,5 @@
 /** @import { Effect, Source, TemplateNode, } from '#client' */
-import {
-	BOUNDARY_EFFECT,
-	DIRTY,
-	EFFECT_PRESERVED,
-	EFFECT_TRANSPARENT,
-	MAYBE_DIRTY
-} from '#client/constants';
+import { BOUNDARY_EFFECT, EFFECT_PRESERVED, EFFECT_TRANSPARENT } from '#client/constants';
 import { HYDRATION_START_ELSE, HYDRATION_START_FAILED } from '../../../../constants.js';
 import { component_context, set_component_context } from '../../context.js';
 import { handle_error, invoke_error_boundary } from '../../error-handling.js';
@@ -41,7 +35,6 @@ import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
 import { create_text } from '../operations.js';
 import { defer_effect } from '../../reactivity/utils.js';
-import { set_signal_status } from '../../reactivity/status.js';
 
 /**
  * @typedef {{
@@ -111,9 +104,6 @@ export class Boundary {
 	/** @type {Set<Effect>} */
 	#dirty_effects = new Set();
 
-	/** @type {Set<Effect>} */
-	#maybe_dirty_effects = new Set();
-
 	/**
 	 * A source containing the number of pending async deriveds/expressions.
 	 * Only created if `$effect.pending()` is used inside the boundary,
@@ -273,15 +263,15 @@ export class Boundary {
 
 		// any effects that were previously deferred should be transferred
 		// to the batch, which will flush in the next microtask
-		batch.transfer_effects(this.#dirty_effects, this.#maybe_dirty_effects);
+		batch.transfer_effects(this.#dirty_effects);
 	}
 
 	/**
 	 * Defer an effect inside a pending boundary until the boundary resolves
 	 * @param {Effect} effect
 	 */
 	defer_effect(effect) {
-		defer_effect(effect, this.#dirty_effects, this.#maybe_dirty_effects);
+		defer_effect(effect, this.#dirty_effects);
 	}
 
 	/**

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -203,7 +203,9 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	var each_array = derived_safe_equal(() => {
 		var collection = get_collection();
 
-		return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
+		return /** @type {V[]} */ (
+			is_array(collection) ? collection : collection == null ? [] : array_from(collection)
+		);
 	});
 
 	if (DEV) {
@@ -226,6 +228,8 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			return;
 		}
 
+		var array = get(each_array);
+
 		state.pending.delete(batch);
 
 		state.fallback = fallback;
@@ -258,7 +262,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	}
 
 	var effect = block(() => {
-		array = /** @type {V[]} */ (get(each_array));
+		array = get(each_array);
 		var length = array.length;
 
 		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
@@ -381,14 +385,6 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			// continue in hydration mode
 			set_hydrating(true);
 		}
-
-		// When we mount the each block for the first time, the collection won't be
-		// connected to this effect as the effect hasn't finished running yet and its deps
-		// won't be assigned. However, it's possible that when reconciling the each block
-		// that a mutation occurred and it's made the collection MAYBE_DIRTY, so reading the
-		// collection again can provide consistency to the reactive graph again as the deriveds
-		// will now be `CLEAN`.
-		get(each_array);
 	});
 
 	/** @type {EachState} */

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -7,7 +7,6 @@ import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
 import { tick, untrack } from '../../../runtime.js';
-import { is_runes } from '../../../context.js';
 import { current_batch, previous_batch } from '../../../reactivity/batch.js';
 import { async_mode_flag } from '../../../../flags/index.js';
 

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

@@ -1,4 +1,4 @@
-/** @import { Blocker, Effect, Value } from '#client' */
+/** @import { Blocker, Effect, Source, Value } from '#client' */
 import { DESTROYED, STALE_REACTION } from '#client/constants';
 import { DEV } from 'esm-env';
 import {
@@ -38,8 +38,22 @@ export function flatten(blockers, sync, async, fn) {
 	// Filter out already-settled blockers - no need to wait for them
 	var pending = blockers.filter((b) => !b.settled);
 
+	var deriveds = sync.map(d);
+
+	if (DEV) {
+		deriveds.forEach((d, i) => {
+			// TODO this is kinda useful for debugging but a lousy implementation —
+			// maybe the compiler could pass through the template string
+			d.label = sync[i]
+				.toString()
+				.replace('() => ', '')
+				.replaceAll('$.eager(() => ', '$state.eager(')
+				.replace(/\$\.get\((.+?)\)/g, (_, id) => id);
+		});
+	}
+
 	if (async.length === 0 && pending.length === 0) {
-		fn(sync.map(d));
+		fn(deriveds);
 		return;
 	}
 
@@ -53,12 +67,14 @@ export function flatten(blockers, sync, async, fn) {
 				? Promise.all(pending.map((b) => b.promise))
 				: null;
 
-	/** @param {Value[]} values */
-	function finish(values) {
+	/**
+	 * @param {Source[]} async
+	 */
+	function finish(async) {
 		restore();
 
 		try {
-			fn(values);
+			fn([...deriveds, ...async]);
 		} catch (error) {
 			if ((parent.f & DESTROYED) === 0) {
 				invoke_error_boundary(error, parent);
@@ -70,7 +86,7 @@ export function flatten(blockers, sync, async, fn) {
 
 	// Fast path: blockers but no async expressions
 	if (async.length === 0) {
-		/** @type {Promise<any>} */ (blocker_promise).then(() => finish(sync.map(d)));
+		/** @type {Promise<any>} */ (blocker_promise).then(() => finish([]));
 		return;
 	}
 
@@ -79,7 +95,7 @@ export function flatten(blockers, sync, async, fn) {
 	// Full path: has async expressions
 	function run() {
 		Promise.all(async.map((expression) => async_derived(expression)))
-			.then((result) => finish([...sync.map(d), ...result]))
+			.then(finish)
 			.catch((error) => invoke_error_boundary(error, parent))
 			.finally(() => decrement_pending());
 	}