🔧 Fixes to web workers

package.json

@@ -27,7 +27,9 @@
     "mongoose": "^5.10.11",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "sharp": "^0.28.1"
+    "react-hooks-worker": "^1.0.0",
+    "sharp": "^0.28.1",
+    "worker-plugin": "^5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.10",

src/client/components/Import.tsx

@@ -3,6 +3,7 @@ import _ from "lodash";
 import { connect } from "react-redux";
 import * as Comlink from "comlink";
 import { wrap, proxy } from "comlink";
+import { useWorker } from "react-hooks-worker";
 interface IProps {
   matches: unknown;
 }
@@ -11,6 +12,16 @@ interface IState {
   searchPaneIndex: number;
 }
 
+const createWorker = () =>
+  // new Worker("../workers/extractCovers.worker.js", {
+  //   type: "module",
+  // });
+  new Worker(new URL("../workers/extractCovers.worker.js", import.meta.url));
+const CalcFib = ({ count }) => {
+  const con = useWorker(createWorker, count);
+  console.log(con);
+ return <div>jagnya</div>
+};
 class Import extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -26,16 +37,7 @@ class Import extends React.Component<IProps, IState> {
     });
   }
 
-  public async startFolderWalk() {
-    const multiply = wrap(
-      new Worker(
-        "http://localhost:3000/src/client/workers/extractCovers.worker.js",
-        { type: "module" },
-      ),
-    );
-    const sutarfeni = await proxy(multiply);
-    console.log("foo", sutarfeni());
-  }
+  public async startFolderWalk() {}
   public render() {
     return (
       <div>
@@ -81,7 +83,12 @@ class Import extends React.Component<IProps, IState> {
           {/* Folder walk results */}
           {!_.isUndefined(this.state.folderWalkResults) ? (
             <>
-              <div>poopie</div>
+              <div>
+                poopie
+                <div>
+                  <CalcFib count={5} />
+                </div>
+              </div>
             </>
           ) : null}
         </section>

src/client/workers/extractCovers.worker.js

@@ -1,10 +1,7 @@
-import * as Comlink from "comlink";
-// importScripts("../../../node_modules/comlink/dist/umd/comlink.js");
-// import { walkFolder } from "../actions/fileops.actions";
-console.log("asdad");
-const comicBookImportProcessor = () => {
-  // console.log(walkFolder);
-  return "foo";
+import { exposeWorker } from "react-hooks-worker";
+
+const fib = (i) => {
+  return i * 9;
 };
 
-Comlink.expose(comicBookImportProcessor);
+exposeWorker(fib);

tsconfig.json

@@ -5,7 +5,7 @@
     "allowSyntheticDefaultImports": true,
     "target": "es2019",
     "jsx": "react",
-    "module": "commonjs",
+    "module": "system",
     "sourceMap": true,
     "outDir": "./dist/",
     "skipLibCheck": true,

webpack.config.js

@@ -1,7 +1,6 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
 const outputDirectory = "dist";
 
 module.exports = {

yarn.lock

@@ -9839,6 +9839,11 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-hooks-worker@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-hooks-worker/-/react-hooks-worker-1.0.0.tgz#1f715542cf6ce151b33140c3d81716e2c7da21b9"
+  integrity sha512-N+W1SLGb4rEuuTLZCcfZaAWQScscYzd+WS7aa5eS3pXC0nL/vMbJV/HUOWS2c0cupUqDUFZqgXa+rOZM8ckdSA==
+
 react-hot-loader@^4.13.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202"
@@ -12474,6 +12479,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"