fix: share guarded values across control blocks

Author: LeeWxx

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -37,6 +37,10 @@ export interface ClientTransformState extends TransformState {
 			update?: (node: UpdateExpression) => Expression;
 		}
 	>;
+
+	readonly guard_snapshots?: Map<string, { readonly id: Identifier }>;
+
+	readonly collect_guard_snapshots?: Map<string, { readonly id: Identifier }>;
 }
 
 export interface ComponentClientTransformState extends ClientTransformState {

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

@@ -26,7 +26,14 @@ export function ConstTag(node, context) {
 
 		context.state.consts.push(b.const(declaration.id, expression));
 
-		context.state.transform[declaration.id.name] = { read: get_value };
+		const snapshot = context.state.guard_snapshots?.get(declaration.id.name);
+		context.state.transform[declaration.id.name] = snapshot
+			? {
+					read() {
+						return snapshot.id;
+					}
+				}
+			: { read: get_value };
 
 		// we need to eagerly evaluate the expression in order to hit any
 		// 'Cannot access x before initialization' errors
@@ -78,9 +85,16 @@ export function ConstTag(node, context) {
 		}
 
 		for (const node of identifiers) {
-			context.state.transform[node.name] = {
-				read: (node) => b.member(b.call('$.get', tmp), node)
-			};
+			const snapshot = context.state.guard_snapshots?.get(node.name);
+			context.state.transform[node.name] = snapshot
+				? {
+						read() {
+							return snapshot.id;
+						}
+					}
+				: {
+						read: (node) => b.member(b.call('$.get', tmp), node)
+					};
 		}
 	}
 }

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

@@ -13,18 +13,59 @@ export function IfBlock(node, context) {
 	const statements = [];
 
 	const { has_await } = node.metadata.expression;
-	const expression = build_expression(context, node.test, node.metadata.expression);
+	const guard_snapshots = new Map();
+	const expression = build_expression(context, node.test, node.metadata.expression, {
+		...context.state,
+		collect_guard_snapshots: guard_snapshots
+	});
 	const test = has_await ? b.call('$.get', b.id('$$condition')) : expression;
 
-	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
+	let branch_state = context.state;
+
+	if (guard_snapshots.size > 0) {
+		const snapshots = new Map(context.state.guard_snapshots ?? undefined);
+		const transform = { ...context.state.transform };
+
+		for (const [name, snapshot] of guard_snapshots) {
+			snapshots.set(name, snapshot);
+
+			const base = transform[name] ?? context.state.transform[name];
+			transform[name] = {
+				...base,
+				read() {
+					return snapshot.id;
+				},
+				assign: base?.assign,
+				mutate: base?.mutate,
+				update: base?.update
+			};
+		}
+
+		branch_state = {
+			...context.state,
+			collect_guard_snapshots: undefined,
+			guard_snapshots: snapshots,
+			transform
+		};
+	}
+
+	const consequent = /** @type {BlockStatement} */ (
+		branch_state === context.state
+			? context.visit(node.consequent)
+			: context.visit(node.consequent, branch_state)
+	);
 	const consequent_id = b.id(context.state.scope.generate('consequent'));
 
 	statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
 
 	let alternate_id;
 
 	if (node.alternate) {
-		const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
+		const alternate = /** @type {BlockStatement} */ (
+			branch_state === context.state
+				? context.visit(node.alternate)
+				: context.visit(node.alternate, branch_state)
+		);
 		alternate_id = b.id(context.state.scope.generate('alternate'));
 		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
 	}

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

@@ -43,6 +43,23 @@ function should_memoize_binding(binding) {
 			return false;
 	}
 }
+
+/**
+ * @param {Binding | null} binding
+ * @returns {boolean}
+ */
+function should_snapshot_guard(binding) {
+	if (binding === null) return false;
+
+	switch (binding.kind) {
+		case 'derived':
+		case 'legacy_reactive':
+		case 'template':
+			return true;
+		default:
+			return false;
+	}
+}
 /** @type {WeakMap<any, Map<string, { id: Identifier; getter: (node: Identifier) => Expression }>>} */
 const memoized_reads_by_scope = new WeakMap();
 
@@ -459,14 +476,18 @@ export function build_expression(context, expression, metadata, state = context.
 
 		memoized_ids = new Set();
 
+		const guard_snapshots = state.collect_guard_snapshots;
+
 		for (const [binding, count] of counts) {
-			if (count <= 1) continue;
 			const name = binding.node?.name;
 			if (!name) continue;
 
 			const original = state.transform[name];
 			if (!original?.read) continue;
 
+			const capture_for_guard = Boolean(guard_snapshots && should_snapshot_guard(binding));
+			if (count <= 1 && !capture_for_guard) continue;
+
 			let scope_records = memoized_reads_by_scope.get(binding.scope);
 			if (!scope_records) {
 				scope_records = new Map();
@@ -505,17 +526,45 @@ export function build_expression(context, expression, metadata, state = context.
 			};
 
 			assignments.push(b.stmt(b.assignment('=', record.id, record.getter(b.id(name)))));
+
+			if (guard_snapshots && capture_for_guard) {
+				guard_snapshots.set(name, { id: record.id });
+			}
 		}
 	}
 
 	let value = /** @type {Expression} */ (context.visit(expression, child_state));
 
-	if (memoized_ids !== null && memoized_ids.size > 0) {
-		const memoized = memoized_ids;
+	const optional_sources = new Set();
+
+	if (memoized_ids !== null) {
+		for (const name of memoized_ids) optional_sources.add(name);
+	}
+
+	if (state.guard_snapshots) {
+		for (const snapshot of state.guard_snapshots.values()) {
+			optional_sources.add(snapshot.id.name);
+		}
+	}
+
+	if (optional_sources.size > 0) {
 		walk(value, null, {
 			MemberExpression(node) {
-				if (node.object.type === 'Identifier' && memoized.has(node.object.name)) {
-					node.optional = true;
+				let root = node.object;
+				while (root && root.type === 'MemberExpression') {
+					root = root.object;
+				}
+
+				if (root?.type === 'Identifier' && optional_sources.has(root.name)) {
+					/** @type {import('estree').MemberExpression | null} */
+					let current = node;
+					while (current) {
+						current.optional = true;
+						const next = /** @type {import('estree').Expression | import('estree').Super} */ (
+							current.object
+						);
+						current = next.type === 'MemberExpression' ? next : null;
+					}
 				}
 			}
 		});