add the code, still missing tests, update README

Author: pocesar

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist/*
+coverage
+.rts2*

.npmignore

@@ -0,0 +1,11 @@
+__tests__
+node_modules
+example
+src
+jest.config.js
+.travis.yml
+tsconfig.json
+tslint.json
+coverage
+.rts2*
+!dist/react-use-comlink.d.ts

.travis.yml

@@ -0,0 +1,172 @@
+[![NPM](https://nodei.co/npm/react-use-comlink.svg?downloads=true)](https://nodei.co/npm/react-use-comlink/)
+[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
+
+# react-use-comlink
+
+Three ways to use [Comlink](https://github.com/GoogleChromeLabs/comlink) web workers through React Hooks (and in a typesafe manner).
+
+## Usage
+
+```tsx
+// worker.ts
+import { expose } from 'comlink'
+
+export class MyClass {
+  private _counter: number
+
+  constructor(init: number) {
+    this._counter = init
+  }
+
+  get counter() {
+    return this._counter
+  }
+
+  increment(delta = 1) {
+    this._counter += delta
+  }
+}
+
+expose(MyClass)
+```
+
+```tsx
+// index.ts
+import React from 'react'
+import useComlink from 'react-use-comlink'
+import { WorkerClass } from './worker'
+
+const App: React.FC<{startAt: number}> = (props) => {
+  const [state, setState] = React.useState(0)
+
+  const { proxy } = useComlink<typeof WorkerClass>(
+    () => {
+      return new Worker('./worker.ts')
+    },
+    [ props.someDep ]
+  )
+
+  React.useEffect(() => {
+    (async () => {
+      // methods, constructors and setters are async
+      const classInstance = await new proxy(0)
+
+      await classInstance.increment(1)
+
+      // even getters are asynchronous, regardless of type
+      setState(await classInstance.counter)
+    })()
+  }, [proxy])
+
+  return (
+    <div>{state}</div>
+  )
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)
+```
+
+Also notice that the `worker` property is also exposed, so you may use the library directly with workers without having to use Comlink (kinda defeats the purpose, but oh well):
+
+```tsx
+const App = () => {
+  const { worker } = useComlink('./worker.js')
+
+  useEffect(() => {
+    worker.onmessage = (e) => {
+      /*do stuff*/
+    }
+
+    worker.onerror = (e) => {
+      /*do stuff*/
+    }
+  }, [worker])
+
+  const callback = useCallback(() => {
+    worker.postMessage('wow')
+  }, [worker])
+
+  return (<button onClick={callback}>Post WOW</button>)
+}
+```
+
+## API
+
+The api is pretty straightforward, you have the _in loco_ `useComlink`, the factory counter part `createComlink` and the singleton counter part `createComlinkSingleton`.
+
+### `useComlink<T = unknown>(initWorker: Blob | string | () => Worker | string | Blob, deps: any[]): { proxy<T>, worker }`
+
+Use directly inside components. Both object and properties are memoized and can be used as deps.
+
+```tsx
+const MyComponent: React.FC = () => {
+  const { proxy, worker } = useComlink(() => new Worker('./worker.js'), [deps])
+}
+```
+
+### `createComlink<T = unknown>(initWorker: () => Worker | string | Blob, options = {}): () => { proxy<T>, worker }`
+
+Creates a factory version that can spawn multiple workers with the same settings
+
+```tsx
+// outside, just like react-cache, createResource
+const useNumber = createComlink<number>(
+  () => new Worker('worker.js')
+)
+
+const MyComponent: React.FC = () => {
+  const { proxy, worker } = useNumber() // call like a hook
+
+  useEffect(() => {
+    (async () => {
+      const number = await proxy
+      // use number
+    })()
+  }, [proxy])
+
+  return null
+}
+```
+
+### `createComlinkSingleton<T = unknown>(initWorker: Worker, options: WorkerOptions = {}): () => { proxy<T>, worker }`
+
+If you want to keep the same state between multiple components, be my guest. Not the best choice for modularity, but hey, I just make the tools. Notice that the worker is never terminated, and must be done on demand (on `worker.terminate()`)
+
+```tsx
+const useSingleton = createComlinkSingleton<() => Bad>(new Worker('./bad.idea.worker.js'))
+
+const MyComponent: React.FC = () => {
+  const { proxy } = useSingleton()
+
+  useEffect(() => {
+    (async () => {
+      const isBad = await proxy()
+    })()
+  }, [proxy])
+
+  return null
+}
+```
+
+## Comlink
+
+Make sure the read the Comlink documentation, being the most important part what can be [structure cloned](https://github.com/GoogleChromeLabs/comlink#comlinktransfervalue-transferables-and-comlinkproxyvalue)
+
+## Caveats
+
+Every function with Comlink is async (because you're basically communicating to another thread through web workers), even class instantiation (using new), so local state can't be retrieved automatically from the exposed class, object or function, having to resort to wrapping some code with self invoking `async` functions, or relying on `.then()`. If your render depends on the external worker result, you'll have to think of an intermediate state.
+
+Although the worker will be terminated when the component is unmounted, your code might try to "set" the state of an unmounted component because of how workers work (:P) on their own separate thread in a truly async manner.
+
+In the future, when `react-cache` and Concurrent Mode is upon us, this library will be updated to work nicely with Suspense and the async nature of Comlink
+
+## TODO
+
+Write tests (hardcore web workers tests)
+
+## License
+
+MIT

README.md

@@ -0,0 +1,3 @@
+node_modules
+dist
+.cache

example/.gitignore

@@ -0,0 +1,19 @@
+import { expose } from 'comlink'
+
+export class MyClass {
+  private _counter: number
+
+  constructor(init: number) {
+    this._counter = init
+  }
+
+  get counter() {
+    return this._counter
+  }
+
+  increment(delta = 1) {
+    this._counter += delta
+  }
+}
+
+expose(MyClass)

example/1.worker.ts

@@ -0,0 +1,15 @@
+import { expose } from 'comlink'
+
+/** even though we have "global state" here, it's per worker, not per file */
+let globalState /* bad idea */ = 0;
+
+export const myObj = {
+  hello: 'world',
+  inc() {
+    // bad idea 2
+    globalState++
+    return globalState
+  }
+}
+
+expose(myObj)

example/2.worker.ts

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>react-use-comlink</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

example/index.html

@@ -0,0 +1,122 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react'
+import ReactDOM from 'react-dom'
+import { MyClass } from './1.worker'
+import { myObj } from './2.worker'
+import useComlink, { createComlink, createComlinkSingleton } from '../src/react-use-comlink'
+
+const useMyClass = createComlink<typeof MyClass>(
+  () => new Worker('./1.worker.ts'),
+)
+
+const Main: React.FC<{ startAt: number }> = (props) => {
+  const [counter, setCounter] = useState(0)
+  const [unmounted, setUnmounted] = useState(false)
+
+  const myclass = useMyClass()
+  const instance = useMemo(() => {
+    return new myclass.proxy(props.startAt)
+  }, [myclass, props.startAt])
+
+  const cb = useCallback(async () => {
+    const use = await instance
+    await use.increment(1)
+    setCounter(await use.counter)
+  }, [instance, setCounter])
+
+  const toggleUnmount = useCallback(() => {
+    setUnmounted((state) => !state)
+  }, [setUnmounted])
+
+  return (
+    <div>
+      <p>Counter: {counter}</p>
+      <button onClick={cb}>Increase from Comlink</button>
+      <hr />
+      {unmounted ? null : <Sub />}
+      <hr />
+      {/* <Sub /> */}
+      <hr />
+      <button onClick={toggleUnmount}>{unmounted ? 'Mount Sub' : 'Unmount Sub'}</button>
+    </div>
+  )
+}
+
+/**
+ * initialize a hook from your worker class.
+ * it doesn't actually import MyClass from worker.js, but only the defitions
+ * when you're using Typescript! So your code is still strongly typed
+ *
+ * This is important for performance so the `new Worker()` isn't eagerly
+ * evaluated on every render, like it happens with
+ *
+ *    useComlink(new Worker('./worker.js')) // created every render
+ *
+ * best to be
+ *
+ *    const myWorker = new Worker('./worker') // outside
+ *
+ *    const App = () => {
+ *      useComlink(myWorker)
+ *    }
+ */
+const useObj = createComlinkSingleton<typeof myObj>(new Worker('./2.worker.ts'))
+
+const Sub: React.FunctionComponent = () => {
+  const [state, setState] = useState({ globalcount: 0, localcount: 0 })
+  const directly = useComlink<typeof myObj>(
+    () => {
+      return new Worker('./2.worker.ts')
+    }
+  )
+
+  const globalObj = useObj()
+
+  const incCounts = async () => {
+    const localcount = await directly.proxy.inc()
+
+    setState((prevState) => {
+      return { ...prevState, localcount }
+    })
+  }
+
+  useEffect(() => {
+    incCounts()
+  }, [directly, setState])
+
+  useEffect(() => {
+    (async () => {
+      const globalcount = await globalObj.proxy.inc()
+
+      setState((prevState) => {
+        return { ...prevState, globalcount }
+      })
+    })()
+  }, [globalObj, setState])
+
+  const cb = useCallback(() => {
+    incCounts()
+  }, [directly])
+
+  return (
+    <div>
+      <button onClick={cb}>Increase local</button>
+      <p>Global worker instance count: {state.globalcount}</p>
+      <p>Local worker instance count: {state.localcount}</p>
+    </div>
+  )
+}
+
+const App: React.FunctionComponent = () => {
+  return (
+    <React.StrictMode>
+      <React.Suspense fallback={<p>Loading</p>}>
+        <Main startAt={0} />
+      </React.Suspense>
+    </React.StrictMode>
+  )
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root'),
+)