diff --git a/src/appmain.ts b/src/appmain.ts index 7c88e7d..f3fbe94 100644 --- a/src/appmain.ts +++ b/src/appmain.ts @@ -1,4 +1,10 @@ -import { LitElement, html, css, type TemplateResult } from "lit"; +import { + LitElement, + html, + css, + type TemplateResult, + type PropertyValues, +} from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { @@ -467,7 +473,7 @@ export class ReplayWebApp extends LitElement { }); } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if (changedProperties.has("sourceUrl")) { this.collTitle = null; } diff --git a/src/chooser.ts b/src/chooser.ts index 866a7f4..7c3f2e4 100644 --- a/src/chooser.ts +++ b/src/chooser.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { IS_APP, wrapCss } from "./misc"; import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg"; @@ -47,7 +47,7 @@ export class Chooser extends LitElement { fileHandle?: FileSystemFileHandle; - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if (changedProperties.has("droppedFile") && this.droppedFile) { this.onDropFile(); } diff --git a/src/embed-receipt.ts b/src/embed-receipt.ts index a854059..28a8442 100644 --- a/src/embed-receipt.ts +++ b/src/embed-receipt.ts @@ -14,7 +14,10 @@ import type { Item as ItemType } from "./types"; // =========================================================================== export class RWPEmbedReceipt extends LitElement { - @property({ type: Object }) collInfo: ItemType | null = null; + @property({ type: Object }) collInfo: + | ItemType + | null + | Record = null; @property({ type: Object }) appLogo = null; @property({ type: String }) ts: string | null = null; @property({ type: String }) url: string | null = null; diff --git a/src/embed.ts b/src/embed.ts index 11fda33..05be002 100644 --- a/src/embed.ts +++ b/src/embed.ts @@ -1,4 +1,10 @@ -import { LitElement, html, css, TemplateResult } from "lit"; +import { + LitElement, + html, + css, + TemplateResult, + type PropertyValues, +} from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; import { wrapCss, rwpLogo } from "./misc"; @@ -197,7 +203,7 @@ class Embed extends LitElement { } } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if ( changedProperties.has("url") || changedProperties.has("ts") || diff --git a/src/gdrive.ts b/src/gdrive.ts index 2849970..b1c04b1 100644 --- a/src/gdrive.ts +++ b/src/gdrive.ts @@ -1,19 +1,20 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { wrapCss } from "./misc"; import fabGoogleDrive from "@fortawesome/fontawesome-free/svgs/brands/google-drive.svg"; // =========================================================================== class GDrive extends LitElement { + state: string; + sourceUrl: string; + scriptLoaded: boolean; + error: boolean; + reauth?: boolean; constructor() { super(); - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. this.state = "trypublic"; - // @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'. this.sourceUrl = ""; - // @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'. this.scriptLoaded = false; - // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'. this.error = false; } @@ -26,15 +27,12 @@ class GDrive extends LitElement { }; } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if (changedProperties.has("sourceUrl")) { - // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'. this.error = false; - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. this.state = "trypublic"; this.tryPublicAccess().then((result) => { if (!result) { - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. this.state = "tryauto"; this.requestUpdate(); } @@ -44,19 +42,16 @@ class GDrive extends LitElement { async tryPublicAccess() { try { - // @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'. const sourceUrl = this.sourceUrl; const fileId = sourceUrl.slice("googledrive://".length); const publicCheckUrl = `${__HELPER_PROXY__}/g/${fileId}`; - let resp = null; + let resp: Response | null = null; try { - // @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'. resp = await fetch(publicCheckUrl); } catch (e) { return false; } - // @ts-expect-error - TS2531 - Object is possibly 'null'. const json = await resp.json(); if (!json.url || !json.name || !json.size) { return false; @@ -72,10 +67,8 @@ class GDrive extends LitElement { try { const abort = new AbortController(); const signal = abort.signal; - // @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'. resp = await fetch(publicUrl, { signal }); abort.abort(); - // @ts-expect-error - TS2531 - Object is possibly 'null'. if (resp.status != 200) { return false; } @@ -99,13 +92,10 @@ class GDrive extends LitElement { } onLoad() { - // @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'. this.scriptLoaded = true; this.gauth("none", (response) => { if (response.error) { - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. if (this.state !== "implicitonly") { - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. this.state = "trymanual"; } } else { @@ -123,7 +113,6 @@ class GDrive extends LitElement { } async authed(response) { - // @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'. const sourceUrl = this.sourceUrl; const fileId = sourceUrl.slice("googledrive://".length); const metadataUrl = `https://www.googleapis.com/drive/v3/files/${fileId}`; @@ -136,17 +125,13 @@ class GDrive extends LitElement { ); if (resp.status === 404 || resp.status == 403) { - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. if (this.state !== "implicitonly") { - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. this.state = "trymanual"; } - // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'. this.error = true; return; } - // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'. this.error = false; const metadata = await resp.json(); @@ -166,48 +151,38 @@ class GDrive extends LitElement { render() { return html` ${this.script()} - ${ - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. - this.state !== "trymanual" - ? html`

Connecting to Google Drive...

` - : html` - ${ - // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'. - this.error - ? html` -
-

- ${ - // @ts-expect-error - TS2339 - Property 'reauth' does not exist on type 'GDrive'. - this.reauth - ? "Some resources are loaded on demand from Google Drive, which requires reauthorization." - : "Could not access this file with the current Google Drive account." - } -

-

- If you have multiple Google Drive accounts, be sure to - select the correct one. -

-
-
- ` - : "" - } - - ` - }`; + ${this.state !== "trymanual" + ? html`

Connecting to Google Drive...

` + : html` + ${this.error + ? html` +
+

+ ${this.reauth + ? "Some resources are loaded on demand from Google Drive, which requires reauthorization." + : "Could not access this file with the current Google Drive account."} +

+

+ If you have multiple Google Drive accounts, be sure to + select the correct one. +

+
+
+ ` + : ""} + + `}`; } script() { - // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. | TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'. if (this.state === "trypublic" || this.scriptLoaded) { return html``; } @@ -218,9 +193,7 @@ class GDrive extends LitElement { } gauth(prompt, callback) { - // @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'. self.gapi.load("auth2", () => { - // @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'. self.gapi.auth2.authorize( { client_id: __GDRIVE_CLIENT_ID__, diff --git a/src/index.d.ts b/src/index.d.ts index 5dfb0f7..4b469dc 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -5,6 +5,9 @@ declare const __HELPER_PROXY__: string; declare const __GDRIVE_CLIENT_ID__: string; declare const __VERSION__: string; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type TODOFixMe = any; + // showOpenFilePicker doesn't yet exist in Typescript's DOM lib // see https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker for details interface Window { @@ -12,3 +15,7 @@ interface Window { types: { description: string; accept: Record }[]; }) => Promise<[FileSystemFileHandle]>; } + +interface Window { + gapi: TODOFixMe; +} diff --git a/src/item-index.ts b/src/item-index.ts index 39ed8dd..185926d 100644 --- a/src/item-index.ts +++ b/src/item-index.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { property, state } from "lit/decorators.js"; import { wrapCss, apiPrefix } from "./misc"; @@ -20,16 +20,13 @@ class ItemIndex extends LitElement { query = ""; @property({ type: Array }) - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme - filteredItems: any[] = []; + filteredItems: Item[] = []; @property({ type: Array }) - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme - sortedItems: any[] | null = null; + sortedItems: Item[] = []; @property({ type: Boolean }) - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme - hideHeader: any = null; + hideHeader: boolean = false; @property({ type: String }) dateName = "Date Loaded"; @@ -66,11 +63,11 @@ class ItemIndex extends LitElement { this.loadItems(); } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if (changedProperties.has("hideHeader")) { localStorage.setItem("index:hideHeader", this.hideHeader ? "1" : "0"); } - if (changedProperties.has("colls") || changedProperties.has("query")) { + if (changedProperties.has("items") || changedProperties.has("query")) { this.filter(); } } diff --git a/src/item.ts b/src/item.ts index e73f020..ab3d801 100644 --- a/src/item.ts +++ b/src/item.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { property } from "lit/decorators.js"; import { ref, createRef, type Ref } from "lit/directives/ref.js"; import type { @@ -51,7 +51,7 @@ import fasCaretDown from "@fortawesome/fontawesome-free/svgs/solid/caret-down.sv import { RWPEmbedReceipt } from "./embed-receipt"; import Split from "split.js"; -import type { Item as ItemInfo } from "./types"; +import type { Item as ItemType } from "./types"; import type { Replay } from "./replay"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -93,7 +93,7 @@ class Item extends LitElement { showSidebar: boolean | null = null; @property({ type: Object, attribute: false }) - itemInfo: ItemInfo | Record | null = null; + itemInfo: ItemType | Record | null = null; @property({ type: String }) item = ""; @@ -265,7 +265,7 @@ class Item extends LitElement { } } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { // if (changedProperties.has("url") || changedProperties.has("ts")) { // if (this.url.startsWith("rwp?")) { // this.tabData = Object.fromEntries(new URLSearchParams(this.url.slice(4)).entries()); diff --git a/src/loader.ts b/src/loader.ts index 73e5868..c8a5fdb 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { wrapCss } from "./misc"; import prettyBytes from "pretty-bytes"; @@ -258,7 +258,7 @@ You can select a file to upload from the main page by clicking the 'Choose File. } } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if ( (this.sourceUrl && changedProperties.has("sourceUrl")) || changedProperties.has("tryFileHandle") diff --git a/src/pageentry.ts b/src/pageentry.ts index 59e11c1..b0ece99 100644 --- a/src/pageentry.ts +++ b/src/pageentry.ts @@ -1,6 +1,6 @@ import prettyBytes from "pretty-bytes"; -import { LitElement, html, css, unsafeCSS } from "lit"; +import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit"; import { property, state } from "lit/decorators.js"; import "keyword-mark-element/lib/keyword-mark.js"; @@ -183,7 +183,7 @@ class PageEntry extends LitElement { `; } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if (changedProperties.has("page") || changedProperties.has("query")) { this.updateSnippet(); this.deleting = false; diff --git a/src/pages.ts b/src/pages.ts index dedf6f3..f1ba88a 100644 --- a/src/pages.ts +++ b/src/pages.ts @@ -165,9 +165,7 @@ class Pages extends LitElement { } const sorter = this.renderRoot.querySelector("wr-sorter") as Sorter; if (sorter) { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. sorter.sortKey = this.sortKey; - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. sorter.sortDesc = this.sortDesc; } } diff --git a/src/replay.ts b/src/replay.ts index 38f0763..51db81c 100644 --- a/src/replay.ts +++ b/src/replay.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { property } from "lit/decorators.js"; import { wrapCss, rwpLogo } from "./misc"; @@ -95,7 +95,7 @@ class Replay extends LitElement { : ""; } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if ( changedProperties.has("sourceUrl") || changedProperties.has("collInfo") diff --git a/src/sorter.ts b/src/sorter.ts index 59404f5..2c5623b 100644 --- a/src/sorter.ts +++ b/src/sorter.ts @@ -1,26 +1,28 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { wrapCss } from "./misc"; import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg"; import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg"; // =========================================================================== -class Sorter extends LitElement { +class Sorter extends LitElement { + sortedData: T[]; + data: T[]; + pageResults: number; + numResults: number; + + sortKey: string | null; + sortDesc: boolean | null; + sortKeys: { key: string; name: string }[] = []; constructor() { super(); - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? this.sortedData = []; - // @ts-expect-error - TS2339 - Property 'data' does not exist on type 'Sorter'. this.data = []; - // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. this.pageResults = 0; - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. this.numResults = 0; - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. this.sortKey = null; - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. this.sortDesc = null; } @@ -42,31 +44,25 @@ class Sorter extends LitElement { if (this.id) { const sortKey = localStorage.getItem(`${this.id}:sortKey`); if (sortKey !== null) { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. this.sortKey = sortKey; } const sortDesc = localStorage.getItem(`${this.id}:sortDesc`); if (sortDesc !== null) { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. this.sortDesc = sortDesc === "1"; } } } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { const keyChanged = changedProperties.has("sortKey"); const descChanged = changedProperties.has("sortDesc"); const dataChanged = changedProperties.has("data"); - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. if (keyChanged && this.sortKey !== null) { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. localStorage.setItem(`${this.id}:sortKey`, this.sortKey); } - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. if (descChanged && this.sortDesc !== null) { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. localStorage.setItem(`${this.id}:sortDesc`, this.sortDesc ? "1" : "0"); } @@ -76,28 +72,20 @@ class Sorter extends LitElement { } sortData() { - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'data' does not exist on type 'Sorter'. this.sortedData = [...this.data]; - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2339 - Property 'pageResults' does not exist on type 'Sorter'. this.numResults = this.pageResults; - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. - if (this.sortKey === "") { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. + if ((this.sortKey == null || this.sortKey) === "") { if (this.sortDesc) { - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? this.sortedData.reverse(); } } else { - // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? this.sortedData.sort((first, second) => { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. - if (first[this.sortKey] === second[this.sortKey]) { + if (first[this.sortKey!] === second[this.sortKey!]) { return 0; } - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. - return this.sortDesc == first[this.sortKey] < second[this.sortKey] + return this.sortDesc == first[this.sortKey!] < second[this.sortKey!] ? 1 : -1; }); @@ -108,27 +96,20 @@ class Sorter extends LitElement { sendSortChanged() { const detail = { - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. sortKey: this.sortKey, - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. sortDesc: this.sortDesc, - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. sortedData: this.numResults - ? // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'numResults' does not exist on type 'Sorter'. - this.sortedData.slice(0, this.numResults) - : // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? - this.sortedData, + ? this.sortedData.slice(0, this.numResults) + : this.sortedData, }; this.dispatchEvent(new CustomEvent("sort-changed", { detail })); } getMore(more = 100) { - // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. | TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? if (this.pageResults && this.numResults >= this.sortedData.length) { return; } - // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. this.numResults += more; this.sendSortChanged(); } @@ -149,37 +130,24 @@ class Sorter extends LitElement { return html`
`; diff --git a/src/story.ts b/src/story.ts index a362b07..2a0b588 100644 --- a/src/story.ts +++ b/src/story.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css, unsafeCSS } from "lit"; +import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit"; import { wrapCss } from "./misc"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; @@ -7,32 +7,33 @@ import { marked } from "marked"; import { getTS, getReplayLink } from "./pageutils"; import Split from "split.js"; +import { ItemInfo } from "./item-info"; // =========================================================================== class Story extends LitElement { + collInfo: ItemInfo | Record | null; + curatedPageMap: Record; + currList: number; + active: boolean; + lastST: number; + clickTime: number; + isSidebar: boolean; + splitDirection: boolean | "vertical" | "horizontal"; constructor() { super(); - // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'. this.collInfo = null; - // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. this.curatedPageMap = {}; - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. this.currList = 0; - // @ts-expect-error - TS2339 - Property 'active' does not exist on type 'Story'. this.active = false; - // @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'. this.lastST = 0; - // @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'. this.clickTime = 0; - // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'. this.isSidebar = false; - // @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'. this.splitDirection = false; } @@ -52,9 +53,7 @@ class Story extends LitElement { } recalcSplitter(width) { - // @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'. this.splitDirection = - // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'. this.isSidebar || width < 769 ? "vertical" : "horizontal"; } @@ -70,7 +69,7 @@ class Story extends LitElement { this.obs.observe(this); } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if (changedProperties.has("collInfo")) { this.doLoadCurated(); } @@ -86,10 +85,8 @@ class Story extends LitElement { this.configureSplitter(); } - // @ts-expect-error - TS2339 - Property 'active' does not exist on type 'Story'. if (changedProperties.has("currList") && this.active) { this.sendChangeEvent({ - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. currList: this.currList, }); } @@ -118,7 +115,6 @@ class Story extends LitElement { gutterSize: 4, - // @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'. direction: this.splitDirection, }; @@ -128,7 +124,6 @@ class Story extends LitElement { } async doLoadCurated() { - // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. this.curatedPageMap = {}; const pageMap = {}; @@ -140,9 +135,7 @@ class Story extends LitElement { // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'. for (const curated of this.collInfo.curatedPages) { - // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. if (!this.curatedPageMap[curated.list]) { - // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. this.curatedPageMap[curated.list] = []; } const page = curated; @@ -160,7 +153,6 @@ class Story extends LitElement { const title = page.title || page.url; const desc = curated.desc; - // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. this.curatedPageMap[curated.list].push({ url, ts, title, desc }); } @@ -275,23 +267,15 @@ class Story extends LitElement { } render() { - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. const currListNum = this.currList; return html`
- Story for - ${ - // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'. - this.collInfo.title - } + Story for ${this.collInfo!.title}
@@ -363,13 +347,9 @@ class Story extends LitElement {

${list.title}

${list.desc}

    - ${ - // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. - this.curatedPageMap[list.id] - ? // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'. - this.curatedPageMap[list.id].map((p) => this.renderCPage(p)) - : html`` - } + ${this.curatedPageMap[list.id] + ? this.curatedPageMap[list.id].map((p) => this.renderCPage(p)) + : html``}
@@ -417,7 +397,6 @@ class Story extends LitElement { onClickScroll(event) { event.preventDefault(); //this.pageView = false; - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. this.currList = Number(event.currentTarget.getAttribute("data-list")); this.scrollToList(); return false; @@ -427,12 +406,10 @@ class Story extends LitElement { // lists are 1 based, 0 is header, 1 is first list // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. | TS2339 - Property 'collInfo' does not exist on type 'Story'. if (this.currList > this.collInfo.lists.length) { - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. this.currList = 0; } const opts = { behavior: "smooth", block: "nearest", inline: "nearest" }; - // @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'. this.clickTime = new Date().getTime(); // @ts-expect-error - TS2339 - Property 'getElementById' does not exist on type 'HTMLElement | ShadowRoot'. | TS2339 - Property 'currList' does not exist on type 'Story'. const curr = this.renderRoot.getElementById("list-" + this.currList); @@ -454,7 +431,6 @@ class Story extends LitElement { const target = scrollable.offsetTop; const currST = scrollable.scrollTop; - // @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'. if (currST > this.lastST) { while ( next.nextElementSibling && @@ -470,22 +446,18 @@ class Story extends LitElement { next = next.previousElementSibling; } } - // @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'. this.lastST = currST; if (next && next != curr) { if (next.id.startsWith("list-")) { - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. this.currList = Number(next.id.slice(5)); } } - // @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'. if (new Date().getTime() - this.clickTime < 1000) { return; } const sel = this.renderRoot.querySelector( - // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. `a[data-list="${this.currList}"]`, ); if (sel) { diff --git a/src/url-resources.ts b/src/url-resources.ts index 05af595..a217a43 100644 --- a/src/url-resources.ts +++ b/src/url-resources.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, type PropertyValues } from "lit"; import { wrapCss, clickOnSpacebarPress } from "./misc"; import { getReplayLink } from "./pageutils"; @@ -6,12 +6,35 @@ import { getReplayLink } from "./pageutils"; import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg"; import "keyword-mark-element/lib/keyword-mark.js"; +import { type Item as ItemType } from "./types"; + +type URLResource = { + url: string; + mime: string; + status: string; + date: string; + ts: string; +}; // =========================================================================== /** * @prop {boolean | undefined} active */ class URLResources extends LitElement { + collInfo: ItemType | Record | null = null; + isSidebar: boolean; + currMime: string; + query: string; + urlSearchType: string; + filteredResults: URLResource[]; + sortedResults: URLResource[]; + results: URLResource[]; + newQuery: null; + tryMore: boolean; + loading: boolean; + sortKey: string; + sortDesc: boolean; + private _ival?: number; static get filters() { return [ { name: "HTML", filter: "text/html,text/xhtml" }, @@ -58,37 +81,23 @@ class URLResources extends LitElement { constructor() { super(); - // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'. - this.collInfo = null; - // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'. this.isSidebar = false; - // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'. this.currMime = ""; - // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'. this.query = ""; - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. this.urlSearchType = ""; - // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'. this.filteredResults = []; - // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'. this.sortedResults = []; - // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. this.results = []; - // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'. this.newQuery = null; - // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. this.tryMore = false; - // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'. this.loading = false; - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. this.sortKey = "url"; - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. this.sortDesc = false; } @@ -109,24 +118,19 @@ class URLResources extends LitElement { firstUpdated() { //this.doLoadResources(); - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. if (this.urlSearchType === "") { - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. this.urlSearchType = "prefix"; } } _timedUpdate() { - // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'. if (this.newQuery !== null) { - // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'. | TS2339 - Property 'newQuery' does not exist on type 'URLResources'. this.query = this.newQuery; - // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'. this.newQuery = null; } } - updated(changedProperties) { + updated(changedProperties: PropertyValues) { if ( changedProperties.has("query") || changedProperties.has("urlSearchType") || @@ -134,11 +138,8 @@ class URLResources extends LitElement { ) { this.doLoadResources(); const data = { - // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'. query: this.query, - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. urlSearchType: this.urlSearchType, - // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'. currMime: this.currMime, }; const replaceLoc = @@ -156,22 +157,16 @@ class URLResources extends LitElement { async doLoadResources(isMore = false) { const count = 100; - - // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'. if (isMore && (!this.tryMore || !this.results.length)) { return; } - // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'. if (this.loading) { return; } - // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'. this.loading = true; - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'. let url = this.urlSearchType !== "contains" ? this.query : ""; - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. const prefix = url && this.urlSearchType === "prefix" ? 1 : 0; // optimization: if not starting with http, likely won't have a match here, so just add https:// @@ -179,78 +174,60 @@ class URLResources extends LitElement { url = "https://" + url; } - // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'. const mime = this.currMime; - // @ts-expect-error - TS2345 - Argument of type '{ mime: any; url: any; prefix: number; count: number; }' is not assignable to parameter of type 'string | Record | URLSearchParams | string[][] | undefined'. const params = new URLSearchParams({ mime, url, - prefix, - count, + prefix: String(prefix), + count: String(count), }); if (isMore) { - // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'. const last = this.results[this.results.length - 1]; params.set("fromMime", last.mime); params.set("fromUrl", last.url); params.set("fromStatus", last.status); - // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'. - params.set("fromTs", new Date(last.date).getTime()); + params.set("fromTs", String(new Date(last.date).getTime())); } - let resp = await fetch( - // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'. - `${this.collInfo.apiPrefix}/urls?${params.toString()}`, + const resp = await fetch( + `${this.collInfo!.apiPrefix}/urls?${params.toString()}`, ); - resp = await resp.json(); - // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'? | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'? - this.results = isMore ? this.results.concat(resp.urls) : resp.urls; + const data = await resp.json(); + this.results = isMore ? this.results.concat(data.urls) : data.urls; // can be more than count if multiple mimes - // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'? - this.tryMore = resp.urls.length >= count; + this.tryMore = data.urls.length >= count; this.filter(); - // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'. this.loading = false; } onChangeTypeSearch(event) { - // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'. this.currMime = event.currentTarget.value; } onChangeQuery(event) { - // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'. this.newQuery = event.currentTarget.value; - // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'. if (this._ival) { - // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'. window.clearTimeout(this._ival); } - // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'. this._ival = window.setTimeout(() => this._timedUpdate(), 250); } onClickUrlType(event) { - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. this.urlSearchType = event.currentTarget.value; } filter() { - const filteredResults = []; - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'. + const filteredResults: URLResource[] = []; const filterText = this.urlSearchType === "contains" ? this.query : ""; - // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. for (const result of this.results) { if (!filterText || result.url.indexOf(filterText) >= 0) { - // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'. filteredResults.push(result); } } - // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'. this.filteredResults = filteredResults; } @@ -258,7 +235,6 @@ class URLResources extends LitElement { const element = event.currentTarget; const diff = element.scrollHeight - element.scrollTop - element.clientHeight; - // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. if (this.tryMore && diff < 40) { this.doLoadResources(true); } @@ -365,25 +341,15 @@ class URLResources extends LitElement { return html`
- URLs in - ${ - // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'. - this.collInfo.title - } + URLs in ${this.collInfo!.title}
Search and Filter @@ -398,10 +364,7 @@ class URLResources extends LitElement { (filter) => html` @@ -411,19 +374,15 @@ class URLResources extends LitElement {
 Contains @@ -452,10 +408,7 @@ class URLResources extends LitElement { type="radio" name="urltype" value="prefix" - ?checked="${ - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. - this.urlSearchType === "prefix" - }" + ?checked="${this.urlSearchType === "prefix"}" @click="${this.onClickUrlType}" /> Prefix @@ -464,10 +417,7 @@ class URLResources extends LitElement { type="radio" name="urltype" value="exact" - ?checked="${ - // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. - this.urlSearchType === "exact" - }" + ?checked="${this.urlSearchType === "exact"}" @click="${this.onClickUrlType}" /> Exact @@ -477,11 +427,7 @@ class URLResources extends LitElement { is-pulled-right aria-live="polite" aria-atomic="true" - >${ - // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'. - this.filteredResults.length - } - Result(s)${this.filteredResults.length} Result(s)
@@ -490,19 +436,10 @@ class URLResources extends LitElement {
@@ -510,10 +447,7 @@ class URLResources extends LitElement {
@@ -530,15 +464,11 @@ class URLResources extends LitElement { @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="url" - class="${ - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. - this.sortKey === "url" - ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. - this.sortDesc - ? "desc" - : "asc" - : "" - }" + class="${this.sortKey === "url" + ? this.sortDesc + ? "desc" + : "asc" + : ""}" >URL @@ -549,15 +479,11 @@ class URLResources extends LitElement { @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="ts" - class="${ - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. - this.sortKey === "ts" - ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. - this.sortDesc - ? "desc" - : "asc" - : "" - }" + class="${this.sortKey === "ts" + ? this.sortDesc + ? "desc" + : "asc" + : ""}" >Date @@ -568,15 +494,11 @@ class URLResources extends LitElement { @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="mime" - class="${ - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. - this.sortKey === "mime" - ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. - this.sortDesc - ? "desc" - : "asc" - : "" - }" + class="${this.sortKey === "mime" + ? this.sortDesc + ? "desc" + : "asc" + : ""}" >Mime Type @@ -587,15 +509,11 @@ class URLResources extends LitElement { @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="status" - class="${ - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. - this.sortKey === "status" - ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. - this.sortDesc - ? "desc" - : "asc" - : "" - }" + class="${this.sortKey === "status" + ? this.sortDesc + ? "desc" + : "asc" + : ""}" >Status @@ -603,53 +521,45 @@ class URLResources extends LitElement { - ${ - // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'. - this.sortedResults.length - ? // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'. - this.sortedResults.map( - (result) => html` - - -

URL

- html` + + +

URL

+ + ${result.url} - ${result.url} - - - -

Date

- ${new Date(result.date).toLocaleString()} - - -

Mime Type

- ${result.mime} - - -

Status

- ${result.status} - - - `, - ) - : html` - No Results Found. - ` - } + + + +

Date

+ ${new Date(result.date).toLocaleString()} + + +

Mime Type

+ ${result.mime} + + +

Status

+ ${result.status} + + + `, + ) + : html` + No Results Found. + `} `; @@ -659,24 +569,17 @@ class URLResources extends LitElement { event.preventDefault(); const key = event.currentTarget.getAttribute("data-key"); - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. if (key === this.sortKey) { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. | TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. this.sortDesc = !this.sortDesc; } else { - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. this.sortDesc = false; - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. this.sortKey = key; } } onSortChanged(event) { - // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'. this.sortedResults = event.detail.sortedData; - // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'. this.sortKey = event.detail.sortKey; - // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. this.sortDesc = event.detail.sortDesc; }