Typescript migration part 2 (#261)

Converts everything to typescript, adding `@ts-expect-error`s where necessary. Also makes some progress converting elements to use decorators, but we're not fully there yet — I think it'll make sense to continue to do that in future PRs, rather than doing it all in one go, just so that we can keep up with the dev branch.
webrecorder · Nov 27, 2023 · 1c6628a · 1c6628a
1 parent 442b401
commit 1c6628a
Show file tree

Hide file tree

Showing 28 changed files with 1,129 additions and 601 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,5 @@
 /* eslint-env node */
+/** @type { import("eslint").Linter.Config } */
 module.exports = {
   env: {
     browser: true,
@@ -19,7 +20,7 @@ module.exports = {
   rules: {
     "no-restricted-globals": [2, "event", "error"],
     "linebreak-style": ["error", "unix"],
-    "@typescript-eslint/no-explicit-any": "warn",
   },
-  ignorePatterns: ["ruffle/**/*", "build/**/*"],
+  ignorePatterns: ["ruffle/**/*", "build/**/*", "/sw.js", "/ui.js"],
+  reportUnusedDisableDirectives: true,
 };
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "runem.lit-plugin",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,63 @@
+{
+  "cSpell.languageSettings": [
+    {
+      "languageId": "typescript",
+      "allowCompoundWords": true,
+      "dictionaries": ["typescript", "node", "html", "fonts", "css"]
+    },
+    {
+      "languageId": "javascript",
+      "allowCompoundWords": true,
+      "dictionaries": ["typescript", "node", "html", "fonts", "css"]
+    },
+    {
+      "languageId": "markdown",
+      "allowCompoundWords": true,
+      "dictionaries": ["typescript", "node", "html", "fonts", "css"]
+    }
+  ],
+  "cSpell.words": [
+    "authed",
+    "browsertrix",
+    "Bulma",
+    "canonicalization",
+    "cdxj",
+    "Collec",
+    "colls",
+    "electronuserland",
+    "flexsearch",
+    "gapi",
+    "gauth",
+    "gdrive",
+    "iframes",
+    "indexeddb",
+    "inited",
+    "ipfs",
+    "ival",
+    "kiwix",
+    "ndjson",
+    "pmarsceill",
+    "popd",
+    "pushd",
+    "pywb",
+    "reauth",
+    "recalc",
+    "replaybase",
+    "replayweb.page",
+    "sesh",
+    "Strs",
+    "surt",
+    "svgs",
+    "swmanager",
+    "swonly",
+    "Unfullscreen",
+    "unrewriting",
+    "wabac",
+    "WACZ",
+    "WARC",
+    "warcio",
+    "webrecorder",
+    "wrlogo"
+  ],
+  "cSpell.ignorePaths": ["node_modules", ".git", "*.lock", "package.json"]
+}
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,5 @@
+<!-- cSpell:ignoreRegExp @\w+ -->
+
 ## CHANGES
 
 v1.8.11
@@ -72,7 +74,7 @@ v1.8.0
 
 - UI: Add 'Show All Pages' option to show non-seed pages that are previously only available via search
 - Embeds: add 'swName' option to allow customizing 'sw.js' to a different filename
-- Dependencies: Update to wabac.js 2.16.1 -- varioues loading improvements related to surt
+- Dependencies: Update to wabac.js 2.16.1 -- various loading improvements related to surt
 - Dependencies: Update to electron 25.5.1, ruffle 2023-06-14
 
 v1.7.15
@@ -149,7 +151,7 @@ v1.7.4
 v1.7.3
 
 - Fidelity: Misc fidelity improvements via latest wombat + wabac.js
-- Dependecies: wabac.js 2.13.8, wombat 3.3.11, auto-js-ipfs 1.5.1
+- Dependencies: wabac.js 2.13.8, wombat 3.3.11, auto-js-ipfs 1.5.1
 - Loading: Fix occasional loading issues with multiple embeds loading on the same page
 
 v1.7.2
@@ -292,7 +294,7 @@ v1.5.2
 
 v1.5.1
 
-- Library usage: Simplfy download options in editable mode, add warc/1.0 download opt (for archiveweb.page)
+- Library usage: Simplify download options in editable mode, add warc/1.0 download opt (for archiveweb.page)
 - Library usage: Allow custom service worker init path on app init (or none)
 - Library usage: Ensure page title reflects current app
 - UI: Refresh UI after half second while waiting for service worker to load, instead of every 5.
@@ -338,7 +340,7 @@ v1.4.4
 
 v1.4.3
 
-- Loading: Various fixes to index loading for compessed WACZ index
+- Loading: Various fixes to index loading for compressed WACZ index
 - Fidelity: Fix edge-case POST-to-get conversion - binary, empty and text/plain POST payloads now handled same way here (via wabac.js/warcio.js) as in other tools (pywb, cdxj-indexer)
 - Customization: Support for automated redirect to live page on not found (via embed options)
 - UI: Updated page not found message

diff --git a/src/appmain.ts b/src/appmain.ts
@@ -1,5 +1,5 @@
-import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import { LitElement, html, css, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import {
   wrapCss,
@@ -16,9 +16,11 @@ import { SWManager } from "./swmanager";
 import "./item";
 import "./item-index";
 import "./chooser";
+import { LoadInfo } from "./item";
 
 // ===========================================================================
-class ReplayWebApp extends LitElement {
+@customElement("replay-app-main")
+export class ReplayWebApp extends LitElement {
   @property({ type: Boolean })
   inited = false;
 
@@ -41,10 +43,10 @@ class ReplayWebApp extends LitElement {
   collTitle: string | null = null;
 
   @property({ type: Object })
-  loadInfo: any = null;
+  loadInfo: LoadInfo | null = null;
 
   @property({ type: String })
-  embed: any = null;
+  embed: string | null = null;
 
   @property({ type: String })
   collPageUrl = "";
@@ -56,21 +58,20 @@ class ReplayWebApp extends LitElement {
   pageReplay = false;
 
   @property({ type: String })
-  source: any = null;
+  source: string | null = null;
 
   @property({ type: Boolean })
   skipRuffle = false;
 
   @property({ type: Object })
-  swErrorMsg: any = null;
+  swErrorMsg: TemplateResult<1> | "" | null = null;
 
   private swName?: string;
   private swmanager: SWManager | null;
   private useRuffle = false;
 
   private droppedFile: File | null = null;
 
-  // eslint-disable-next-line no-undef
   constructor(swName = __SW_NAME__) {
     super();
 
@@ -105,7 +106,7 @@ class ReplayWebApp extends LitElement {
     });
   }
 
-  private maybeStartFileDrop = (dragEvent) => {
+  private maybeStartFileDrop = (dragEvent: DragEvent) => {
     if (this.sourceUrl) {
       // A source is already loaded. Don't allow dropping a file.
       return;
@@ -372,7 +373,7 @@ class ReplayWebApp extends LitElement {
     -->
       <a
         href="?terms"
-        @click="${(e) => {
+        @click="${(e: Event) => {
           e.preventDefault();
           this.showAbout = true;
         }}"
@@ -385,7 +386,7 @@ class ReplayWebApp extends LitElement {
     return html` <wr-item
       .loadInfo="${this.loadInfo}"
       sourceUrl="${this.sourceUrl || ""}"
-      embed="${this.embed}"
+      embed="${ifDefined(this.embed === null ? undefined : this.embed)}"
       appName="${this.appName}"
       swName="${ifDefined(this.swName)}"
       .appLogo="${this.mainLogo}"
@@ -452,12 +453,11 @@ class ReplayWebApp extends LitElement {
     }
 
     this.swmanager = new SWManager({ name, appName: this.appName });
-    this.swmanager
-      .register()
-      .catch(
-        () =>
-          (this.swErrorMsg = this.swmanager?.renderErrorReport(this.mainLogo)),
-      );
+    this.swmanager.register().catch(
+      () =>
+        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
+        (this.swErrorMsg = this.swmanager?.renderErrorReport(this.mainLogo)),
+    );
 
     window.addEventListener("popstate", () => {
       this.initRoute();
@@ -534,16 +534,21 @@ class ReplayWebApp extends LitElement {
     this.pageParams = new URLSearchParams(window.location.search);
 
     // Google Drive
-    let state: any = this.pageParams.get("state");
+    const state = this.pageParams.get("state");
+    type State = {
+      ids?: string[];
+      userId?: string;
+      action?: string;
+    };
     if (state) {
       try {
-        state = JSON.parse(state);
+        const parsedState: State = JSON.parse(state);
         if (
-          state.ids instanceof Array &&
-          state.userId &&
-          state.action === "open"
+          parsedState.ids instanceof Array &&
+          parsedState.userId &&
+          parsedState.action === "open"
         ) {
-          this.pageParams.set("source", "googledrive://" + state.ids[0]);
+          this.pageParams.set("source", "googledrive://" + parsedState.ids[0]);
           this.pageParams.delete("state");
           window.location.search = this.pageParams.toString();
           return;
@@ -581,7 +586,7 @@ class ReplayWebApp extends LitElement {
 
     if (this.pageParams.get("config")) {
       try {
-        this.loadInfo.extraConfig = JSON.parse(
+        this.loadInfo!.extraConfig = JSON.parse(
           this.pageParams.get("config") || "",
         );
       } catch (e) {
@@ -590,35 +595,35 @@ class ReplayWebApp extends LitElement {
     }
 
     if (this.pageParams.get("baseUrlSourcePrefix")) {
-      this.loadInfo.extraConfig = this.loadInfo.extraConfig || {};
-      this.loadInfo.extraConfig.baseUrlSourcePrefix = this.pageParams.get(
+      this.loadInfo!.extraConfig = this.loadInfo!.extraConfig || {};
+      this.loadInfo!.extraConfig.baseUrlSourcePrefix = this.pageParams.get(
         "baseUrlSourcePrefix",
       );
     }
 
     if (this.pageParams.get("basePageUrl")) {
-      this.loadInfo.extraConfig = this.loadInfo.extraConfig || {};
-      this.loadInfo.extraConfig.baseUrl = this.pageParams.get("basePageUrl");
+      this.loadInfo!.extraConfig = this.loadInfo!.extraConfig || {};
+      this.loadInfo!.extraConfig.baseUrl = this.pageParams.get("basePageUrl");
     }
 
     if (this.pageParams.get("customColl")) {
-      this.loadInfo.customColl = this.pageParams.get("customColl");
+      this.loadInfo!.customColl = this.pageParams.get("customColl");
     }
 
     if (this.pageParams.get("noWebWorker") === "1") {
-      this.loadInfo.noWebWorker = true;
+      this.loadInfo!.noWebWorker = true;
     }
 
     if (this.pageParams.get("noCache") === "1") {
-      this.loadInfo.noCache = true;
+      this.loadInfo!.noCache = true;
     }
 
     if (this.pageParams.get("hideOffscreen") === "1") {
-      this.loadInfo.hideOffscreen = true;
+      this.loadInfo!.hideOffscreen = true;
     }
 
     if (this.pageParams.get("loading") === "eager") {
-      this.loadInfo.loadEager = true;
+      this.loadInfo!.loadEager = true;
     }
 
     if (this.pageParams.get("swName")) {
@@ -791,7 +796,3 @@ class ReplayWebApp extends LitElement {
     `;
   }
 }
-
-customElements.define("replay-app-main", ReplayWebApp);
-
-export { ReplayWebApp };