add MCLA loading progress (#190)

* add MCLA loading progress
fix most tsc problems
resolve Vue warn "Missing required prop *"

* ignore TS2353 so far, wait for T-miracle/vitepress-plugin-comment-with-giscus#10

* format code

.eslintrc

@@ -25,8 +25,5 @@
   },
   "env": {
     "browser": true
-  },
-  "globals": {
-    "umami": "readonly"
   }
 }

.github/workflows/pr-check.yml

@@ -1,4 +1,4 @@
-name: GitHub CI Check for PR
+name: GitHub Pages for PR
 
 on: [pull_request]
 

docs/.vitepress/analyzers/mcla.ts

@@ -1,3 +1,4 @@
+import type { Ref } from "vue"
 import { useCDN } from "../cdn"
 
 export {
@@ -112,9 +113,10 @@ type promiseSolver = (res: any) => void
 
 class MCLAWorker implements MCLAAPI {
   private readonly worker: Worker
-  private _version: string
+  private _version?: string
   private pendings: Map<number, promiseSolver[]>
   private readonly registry: FinalizationRegistry<number>
+  private loadProgressWatcher?: (percent: number) => void
 
   constructor(worker: Worker) {
     this.worker = worker
@@ -136,7 +138,7 @@ class MCLAWorker implements MCLAAPI {
   }
 
   get version(): string {
-    return this._version
+    return this._version || ""
   }
 
   private ask(data: any): Promise<any> {
@@ -149,20 +151,30 @@ class MCLAWorker implements MCLAAPI {
     })
     this.worker.postMessage({
       ...data,
-      _id: i,
+      __id: i,
     })
     return p
   }
 
-  private onmsg(event) {
+  private onmsg(event: MessageEvent) {
     const { data } = event
-    const re = this.pendings.get(data._id)
-    if (re) {
-      this.pendings.delete(data._id)
-      if (data._error) {
-        re[1](data._error)
-      } else {
-        re[0](data)
+    switch (data.type) {
+      case "reply": {
+        const re = this.pendings.get(data.id)
+        if (re) {
+          this.pendings.delete(data.id)
+          if (data.error) {
+            re[1](data.error)
+          } else {
+            re[0](data)
+          }
+        }
+        break
+      }
+      case "load-progress": {
+        if (this.loadProgressWatcher) {
+          this.loadProgressWatcher(data.percent as number)
+        }
       }
     }
   }
@@ -195,7 +207,7 @@ class MCLAWorker implements MCLAAPI {
           return obj
         }
         if (res.__worker_function) {
-          const fn = async (...args): Promise<any> => {
+          const fn = async (...args: any[]): Promise<any> => {
             return (
               await this.ask({
                 type: "callObj",
@@ -207,7 +219,7 @@ class MCLAWorker implements MCLAAPI {
           this.registry.register(fn, res.ptr)
           return fn
         }
-        const obj = new Object()
+        const obj: { [key: string | symbol]: any } = {}
         for (const k of Reflect.ownKeys(res)) {
           obj[k] = this.unwrapObj(res[k])
         }
@@ -217,7 +229,7 @@ class MCLAWorker implements MCLAAPI {
     throw new Error("Unexpected type of res: " + typeof res)
   }
 
-  private async call(name: string, ...args): Promise<any> {
+  private async call(name: string, ...args: any[]): Promise<any> {
     return this.unwrapObj(
       (
         await this.ask({
@@ -233,6 +245,12 @@ class MCLAWorker implements MCLAAPI {
     this.call("release")
   }
 
+  private watchLoadProgress(loadProgress: Ref<number>): void {
+    this.loadProgressWatcher = (percent: number) => {
+      loadProgress.value = percent
+    }
+  }
+
   parseCrashReport(log: readable): Promise<CrashReport> {
     return this.call("parseCrashReport", log)
   }
@@ -253,19 +271,28 @@ class MCLAWorker implements MCLAAPI {
     return iterator
   }
 
-  static async createFromWorker(worker: Worker): Promise<MCLAWorker> {
+  static async createFromWorker(
+    worker: Worker,
+    loadProgress?: Ref<number>,
+  ): Promise<MCLAWorker> {
     const w = new MCLAWorker(worker)
+    console.log("Loading MCLA in worker ...")
+    if (loadProgress) {
+      w.watchLoadProgress(loadProgress)
+    }
     await w.init()
     return w
   }
 }
 
-async function loadMCLAWorker(): Promise<MCLAAPI> {
-  return MCLAWorker.createFromWorker(
-    new Worker("/scripts/mcla_worker.js", {
+async function loadMCLAWorker(loadProgress?: Ref<number>): Promise<MCLAAPI> {
+  const worker = MCLAWorker.createFromWorker(
+    new Worker(new URL("../workers/mcla.worker.ts", import.meta.url), {
       type: "classic",
     }),
+    loadProgress,
   )
+  return worker
 }
 
 interface containsGoCls {
@@ -276,15 +303,17 @@ interface containsMCLAIns {
   MCLA: MCLAAPI | undefined
 }
 
-async function loadMCLA(): Promise<MCLAAPI> {
+async function loadMCLA(loadProgress?: Ref<number>): Promise<MCLAAPI> {
   if (window.Worker) {
     try {
-      return loadMCLAWorker()
+      return loadMCLAWorker(loadProgress)
     } catch (e) {
       // if cannot load by worker, try load inside the window
     }
   }
 
+  console.log("Loading MCLA ...")
+
   await import(GO_WASM_EXEC_URL /* @vite-ignore */) // set variable `window.Go`
 
   const go = new (window as any as containsGoCls).Go()
@@ -301,13 +330,11 @@ async function loadMCLA(): Promise<MCLAAPI> {
   }
   go.run(res.instance)
   // the global variable MCLA cannot be defined instantly, so we have to poll it
-  function waitMCLA(): Promise<void> {
-    if ((window as any as containsMCLAIns).MCLA) {
-      return
-    }
-    return new Promise((re) => setTimeout(re, 10)) // sleep 10ms
-      .then(waitMCLA)
+  const waitMCLA = (): MCLAAPI | Promise<MCLAAPI> => {
+    return (
+      (window as any as containsMCLAIns).MCLA ||
+      new Promise((re) => setTimeout(re, 10)).then(waitMCLA)
+    )
   }
-  await waitMCLA()
-  return (window as any as containsMCLAIns).MCLA
+  return await waitMCLA()
 }

docs/.vitepress/auth/github.ts

@@ -58,7 +58,7 @@ async function onAuthDone(): Promise<string | null> {
   }
   var state: StateI
   try {
-    state = JSON.parse(cookies.get(GH_OAUTH_STATE_NAME))
+    state = JSON.parse(cookies.get(GH_OAUTH_STATE_NAME) as string)
   } catch (err) {
     console.debug("Could not parse cookie", GH_OAUTH_STATE_NAME, err)
     return null
@@ -74,7 +74,7 @@ async function onAuthDone(): Promise<string | null> {
       withCredentials: true,
     })
     const data = new URLSearchParams(resp.data)
-    token = data.get("access_token")
+    token = data.get("access_token") as string
   } catch (err) {
     console.error("auth failed:", err)
     return null

docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
-import { withPwa } from "@vite-pwa/vitepress"
 import process from "node:process"
 import { defineConfig } from "vitepress"
+import { withPwa } from "@vite-pwa/vitepress"
 import { pwa } from "./scripts/pwa"
 
 const COMMIT_ID = process.env.CF_PAGES_COMMIT_SHA || "local"
@@ -188,6 +188,6 @@ export default withPwa(
       ],
     ],
 
-    pwa,
+    pwa: pwa,
   }),
 )