Sonar: Explicitly marking some members as readonly

src/content/components/extension/FullscreenViewer.ts

@@ -11,15 +11,15 @@ import type { TaggingProfilePopup } from "$content/components/extension/profiles
 
 export class FullscreenViewer extends BaseComponent {
   #currentMediaBox: MediaBox | null = null;
-  #videoElement: HTMLVideoElement = document.createElement('video');
-  #imageElement: HTMLImageElement = document.createElement('img');
-  #spinnerElement: HTMLElement = document.createElement('i');
-  #sizeSelectorElement: HTMLSelectElement = document.createElement('select');
-  #closeButtonElement: HTMLElement = document.createElement('i');
-  #tagsPopupElement: HTMLElement = document.createElement('div');
-  #imageTagsToggler: TagsListToggler = TagsListToggler.create();
-  #profileTagsToggler: TagsListToggler = TagsListToggler.create();
-  #tagsPopupHider: HTMLElement = document.createElement('div');
+  readonly #videoElement: HTMLVideoElement = document.createElement('video');
+  readonly #imageElement: HTMLImageElement = document.createElement('img');
+  readonly #spinnerElement: HTMLElement = document.createElement('i');
+  readonly #sizeSelectorElement: HTMLSelectElement = document.createElement('select');
+  readonly #closeButtonElement: HTMLElement = document.createElement('i');
+  readonly #tagsPopupElement: HTMLElement = document.createElement('div');
+  readonly #imageTagsToggler: TagsListToggler = TagsListToggler.create();
+  readonly #profileTagsToggler: TagsListToggler = TagsListToggler.create();
+  readonly #tagsPopupHider: HTMLElement = document.createElement('div');
   #activeProfileListenerUnsubscriber: UnsubscribeFunction | null = null;
   #touchId: number | null = null;
   #startX: number | null = null;
@@ -425,21 +425,21 @@ export class FullscreenViewer extends BaseComponent {
     return url.endsWith('.mp4') || url.endsWith('.webm');
   }
 
-  static #preferences = new MiscPreferences();
+  static readonly #preferences = new MiscPreferences();
 
-  static #offsetProperty = '--offset';
-  static #opacityProperty = '--opacity';
-  static #shownState = 'shown';
-  static #swipeState = 'swiped';
-  static #minRequiredDistance = 50;
-  static #collapsedPopupState = 'is-collapsed';
+  static readonly #offsetProperty = '--offset';
+  static readonly #opacityProperty = '--opacity';
+  static readonly #shownState = 'shown';
+  static readonly #swipeState = 'swiped';
+  static readonly #minRequiredDistance = 50;
+  static readonly #collapsedPopupState = 'is-collapsed';
 
-  static #previewSizes: Record<FullscreenViewerSize, string> = {
+  static readonly #previewSizes: Record<FullscreenViewerSize, string> = {
     full: 'Full',
     large: 'Large',
     medium: 'Medium',
     small: 'Small'
   }
 
-  static #fallbackSize = 'large';
+  static readonly #fallbackSize = 'large';
 }

src/content/components/extension/ImageShowFullscreenButton.ts

@@ -81,5 +81,5 @@ export class ImageShowFullscreenButton extends BaseComponent {
     return viewer;
   }
 
-  static #preferences = new MiscPreferences();
+  static readonly #preferences = new MiscPreferences();
 }

src/content/components/extension/presets/EditorPresetsBlock.ts

@@ -5,8 +5,8 @@ import { createFontAwesomeIcon } from "$lib/dom-utils";
 import { sortEntitiesByField } from "$lib/utils";
 
 export default class EditorPresetsBlock extends BaseComponent {
-  #presetsTable = document.createElement('table');
-  #presetBlocks: PresetTableRow[] = [];
+  readonly #presetsTable = document.createElement('table');
+  readonly #presetBlocks: PresetTableRow[] = [];
   #tags: Set<string> = new Set();
 
   protected build() {

src/content/components/extension/presets/PresetTableRow.ts

@@ -207,6 +207,6 @@ export default class PresetTableRow extends BaseComponent {
     return new this(document.createElement('tr'), preset);
   }
 
-  static #tagMissingClassName = 'is-missing';
-  static #presetWarningClassName = 'has-warning';
+  static readonly #tagMissingClassName = 'is-missing';
+  static readonly #presetWarningClassName = 'has-warning';
 }

src/content/components/extension/profiles/TaggingProfilePopup.ts

@@ -16,14 +16,14 @@ import { EVENT_TAG_TOGGLED } from "$content/components/events/tags-list-toggler-
 
 
 export class TaggingProfilePopup extends BaseComponent {
-  #tagsListToggler = TagsListToggler.create();
+  readonly #tagsListToggler = TagsListToggler.create();
   #activeProfile: TaggingProfile | null = null;
   #mediaBoxTools: MediaBoxTools | null = null;
   #isSubmissionLocked: boolean = false;
   #isPlanningToSubmit: boolean = false;
   #isSubmitting: boolean = false;
   #tagsSubmissionTimer: Timeout | null = null;
-  #emitter = emitterAt(this);
+  readonly #emitter = emitterAt(this);
 
   /**
    * @protected
@@ -226,7 +226,7 @@ export class TaggingProfilePopup extends BaseComponent {
   /**
    * Controller with maintenance settings.
    */
-  static #preferences = new TaggingProfilesPreferences();
+  static readonly #preferences = new TaggingProfilesPreferences();
 
   /**
    * Subscribe to all necessary feeds to watch for every active profile change. Additionally, will execute the callback
@@ -298,9 +298,9 @@ export class TaggingProfilePopup extends BaseComponent {
     });
   }
 
-  static #scrapedAPI = new ScrapedAPI();
+  static readonly #scrapedAPI = new ScrapedAPI();
 
-  static #delayBeforeSubmissionMs = 500;
+  static readonly #delayBeforeSubmissionMs = 500;
 
   /**
    * Amount of pending submissions or NULL if logic was not yet initialized.

src/content/components/extension/profiles/TagsListToggler.ts

@@ -222,11 +222,11 @@ export default class TagsListToggler extends BaseComponent {
     return new TagsListToggler(tagsListContainer);
   }
 
-  static #containsClass = 'is-present';
-  static #missingClass = 'is-missing';
+  static readonly #containsClass = 'is-present';
+  static readonly #missingClass = 'is-missing';
 
-  static #addedClass = 'is-added';
-  static #removedClass = 'is-removed';
+  static readonly #addedClass = 'is-added';
+  static readonly #removedClass = 'is-removed';
 }
 
 export class BlackListedTagsEncounteredError extends Error {

src/content/components/philomena/BlockCommunication.ts

@@ -112,14 +112,14 @@ export class BlockCommunication extends BaseComponent {
       );
   }
 
-  static #preferences = new TagsPreferences();
+  static readonly #preferences = new TagsPreferences();
 
   /**
    * Map of links to their original texts. These texts need to be stored here to make them restorable. Keys is a link
    * element and value is a text.
    * @private
    */
-  static #originalTagLinkTexts: WeakMap<HTMLElement, string> = new WeakMap();
+  static readonly #originalTagLinkTexts: WeakMap<HTMLElement, string> = new WeakMap();
 
   static findAndInitializeAll() {
     for (const container of document.querySelectorAll<HTMLElement>('.block.communication')) {

src/content/components/philomena/TagDropdown.ts

@@ -201,7 +201,7 @@ export class TagDropdown extends BaseComponent {
     await this.#activeProfile.save();
   }
 
-  static #preferences = new TaggingProfilesPreferences();
+  static readonly #preferences = new TaggingProfilesPreferences();
 
   /**
    * Watch for changes to active profile.
@@ -260,8 +260,8 @@ export class TagDropdown extends BaseComponent {
     return dropdownLink;
   }
 
-  static #categoriesResolver = new CustomCategoriesResolver();
-  static #processedElements: WeakSet<HTMLElement> = new WeakSet();
+  static readonly #categoriesResolver = new CustomCategoriesResolver();
+  static readonly #processedElements: WeakSet<HTMLElement> = new WeakSet();
 
   static #findAll(parentNode: ParentNode = document): NodeListOf<HTMLElement> {
     return parentNode.querySelectorAll('.tag.dropdown');

src/content/components/philomena/TagsForm.ts

@@ -7,8 +7,8 @@ import EditorPresetsBlock from "$content/components/extension/presets/EditorPres
 import { EVENT_PRESET_TAG_CHANGE_APPLIED, type PresetTagChange } from "$content/components/events/preset-block-events";
 
 export class TagsForm extends BaseComponent {
-  #togglePresetsButton: HTMLButtonElement = document.createElement('button');
-  #presetsList = EditorPresetsBlock.create();
+  readonly #togglePresetsButton: HTMLButtonElement = document.createElement('button');
+  readonly #presetsList = EditorPresetsBlock.create();
   #plainEditorTextarea: HTMLTextAreaElement | null = null;
   #fancyEditorInput: HTMLInputElement | null = null;
   #tagsSet: Set<string> = new Set();

src/content/components/philomena/dupe/DupeDiff.ts

@@ -104,7 +104,7 @@ export default class DupeDiff extends BaseComponent {
    *
    * Keys are the icons and values are the patterns extension should check for each URL.
    */
-  static #iconsToPatternsMap = new Map<string[] | string, string[] | string>([
+  static readonly #iconsToPatternsMap = new Map<string[] | string, string[] | string>([
     [
       ['artstation', brandsSubtype],
       'artstation.com'

src/content/components/philomena/dupe/DupeReportRow.ts

@@ -4,9 +4,9 @@ import DupeImage from "$content/components/philomena/dupe/DupeImage";
 import { ratingTags } from "$config/tags";
 
 export default class DupeReportRow extends BaseComponent {
-  #leftImage: DupeImage;
-  #rightImage: DupeImage;
-  #difference: DupeDiff;
+  readonly #leftImage: DupeImage;
+  readonly #rightImage: DupeImage;
+  readonly #difference: DupeDiff;
 
   constructor(leftCell: HTMLElement, rightCell: HTMLElement, diffCell: HTMLElement, reportOptions: HTMLElement) {
     super(reportOptions);

src/content/components/philomena/listing/ImageListInfo.ts

@@ -2,8 +2,8 @@ import { BaseComponent } from "$content/components/base/BaseComponent";
 
 export class ImageListInfo extends BaseComponent {
   #tagElement: HTMLElement | null = null;
-  #impliedTags: string[] = [];
-  #showUntaggedImplicationsButton: HTMLAnchorElement = document.createElement('a');
+  readonly #impliedTags: string[] = [];
+  readonly #showUntaggedImplicationsButton: HTMLAnchorElement = document.createElement('a');
 
   protected build() {
     const sectionAfterImage = this.container.querySelector('.tag-info__image + .flex__grow');
@@ -71,5 +71,5 @@ export class ImageListInfo extends BaseComponent {
     location.assign(url.href);
   }
 
-  static #implicationsStarterText = 'Implies:';
+  static readonly #implicationsStarterText = 'Implies:';
 }

src/lib/extension/BulkEntitiesTransporter.ts

@@ -101,7 +101,7 @@ export default class BulkEntitiesTransporter {
       && Array.isArray(targetObject.elements);
   }
 
-  static #transporters: TransportersMapping = {
+  static readonly #transporters: TransportersMapping = {
     profiles: new EntitiesTransporter(TaggingProfile),
     groups: new EntitiesTransporter(TagGroup),
     presets: new EntitiesTransporter(TagEditorPreset),

src/lib/extension/CustomCategoriesResolver.ts

@@ -5,9 +5,9 @@ import { emit } from "$content/components/events/comms";
 import { EVENT_TAG_GROUP_RESOLVED } from "$content/components/events/tag-dropdown-events";
 
 export default class CustomCategoriesResolver {
-  #exactGroupMatches = new Map<string, TagGroup>();
-  #regExpGroupMatches = new Map<RegExp, TagGroup>();
-  #tagDropdowns: TagDropdown[] = [];
+  readonly #exactGroupMatches = new Map<string, TagGroup>();
+  readonly #regExpGroupMatches = new Map<RegExp, TagGroup>();
+  readonly #tagDropdowns: TagDropdown[] = [];
   #nextQueuedUpdate: Timeout | null = null;
 
   constructor() {
@@ -125,5 +125,5 @@ export default class CustomCategoriesResolver {
     );
   }
 
-  static #unprocessedTagsTimeout = 0;
+  static readonly #unprocessedTagsTimeout = 0;
 }

src/lib/philomena/scraping/parsing/PostParser.ts

@@ -78,5 +78,5 @@ export default class PostParser extends PageParser {
     );
   }
 
-  static tagsInputName = 'image[tag_input]';
+  static readonly tagsInputName = 'image[tag_input]';
 }