Refactoring storage viewer and its route

src/components/debugging/StorageViewer.svelte

@@ -1,34 +1,21 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { storagesCollection } from "$stores/debug";
   import { goto } from "$app/navigation";
   import { findDeepObject } from "$lib/utils";
 
+  interface StorageViewerProps {
+    storage: string;
+    path: string[];
+  }
 
-  /**
-   * @typedef {Object} Props
-   * @property {string} storage
-   * @property {string[]} path
-   */
+  type BreadcrumbsArray = [string, string][];
 
-  /** @type {Props} */
-  let { storage, path } = $props();
+  let { storage, path }: StorageViewerProps = $props();
 
-  /** @type {Object|null} */
-  let targetStorage = $state(null);
-  /** @type {[string, string][]} */
-  let breadcrumbs = $state([]);
-  /** @type {Object<string, any>|null} */
-  let targetObject = $state(null);
-  let targetPathString = $state('');
-
-  run(() => {
-    /** @type {[string, string][]} */
-    const builtBreadcrumbs = [];
-
-    breadcrumbs = path.reduce((resultCrumbs, entry) => {
+  let breadcrumbs = $derived.by<BreadcrumbsArray>(() => {
+    return path.reduce<BreadcrumbsArray>((resultCrumbs, entry) => {
       let entryPath = entry;
 
       if (resultCrumbs.length) {
@@ -38,37 +25,42 @@
       resultCrumbs.push([entry, entryPath]);
 
       return resultCrumbs;
-    }, builtBreadcrumbs);
-
-    targetPathString = path.join("/");
-
-    if (targetPathString.length) {
-      targetPathString += "/";
-    }
+    }, [])
   });
 
-  run(() => {
-    targetStorage = $storagesCollection[storage];
+  let targetStorage = $derived.by<object|null>(() => {
+    return $storagesCollection[storage];
+  });
 
+  let targetObject = $derived.by<Record<string, any> | null>(() => {
+    return targetStorage
+      ? findDeepObject(targetStorage, path)
+      : null;
+  });
+
+  let targetPathString = $derived.by<string>(() => {
+    let pathString = path.join("/");
+
+    if (pathString.length) {
+      pathString += "/";
+    }
+
+    return pathString;
+  });
+
+  $effect(() => {
     if (!targetStorage) {
       goto("/preferences/debug/storage");
     }
   });
 
-  run(() => {
-    targetObject = targetStorage
-      ? findDeepObject(targetStorage, path)
-      : null;
-  });
-
   /**
    * Helper function to resolve type, including the null.
-   * @param {*} value Value to resolve type from.
-   * @return {string} Type of the value, including "null" for null.
+   * @param value Value to resolve type from.
+   * @return Type of the value, including "null" for null.
    */
-  function resolveType(value) {
-    /** @type {string} */
-    let typeName = typeof value;
+  function resolveType(value: unknown): string {
+    let typeName: string = typeof value;
 
     if (typeName === 'object' && value === null) {
       typeName = 'null';
@@ -79,10 +71,10 @@
 
   /**
    * Helper function to resolve value, including values like null or undefined.
-   * @param {*} value Value to resolve.
-   * @return {string} String representation of the value.
+   * @param value Value to resolve.
+   * @return String representation of the value.
    */
-  function resolveValue(value) {
+  function resolveValue(value: unknown): string {
     if (value === null) {
       return "null";
     }
@@ -108,7 +100,7 @@
 {#if targetObject}
   <Menu>
     <hr>
-    {#each Object.entries(targetObject) as [key, value]}
+    {#each Object.entries(targetObject) as [key, _]}
       {#if targetObject[key] && typeof targetObject[key] === 'object'}
         <MenuItem href="/preferences/debug/storage/{storage}/{targetPathString}{key}">
           {key}: Object

src/routes/preferences/debug/storage/[...path]/+page.svelte

@@ -1,24 +1,32 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
   import StorageViewer from "$components/debugging/StorageViewer.svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import { goto } from "$app/navigation";
 
-  let pathString = $state('');
-  /** @type {string[]} */
-  let pathArray = $state([]);
-  /** @type {string|undefined} */
-  let storageName = $state(void 0);
+  let pathArray = $derived.by<string[]>(() => {
+    const pathString = page.params.path;
 
-  run(() => {
-    pathString = $page.params.path;
-    pathArray = pathString.length ? pathString.split("/") : [];
-    storageName = pathArray.shift()
+    return pathString.length ? pathString.split('/') : [];
+  });
 
-    if (pathArray.length && pathArray[pathArray.length - 1] === '') {
-      pathArray.pop();
+  let storageName = $derived.by<string | undefined>(() => {
+    return pathArray[0];
+  });
+
+  // Copy of the array without the storage or empty string at the end.
+  let normalizedPathArray = $derived.by<string[]>(() => {
+    // Excludes storage name
+    const resultArray = pathArray.slice(1);
+
+    // Getting rid of trailing empty entry
+    if (resultArray.length && resultArray[resultArray.length - 1] === '') {
+      resultArray.pop();
     }
 
+    return resultArray;
+  });
+
+  $effect(() => {
     if (!storageName) {
       goto("/preferences/debug/storage");
     }
@@ -26,5 +34,5 @@
 </script>
 
 {#if storageName}
-  <StorageViewer storage="{storageName}" path="{pathArray}"></StorageViewer>
+  <StorageViewer storage={storageName} path={normalizedPathArray}></StorageViewer>
 {/if}