From 25a84b29070d18f7adf1865b7e52b57178e13fb9 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 27 Apr 2021 10:51:07 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fixing=20comlink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  3 ++-
 src/client/components/Import.tsx           |  7 ++++---
 src/client/workers/extractCovers.worker.ts | 23 ++++++++++++++--------
 src/client/workers/tsconfig.json           | 13 ++++++++++++
 tsconfig.json                              |  7 ++++---
 webpack.config.js                          | 10 ++++++----
 yarn.lock                                  |  7 +++++++
 7 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 src/client/workers/tsconfig.json

diff --git a/package.json b/package.json
index 75bc906..d78ae9f 100644
--- a/package.json
+++ b/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",
diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx
index ea0ca90..abf9166 100644
--- a/src/client/components/Import.tsx
+++ b/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 (
diff --git a/src/client/workers/extractCovers.worker.ts b/src/client/workers/extractCovers.worker.ts
index f537974..7604633 100644
--- a/src/client/workers/extractCovers.worker.ts
+++ b/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);
diff --git a/src/client/workers/tsconfig.json b/src/client/workers/tsconfig.json
new file mode 100644
index 0000000..637c16a
--- /dev/null
+++ b/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": "."
+    }
+  }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index d01a1d4..d98f066 100644
--- a/tsconfig.json
+++ b/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": {
diff --git a/webpack.config.js b/webpack.config.js
index 9ce6772..be2ec5a 100644
--- a/webpack.config.js
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 6d6656e..c1a13e8 100644
--- a/yarn.lock
+++ b/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"