update deps

package.json

@@ -9,15 +9,16 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
+    "@jridgewell/sourcemap-codec": "^1.4.14",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^8.0.0",
     "@tsconfig/svelte": "^2.0.1",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.49.0",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",

rollup.config.ts

@@ -2,7 +2,7 @@ import svelte from "rollup-plugin-svelte";
 import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import livereload from "rollup-plugin-livereload";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import sveltePreprocess from "svelte-preprocess";
 import typescript from "@rollup/plugin-typescript";
 import css from "rollup-plugin-css-only";

src/App.svelte

@@ -6,11 +6,23 @@
 
   const LUOXU_URL = "https://lab.lilydjwg.me/luoxu";
   const islocal = LUOXU_URL.startsWith("http://localhost");
-  let groups = [];
+  let groups: { group_id: string; name: string }[] = [];
   let group: string;
   let query: string;
   let error: string;
-  let result: { messages: string | any[]; has_more: any; groupinfo: any };
+  let result: {
+    messages: {
+      from_name: string;
+      t;
+      edited;
+      group_id: string;
+      id: string;
+      from_id: string;
+      html: string;
+    }[];
+    has_more: boolean;
+    groupinfo: string[][];
+  };
   let now = new Date();
   let loading = false;
   let need_update_title = false;
@@ -49,7 +61,7 @@
   $: {
     // only update title on hash change (doing a search)
     if (need_update_title && groups) {
-      let group_name: any;
+      let group_name: string;
       for (const g of groups) {
         if (g.group_id === group) {
           group_name = g.name;
@@ -91,7 +103,7 @@
     }
   }
 
-  async function do_search(more?: any) {
+  async function do_search(more?: HTMLMouseEventHandler<HTMLButtonElement>) {
     abort.abort();
     abort = new AbortController();
     if (!group && !islocal) {
@@ -133,7 +145,7 @@
     now = new Date();
     loading = true;
     try {
-      const res = await fetch(url, {signal: abort.signal});
+      const res = await fetch(url, { signal: abort.signal });
       const r = await res.json();
       loading = false;
       if (abort.signal.aborted) {
@@ -200,7 +212,7 @@
       }}
     />
     <Name {group} bind:selected={sender} {selected_init} />
-    <button on:click={() => do_search()}>搜索</button>
+    <button on:click={do_search}>搜索</button>
   </div>
 
   {#if result}

src/Message.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
   import { onMount, getContext } from "svelte";
 
-  export let msg: any;
-  export let groupinfo: any;
-  export let now: any;
+  export let msg: {
+    from_name: string;
+    t;
+    edited;
+    group_id: string;
+    id: string;
+    from_id: string;
+    html: string;
+  };
+  export let groupinfo: string[][];
+  export let now: Date;
 
   const formatter = new Intl.DateTimeFormat(undefined, {
     timeStyle: "full",
@@ -33,13 +41,16 @@
     };
 
     const rtf = new Intl.RelativeTimeFormat();
-    //@ts-ignore
-    const elapsed = d1 - d2; //https://stackoverflow.com/a/4944782/13040423
+    // https://stackoverflow.com/a/60688789
+    const elapsed = d1.valueOf() - d2.valueOf();
 
     for (const [u, period] of Object.entries(units)) {
       if (Math.abs(elapsed) > period || u === "second") {
-        //@ts-ignore
-        return rtf.format(Math.round(elapsed / period), u);
+        // https://stackoverflow.com/a/64972112
+        return rtf.format(
+          Math.round(elapsed / period),
+          u as Intl.RelativeTimeFormatUnit
+        );
       }
     }
   }

src/Name.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { onMount, getContext } from "svelte";
 
-  export let group: any;
+  export let group: string;
 
-  export let selected: any;
-  export let selected_init: any;
+  export let selected: string;
+  export let selected_init: string;
   let selected_name = "";
   let selected_idx: number;
 
-  let to: string | number | NodeJS.Timeout;
+  let to: NodeJS.Timeout;
   let names = [];
   let url = getContext("LUOXU_URL");
   let input: HTMLInputElement;
@@ -61,15 +61,15 @@
     }
   }
 
-  function select_by_click(e: any) {
-    let el = e.target;
+  function select_by_click(e: MouseEvent) {
+    let el = e.target as HTMLElement;
     if (el.tagName === "IMG") {
-      el = el.parentNode;
+      el = el.parentNode as HTMLElement;
     }
     if (el.tagName != "LI") {
       return;
     }
-    selected_idx = el.dataset.idx | 0;
+    selected_idx = parseInt(el.dataset.idx);
     select_confirmed();
     input.focus();
     should_hide = true;
@@ -144,17 +144,17 @@
     alt=""
     src="{url}/avatar/{selected ? selected : 'nobody'}.jpg"
   />
-  <ul
-    bind:this={ul}
+  <ul bind:this={ul}>
+    <button
       on:click={select_by_click}
       on:mousedown|preventDefault={() => {}}
       class:hidden={names.length === 0 || should_hide}
-  >
-    {#each names as name, i (name)}
+      >{#each names as name, i (name)}
         <li data-idx={i} class:selected={i === selected_idx} title={name[1]}>
           <img src="{url}/avatar/{name[0]}.jpg" alt="avatar" />{name[1]}
         </li>
       {/each}
+    </button>
   </ul>
 </div>
 

tsconfig.json

@@ -1,6 +1,16 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+  "compilerOptions": {
+    "lib": [
+      "ES2020",
+      "DOM"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules/*",
+    "__sapper__/*",
+    "public/*"
+  ]
 }