Update NPM packaging, linting, and a bunch of types (#275)

Preparation for
https://github.com/webrecorder/archiveweb.page/issues/198 /
https://github.com/webrecorder/archiveweb.page/pull/199.

## Changes

- Organizes published files more cleanly, using `dist/types` folder as
the target for type declarations and sourcemaps
- Configures type field in `package.json`
- Updates ESLint & its config
  - Sets up type-informed linting rules mirroring browsertrix
- Adds a bunch of other useful eslint and eslint-typescript rules, and
applies auto-fixes to the codebase
- Cleans up a bunch of types throughout the codebase, particularly parts
of the code used by ArchiveWebPage
- Changes `ItemIndex#_deleting` from `private` to `protected` so that a
part of AWP that extends it can do so properly
- Makes a bunch of previously-implied [non-null
assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-)
explicit
- Updates `URLResource` and `ItemType` types (and renames `Item` →
`ItemType` to disambiguate from the `Item` class)
- Removes `node-sass` and replaces it with `sass-embedded` for much
quicker installs and compilation

src/pageentry.ts

@@ -8,6 +8,7 @@ import "keyword-mark-element/lib/keyword-mark.js";
 import { getReplayLink } from "./pageutils";
 
 import { wrapCss } from "./misc";
+import type { URLResource } from "./types";
 
 // ===========================================================================
 class PageEntry extends LitElement {
@@ -18,8 +19,7 @@ class PageEntry extends LitElement {
   textSnippet: string | null = "";
 
   @property({ type: Object })
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
-  page: any = null;
+  page: URLResource | null = null;
 
   @property({ type: String })
   replayPrefix = "";
@@ -191,8 +191,8 @@ class PageEntry extends LitElement {
   }
 
   render() {
-    const p = this.page;
-    const date = this.page.date;
+    const p = this.page!;
+    const date = this.page!.date;
 
     const hasSize = typeof p.size === "number";
 
@@ -231,8 +231,8 @@ class PageEntry extends LitElement {
                   @click="${this.onReplay}"
                   href="${getReplayLink(
                     "pages",
-                    this.page.url,
-                    this.page.timestamp,
+                    this.page!.url,
+                    this.page!.timestamp!,
                   )}"
                 >
                   <p class="is-size-6 has-text-weight-bold has-text-link text">
@@ -289,19 +289,23 @@ class PageEntry extends LitElement {
     return html`<img
       class="thumbnail"
       @error=${() => (this.thumbnailValid = false)}
-      src=${`${this.replayPrefix}/${this.page.timestamp}id_/urn:thumbnail:${this.page.url}`}
+      src=${`${this.replayPrefix}/${this.page!.timestamp}id_/urn:thumbnail:${
+        this.page!.url
+      }`}
       loading="lazy"
     />`;
   }
 
   private renderFavicon() {
-    if (!this.iconValid || !this.page.favIconUrl) {
+    if (!this.iconValid || !this.page!.favIconUrl) {
       return;
     }
     return html`<img
       class="favicon"
       @error=${() => (this.iconValid = false)}
-      src=${`${this.replayPrefix}/${this.page.timestamp}id_/${this.page.favIconUrl}`}
+      src=${`${this.replayPrefix}/${this.page!.timestamp}id_/${
+        this.page!.favIconUrl
+      }`}
       loading="lazy"
     />`;
   }
@@ -309,13 +313,13 @@ class PageEntry extends LitElement {
   updateSnippet() {
     const oldVal = this.textSnippet;
 
-    if (!this.query || !this.page.text) {
+    if (!this.query || !this.page!.text) {
       this.textSnippet = null;
       this.requestUpdate("textSnippet", oldVal);
       return;
     }
 
-    let textContent = this.page.text;
+    let textContent = this.page!.text;
     let query = this.query;
 
     let inx = textContent.indexOf(this.query);
@@ -351,22 +355,22 @@ class PageEntry extends LitElement {
     this.requestUpdate("textSnippet", oldVal);
   }
 
-  onReplay(event, reload = false) {
+  onReplay(event: Event, reload = false) {
     event.preventDefault();
 
     const data = {
-      url: this.page.url,
-      ts: this.page.timestamp,
+      url: this.page!.url,
+      ts: this.page!.timestamp,
     };
     this.sendChangeEvent(data, reload);
     return false;
   }
 
-  onReload(event) {
+  onReload(event: Event) {
     return this.onReplay(event, true);
   }
 
-  sendChangeEvent(data, reload) {
+  sendChangeEvent(data, reload: boolean) {
     this.dispatchEvent(
       new CustomEvent("coll-tab-nav", {
         bubbles: true,
@@ -382,7 +386,7 @@ class PageEntry extends LitElement {
   }
 
   onSendSelToggle(event) {
-    const page = this.page.id;
+    const page = this.page!.id;
     const selected = event.currentTarget.checked;
     this.dispatchEvent(
       new CustomEvent("sel-page", { detail: { page, selected } }),