From 71693da70958b646ed5b38a7e3ea0fc6134b12d5 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 27 Apr 2021 13:04:53 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9B=20Workers!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Import.tsx           | 10 ++++----
 src/client/types/index.d.ts                |  8 +++++-
 src/client/workers/extractCovers.worker.ts | 30 ++++++++++++----------
 tsconfig.json                              |  3 ++-
 webpack.config.js                          |  2 +-
 5 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx
index 180ef26..f3c35d0 100644
--- a/src/client/components/Import.tsx
+++ b/src/client/components/Import.tsx
@@ -1,6 +1,9 @@
 import * as React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
+import * as Comlink from "comlink";
+import ExpensiveProcessor from "worker-loader!../workers/extractCovers.worker";
+
 interface IProps {
   matches: unknown;
 }
@@ -25,11 +28,8 @@ class Import extends React.Component<IProps, IState> {
   }
 
   public async startFolderWalk() {
-    const worker = new Worker(
-      new URL("../workers/extractCovers.worker", import.meta.url),
-    );
-
-    console.log(worker);
+    const worker = Comlink.proxy(new ExpensiveProcessor());
+    console.log(new worker());
   }
   public render() {
     return (
diff --git a/src/client/types/index.d.ts b/src/client/types/index.d.ts
index 979e686..c33c05e 100644
--- a/src/client/types/index.d.ts
+++ b/src/client/types/index.d.ts
@@ -2,11 +2,17 @@ declare module "*.png" {
   const value: string;
   export = value;
 }
+// declare module "*.worker.ts" {
+//   class ImportComicBooksWorker extends Worker {
+//     constructor();
+//   }
+//   export default ImportComicBooksWorker;
+// }
+
 declare module "worker-loader!*" {
   class WebpackWorker extends Worker {
     constructor();
   }
-
   export default WebpackWorker;
 }
 
diff --git a/src/client/workers/extractCovers.worker.ts b/src/client/workers/extractCovers.worker.ts
index 7604633..b16d897 100644
--- a/src/client/workers/extractCovers.worker.ts
+++ b/src/client/workers/extractCovers.worker.ts
@@ -1,17 +1,19 @@
+// const worker: DedicatedWorkerGlobalScope = self as any;
+
+// worker.onmessage = ({ data }) => {
+//   if (data instanceof Array) {
+//     worker.postMessage(data.join(" ") + "!");
+//   }
+// };
+
 import { expose } from "comlink";
 
-const foo = (value: string) => {
-  return "rishi" + " " + value;
-};
+class ExpensiveProcessor {
+  _foo: string;
+  /* ... async methods here ... */
+  constructor() {
+    this._foo = "rishi";
+  }
+}
 
-const bar = (value: number) => {
-  return value + 10;
-};
-
-const exported = {
-  foo,
-  bar,
-};
-
-export type Worker = typeof exported;
-expose(exported);
+expose(ExpensiveProcessor, self);
diff --git a/tsconfig.json b/tsconfig.json
index d98f066..5ed180a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,9 +5,10 @@
     "allowSyntheticDefaultImports": true,
     "target": "es2019",
     "jsx": "react",
-    "module": "esnext",
+    "module": "commonjs",
     "sourceMap": true,
     "outDir": "./dist/",
+    "noImplicitAny": true,
     "skipLibCheck": true,
     "lib": [
       "dom",
diff --git a/webpack.config.js b/webpack.config.js
index 9965faf..2ad5ea5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -62,7 +62,7 @@ module.exports = {
   },
   plugins: [
     // new CleanWebpackPlugin([outputDirectory]),
-    new WorkerPlugin(),
+    // new WorkerPlugin(),
     new HtmlWebpackPlugin({
       template: "./public/index.html",
       favicon: "./public/favicon.ico",