🪛 Workers!

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 (

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;
 }
 

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);

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",

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",