Merge pull request #95 from koloml/feature/booru-api-ts

Converted classes related to parsing/submitting tags to TypeScript

src/lib/booru/scraped/ScrapedAPI.ts

@@ -1,19 +1,25 @@
 import PostParser from "$lib/booru/scraped/parsing/PostParser";
 
+type UpdaterFunction = (tags: Set<string>) => Set<string>;
+
 export default class ScrapedAPI {
   /**
    * Update the tags of the image using callback.
-   * @param {number} imageId ID of the image.
-   * @param {function(Set<string>): Set<string>} callback Callback to call to change the content.
-   * @return {Promise<Map<string,string>|null>} Updated tags and aliases list for updating internal cached state.
+   * @param imageId ID of the image.
+   * @param callback Callback to call to change the content.
+   * @return Updated tags and aliases list for updating internal cached state.
    */
-  async updateImageTags(imageId, callback) {
+  async updateImageTags(imageId: number, callback: UpdaterFunction): Promise<Map<string, string> | null> {
     const postParser = new PostParser(imageId);
     const formData = await postParser.resolveTagEditorFormData();
+    const tagsFieldValue = formData.get(PostParser.tagsInputName);
+
+    if (typeof tagsFieldValue !== 'string') {
+      throw new Error('Missing tags field!');
+    }
 
     const tagsList = new Set(
-      formData
-        .get(PostParser.tagsInputName)
+      tagsFieldValue
         .split(',')
         .map(tagName => tagName.trim())
     );

src/lib/booru/scraped/parsing/PageParser.ts

@@ -1,17 +1,12 @@
 export default class PageParser {
-  /** @type {string} */
-  #url;
-  /** @type {DocumentFragment|null} */
-  #fragment = null;
+  readonly #url: string;
+  #fragment: DocumentFragment | null = null;
 
-  constructor(url) {
+  constructor(url: string) {
     this.#url = url;
   }
 
-  /**
-   * @return {Promise<DocumentFragment>}
-   */
-  async resolveFragment() {
+  async resolveFragment(): Promise<DocumentFragment> {
     if (this.#fragment) {
       return this.#fragment;
     }
@@ -34,12 +29,12 @@ export default class PageParser {
   /**
    * Create a document fragment from the following response.
    *
-   * @param {Response} response Response to create a fragment from. Note, that this response will be used. If you need
-   * to use the same response somewhere else, then you need to pass a cloned version of the response.
+   * @param response Response to create a fragment from. Note, that this response will be used. If you need to use the
+   * same response somewhere else, then you need to pass a cloned version of the response.
    *
-   * @return {Promise<DocumentFragment>} Resulting document fragment ready for processing.
+   * @return Resulting document fragment ready for processing.
    */
-  static async resolveFragmentFromResponse(response) {
+  static async resolveFragmentFromResponse(response: Response): Promise<DocumentFragment> {
     const documentFragment = document.createDocumentFragment();
     const template = document.createElement('template');
     template.innerHTML = await response.text();

src/lib/booru/scraped/parsing/PostParser.ts

@@ -2,23 +2,19 @@ import PageParser from "$lib/booru/scraped/parsing/PageParser";
 import { buildTagsAndAliasesMap } from "$lib/booru/tag-utils";
 
 export default class PostParser extends PageParser {
-  /** @type {HTMLFormElement} */
-  #tagEditorForm;
+  #tagEditorForm: HTMLFormElement | null = null;
 
-  constructor(imageId) {
+  constructor(imageId: number) {
     super(`/images/${imageId}`);
   }
 
-  /**
-   * @return {Promise<HTMLFormElement>}
-   */
-  async resolveTagEditorForm() {
+  async resolveTagEditorForm(): Promise<HTMLFormElement> {
     if (this.#tagEditorForm) {
       return this.#tagEditorForm;
     }
 
     const documentFragment = await this.resolveFragment();
-    const tagsFormElement = documentFragment.querySelector("#tags-form");
+    const tagsFormElement = documentFragment.querySelector<HTMLFormElement>("#tags-form");
 
     if (!tagsFormElement) {
       throw new Error("Failed to find the tag editor form");
@@ -37,10 +33,8 @@ export default class PostParser extends PageParser {
 
   /**
    * Resolve the tags and aliases mapping from the post page.
-   *
-   * @return {Promise<Map<string, string>|null>}
    */
-  async resolveTagsAndAliases() {
+  async resolveTagsAndAliases(): Promise<Map<string, string> | null> {
     return PostParser.resolveTagsAndAliasesFromPost(
       await this.resolveFragment()
     );
@@ -49,25 +43,32 @@ export default class PostParser extends PageParser {
   /**
    * Resolve the list of tags and aliases from the post content.
    *
-   * @param {DocumentFragment} documentFragment Real content to parse the data from.
+   * @param documentFragment Real content to parse the data from.
    *
-   * @return {Map<string, string>|null} Tags and aliases or null if failed to parse.
+   * @return Tags and aliases or null if failed to parse.
    */
-  static resolveTagsAndAliasesFromPost(documentFragment) {
-    const imageShowContainer = documentFragment.querySelector('.image-show-container');
-    const tagsForm = documentFragment.querySelector('#tags-form');
+  static resolveTagsAndAliasesFromPost(documentFragment: DocumentFragment): Map<string, string> | null {
+    const imageShowContainer = documentFragment.querySelector<HTMLElement>('.image-show-container');
+    const tagsForm = documentFragment.querySelector<HTMLFormElement>('#tags-form');
 
     if (!imageShowContainer || !tagsForm) {
       return null;
     }
 
     const tagsFormData = new FormData(tagsForm);
+    const tagsAndAliasesValue = imageShowContainer.dataset.imageTagAliases;
+    const tagsValue = tagsFormData.get(this.tagsInputName);
 
-    const tagsAndAliasesList = imageShowContainer.dataset.imageTagAliases
+    if (!tagsAndAliasesValue || !tagsValue || typeof tagsValue !== 'string') {
+      console.warn('Failed to locate tags & aliases!');
+      return null;
+    }
+
+    const tagsAndAliasesList = tagsAndAliasesValue
       .split(',')
       .map(tagName => tagName.trim());
 
-    const actualTagsList = tagsFormData.get(this.tagsInputName)
+    const actualTagsList = tagsValue
       .split(',')
       .map(tagName => tagName.trim());