🔧 Fixing comlink

package.json

@@ -30,7 +30,8 @@
     "react-dom": "^17.0.1",
     "react-hooks-worker": "^1.0.0",
     "sharp": "^0.28.1",
-    "worker-loader": "^3.0.8"
+    "worker-loader": "^3.0.8",
+    "worker-plugin": "^5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.10",

src/client/components/Import.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
-import main from "../workers/extractCovers.worker";
 interface IProps {
   matches: unknown;
 }
@@ -26,8 +25,10 @@ class Import extends React.Component<IProps, IState> {
   }
 
   public async startFolderWalk() {
-    const foo = await main();
-    console.log("as", foo);
+    const worker = new Worker(
+      new URL("../workers/extractCovers.worker", import.meta.url),
+    );
+    console.log(worker);
   }
   public render() {
     return (

src/client/workers/extractCovers.worker.ts

@@ -1,10 +1,17 @@
-import strategy from "clooney";
+import { expose } from "comlink";
 
-class Actor {
-  timeoutThing() {
-    return new Promise(resolve => setTimeout(_ => resolve('ohai'), 1000));
-  }
-}
+const foo = (value: string) => {
+  return "rishi" + " " + value;
+};
 
-const instance = await strategy.spawn(Actor);
-alert(await instance.timeoutThing()); // Will alert() after 1 second
+const bar = (value: number) => {
+  return value + 10;
+};
+
+const exported = {
+  foo,
+  bar,
+};
+
+export type Worker = typeof exported;
+expose(exported);

src/client/workers/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+      "strict": true,
+      "target": "esnext",
+      "module": "esnext",
+      "lib": ["webworker", "esnext"],
+      "moduleResolution": "node",
+      "noUnusedLocals": true,
+      "sourceMap": true,
+      "allowJs": false,
+      "baseUrl": "."
+    }
+  }

tsconfig.json

@@ -5,13 +5,14 @@
     "allowSyntheticDefaultImports": true,
     "target": "es2019",
     "jsx": "react",
-    "module": "commonjs",
+    "module": "esnext",
     "sourceMap": true,
     "outDir": "./dist/",
     "skipLibCheck": true,
     "lib": [
-      "DOM",
-      "webworker"
+      "dom",
+      "dom.iterable",
+      "esnext"
     ]
   },
   "settings": {

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const WorkerPlugin = require("worker-plugin");
 const outputDirectory = "dist";
 
 module.exports = {
@@ -17,10 +18,10 @@ module.exports = {
         use: ["babel-loader"],
         exclude: /node_modules/,
       },
-      {
-        test: /\.worker\.ts$/,
-        use: { loader: "worker-loader" },
-      },
+      // {
+      //   test: /\.worker\.ts$/,
+      //   use: { loader: "worker-loader" },
+      // },
 
       {
         enforce: "pre",
@@ -61,6 +62,7 @@ module.exports = {
   },
   plugins: [
     // new CleanWebpackPlugin([outputDirectory]),
+    new WorkerPlugin(),
     new HtmlWebpackPlugin({
       template: "./public/index.html",
       favicon: "./public/favicon.ico",

yarn.lock

@@ -12491,6 +12491,13 @@ worker-loader@^3.0.8:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+worker-plugin@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/worker-plugin/-/worker-plugin-5.0.0.tgz#113b5fe1f4a5d6a957cecd29915bedafd70bb537"
+  integrity sha512-AXMUstURCxDD6yGam2r4E34aJg6kW85IiaeX72hi+I1cxyaMUtrvVY6sbfpGKAj5e7f68Acl62BjQF5aOOx2IQ==
+  dependencies:
+    loader-utils "^1.1.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"