Skip to content

fix: coarse reactivity, alternative approach #16100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Jun 17, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/popular-dancers-switch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: use compiler-driven reactivity in legacy mode template expressions
29 changes: 24 additions & 5 deletions packages/svelte/src/compiler/phases/1-parse/state/tag.js
Original file line number Diff line number Diff line change
@@ -63,7 +63,10 @@ function open(parser) {
end: -1,
test: read_expression(parser),
consequent: create_fragment(),
alternate: null
alternate: null,
metadata: {
expression: create_expression_metadata()
}
});

parser.allow_whitespace();
@@ -244,7 +247,10 @@ function open(parser) {
error: null,
pending: null,
then: null,
catch: null
catch: null,
metadata: {
expression: create_expression_metadata()
}
});

if (parser.eat('then')) {
@@ -326,7 +332,10 @@ function open(parser) {
start,
end: -1,
expression,
fragment: create_fragment()
fragment: create_fragment(),
metadata: {
expression: create_expression_metadata()
}
});

parser.stack.push(block);
@@ -461,7 +470,10 @@ function next(parser) {
elseif: true,
test: expression,
consequent: create_fragment(),
alternate: null
alternate: null,
metadata: {
expression: create_expression_metadata()
}
});

parser.stack.push(child);
@@ -624,7 +636,10 @@ function special(parser) {
type: 'HtmlTag',
start,
end: parser.index,
expression
expression,
metadata: {
expression: create_expression_metadata()
}
});

return;
@@ -699,6 +714,9 @@ function special(parser) {
declarations: [{ type: 'VariableDeclarator', id, init, start: id.start, end: init.end }],
start: start + 2, // start at const, not at @const
end: parser.index - 1
},
metadata: {
expression: create_expression_metadata()
}
});
}
@@ -725,6 +743,7 @@ function special(parser) {
end: parser.index,
expression: /** @type {AST.RenderTag['expression']} */ (expression),
metadata: {
expression: create_expression_metadata(),
dynamic: false,
arguments: [],
path: [],
Original file line number Diff line number Diff line change
@@ -23,5 +23,9 @@ export function AssignmentExpression(node, context) {
}
}

if (context.state.expression) {
context.state.expression.has_assignment = true;
}

context.next();
}
Original file line number Diff line number Diff line change
@@ -41,5 +41,8 @@ export function AwaitBlock(node, context) {

mark_subtree_dynamic(context.path);

context.next();
context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
if (node.pending) context.visit(node.pending);
if (node.then) context.visit(node.then);
if (node.catch) context.visit(node.catch);
}
Original file line number Diff line number Diff line change
@@ -32,5 +32,8 @@ export function ConstTag(node, context) {
e.const_tag_invalid_placement(node);
}

context.next();
const declaration = node.declaration.declarations[0];

context.visit(declaration.id);
context.visit(declaration.init, { ...context.state, expression: node.metadata.expression });
}
Original file line number Diff line number Diff line change
@@ -15,5 +15,5 @@ export function HtmlTag(node, context) {
// unfortunately this is necessary in order to fix invalid HTML
mark_subtree_dynamic(context.path);

context.next();
context.next({ ...context.state, expression: node.metadata.expression });
}
Original file line number Diff line number Diff line change
@@ -90,6 +90,7 @@ export function Identifier(node, context) {
if (binding) {
if (context.state.expression) {
context.state.expression.dependencies.add(binding);
context.state.expression.references.add(binding);
context.state.expression.has_state ||=
binding.kind !== 'static' &&
!binding.is_function() &&
Original file line number Diff line number Diff line change
@@ -17,5 +17,11 @@ export function IfBlock(node, context) {

mark_subtree_dynamic(context.path);

context.next();
context.visit(node.test, {
...context.state,
expression: node.metadata.expression
});

context.visit(node.consequent);
if (node.alternate) context.visit(node.alternate);
}
Original file line number Diff line number Diff line change
@@ -16,5 +16,6 @@ export function KeyBlock(node, context) {

mark_subtree_dynamic(context.path);

context.next();
context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
context.visit(node.fragment);
}
Original file line number Diff line number Diff line change
@@ -15,8 +15,9 @@ export function MemberExpression(node, context) {
}
}

if (context.state.expression && !is_pure(node, context)) {
context.state.expression.has_state = true;
if (context.state.expression) {
context.state.expression.has_member_expression = true;
context.state.expression.has_state ||= !is_pure(node, context);
}

if (!is_safe_identifier(node, context.state.scope)) {
Original file line number Diff line number Diff line change
@@ -54,7 +54,7 @@ export function RenderTag(node, context) {

mark_subtree_dynamic(context.path);

context.visit(callee);
context.visit(callee, { ...context.state, expression: node.metadata.expression });

for (const arg of expression.arguments) {
const metadata = create_expression_metadata();
Original file line number Diff line number Diff line change
@@ -21,5 +21,9 @@ export function UpdateExpression(node, context) {
}
}

if (context.state.expression) {
context.state.expression.has_assignment = true;
}

context.next();
}
Original file line number Diff line number Diff line change
@@ -13,6 +13,16 @@ export function visit_function(node, context) {
scope: context.state.scope
};

if (context.state.expression) {
for (const [name] of context.state.scope.references) {
const binding = context.state.scope.get(name);

if (binding && binding.scope.function_depth < context.state.scope.function_depth) {
context.state.expression.references.add(binding);
}
}
}

context.next({
...context.state,
function_depth: context.state.function_depth + 1,
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
/** @import { Expression } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import * as b from '../../../../utils/builders.js';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.AttachTag} node
* @param {ComponentContext} context
*/
export function AttachTag(node, context) {
context.state.init.push(
b.stmt(
b.call(
'$.attach',
context.state.node,
b.thunk(/** @type {Expression} */ (context.visit(node.expression)))
)
)
);
const expression = build_expression(context, node.expression, node.metadata.expression);
context.state.init.push(b.stmt(b.call('$.attach', context.state.node, b.thunk(expression))));
context.next();
}
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
/** @import { BlockStatement, Pattern, Statement } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
import { extract_identifiers } from '../../../../utils/ast.js';
import * as b from '#compiler/builders';
import { create_derived } from '../utils.js';
import { get_value } from './shared/declarations.js';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.AwaitBlock} node
@@ -14,7 +15,7 @@ export function AwaitBlock(node, context) {
context.state.template.push_comment();

// Visit {#await <expression>} first to ensure that scopes are in the correct order
const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
const expression = b.thunk(build_expression(context, node.expression, node.metadata.expression));

let then_block;
let catch_block;
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
/** @import { Expression, Pattern } from 'estree' */
/** @import { Pattern } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import { dev } from '../../../../state.js';
import { extract_identifiers } from '../../../../utils/ast.js';
import * as b from '#compiler/builders';
import { create_derived } from '../utils.js';
import { get_value } from './shared/declarations.js';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.ConstTag} node
@@ -15,15 +16,8 @@ export function ConstTag(node, context) {
const declaration = node.declaration.declarations[0];
// TODO we can almost certainly share some code with $derived(...)
if (declaration.id.type === 'Identifier') {
context.state.init.push(
b.const(
declaration.id,
create_derived(
context.state,
b.thunk(/** @type {Expression} */ (context.visit(declaration.init)))
)
)
);
const init = build_expression(context, declaration.init, node.metadata.expression);
context.state.init.push(b.const(declaration.id, create_derived(context.state, b.thunk(init))));

context.state.transform[declaration.id.name] = { read: get_value };

@@ -48,13 +42,15 @@ export function ConstTag(node, context) {

// TODO optimise the simple `{ x } = y` case — we can just return `y`
// instead of destructuring it only to return a new object
const init = build_expression(
{ ...context, state: child_state },
declaration.init,
node.metadata.expression
);
const fn = b.arrow(
[],
b.block([
b.const(
/** @type {Pattern} */ (context.visit(declaration.id, child_state)),
/** @type {Expression} */ (context.visit(declaration.init, child_state))
),
b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
])
);
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/** @import { BlockStatement, Expression, Identifier, Pattern, SequenceExpression, Statement } from 'estree' */
/** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
/** @import { AST, Binding } from '#compiler' */
/** @import { ComponentContext } from '../types' */
/** @import { Scope } from '../../../scope' */
@@ -12,8 +12,8 @@ import {
import { dev } from '../../../../state.js';
import { extract_paths, object } from '../../../../utils/ast.js';
import * as b from '#compiler/builders';
import { build_getter } from '../utils.js';
import { get_value } from './shared/declarations.js';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.EachBlock} node
@@ -24,11 +24,18 @@ export function EachBlock(node, context) {

// expression should be evaluated in the parent scope, not the scope
// created by the each block itself
const collection = /** @type {Expression} */ (
context.visit(node.expression, {
...context.state,
scope: /** @type {Scope} */ (context.state.scope.parent)
})
const parent_scope_state = {
...context.state,
scope: /** @type {Scope} */ (context.state.scope.parent)
};

const collection = build_expression(
{
...context,
state: parent_scope_state
},
node.expression,
node.metadata.expression
);

if (!each_node_meta.is_controlled) {
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @import { Expression } from 'estree' */
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import { is_ignored } from '../../../../state.js';
import * as b from '#compiler/builders';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.HtmlTag} node
@@ -11,7 +11,7 @@ import * as b from '#compiler/builders';
export function HtmlTag(node, context) {
context.state.template.push_comment();

const expression = /** @type {Expression} */ (context.visit(node.expression));
const expression = build_expression(context, node.expression, node.metadata.expression);

const is_svg = context.state.metadata.namespace === 'svg';
const is_mathml = context.state.metadata.namespace === 'mathml';
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import * as b from '#compiler/builders';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.IfBlock} node
@@ -31,14 +32,16 @@ export function IfBlock(node, context) {
statements.push(b.var(b.id(alternate_id), b.arrow(alternate_args, alternate)));
}

const test = build_expression(context, node.test, node.metadata.expression);

/** @type {Expression[]} */
const args = [
node.elseif ? b.id('$$anchor') : context.state.node,
b.arrow(
[b.id('$$render')],
b.block([
b.if(
/** @type {Expression} */ (context.visit(node.test)),
test,
b.stmt(b.call(b.id('$$render'), b.id(consequent_id))),
alternate_id ? b.stmt(b.call(b.id('$$render'), b.id(alternate_id), b.false)) : undefined
)
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
/** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types' */
import * as b from '#compiler/builders';
import { build_expression } from './shared/utils.js';

/**
* @param {AST.KeyBlock} node
@@ -10,7 +11,7 @@ import * as b from '#compiler/builders';
export function KeyBlock(node, context) {
context.state.template.push_comment();

const key = /** @type {Expression} */ (context.visit(node.expression));
const key = build_expression(context, node.expression, node.metadata.expression);
const body = /** @type {Expression} */ (context.visit(node.fragment));

context.state.init.push(
Loading
Oops, something went wrong.