feat: refactor how frontend was structured

app/src/lib/performance/PerformanceViewer.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import type { PerformanceStore } from ".";
+  import type { PerformanceData } from ".";
 
-  export let store: PerformanceStore;
+  export let data: PerformanceData;
 
   function getPerformanceData() {
-    return Object.entries($store.total).sort((a, b) => b[1] - a[1]);
+    return Object.entries(data.total).sort((a, b) => b[1] - a[1]);
   }
 </script>
 
-{#if $store.runs.length !== 0}
+{#if data.runs.length !== 0}
   {#each getPerformanceData() as [key, value]}
     <p>{key}: {Math.floor(value * 100) / 100}ms</p>
   {/each}

app/src/lib/performance/index.ts

@@ -1,6 +1,6 @@
 import { readable, type Readable } from "svelte/store";
 
-type PerformanceData = {
+export type PerformanceData = {
   total: Record<string, number>;
   runs: Record<string, number[]>[];
 }
@@ -8,6 +8,7 @@ export interface PerformanceStore extends Readable<PerformanceData> {
   startRun(): void;
   stopRun(): void;
   addPoint(name: string, value?: number): void;
+  get: () => PerformanceData;
 }
 
 export function createPerformanceStore(): PerformanceStore {
@@ -41,7 +42,7 @@ export function createPerformanceStore(): PerformanceStore {
 
       data.runs.push(currentRun);
       currentRun = undefined;
-      set(data);
+      if (set) set(data);
     }
   }
 
@@ -51,11 +52,16 @@ export function createPerformanceStore(): PerformanceStore {
     currentRun[name].push(value);
   }
 
+  function get() {
+    return data;
+  }
+
   return {
     subscribe,
     startRun,
     stopRun,
     addPoint,
+    get
   }
 }