feat: replace usages of stores

Author: jacobtread

cspell.json

@@ -27,6 +27,7 @@
     "staticlib",
     "tauri",
     "tungstenite",
+    "unlisten",
     "vtftk",
     "vtube",
     "webbrowser"

src/lib/api/calibration.ts

@@ -1,6 +1,5 @@
 import type { ModelData } from "$shared/appData";
 
-import { writable } from "svelte/store";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { createQuery } from "@tanstack/svelte-query";
@@ -22,16 +21,6 @@ export enum CalibrationStep {
   Complete = "Complete",
 }
 
-export const calibrationState = writable(CalibrationStep.NotStarted);
-
-// Handle logout
-listen<{ step: CalibrationStep }>(
-  "calibration_state",
-  ({ payload: { step } }) => {
-    calibrationState.set(step);
-  },
-);
-
 const CALIBRATION_DATA_KEY = ["calibration-data"];
 
 export function createModelDataQuery() {

src/lib/api/runtimeAppData.ts

@@ -1,46 +1,34 @@
 import { getContext } from "svelte";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { get, derived, type Readable } from "svelte/store";
 import {
   createQuery,
   createMutation,
   type CreateQueryResult,
 } from "@tanstack/svelte-query";
 
-import type {
-  AppData,
-  ModelData,
-  MainConfig,
-  ModelConfig,
-  SoundsConfig,
-  PhysicsConfig,
-  RuntimeAppData,
-  ExternalsConfig,
-  ThrowablesConfig,
-  VTubeStudioConfig,
-} from "./types";
+import type { AppData, ModelData, RuntimeAppData } from "./types";
 
 import { queryClient } from "./client";
 
-export const RUNTIME_APP_DATA_KEY = ["runtime-app-data"];
-export const RUNTIME_APP_DATA_CONTEXT = Symbol("runtime-app-data");
+export const APP_CONTEXT_KEY = Symbol("app-context");
 
+export const RUNTIME_APP_DATA_KEY = ["runtime-app-data"];
 export const APP_DATA_KEY = ["app-data"];
-export const APP_DATA_CONTEXT = Symbol("app-data");
 
 // Update the runtime app data when the change event is received
 listen<RuntimeAppData>("runtime_app_data_changed", ({ payload }) => {
   queryClient.cancelQueries({ queryKey: RUNTIME_APP_DATA_KEY });
   queryClient.setQueryData(RUNTIME_APP_DATA_KEY, payload);
 });
 
-export function getRuntimeAppData(): Readable<RuntimeAppData> {
-  return getContext(RUNTIME_APP_DATA_CONTEXT);
-}
+type AppContext = {
+  appData: AppData;
+  runtimeAppData: RuntimeAppData;
+};
 
-export function getAppData(): Readable<AppData> {
-  return getContext(APP_DATA_CONTEXT);
+export function getAppContext(): AppContext {
+  return getContext(APP_CONTEXT_KEY);
 }
 
 /**
@@ -114,72 +102,3 @@ export function isModelCalibrated(
   const data = modelData.find((data) => data.id === modelId);
   return data !== undefined;
 }
-
-type AppDataMutation = ReturnType<typeof createAppDateMutation>;
-type AppDataMutator<V> = (input: V) => Promise<boolean>;
-
-export function createAppDataMutator<V>(
-  appData: Readable<AppData>,
-  appDataMutation: AppDataMutation,
-  action: (appData: AppData, value: V) => AppData,
-): Readable<AppDataMutator<V>> {
-  return derived(
-    appDataMutation,
-    ($appDataMutation) => (input: V) =>
-      $appDataMutation.mutateAsync(action(get(appData), input)),
-  );
-}
-
-type UpdateSettingsMutation = {
-  throwables_config: Partial<ThrowablesConfig>;
-  model_config: Partial<ModelConfig>;
-  sounds_config: Partial<SoundsConfig>;
-  vtube_studio_config: Partial<VTubeStudioConfig>;
-  externals_config: Partial<ExternalsConfig>;
-  main_config: Partial<MainConfig>;
-  physics_config: Partial<PhysicsConfig>;
-};
-
-export function createUpdateSettingsMutation(
-  appData: Readable<AppData>,
-  appDataMutation: AppDataMutation,
-) {
-  return createAppDataMutator<UpdateSettingsMutation>(
-    appData,
-    appDataMutation,
-    (
-      appData,
-      {
-        throwables_config,
-        model_config,
-        sounds_config,
-        vtube_studio_config,
-        externals_config,
-        main_config,
-        physics_config,
-      },
-    ) => ({
-      ...appData,
-
-      throwables_config: { ...appData.throwables_config, ...throwables_config },
-      model_config: { ...appData.model_config, ...model_config },
-      sounds_config: { ...appData.sounds_config, ...sounds_config },
-      vtube_studio_config: {
-        ...appData.vtube_studio_config,
-        ...vtube_studio_config,
-      },
-      externals_config: {
-        ...appData.externals_config,
-        ...externals_config,
-      },
-      main_config: {
-        ...appData.main_config,
-        ...main_config,
-      },
-      physics_config: {
-        ...appData.physics_config,
-        ...physics_config,
-      },
-    }),
-  );
-}

src/lib/components/GlobalConfirmDialog.svelte

@@ -1,6 +1,4 @@
 <script module lang="ts">
-  import { writable } from "svelte/store";
-
   type ConfirmMessage = {
     title: string;
     description: string;
@@ -11,13 +9,11 @@
     resolve: (value: boolean) => void;
   };
 
-  const confirmStore = writable<ConfirmMessage[]>([]);
+  let confirmStore = $state<ConfirmMessage[]>([]);
 
   export function confirmDialog(message: Omit<ConfirmMessage, "resolve">) {
     return new Promise<boolean>((resolve) => {
-      confirmStore.update((value) => {
-        return [...value, { ...message, resolve }];
-      });
+      confirmStore = [...confirmStore, { ...message, resolve }];
     });
   }
 </script>
@@ -26,13 +22,11 @@
   import Dialog from "./Dialog.svelte";
   import Button from "./input/Button.svelte";
 
-  const currentMessage: ConfirmMessage | undefined = $derived($confirmStore[0]);
+  const currentMessage: ConfirmMessage | undefined = $derived(confirmStore[0]);
 
   function onResult(message: ConfirmMessage, value: boolean) {
     // Pop the message out of the store
-    confirmStore.update((value) => {
-      return value.filter((_, index) => index !== 0);
-    });
+    confirmStore = confirmStore.filter((_, index) => index !== 0);
 
     message.resolve(value);
   }

src/lib/components/nav/StatusDetails.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
   import { createModelDataQuery } from "$lib/api/calibration";
   import { createIsAuthenticatedQuery } from "$lib/api/twitch";
-  import {
-    getRuntimeAppData,
-    isModelCalibrated,
-  } from "$lib/api/runtimeAppData";
+  import { getAppContext, isModelCalibrated } from "$lib/api/runtimeAppData";
 
-  const runtimeAppData = getRuntimeAppData();
-  const isAuthenticated = createIsAuthenticatedQuery();
+  const appContext = getAppContext();
+  const runtimeAppData = $derived(appContext.runtimeAppData);
 
+  const isAuthenticated = createIsAuthenticatedQuery();
   const modelDataQuery = createModelDataQuery();
 
   // Model needs to be calibrated if not available here
   const modelCalibrated = $derived(
-    isModelCalibrated($modelDataQuery.data ?? [], $runtimeAppData.model_id),
+    isModelCalibrated($modelDataQuery.data ?? [], runtimeAppData.model_id),
   );
 </script>
 
@@ -22,8 +20,8 @@
     <div>VTube Studio</div>
     <div
       class="status-indicator"
-      data-status={$runtimeAppData.vtube_studio_connected
-        ? modelCalibrated && $runtimeAppData.vtube_studio_auth
+      data-status={runtimeAppData.vtube_studio_connected
+        ? modelCalibrated && runtimeAppData.vtube_studio_auth
           ? "green"
           : "orange"
         : "red"}
@@ -33,9 +31,9 @@
     <div>Active Overlay</div>
     <div
       class="status-indicator"
-      data-status={$runtimeAppData.active_overlay_count > 0 ? "green" : "red"}
+      data-status={runtimeAppData.active_overlay_count > 0 ? "green" : "red"}
     >
-      {$runtimeAppData.active_overlay_count}
+      {runtimeAppData.active_overlay_count}
     </div>
   </div>
   <div class="status-item">

src/lib/components/sounds/SoundPicker.svelte

@@ -3,8 +3,8 @@
   import type { Sound, SoundId } from "$shared/dataV2";
 
   import getBackendURL from "$lib/utils/url";
-  import { getAppData } from "$lib/api/runtimeAppData";
   import { createSoundsQuery } from "$lib/api/soundModel";
+  import { getAppContext } from "$lib/api/runtimeAppData";
 
   import Dialog from "../Dialog.svelte";
   import Button from "../input/Button.svelte";
@@ -42,7 +42,9 @@
     selected = initialSelected;
   });
 
-  const appData = getAppData();
+  const appContext = getAppContext();
+  const appData = $derived(appContext.appData);
+
   const soundsQuery = createSoundsQuery();
   const sounds = $derived(filterOptionsSearch($soundsQuery.data ?? [], search));
 
@@ -135,7 +137,7 @@
 
               <td class="sound-column sound-column--preview">
                 <SoundPreview
-                  volume={sound.volume * $appData.sounds_config.global_volume}
+                  volume={sound.volume * appData.sounds_config.global_volume}
                   src={getBackendURL(sound.src)}
                 />
               </td>

src/lib/sections/AppDataProvider.svelte

@@ -1,30 +1,37 @@
 <script lang="ts">
   import type { AppData, RuntimeAppData } from "$lib/api/types";
 
-  import { setContext } from "svelte";
-  import { derived, type Readable } from "svelte/store";
+  import { setContext, type Snippet } from "svelte";
   import {
-    APP_DATA_CONTEXT,
+    APP_CONTEXT_KEY,
     createAppDataQuery,
-    RUNTIME_APP_DATA_CONTEXT,
     createRuntimeAppDataQuery,
   } from "$lib/api/runtimeAppData";
 
-  const runtimeAppData = createRuntimeAppDataQuery();
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
 
-  const runtimeAppDataStore: Readable<RuntimeAppData | undefined> = derived(
-    runtimeAppData,
-    ($runtimeAppData) => $runtimeAppData.data,
+  const runtimeAppData = createRuntimeAppDataQuery();
+  const runtimeAppDataStore: RuntimeAppData | undefined = $derived(
+    $runtimeAppData.data,
   );
 
   const appData = createAppDataQuery();
-  const appDataStore: Readable<AppData | undefined> = derived(
-    appData,
-    ($appData) => $appData.data,
-  );
+  const appDataStore: AppData | undefined = $derived($appData.data);
+
+  setContext(APP_CONTEXT_KEY, {
+    // Values within the context are guaranteed to be defined when the context is used
+    get appData() {
+      return appDataStore!;
+    },
 
-  setContext(RUNTIME_APP_DATA_CONTEXT, runtimeAppDataStore);
-  setContext(APP_DATA_CONTEXT, appDataStore);
+    get runtimeAppData() {
+      return runtimeAppDataStore!;
+    },
+  });
 </script>
 
 {#if $runtimeAppData.isLoading || $appData.isLoading}
@@ -33,8 +40,8 @@
     <div class="skeleton" style="width: 70%; height: 1rem;"></div>
     <div class="skeleton" style="width: 80%; height: 1rem;"></div>
   </div>
-{:else if $runtimeAppDataStore !== undefined || $appDataStore !== undefined}
-  <slot />
+{:else if appDataStore !== undefined || runtimeAppDataStore !== undefined}
+  {@render children()}
 {/if}
 
 <style>