Open KieranP opened 1 week ago
It should be converting it to let textarea: HTMLTextAreaElement | undefined = $state()
but this seems to have been skipped because before migration it already had a type.
If bind:this is run when the component is created through, why does the variable it binds to need to be reactive? It won't change, it's assigned once... seems like Svelte 5 is requiring things be $state runes when perhaps they don't need to be?
The rules around bind:this
have already been loosened before, otherwise you would get this warning without $state
:
textarea is updated, but is not declared with $state(...). Changing its value will not correctly trigger updates (non_reactive_update)
Migration should probably add | undefined
to the type if a variable without initialization is turned into $state
(unless undefined
is removed from the $state
type).
A question is whether $state
should be added for this
bindings like these. Both the addition of | undefined
and making it a $state
is more correct, the variable does start out as undefined
and is only set during mount.
Code like the following would throw (which is not detected by TS):
let textarea: HTMLTextAreaElement;
log();
function log() {
console.log(textarea.textContent);
}
I ran into the same error tonight. The only difference was mine was a wider HTMLElement, but otherwise exactly the same behaviour.
Describe the bug
Have component that binds textarea to variable for use on afterMount
This is being converted into this:
But defining
let textarea
is throwing this typescript error:Manually changing
let textarea: HTMLTextAreaElement = $state()
to justlet textarea: HTMLTextAreaElement
fixes the issue.Reproduction
See above
Logs
No response
System Info
Severity
annoyance