Quick fix for adding $state(...)
wrapper.
When manually migrating a component to runes, a quick fix for non_reactive_update
would be useful.
E.g. adding the first $state
will highlight all issues on other variables:
<script lang="ts">
let a = $state(1);
let b = 2; // "`b` is updated, but is not declared with `$state(...)`. ..."
let c: number; // "`c` is updated, but is not declared with `$state(...)`. ..."
</script>
<!-- [bind to/update values] -->
Add quick fix options that add $state
to the currently highlighted or all variables with the warning.
- Add
$state(...)
- Add
$state(...)
for all
<script lang="ts">
let a = $state(1);
let b = 2;
let b = $state(2);
let c: number;
let c: number = $state();
</script>
(For c
this would be a type error, but the resolution of that should probably be up to the user. I am assuming pre-existing migration logic would be used here if possible.)
Possibly some other quick fixes/refactoring involving $derived
and $effect
could be added for $:
(legacy_reactive_statement_invalid
).
No response
No response
What is the use case for manually migrating a component compared to running the migration script over the component? I have plans to add a command that invokes the migration for a single file (because it's part of svelte/compiler
we can do that), would that be instead?
Granted, a quick fix like this is maybe useful either way
What is the use case for manually migrating a component compared to running the migration script over the component?
If you only need to migrate very little, it might be more straightforward to just do it manually. A command would be great, then you don't need to check how to do it via the script. (Ideally the command would also work on already partially migrated files.)
The quick fix would be useful in general, e.g. when later changing a constant to something mutable. For that use case being able to use it without the warning being present (yet) would be nice.