Merge pull request #61 from koloml/feature/typescriptify-storage-entities

Storage entities code cleanup, moving to TypeScript

package.json

@@ -6,8 +6,8 @@
         "build": "npm run build:popup && npm run build:extension",
         "build:popup": "vite build",
         "build:extension": "node build-extension.js",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
     },
     "devDependencies": {
         "@sveltejs/adapter-auto": "^3.0.0",

src/app.d.ts

@@ -1,25 +1,31 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
+
 declare global {
-    namespace App {
-        // interface Error {}
-        // interface Locals {}
-        // interface PageData {}
-        // interface PageState {}
-        // interface Platform {}
-        type LinkTarget = "_blank" | "_self" | "_parent" | "_top";
-        type IconName = (
-                "tag"
-                | "paint-brush"
-                | "arrow-left"
-                | "info-circle"
-                | "wrench"
-                | "globe"
-                | "plus"
-                | "file-export"
-                | "trash"
-                );
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+    type LinkTarget = "_blank" | "_self" | "_parent" | "_top";
+    type IconName = (
+      "tag"
+      | "paint-brush"
+      | "arrow-left"
+      | "info-circle"
+      | "wrench"
+      | "globe"
+      | "plus"
+      | "file-export"
+      | "trash"
+      );
+
+    interface EntityNamesMap {
+      profiles: MaintenanceProfile;
     }
+  }
 }
 
 export {};

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/EntitiesController.ts

@@ -1,4 +1,5 @@
 import StorageHelper from "$lib/browser/StorageHelper.js";
+import type StorageEntity from "$lib/extension/base/StorageEntity.ts";
 
 export default class EntitiesController {
   static #storageHelper = new StorageHelper(chrome.storage.local);
@@ -6,15 +7,13 @@ export default class EntitiesController {
   /**
    * Read all entities of the given type from the storage. Build the entities from the raw data and return them.
    *
-   * @template EntityClass
+   * @param entityName Name of the entity to read.
+   * @param entityClass Class of the entity to read. Must have a constructor that accepts the ID and the settings
+   * object.
    *
-   * @param {string} entityName Name of the entity to read.
-   * @param {EntityClass} entityClass Class of the entity to read. Must have a constructor that accepts the ID and the
-   * settings object.
-   *
-   * @return {Promise<InstanceType<EntityClass>[]>} List of entities of the given type.
+   * @return List of entities of the given type.
    */
-  static async readAllEntities(entityName, entityClass) {
+  static async readAllEntities<Type extends StorageEntity<any>>(entityName: string, entityClass: new (...any: any[]) => Type): Promise<Type[]> {
     const rawEntities = await this.#storageHelper.read(entityName, {});
 
     if (!rawEntities || Object.keys(rawEntities).length === 0) {
@@ -29,13 +28,11 @@ export default class EntitiesController {
   /**
    * Update the single entity in the storage. If the entity with the given ID already exists, it will be overwritten.
    *
-   * @param {string} entityName Name of the entity to update.
-   * @param {StorageEntity} entity Entity to update.
-   *
-   * @return {Promise<void>}
+   * @param entityName Name of the entity to update.
+   * @param entity Entity to update.
    */
-  static async updateEntity(entityName, entity) {
-    await this.#storageHelper.write(
+  static async updateEntity(entityName: string, entity: StorageEntity<Object>): Promise<void> {
+    this.#storageHelper.write(
       entityName,
       Object.assign(
         await this.#storageHelper.read(
@@ -51,15 +48,13 @@ export default class EntitiesController {
   /**
    * Delete the entity with the given ID.
    *
-   * @param {string} entityName Name of the entity to delete.
-   * @param {string} entityId ID of the entity to delete.
-   *
-   * @return {Promise<void>}
+   * @param entityName Name of the entity to delete.
+   * @param entityId ID of the entity to delete.
    */
-  static async deleteEntity(entityName, entityId) {
+  static async deleteEntity(entityName: string, entityId: string): Promise<void> {
     const entities = await this.#storageHelper.read(entityName, {});
     delete entities[entityId];
-    await this.#storageHelper.write(entityName, entities);
+    this.#storageHelper.write(entityName, entities);
   }
 
   /**
@@ -67,17 +62,16 @@ export default class EntitiesController {
    *
    * @template EntityClass
    *
-   * @param {string} entityName Name of the entity to subscribe to.
-   * @param {EntityClass} entityClass Class of the entity to subscribe to.
-   * @param {function(InstanceType<EntityClass>[]): any} callback Callback to call when the storage changes.
-   * @return {function(): void} Unsubscribe function.
+   * @param entityName Name of the entity to subscribe to.
+   * @param entityClass Class of the entity to subscribe to.
+   * @param callback Callback to call when the storage changes.
+   * @return Unsubscribe function.
    */
-  static subscribeToEntity(entityName, entityClass, callback) {
+  static subscribeToEntity<Type extends StorageEntity<any>>(entityName: string, entityClass: new (...any: any[]) => Type, callback: (entities: Type[]) => void): () => void {
     /**
      * Watch the changes made to the storage and call the callback when the entity changes.
-     * @param {Object<string, StorageChange>} changes Changes made to the storage.
      */
-    const storageChangesSubscriber = changes => {
+    const storageChangesSubscriber = (changes: Record<string, chrome.storage.StorageChange>) => {
       if (!changes[entityName]) {
         return;
       }

src/lib/extension/EntitiesTransporter.ts

@@ -1,16 +1,28 @@
 import {validateImportedEntity} from "$lib/extension/transporting/validators.js";
-import {exportEntityToObject} from "$lib/extension/transporting/exporters.js";
-import StorageEntity from "./base/StorageEntity.js";
+import {exportEntityToObject} from "$lib/extension/transporting/exporters.ts";
+import StorageEntity from "$lib/extension/base/StorageEntity.ts";
 import {compressToEncodedURIComponent, decompressFromEncodedURIComponent} from "lz-string";
 
-type EntityConstructor<T extends StorageEntity> =
-  (new (id: string, settings: Record<string, any>) => T)
-  & typeof StorageEntity;
+export default class EntitiesTransporter<EntityType> {
+  readonly #targetEntityConstructor: new (...any: any[]) => EntityType;
 
-export default class EntitiesTransporter<EntityType extends StorageEntity> {
-  readonly #targetEntityConstructor: EntityConstructor<EntityType>;
+  /**
+   * Name of the entity, exported directly from the constructor.
+   * @private
+   */
+  get #entityName() {
+    // How the hell should I even do this?
+    return ((this.#targetEntityConstructor as any) as typeof StorageEntity)._entityName;
+  }
+
+  /**
+   * @param entityConstructor Class which should be used for import or export.
+   */
+  constructor(entityConstructor: new (...any: any[]) => EntityType) {
+    if (!(entityConstructor.prototype instanceof StorageEntity)) {
+      throw new TypeError('Invalid class provided as the target for importing!');
+    }
 
-  constructor(entityConstructor: EntityConstructor<EntityType>) {
     this.#targetEntityConstructor = entityConstructor;
   }
 
@@ -23,7 +35,7 @@ export default class EntitiesTransporter<EntityType extends StorageEntity> {
 
     validateImportedEntity(
       importedObject,
-      this.#targetEntityConstructor._entityName
+      this.#entityName
     );
 
     return new this.#targetEntityConstructor(
@@ -43,9 +55,13 @@ export default class EntitiesTransporter<EntityType extends StorageEntity> {
       throw new TypeError('Transporter should be connected to the same entity to export!');
     }
 
+    if (!(entityObject instanceof StorageEntity)) {
+      throw new TypeError('Only storage entities could be exported!');
+    }
+
     const exportableObject = exportEntityToObject(
       entityObject,
-      this.#targetEntityConstructor._entityName
+      this.#entityName
     );
 
     return JSON.stringify(exportableObject, null, 2);

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,59 @@
+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;
+
+  protected constructor(id: string, settings: SettingsType) {
+    this.#id = id;
+    this.#settings = settings;
+  }
+
+  get id(): string {
+    return this.#id;
+  }
+
+  get settings(): SettingsType {
+    return this.#settings;
+  }
+
+  public static readonly _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
+    );
+  }
+
+  public static async readAll<Type extends StorageEntity<any>>(this: new (...args: any[]) => Type): Promise<Type[]> {
+    return await EntitiesController.readAllEntities(
+      // Voodoo magic, once again.
+      ((this as any) as typeof StorageEntity)._entityName,
+      this
+    )
+  }
+
+  public static subscribe<Type extends StorageEntity<any>>(this: new (...args: any[]) => Type, callback: (entities: Type[]) => void): () => void {
+    return EntitiesController.subscribeToEntity(
+      // And once more.
+      ((this as any) as typeof StorageEntity)._entityName,
+      this,
+      callback
+    );
+  }
+}

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,25 @@
+import StorageEntity from "$lib/extension/base/StorageEntity.ts";
+import EntitiesController from "$lib/extension/EntitiesController.ts";
+
+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 || []
+    });
+  }
+
+  public static readonly _entityName = "profiles";
+}

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,26 +0,0 @@
-/**
- * @type {Map<string, ((entity: import('../base/StorageEntity.js').default) => Record<string, any>)>}
- */
-const entitiesExporters = new Map([
-  ['profiles', /** @param {import('../entities/MaintenanceProfile.js').default} entity */entity => {
-    return {
-      v: 1,
-      id: entity.id,
-      name: entity.settings.name,
-      tags: entity.settings.tags,
-    }
-  }]
-])
-
-/**
- * @param entityInstance
- * @param {string} entityName
- * @returns {Record<string, *>}
- */
-export function exportEntityToObject(entityInstance, entityName) {
-  if (!entitiesExporters.has(entityName)) {
-    throw new Error(`Missing exporter for entity: ${entityName}`);
-  }
-
-  return entitiesExporters.get(entityName).call(null, entityInstance);
-}

src/lib/extension/transporting/exporters.ts

@@ -0,0 +1,24 @@
+import StorageEntity from "$lib/extension/base/StorageEntity.ts";
+
+type ExportersMap = {
+  [EntityName in keyof App.EntityNamesMap]: (entity: App.EntityNamesMap[EntityName]) => Record<string, any>
+};
+
+const entitiesExporters: ExportersMap = {
+  profiles: entity => {
+    return {
+      v: 1,
+      id: entity.id,
+      name: entity.settings.name,
+      tags: entity.settings.tags,
+    }
+  },
+};
+
+export function exportEntityToObject(entityInstance: StorageEntity<any>, entityName: string): Record<string, any> {
+  if (!(entityName in entitiesExporters) || !entitiesExporters.hasOwnProperty(entityName)) {
+    throw new Error(`Missing exporter for entity: ${entityName}`);
+  }
+
+  return entitiesExporters[entityName as keyof App.EntityNamesMap].call(null, entityInstance);
+}

src/lib/extension/transporting/validators.js

@@ -1,6 +1,6 @@
 /**
  * Map of validators for each entity. Function should throw the error if validation failed.
- * @type {Map<string, ((importedObject: Object) => void)>}
+ * @type {Map<keyof App.EntityNamesMap|string, ((importedObject: Object) => void)>}
  */
 const entitiesValidators = new Map([
   ['profiles', importedObject => {

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,13 +7,9 @@
     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}
-     */
     const profile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
 
     const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);

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";
 
 /**