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/item-info.ts

@@ -4,14 +4,14 @@ import { wrapCss } from "./misc";
 import { map } from "lit/directives/map.js";
 import prettyBytes from "pretty-bytes";
 
-import type { Item } from "./types";
+import type { ItemType } from "./types";
 
 import "./components/labeled-field";
 
 // ===========================================================================
 class ItemInfo extends LitElement {
   @property({ type: Object })
-  item!: Item | Record<string, never>;
+  item: ItemType | Record<string, never> | null = null;
 
   @property({ type: Boolean })
   detailed = false;
@@ -90,31 +90,31 @@ class ItemInfo extends LitElement {
     return html`
       <wr-labeled-field
         label="Source"
-        copy="${item.sourceUrl}"
+        copy="${item!.sourceUrl}"
         class="column is-4"
-        >${item.sourceUrl &&
-        (item.sourceUrl.startsWith("http://") ||
-          item.sourceUrl.startsWith("https://"))
-          ? html` <a href="${item.sourceUrl}">${item.sourceUrl}</a> `
-          : html` ${item.sourceUrl}`}
-        ${item.sourceUrl && item.sourceUrl.startsWith("googledrive://")
-          ? html` <i>(${item.filename})</i>`
+        >${item!.sourceUrl &&
+        (item!.sourceUrl.startsWith("http://") ||
+          item!.sourceUrl.startsWith("https://"))
+          ? html` <a href="${item!.sourceUrl}">${item!.sourceUrl}</a> `
+          : html` ${item!.sourceUrl}`}
+        ${item!.sourceUrl && item!.sourceUrl.startsWith("googledrive://")
+          ? html` <i>(${item!.filename})</i>`
           : nothing}
       </wr-labeled-field>
       ${showItemID
         ? html`<wr-labeled-field
             label="Archived Item ID"
-            .copy=${item.coll}
+            .copy=${item!.coll}
             class="column"
           >
-            ${item.coll || "No ID"}
+            ${item!.coll || "No ID"}
           </wr-labeled-field>`
         : nothing}
       <wr-labeled-field label="Date Loaded" class="column is-2">
-        ${item.ctime ? new Date(item.ctime).toLocaleString() : nothing}
+        ${item!.ctime ? new Date(item!.ctime).toLocaleString() : nothing}
       </wr-labeled-field>
       <wr-labeled-field label="Total Size" class="column is-2">
-        ${prettyBytes(Number(item.totalSize || item.size || 0))}
+        ${prettyBytes(Number(item!.totalSize || item!.size || 0))}
       </wr-labeled-field>
     `;
   }
@@ -125,8 +125,8 @@ class ItemInfo extends LitElement {
     return html` <div class="columns">
       <div class="column col-title is-4">
         <span class="subtitle has-text-weight-bold">
-          <a href="?source=${encodeURIComponent(item.sourceUrl)}"
-            >${item.name || item.title || item.filename}</a
+          <a href="?source=${encodeURIComponent(item!.sourceUrl)}"
+            >${item!.name || item!.title || item!.filename}</a
           >
         </span>
       </div>
@@ -145,26 +145,26 @@ class ItemInfo extends LitElement {
       datapackageHash,
       publicKey,
       software,
-    } = this.item.verify || {};
+    } = this.item!.verify || {};
 
     const certFingerprintUrl = certFingerprint
       ? `https://crt.sh/?q=${certFingerprint}`
       : "";
 
     return html` <div class="columns">
-      ${item.name || item.title
+      ${item!.name || item!.title
         ? html`<wr-labeled-field label="Title" class="column">
-            ${item.name || item.title}
+            ${item!.name || item!.title}
           </wr-labeled-field>`
         : nothing}
       <wr-labeled-field label="Filename" class="column">
-        ${item.filename}
+        ${item!.filename}
       </wr-labeled-field>
-      ${item.resources
+      ${item!.resources
         ? html`<wr-labeled-field label="Files" class="column">
             <ol style="padding: revert">
               ${map(
-                item.resources,
+                item!.resources,
                 (resource) =>
                   html`<li>
                     <a href="${resource.path}">${resource.name + "\n"}</a>
@@ -222,7 +222,7 @@ class ItemInfo extends LitElement {
       </wr-labeled-field>
 
       <wr-labeled-field label="Loading Mode" class="column">
-        ${item.onDemand ? "Download On-Demand" : "Fully Local"}
+        ${item!.onDemand ? "Download On-Demand" : "Fully Local"}
       </wr-labeled-field>
     </div>`;
   }