Moving settings classes to TypeScript

src/lib/components/ImageShowFullscreenButton.js

@@ -1,6 +1,6 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
-import MiscSettings from "$lib/extension/settings/MiscSettings.js";
+import MiscSettings from "$lib/extension/settings/MiscSettings.ts";
 import {FullscreenViewer} from "$lib/components/FullscreenViewer.js";
 
 export class ImageShowFullscreenButton extends BaseComponent {

src/lib/components/MaintenancePopup.js

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

src/lib/components/SearchWrapper.js

@@ -1,6 +1,6 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {QueryLexer, QuotedTermToken, TermToken, Token} from "$lib/booru/search/QueryLexer.js";
-import SearchSettings from "$lib/extension/settings/SearchSettings.js";
+import SearchSettings from "$lib/extension/settings/SearchSettings.ts";
 
 export class SearchWrapper extends BaseComponent {
   /** @type {HTMLInputElement|null} */

src/lib/components/TagDropdownWrapper.js

@@ -1,6 +1,6 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
-import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.ts";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
 
 const isTagEditorProcessedKey = Symbol();

src/lib/extension/base/CacheableSettings.ts

@@ -1,20 +1,20 @@
 import ConfigurationController from "$lib/extension/ConfigurationController.js";
 
-export default class CacheableSettings {
-  /** @type {ConfigurationController} */
-  #controller;
-  /** @type {Map<string, any>} */
-  #cachedValues = new Map();
-  /** @type {function[]} */
-  #disposables = [];
+export default class CacheableSettings<Fields> {
+  #controller: ConfigurationController;
+  #cachedValues: Map<keyof Fields, any> = new Map();
+  #disposables: Function[] = [];
 
-  constructor(settingsNamespace) {
+  constructor(settingsNamespace: string) {
     this.#controller = new ConfigurationController(settingsNamespace);
 
     this.#disposables.push(
       this.#controller.subscribeToChanges(settings => {
         for (const key of Object.keys(settings)) {
-          this.#cachedValues.set(key, settings[key]);
+          this.#cachedValues.set(
+            key as keyof Fields,
+            settings[key]
+          );
         }
       })
     );
@@ -27,12 +27,12 @@ export default class CacheableSettings {
    * @return {Promise<SettingType>}
    * @protected
    */
-  async _resolveSetting(settingName, defaultValue) {
+  protected async _resolveSetting<Key extends keyof Fields>(settingName: Key, defaultValue: Fields[Key]): Promise<Fields[Key]> {
     if (this.#cachedValues.has(settingName)) {
       return this.#cachedValues.get(settingName);
     }
 
-    const settingValue = await this.#controller.readSetting(settingName, defaultValue);
+    const settingValue = await this.#controller.readSetting(settingName as string, defaultValue);
 
     this.#cachedValues.set(settingName, settingValue);
 
@@ -40,13 +40,12 @@ export default class CacheableSettings {
   }
 
   /**
-   * @param {string} settingName Name of the setting to write.
-   * @param {*} value Value to pass.
-   * @param {boolean} [force=false] Ignore the cache and force the update.
-   * @return {Promise<void>}
+   * @param settingName Name of the setting to write.
+   * @param value Value to pass.
+   * @param force Ignore the cache and force the update.
    * @protected
    */
-  async _writeSetting(settingName, value, force = false) {
+  async _writeSetting<Key extends keyof Fields>(settingName: Key, value: Fields[Key], force: boolean = false): Promise<void> {
     if (
       !force
       && this.#cachedValues.has(settingName)
@@ -55,7 +54,10 @@ export default class CacheableSettings {
       return;
     }
 
-    return this.#controller.writeSetting(settingName, value);
+    return this.#controller.writeSetting(
+      settingName as string,
+      value
+    );
   }
 
   /**
@@ -63,8 +65,8 @@ export default class CacheableSettings {
    * @param {function(Object): void} callback Callback which will receive list of settings.
    * @return {function(): void} Unsubscribe function.
    */
-  subscribe(callback) {
-    const unsubscribeCallback = this.#controller.subscribeToChanges(callback);
+  subscribe(callback: (settings: Partial<Fields>) => void): () => void {
+    const unsubscribeCallback = this.#controller.subscribeToChanges(callback as (fields: Record<string, any>) => void);
 
     this.#disposables.push(unsubscribeCallback);
 

src/lib/extension/settings/MaintenanceSettings.js

@@ -1,63 +0,0 @@
-import ConfigurationController from "$lib/extension/ConfigurationController.js";
-import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
-import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
-
-export default class MaintenanceSettings extends CacheableSettings {
-  constructor() {
-    super("maintenance");
-  }
-
-  /**
-   * Set the active maintenance profile.
-   *
-   * @return {Promise<string|null>}
-   */
-  async resolveActiveProfileId() {
-    return this._resolveSetting("activeProfile", null);
-  }
-
-  /**
-   * Get the active maintenance profile if it is set.
-   *
-   * @return {Promise<MaintenanceProfile|null>}
-   */
-  async resolveActiveProfileAsObject() {
-    const resolvedProfileId = await this.resolveActiveProfileId();
-
-    return (await MaintenanceProfile.readAll())
-      .find(profile => profile.id === resolvedProfileId) || null;
-  }
-
-  /**
-   * Set the active maintenance profile.
-   *
-   * @param {string|null} profileId ID of the profile to set as active. If `null`, the active profile will be considered
-   * unset.
-   *
-   * @return {Promise<void>}
-   */
-  async setActiveProfileId(profileId) {
-    await this._writeSetting("activeProfile", profileId);
-  }
-
-  /**
-   * Subscribe to the changes in the maintenance-related settings.
-   *
-   * @param {function(MaintenanceSettingsObject): void} callback Callback to call when the settings change. The new
-   * settings are passed as an argument.
-   *
-   * @return {function(): void} Unsubscribe function.
-   */
-  subscribe(callback) {
-    return super.subscribe(settings => {
-      callback({
-        activeProfile: settings.activeProfile || null,
-      });
-    });
-  }
-}
-
-/**
- * @typedef {Object} MaintenanceSettingsObject
- * @property {string|null} activeProfile
- */

src/lib/extension/settings/MaintenanceSettings.ts

@@ -0,0 +1,39 @@
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
+import CacheableSettings from "$lib/extension/base/CacheableSettings.ts";
+
+interface MaintenanceSettingsFields {
+  activeProfile: string | null;
+}
+
+export default class MaintenanceSettings extends CacheableSettings<MaintenanceSettingsFields> {
+  constructor() {
+    super("maintenance");
+  }
+
+  /**
+   * Set the active maintenance profile.
+   */
+  async resolveActiveProfileId() {
+    return this._resolveSetting("activeProfile", null);
+  }
+
+  /**
+   * Get the active maintenance profile if it is set.
+   */
+  async resolveActiveProfileAsObject(): Promise<MaintenanceProfile | null> {
+    const resolvedProfileId = await this.resolveActiveProfileId();
+
+    return (await MaintenanceProfile.readAll())
+      .find(profile => profile.id === resolvedProfileId) || null;
+  }
+
+  /**
+   * Set the active maintenance profile.
+   *
+   * @param profileId ID of the profile to set as active. If `null`, the active profile will be considered
+   * unset.
+   */
+  async setActiveProfileId(profileId: string | null): Promise<void> {
+    await this._writeSetting("activeProfile", profileId);
+  }
+}

src/lib/extension/settings/MiscSettings.js

@@ -1,39 +0,0 @@
-import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
-
-export default class MiscSettings extends CacheableSettings {
-  constructor() {
-    super("misc");
-  }
-
-  /**
-   * @return {Promise<boolean>}
-   */
-  async resolveFullscreenViewerEnabled() {
-    return this._resolveSetting("fullscreenViewer", true);
-  }
-
-  /**
-   * @param {boolean} isEnabled
-   * @return {Promise<void>}
-   */
-  async setFullscreenViewerEnabled(isEnabled) {
-    return this._writeSetting("fullscreenViewer", isEnabled);
-  }
-
-  /**
-   * @param {function(MiscSettingsObject): void} callback
-   * @return {function(): void}
-   */
-  subscribe(callback) {
-    return super.subscribe(settings => {
-      callback({
-        fullscreenViewer: settings.fullscreenViewer ?? true,
-      })
-    });
-  }
-}
-
-/**
- * @typedef {Object} MiscSettingsObject
- * @property {boolean} fullscreenViewer
- */

src/lib/extension/settings/MiscSettings.ts

@@ -0,0 +1,19 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings.ts";
+
+interface MiscSettingsFields {
+  fullscreenViewer: boolean;
+}
+
+export default class MiscSettings extends CacheableSettings<MiscSettingsFields> {
+  constructor() {
+    super("misc");
+  }
+
+  async resolveFullscreenViewerEnabled() {
+    return this._resolveSetting("fullscreenViewer", true);
+  }
+
+  async setFullscreenViewerEnabled(isEnabled: boolean) {
+    return this._writeSetting("fullscreenViewer", isEnabled);
+  }
+}

src/lib/extension/settings/SearchSettings.js

@@ -1,42 +0,0 @@
-import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
-
-export default class SearchSettings extends CacheableSettings {
-  constructor() {
-    super("search");
-  }
-
-  async resolvePropertiesSuggestionsEnabled() {
-    return this._resolveSetting("suggestProperties", false);
-  }
-
-  async resolvePropertiesSuggestionsPosition() {
-    return this._resolveSetting("suggestPropertiesPosition", "start");
-  }
-
-  async setPropertiesSuggestions(isEnabled) {
-    return this._writeSetting("suggestProperties", isEnabled);
-  }
-
-  async setPropertiesSuggestionsPosition(position) {
-    return this._writeSetting("suggestPropertiesPosition", position);
-  }
-
-  /**
-   * @param {function(SearchSettingsObject): void} callback
-   * @return {function(): void}
-   */
-  subscribe(callback) {
-    return super.subscribe(rawSettings => {
-      callback({
-        suggestProperties: rawSettings.suggestProperties ?? false,
-        suggestPropertiesPosition: rawSettings.suggestPropertiesPosition ?? "start",
-      });
-    });
-  }
-}
-
-/**
- * @typedef {Object} SearchSettingsObject
- * @property {boolean} suggestProperties
- * @property {"start"|"end"} suggestPropertiesPosition
- */

src/lib/extension/settings/SearchSettings.ts

@@ -0,0 +1,28 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings.ts";
+
+interface SearchSettingsFields {
+  suggestProperties: boolean;
+  suggestPropertiesPosition: "start" | "end";
+}
+
+export default class SearchSettings extends CacheableSettings<SearchSettingsFields> {
+  constructor() {
+    super("search");
+  }
+
+  async resolvePropertiesSuggestionsEnabled() {
+    return this._resolveSetting("suggestProperties", false);
+  }
+
+  async resolvePropertiesSuggestionsPosition() {
+    return this._resolveSetting("suggestPropertiesPosition", "start");
+  }
+
+  async setPropertiesSuggestions(isEnabled: boolean) {
+    return this._writeSetting("suggestProperties", isEnabled);
+  }
+
+  async setPropertiesSuggestionsPosition(position: "start" | "end") {
+    return this._writeSetting("suggestPropertiesPosition", position);
+  }
+}

src/stores/maintenance-profiles-store.js

@@ -1,6 +1,6 @@
 import {writable} from "svelte/store";
 import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
-import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.ts";
 
 /**
  * Store for working with maintenance profiles in the Svelte popup.

src/stores/misc-preferences.js

@@ -1,5 +1,5 @@
 import {writable} from "svelte/store";
-import MiscSettings from "$lib/extension/settings/MiscSettings.js";
+import MiscSettings from "$lib/extension/settings/MiscSettings.ts";
 
 export const fullScreenViewerEnabled = writable(true);
 
@@ -13,6 +13,6 @@ Promise.allSettled([
   });
 
   miscSettings.subscribe(settings => {
-    fullScreenViewerEnabled.set(settings.fullscreenViewer);
+    fullScreenViewerEnabled.set(Boolean(settings.fullscreenViewer));
   });
 });

src/stores/search-preferences.js

@@ -1,5 +1,5 @@
 import {writable} from "svelte/store";
-import SearchSettings from "$lib/extension/settings/SearchSettings.js";
+import SearchSettings from "$lib/extension/settings/SearchSettings.ts";
 
 export const searchPropertiesSuggestionsEnabled = writable(false);
 
@@ -23,7 +23,7 @@ Promise.allSettled([
   });
 
   searchSettings.subscribe(settings => {
-    searchPropertiesSuggestionsEnabled.set(settings.suggestProperties);
-    searchPropertiesSuggestionsPosition.set(settings.suggestPropertiesPosition);
+    searchPropertiesSuggestionsEnabled.set(Boolean(settings.suggestProperties));
+    searchPropertiesSuggestionsPosition.set(settings.suggestPropertiesPosition || 'start');
   });
 })