Non-updated state treated differently in different places
#14280
Development PR
This further improves the partial evaluation implemented in #15494. It accounts for sources that are declared as $state, but never reassigned to (and can be treated as constants), and other (somewhat more complex) cases.
A few possible end goals for this:
- Respect TypeScript type annotations/assertions
- Primitive function type inference/evaluation?:
function get_pi() {
return 3.14159265358979; //constant value
}- In call expressions, infer types if the callee is a known global:
String(stuff); //string type
Math.random(); //numbercloses #14280
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the bug
Minor, but given a component like this...
<script>
let a = $state(1);
let b = $state(2);
</script>
<p>{a} + {b} = {a + b}</p>...neither a nor b is turned into state, because they are never updated. But the contents of the <p> are put in an effect anyway:
export default function App($$anchor) {
let a = 1;
let b = 2;
var p = root();
var text = $.child(p);
p.textContent = `${a ?? ""} + ${b ?? ""} = ${a + b ?? ""}`;
$.reset(p);
$.template_effect(() => $.set_text(text, `${a ?? ""} + ${b ?? ""} = ${a + b ?? ""}`));
$.append($$anchor, p);
}Whatever logic is used for determining whether it's a = 1 or a = $.state(1) should also be used for determining whether to create an effect.
Reproduction
Logs
No response
System Info
nextSeverity
annoyance
Info
Similarly, I think it'd be useful if we determined when any state updates happen to see if we really need to make a value a $.state. For example, in this code, a doesn't necessarily need to become a $.state.
If we could, (I'm not sure how doable this is), we could just figure out the updated value of a state and assign it at the declaration. Example:
let a = $state(1);
a++;
//becomes
let a = 2; //assuming `a` doesn't update anywhere elseexport default function App($$anchor) { let a = 1; let b = 2; var p = root(); var text = $.child(p); p.textContent = `${a ?? ""} + ${b ?? ""} = ${a + b ?? ""}`; $.reset(p); $.template_effect(() => $.set_text(text, `${a ?? ""} + ${b ?? ""} = ${a + b ?? ""}`)); $.append($$anchor, p); }
Out of curiosity, is there a reason you chose to use p.textContent instead of $.set_text?