Wait for worker to initialize the webassembly. (#68)

* Wait for worker to initialize the webassembly.

* Format the client code.

* Fix worker message type.

* Formatting.

client/src/index.tsx

@@ -9,27 +9,46 @@ import Sign from "./routes/sign";
 
 import store from "./store";
 
+import { webWorker } from "./web-worker";
 import WebSocketProvider, { WebSocketContext } from "./websocket-provider";
 import WorkerProvider from "./worker-provider";
 
 const NotFound = () => <h3>Page not found</h3>;
 
+interface WorkerMessage {
+  data: { ready: boolean };
+}
+
 const App = () => {
   if (window.Worker) {
     // Keep connected state for automated tests
     // to determine when new tabs are connected
     const [connected, setConnected] = useState(false);
     const websocket = useContext(WebSocketContext);
+    const [workerReady, setWorkerReady] = useState(false);
+
+    const onWorkerReady = (msg: WorkerMessage) => {
+      if (msg.data.ready) {
+        setWorkerReady(true);
+        webWorker.removeEventListener("message", onWorkerReady);
+      }
+    };
 
     useEffect(() => {
+      webWorker.addEventListener("message", onWorkerReady);
+
       websocket.on("open", () => {
         setConnected(true);
       });
 
       websocket.on("close", () => {
         setConnected(false);
       });
-    });
+    }, []);
+
+    if (!workerReady) {
+      return null;
+    }
 
     return (
       <div className={connected ? "connected" : ""}>

client/src/web-worker.ts

@@ -0,0 +1,3 @@
+// Webpack did not want to import this from worker-provider in index.tsx
+// it does not recognise the import - no idea why!
+export const webWorker = new Worker(new URL("./worker.ts", import.meta.url));

client/src/worker-provider.tsx

@@ -1,14 +1,12 @@
 import React, { createContext, PropsWithChildren } from "react";
 import * as Comlink from "comlink";
+import { webWorker } from "./web-worker";
 
 const WorkerContext = createContext(null);
-export { WorkerContext };
 
 type WorkerProviderProps = PropsWithChildren<Record<string, unknown>>;
 
-const worker = Comlink.wrap(
-  new Worker(new URL("./worker.ts", import.meta.url))
-);
+const worker = Comlink.wrap(webWorker);
 
 const WorkerProvider = (props: WorkerProviderProps) => {
   return (
@@ -18,4 +16,5 @@ const WorkerProvider = (props: WorkerProviderProps) => {
   );
 };
 
+export { WorkerContext };
 export default WorkerProvider;

client/src/worker.ts

@@ -13,9 +13,12 @@ crypto.getRandomValues = function <T extends ArrayBufferView | null>(
 };
 
 console.log("Worker is initializing...");
-await init();
-//await initThreadPool(navigator.hardwareConcurrency);
-await initThreadPool(1);
+void (async function () {
+  await init();
+  //await initThreadPool(navigator.hardwareConcurrency);
+  await initThreadPool(1);
+  self.postMessage({ ready: true });
+})();
 
 Comlink.expose({
   KeyGenerator,

client/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["webworker", "dom"],
     "outDir": "./dist/",
     "noImplicitAny": true,
     "module": "esnext",
     "target": "esnext",
+    "lib": ["webworker", "dom"],
     "jsx": "react",
     "allowJs": true,
     "skipLibCheck": true,

client/webpack.config.js

@@ -45,6 +45,6 @@ module.exports = {
   experiments: {
     //syncWebAssembly: true,
     asyncWebAssembly: true,
-    topLevelAwait: true,
+    //topLevelAwait: true,
   },
 };