[svelte] reactive_declaration_non_reactive_property

[razsa]

A $: statement (src/​components/​Stats.svelte:54:2) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behavior of this code will change if you migrate it to runes mode.

In the orginal Stats.svelte component:

$: darkMode = $darkModeStore;
  $: primaryColor = $primaryColorStore;
  $: secondaryColor = darkMode ? $tertiaryColorStore : $secondaryColorStore;
  $: tertiaryColor = $tertiaryColorStore;
  $: fontColor = darkMode ? '#ffffff' : '#000000';
  $: mavModel = $mavModelStore;
  $: mavType = $mavTypeStore;
  $: isArmed = $mavArmedStateStore;
  $: systemState = $mavStateStore;
  $: mavMode = $mavModeStore;
  $: batteryStatus = $mavBatteryStore;
  $: altitude = $mavAltitudeStore;
  $: speed = $mavSpeedStore;
  $: missionPlanTitle = $missionPlanTitleStore;
  $: mavLocation = $mavLocationStore;
  $: missionProgress = getMissionProgress($missionIndexStore, $missionCountStore, $mavLocationStore as L.LatLng);
  $: missionLoaded = $missionPlanTitleStore !== '';
  $: markers = $markersStore;
  $: eta = calculateETA(missionProgress, $mavLocationStore);

I replaced reactive declarations ($:) with state runes ($state) for reactive variables.
Used $derived for computed values.
Used the $effect for handling side effects when darkMode changes
Removed the reactive store subscriptions since they're handled by the runes system.

Reactivity with Runes component:

let darkMode = $state($darkModeStore);
  let primaryColor = $state($primaryColorStore);
  let secondaryColor = $state(darkMode ? $tertiaryColorStore : $secondaryColorStore);
  let tertiaryColor = $state($tertiaryColorStore);
  let fontColor = $state(darkMode ? '#ffffff' : '#000000');
  let mavModel = $state($mavModelStore);
  let mavType = $state($mavTypeStore);
  let isArmed = $state($mavArmedStateStore);
  let systemState = $state($mavStateStore);
  let mavMode = $state($mavModeStore);
  let batteryStatus = $state($mavBatteryStore);
  let altitude = $state($mavAltitudeStore);
  let speed = $state($mavSpeedStore);
  let missionPlanTitle = $state($missionPlanTitleStore);
  let mavLocation = $state($mavLocationStore);
  let markers = $state($markersStore);

  // Convert derived values to derived runes
  let missionProgress = $derived(getMissionProgress($missionIndexStore, $missionCountStore, mavLocation as L.LatLng));
  let missionLoaded = $derived(missionPlanTitle !== '');
  let eta = $derived(calculateETA(missionProgress, mavLocation));

  // Create effect for darkMode changes
  $effect(() => {
    secondaryColor = darkMode ? tertiaryColor : $secondaryColorStore;
    fontColor = darkMode ? '#ffffff' : '#000000';
  });

  // Rest of the code ...

Svelte 5's runes system change breaks the page.

[Prinzhorn]

Did the migration tool create this code or you?

These two are not the same:

// Will always keep `darkMode` in sync with `darkModeStore`
$: darkMode = $darkModeStore;

// Defines a reactive state with _initial_ value of `$darkModeStore`
let darkMode = $state($darkModeStore);

You need to use $derived everywhere, because you are deriving state from a store.

https://svelte.dev/playground/7383f7af2c8e45868c34edf8fbbbcb4c?version=5.10.0

[Prinzhorn]

@razsa there's a button you can use to mark this as the answer. The discussion is still considered unanswered.