Quick fix for adding $state(...) wrapper.

[brunnerh]

Description

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] -->

Proposed solution

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).

Alternatives

No response

Additional Information, eg. Screenshots

No response

[dummdidumm]

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

[brunnerh]

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.