Moving Maintenance Profile to TypeScript for better types

src/components/maintenance/ProfileView.svelte

@@ -1,5 +1,5 @@
 <script>
-    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default} */
+    /** @type {import('$entities/MaintenanceProfile.ts').default} */
     export let profile;
 
     const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));

src/lib/components/MaintenancePopup.js

@@ -1,5 +1,5 @@
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
-import MaintenanceProfile from "$entities/MaintenanceProfile.js";
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
 import ScrapedAPI from "$lib/booru/scraped/ScrapedAPI.js";

src/lib/components/TagDropdownWrapper.js

@@ -1,5 +1,5 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import MaintenanceProfile from "$entities/MaintenanceProfile.js";
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
 

src/lib/extension/base/StorageEntity.js

@@ -1,56 +0,0 @@
-import EntitiesController from "$lib/extension/EntitiesController.js";
-
-class StorageEntity {
-  /**
-   * @type {string}
-   */
-  #id;
-
-  /**
-   * @type {Object}
-   */
-  #settings;
-
-  /**
-   * @param {string} id
-   * @param {Object} settings
-   */
-  constructor(id, settings = {}) {
-    this.#id = id;
-    this.#settings = settings;
-  }
-
-  /**
-   * @return {string}
-   */
-  get id() {
-    return this.#id;
-  }
-
-  /**
-   * @return {Object}
-   */
-  get settings() {
-    return this.#settings;
-  }
-
-  static _entityName = "entity";
-
-  async save() {
-    await EntitiesController.updateEntity(this.constructor._entityName, this);
-  }
-
-  async delete() {
-    await EntitiesController.deleteEntity(this.constructor._entityName, this.id);
-  }
-
-  /**
-   * Static function to read all entities of this type from the storage. Must be implemented in the child class.
-   * @return {Promise<array>}
-   */
-  static async readAll() {
-    throw new Error("Not implemented");
-  }
-}
-
-export default StorageEntity;

src/lib/extension/base/StorageEntity.ts

@@ -0,0 +1,46 @@
+import EntitiesController from "$lib/extension/EntitiesController.js";
+
+export default abstract class StorageEntity<SettingsType extends Object = {}> {
+  /**
+   * @type {string}
+   */
+  readonly #id: string;
+
+  /**
+   * @type {Object}
+   */
+  readonly #settings: SettingsType;
+
+  constructor(id: string, settings: SettingsType) {
+    this.#id = id;
+    this.#settings = settings;
+  }
+
+  get id(): string {
+    return this.#id;
+  }
+
+  get settings(): SettingsType {
+    return this.#settings;
+  }
+
+  protected static _entityName: string = "entity";
+
+  async save() {
+    await EntitiesController.updateEntity(
+      (this.constructor as typeof StorageEntity)._entityName,
+      this
+    );
+  }
+
+  async delete() {
+    await EntitiesController.deleteEntity(
+      (this.constructor as typeof StorageEntity)._entityName,
+      this.id
+    );
+  }
+
+  static async readAll(): Promise<Array<any>> {
+    throw new Error("Not implemented");
+  }
+}

src/lib/extension/entities/MaintenanceProfile.js

@@ -1,63 +0,0 @@
-import StorageEntity from "$lib/extension/base/StorageEntity.js";
-import EntitiesController from "$lib/extension/EntitiesController.js";
-
-/**
- * @typedef {Object} MaintenanceProfileSettings
- * @property {string} name
- * @property {string[]} tags
- */
-
-/**
- * Class representing the maintenance profile entity.
- */
-class MaintenanceProfile extends StorageEntity {
-  /**
-   * @param {string} id ID of the entity.
-   * @param {Partial<MaintenanceProfileSettings>} settings Maintenance profile settings object.
-   */
-  constructor(id, settings) {
-    super(id, {
-      name: settings.name || '',
-      tags: settings.tags || []
-    });
-  }
-
-  /**
-   * @return {MaintenanceProfileSettings}
-   */
-  get settings() {
-    return super.settings;
-  }
-
-  static _entityName = "profiles";
-
-  /**
-   * Read all maintenance profiles from the storage.
-   *
-   * @return {Promise<InstanceType<MaintenanceProfile>[]>}
-   */
-  static async readAll() {
-    return await EntitiesController.readAllEntities(
-      this._entityName,
-      MaintenanceProfile
-    );
-  }
-
-  /**
-   * Subscribe to the changes and receive the new list of profiles when they change.
-   *
-   * @param {function(MaintenanceProfile[]): void} callback Callback to call when the profiles change. The new list of
-   * profiles is passed as an argument.
-   *
-   * @return {function(): void} Unsubscribe function.
-   */
-  static subscribe(callback) {
-    return EntitiesController.subscribeToEntity(
-      this._entityName,
-      MaintenanceProfile,
-      callback
-    );
-  }
-}
-
-export default MaintenanceProfile;

src/lib/extension/entities/MaintenanceProfile.ts

@@ -0,0 +1,50 @@
+import StorageEntity from "$lib/extension/base/StorageEntity.ts";
+import EntitiesController from "$lib/extension/EntitiesController.js";
+
+export interface MaintenanceProfileSettings {
+  name: string;
+  tags: string[];
+}
+
+/**
+ * Class representing the maintenance profile entity.
+ */
+export default class MaintenanceProfile extends StorageEntity<MaintenanceProfileSettings> {
+  /**
+   * @param id ID of the entity.
+   * @param settings Maintenance profile settings object.
+   */
+  constructor(id: string, settings: Partial<MaintenanceProfileSettings>) {
+    super(id, {
+      name: settings.name || '',
+      tags: settings.tags || []
+    });
+  }
+
+  static _entityName = "profiles";
+
+  /**
+   * Read all maintenance profiles from the storage.
+   */
+  static async readAll(): Promise<MaintenanceProfile[]> {
+    return await EntitiesController.readAllEntities(
+      this._entityName,
+      MaintenanceProfile
+    );
+  }
+
+  /**
+   * Subscribe to the changes and receive the new list of profiles when they change.
+   *
+   * @param callback Callback to call when the profiles change. The new list of profiles is passed as an argument.
+   *
+   * @return Unsubscribe function.
+   */
+  static subscribe(callback: (profiles: MaintenanceProfile[]) => void): () => void {
+    return EntitiesController.subscribeToEntity(
+      this._entityName,
+      MaintenanceProfile,
+      callback
+    );
+  }
+}

src/lib/extension/settings/MaintenanceSettings.js

@@ -1,5 +1,5 @@
 import ConfigurationController from "$lib/extension/ConfigurationController.js";
-import MaintenanceProfile from "$lib/extension/entities/MaintenanceProfile.js";
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
 
 export default class MaintenanceSettings extends CacheableSettings {

src/lib/extension/transporting/exporters.js

@@ -1,8 +1,8 @@
 /**
- * @type {Map<string, ((entity: import('../base/StorageEntity.js').default) => Record<string, any>)>}
+ * @type {Map<string, ((entity: import('../base/StorageEntity.ts').default) => Record<string, any>)>}
  */
 const entitiesExporters = new Map([
-  ['profiles', /** @param {import('../entities/MaintenanceProfile.js').default} entity */entity => {
+  ['profiles', /** @param {import('../entities/MaintenanceProfile.ts').default} entity */entity => {
     return {
       v: 1,
       id: entity.id,

src/routes/+page.svelte

@@ -4,7 +4,7 @@
     import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store.js";
     import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
-    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default|undefined} */
+    /** @type {import('$entities/MaintenanceProfile.ts').default|undefined} */
     let activeProfile;
 
     $: activeProfile = $maintenanceProfilesStore.find(profile => profile.id === $activeProfileStore);

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

@@ -4,7 +4,7 @@
     import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
     import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
 
-    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
+    /** @type {import('$entities/MaintenanceProfile.ts').default[]} */
     let profiles = [];
 
     $: profiles = $maintenanceProfilesStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));

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

@@ -7,7 +7,7 @@
     import ProfileView from "$components/maintenance/ProfileView.svelte";
 
     const profileId = $page.params.id;
-    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default|null} */
+    /** @type {import('$entities/MaintenanceProfile.ts').default|null} */
     let profile = null;
     let isActiveProfile = false;
 

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

@@ -8,7 +8,7 @@
     import {page} from "$app/stores";
     import {goto} from "$app/navigation";
     import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
-    import MaintenanceProfile from "$entities/MaintenanceProfile.js";
+    import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 
     /** @type {string} */
     let profileId = $page.params.id;

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

@@ -7,12 +7,12 @@
     import FormContainer from "$components/ui/forms/FormContainer.svelte";
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import EntitiesTransporter from "$lib/extension/EntitiesTransporter.ts";
-    import MaintenanceProfile from "$entities/MaintenanceProfile.js";
+    import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 
     const profileId = $page.params.id;
 
     /**
-     * @type {import('$lib/extension/entities/MaintenanceProfile.js').default|undefined}
+     * @type {import('$entities/MaintenanceProfile.ts').default|undefined}
      */
     const profile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
 

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

@@ -2,7 +2,7 @@
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import MaintenanceProfile from "$entities/MaintenanceProfile.js";
+    import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import ProfileView from "$components/maintenance/ProfileView.svelte";
     import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";

src/stores/maintenance-profiles-store.js

@@ -1,5 +1,5 @@
 import {writable} from "svelte/store";
-import MaintenanceProfile from "$lib/extension/entities/MaintenanceProfile.js";
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
 
 /**