Merge pull request #91 from koloml/feature/ts-storages

Converting storages to TypeScript, minor restructuring of the storage folder

src/lib/extension/settings/SearchSettings.ts

@@ -1,8 +1,10 @@
 import CacheableSettings from "$lib/extension/base/CacheableSettings";
 
+export type SuggestionsPosition = "start" | "end";
+
 interface SearchSettingsFields {
   suggestProperties: boolean;
-  suggestPropertiesPosition: "start" | "end";
+  suggestPropertiesPosition: SuggestionsPosition;
 }
 
 export default class SearchSettings extends CacheableSettings<SearchSettingsFields> {

src/routes/+page.svelte

@@ -1,13 +1,13 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
     import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
     /** @type {import('$entities/MaintenanceProfile').default|undefined} */
     let activeProfile;
 
-    $: activeProfile = $maintenanceProfilesStore.find(profile => profile.id === $activeProfileStore);
+    $: activeProfile = $maintenanceProfiles.find(profile => profile.id === $activeProfileStore);
 
     function turnOffActiveProfile() {
         $activeProfileStore = null;

src/routes/features/groups/+page.svelte

@@ -1,12 +1,12 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { tagGroupsStore } from "$stores/tag-groups-store";
+    import { tagGroups } from "$stores/entities/tag-groups";
 
     /** @type {import('$entities/TagGroup').default[]} */
     let groups = [];
 
-    $: groups = $tagGroupsStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    $: groups = $tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
 </script>
 
 <Menu>

src/routes/features/groups/[id]/+page.svelte

@@ -4,7 +4,7 @@
     import GroupView from "$components/features/GroupView.svelte";
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { tagGroupsStore } from "$stores/tag-groups-store";
+    import { tagGroups } from "$stores/entities/tag-groups";
 
     const groupId = $page.params.id;
     /** @type {import('$entities/TagGroup').default|null} */
@@ -15,7 +15,7 @@
     }
 
     $: {
-        group = $tagGroupsStore.find(group => group.id === groupId) || null;
+        group = $tagGroups.find(group => group.id === groupId) || null;
 
         if (!group) {
             console.warn(`Group ${groupId} not found.`);

src/routes/features/groups/[id]/delete/+page.svelte

@@ -3,10 +3,10 @@
     import { page } from "$app/stores";
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { tagGroupsStore } from "$stores/tag-groups-store";
+    import { tagGroups } from "$stores/entities/tag-groups";
 
     const groupId = $page.params.id;
-    const targetGroup = $tagGroupsStore.find(group => group.id === groupId);
+    const targetGroup = $tagGroups.find(group => group.id === groupId);
 
     if (!targetGroup) {
         void goto('/features/groups');

src/routes/features/groups/[id]/edit/+page.svelte

@@ -10,7 +10,7 @@
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import TagsEditor from "$components/tags/TagsEditor.svelte";
     import TagGroup from "$entities/TagGroup";
-    import { tagGroupsStore } from "$stores/tag-groups-store";
+    import { tagGroups } from "$stores/entities/tag-groups";
 
     const groupId = $page.params.id;
     /** @type {TagGroup|null} */
@@ -26,7 +26,7 @@
     if (groupId === 'new') {
         targetGroup = new TagGroup(crypto.randomUUID(), {});
     } else {
-        targetGroup = $tagGroupsStore.find(group => group.id === groupId) || null;
+        targetGroup = $tagGroups.find(group => group.id === groupId) || null;
 
         if (targetGroup) {
             groupName = targetGroup.settings.name;

src/routes/features/groups/[id]/export/+page.svelte

@@ -7,11 +7,11 @@
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import TagGroup from "$entities/TagGroup";
     import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
-    import { tagGroupsStore } from "$stores/tag-groups-store";
+    import { tagGroups } from "$stores/entities/tag-groups";
 
     const groupId = $page.params.id;
     const groupTransporter = new EntitiesTransporter(TagGroup);
-    const group = $tagGroupsStore.find(group => group.id === groupId);
+    const group = $tagGroups.find(group => group.id === groupId);
 
     /** @type {string} */
     let rawExportedGroup;

src/routes/features/groups/import/+page.svelte

@@ -7,7 +7,7 @@
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import TagGroup from "$entities/TagGroup";
     import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
-    import { tagGroupsStore } from "$stores/tag-groups-store";
+    import { tagGroups } from "$stores/entities/tag-groups";
 
     const groupTransporter = new EntitiesTransporter(TagGroup);
 
@@ -46,7 +46,7 @@
         }
 
         if (candidateGroup) {
-            existingGroup = $tagGroupsStore.find(group => group.id === candidateGroup?.id) ?? null;
+            existingGroup = $tagGroups.find(group => group.id === candidateGroup?.id) ?? null;
         }
     }
 

src/routes/features/maintenance/+page.svelte

@@ -2,12 +2,12 @@
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
-    import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
 
     /** @type {import('$entities/MaintenanceProfile').default[]} */
     let profiles = [];
 
-    $: profiles = $maintenanceProfilesStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    $: profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
 
     function resetActiveProfile() {
         $activeProfileStore = null;

src/routes/features/maintenance/[id]/+page.svelte

@@ -3,7 +3,7 @@
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
-    import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
     import ProfileView from "$components/features/ProfileView.svelte";
     import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
@@ -16,7 +16,7 @@
     }
 
     $: {
-        const resolvedProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+        const resolvedProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
         if (resolvedProfile) {
             profile = resolvedProfile;

src/routes/features/maintenance/[id]/delete/+page.svelte

@@ -3,10 +3,10 @@
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { page } from "$app/stores";
-    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
 
     const profileId = $page.params.id;
-    const targetProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+    const targetProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
     if (!targetProfile) {
         void goto('/features/maintenance');

src/routes/features/maintenance/[id]/edit/+page.svelte

@@ -7,7 +7,7 @@
     import FormContainer from "$components/ui/forms/FormContainer.svelte";
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
-    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
     import MaintenanceProfile from "$entities/MaintenanceProfile";
 
     /** @type {string} */
@@ -23,7 +23,7 @@
     if (profileId === 'new') {
         targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
     } else {
-        const maybeExistingProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+        const maybeExistingProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
         if (maybeExistingProfile) {
             targetProfile = maybeExistingProfile;

src/routes/features/maintenance/[id]/export/+page.svelte

@@ -1,7 +1,7 @@
 <script>
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
-    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import FormContainer from "$components/ui/forms/FormContainer.svelte";
@@ -10,7 +10,7 @@
     import MaintenanceProfile from "$entities/MaintenanceProfile";
 
     const profileId = $page.params.id;
-    const profile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+    const profile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
     const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
     /** @type {string} */

src/routes/features/maintenance/import/+page.svelte

@@ -5,7 +5,7 @@
     import MaintenanceProfile from "$entities/MaintenanceProfile";
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import ProfileView from "$components/features/ProfileView.svelte";
-    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
     import { goto } from "$app/navigation";
     import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
 
@@ -46,7 +46,7 @@
         }
 
         if (candidateProfile) {
-            existingProfile = $maintenanceProfilesStore.find(profile => profile.id === candidateProfile?.id) ?? null;
+            existingProfile = $maintenanceProfiles.find(profile => profile.id === candidateProfile?.id) ?? null;
         }
     }
 

src/routes/preferences/misc/+page.svelte

@@ -4,7 +4,7 @@
     import FormContainer from "$components/ui/forms/FormContainer.svelte";
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
-    import { fullScreenViewerEnabled } from "$stores/misc-preferences";
+    import { fullScreenViewerEnabled } from "$stores/preferences/misc";
 </script>
 
 <Menu>

src/routes/preferences/search/+page.svelte

@@ -6,7 +6,7 @@
     import {
         searchPropertiesSuggestionsEnabled,
         searchPropertiesSuggestionsPosition
-    } from "$stores/search-preferences";
+    } from "$stores/preferences/search";
     import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
     import SelectField from "$components/ui/forms/SelectField.svelte";
 

src/routes/preferences/tags/+page.svelte

@@ -4,7 +4,7 @@
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
-    import { stripBlacklistedTagsEnabled } from "$stores/maintenance-preferences";
+    import { stripBlacklistedTagsEnabled } from "$stores/preferences/maintenance";
 </script>
 
 <Menu>

src/stores/debug.ts

@@ -1,12 +1,15 @@
-import { writable } from "svelte/store";
+import { type Writable, writable } from "svelte/store";
+
+// todo: Maybe this could be dynamically resolved using map of entities and not currently existing list of all settings
+//  classes. For now it's just generic record.
+type StorageContents = Record<string, any>;
 
 /**
  * This is readable version of storages. Any changes made to these objects will not be sent to the local storage.
- * @type {Writable<Record<string, Object>>}
  */
-export const storagesCollection = writable({});
+export const storagesCollection: Writable<StorageContents> = writable({});
 
-chrome.storage.local.get(storages => {
+void chrome.storage.local.get<StorageContents>(null, storages => {
   storagesCollection.set(storages);
 });
 

src/stores/entities/maintenance-profiles.ts

@@ -1,33 +1,28 @@
-import { writable } from "svelte/store";
+import { type Writable, writable } from "svelte/store";
 import MaintenanceProfile from "$entities/MaintenanceProfile";
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings";
 
 /**
  * Store for working with maintenance profiles in the Svelte popup.
- *
- * @type {import('svelte/store').Writable<MaintenanceProfile[]>}
  */
-export const maintenanceProfilesStore = writable([]);
+export const maintenanceProfiles: Writable<MaintenanceProfile[]> = writable([]);
 
 /**
  * Store for the active maintenance profile ID.
- *
- * @type {import('svelte/store').Writable<string|null>}
  */
-export const activeProfileStore = writable(null);
+export const activeProfileStore: Writable<string|null> = writable(null);
 
 const maintenanceSettings = new MaintenanceSettings();
 
 /**
  * Active profile ID stored locally. Used to reset active profile once the existing profile was removed.
- * @type {string|null}
  */
-let lastActiveProfileId = null;
+let lastActiveProfileId: string|null = null;
 
 Promise.allSettled([
   // Read the initial values from the storages first
   MaintenanceProfile.readAll().then(profiles => {
-    maintenanceProfilesStore.set(profiles);
+    maintenanceProfiles.set(profiles);
   }),
   maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
     activeProfileStore.set(activeProfileId);
@@ -35,7 +30,7 @@ Promise.allSettled([
 ]).then(() => {
   // And only after initial values are loaded, start watching for changes from storage and from user's interaction
   MaintenanceProfile.subscribe(profiles => {
-    maintenanceProfilesStore.set(profiles);
+    maintenanceProfiles.set(profiles);
   });
 
   maintenanceSettings.subscribe(settings => {

src/stores/entities/tag-groups.ts

@@ -0,0 +1,11 @@
+import { type Writable, writable } from "svelte/store";
+import TagGroup from "$entities/TagGroup";
+
+export const tagGroups: Writable<TagGroup[]> = writable([]);
+
+TagGroup
+  .readAll()
+  .then(groups => tagGroups.set(groups))
+  .then(() => {
+    TagGroup.subscribe(groups => tagGroups.set(groups));
+  });

src/stores/preferences/search.ts

@@ -1,10 +1,9 @@
-import { writable } from "svelte/store";
-import SearchSettings from "$lib/extension/settings/SearchSettings";
+import { type Writable, writable } from "svelte/store";
+import SearchSettings, { type SuggestionsPosition } from "$lib/extension/settings/SearchSettings";
 
 export const searchPropertiesSuggestionsEnabled = writable(false);
 
-/** @type {import('svelte/store').Writable<"start"|"end">} */
-export const searchPropertiesSuggestionsPosition = writable('start');
+export const searchPropertiesSuggestionsPosition: Writable<SuggestionsPosition> = writable('start');
 
 const searchSettings = new SearchSettings();
 

src/stores/tag-groups-store.js

@@ -1,12 +0,0 @@
-import { writable } from "svelte/store";
-import TagGroup from "$entities/TagGroup";
-
-/** @type {import('svelte/store').Writable<TagGroup[]>} */
-export const tagGroupsStore = writable([]);
-
-TagGroup
-  .readAll()
-  .then(groups => tagGroupsStore.set(groups))
-  .then(() => {
-    TagGroup.subscribe(groups => tagGroupsStore.set(groups));
-  });