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

#2470

Issue

Open
B
brunnerh
Aug 21, 2024, 9:36 AM

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

Info

Assignees None
Labels feature request
Milestone None