🔧 Web workers

2021-04-27 09:50:51 -07:00
parent 15dcdcfe43
commit 3a5bf12ba6
9 changed files with 48 additions and 62 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "@types/react-router-dom": "^5.1.7",
    "@types/sharp": "^0.28.0",
    "babel-polyfill": "^6.26.0",
+    "clooney": "^0.6.6",
    "express": "^4.17.1",
    "fs-extra": "^9.1.0",
    "imghash": "^0.0.8",
@@ -29,7 +30,7 @@
    "react-dom": "^17.0.1",
    "react-hooks-worker": "^1.0.0",
    "sharp": "^0.28.1",
-    "worker-plugin": "^5.0.0"
+    "worker-loader": "^3.0.8"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.10",
@@ -116,7 +117,6 @@
    "webpack": "^5.33.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3",
-    "worker-loader": "^3.0.8"
+    "webpack-merge": "^5.7.3"
  }
 }
--- a/src/client/components/Import.tsx
+++ b/src/client/components/Import.tsx
@@ -1,9 +1,7 @@
 import * as React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
-import * as Comlink from "comlink";
-import { wrap, proxy } from "comlink";
-import { useWorker } from "react-hooks-worker";
+import main from "../workers/extractCovers.worker";
 interface IProps {
  matches: unknown;
 }
@@ -12,16 +10,6 @@ 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);
@@ -37,7 +25,10 @@ class Import extends React.Component<IProps, IState> {
    });
  }

-  public async startFolderWalk() {}
+  public async startFolderWalk() {
+    const foo = await main();
+    console.log("as", foo);
+  }
  public render() {
    return (
      <div>
@@ -83,12 +74,7 @@ class Import extends React.Component<IProps, IState> {
          {/* Folder walk results */}
          {!_.isUndefined(this.state.folderWalkResults) ? (
            <>
-              <div>
-                poopie
-                <div>
-                  <CalcFib count={5} />
-                </div>
-              </div>
+              <div>poopie</div>
            </>
          ) : null}
        </section>
--- a/src/client/types/index.d.ts
+++ b/src/client/types/index.d.ts
@@ -1,8 +1,15 @@
 declare module "*.png" {
-    const value: string;
-    export = value;
+  const value: string;
+  export = value;
+}
+declare module "worker-loader!*" {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
 }

-declare module '*.jpg'
-declare module '*.gif'
-declare module '*.less'
+declare module "*.jpg";
+declare module "*.gif";
+declare module "*.less";
--- a/src/client/workers/extractCovers.worker.js
+++ b/src/client/workers/extractCovers.worker.js
@@ -1,7 +0,0 @@
-import { exposeWorker } from "react-hooks-worker";
-
-const fib = (i) => {
-  return i * 9;
-};
-
-exposeWorker(fib);
--- a/src/client/workers/extractCovers.worker.ts
+++ b/src/client/workers/extractCovers.worker.ts
@@ -0,0 +1,10 @@
+import strategy from "clooney";
+
+class Actor {
+  timeoutThing() {
+    return new Promise(resolve => setTimeout(_ => resolve('ohai'), 1000));
+  }
+}
+
+const instance = await strategy.spawn(Actor);
+alert(await instance.timeoutThing()); // Will alert() after 1 second
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
    "allowSyntheticDefaultImports": true,
    "target": "es2019",
    "jsx": "react",
-    "module": "system",
+    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist/",
    "skipLibCheck": true,
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,15 +12,15 @@ module.exports = {
  devtool: "source-map",
  module: {
    rules: [
-      {
-        test: /\.worker\.ts$/,
-        use: { loader: "worker-loader" },
-      },
      {
        test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
+      {
+        test: /\.worker\.ts$/,
+        use: { loader: "worker-loader" },
+      },

      {
        enforce: "pre",
--- a/yarn.lock
+++ b/yarn.lock
@@ -3479,6 +3479,13 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=

+clooney@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/clooney/-/clooney-0.6.6.tgz#0b480843c30dd289ee558ec8c2336dbbb3fd38cd"
+  integrity sha512-kux3thg0N+uWZXTpYbthellECgsDw8PJ3IZmiVVyuavAEb/gBbC/u0ksZ6kHpZe5YT4H1Xs3TVSIQkzUfRqi8A==
+  dependencies:
+    comlinkjs "2.3.6"
+
 cmd-shim@^4.0.1:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -3593,6 +3600,11 @@ comlink@^4.3.0:
  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.3.0.tgz#80b3366baccd87897dab3638ebfcfae28b2f87c7"
  integrity sha512-mu4KKKNuW8TvkfpW/H88HBPeILubBS6T94BdD1VWBXNXfiyqVtwUCVNO1GeNOBTsIswzsMjWlycYr+77F5b84g==

+comlinkjs@2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/comlinkjs/-/comlinkjs-2.3.6.tgz#a756c2530062af292a705372484d4e2eff47729f"
+  integrity sha512-4WDd2iMM5AhnIRgUNMLWEj3gtIfEfu+JjSPUCYAa/K5IzJRvx/JAMC5jF53Exim7d67vnkRGd0i6vx27rGF2yA==
+
 commander@^2.12.1, commander@^2.20.0, commander@^2.8.1:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -12479,13 +12491,6 @@ 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"