Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TypeScript documentation #40

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
71 changes: 54 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,87 @@

> A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

- Bundles a tiny, purpose-built RPC implementation into your app
- If exported module methods are already async, signature is unchanged
- Supports synchronous and asynchronous worker functions
- Works beautifully with async/await
- Imported value is instantiable, just a decorated `Worker`

* Bundles a tiny, purpose-built RPC implementation into your app
* If exported module methods are already async, signature is unchanged
* Supports synchronous and asynchronous worker functions
* Works beautifully with async/await
* Imported value is instantiable, just a decorated `Worker`

## Install

```sh
npm install -D workerize-loader
```


### Usage

**worker.js**:

```js
// block for `time` ms, then return the number of loops we could run in that time:
export function expensive(time) {
let start = Date.now(),
count = 0
while (Date.now() - start < time) count++
return count
let start = Date.now(),
count = 0;
while (Date.now() - start < time) count++;
return count;
}
```

**index.js**: _(our demo)_

```js
import worker from 'workerize-loader!./worker'
import worker from "workerize-loader!./worker";

let instance = worker() // `new` is optional
let instance = worker(); // `new` is optional

instance.expensive(1000).then( count => {
console.log(`Ran ${count} loops`)
})
instance.expensive(1000).then(count => {
console.log(`Ran ${count} loops`);
});
```

### About [TypeScript](http://typescriptlang.org)

If you're using [TypeScript](http://typescriptlang.org) in your build you have to modify your
webpack configuration as follows:

```js
module: {
rules: [
{
test: /\.worker\.ts$/,
use: ['workerize-loader', 'ts-loader'],
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this correct? ts-loader should already be getting applied via line 59.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this solutions not work for me

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this correct? ts-loader should already be getting applied via line 59.

I'm guessing that the purpose here is to ensure that .worker.ts are chained through ts-loader and then workerize-loader?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest I can't remember. It's over one year ago when I opened that pull request 😅 The only thing I can remember is that I had some issues and I copy and pasted my solution into this pull request and it worked.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the solution in your pr work for you? I'm thinking of taking it for a spin (I happened upon this in the first place as I'm planning to use web workers with TypeScript and webpack)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last time when I played around with that was 1 year ago. So I don't know if it still works 🤷‍♂️

},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
```

After that you can import your loaders with following syntax:

```ts
import * as myWorker from "./workers/my.worker";

const { expensive } = (myWorker as any)() as typeof myWorker;
await expensive(1000);
```

**Important**: Don't forget to mark every exported worker function as `async`

```ts
export async function expensive(time: number) {}
```

**Note**: If you are getting errors in your build like `Module build failed: Error: Typescript emitted no output`
try to set the compiler flag `noEmitOnError` to `false`.

### About [Babel](https://babeljs.io/)

If you're using [Babel](https://babeljs.io/) in your build, make sure you disabled commonJS transform. Otherwize, workerize-loader won't be able to retrieve the list of exported function from your worker script :

```js
{
test: /\.js$/,
Expand All @@ -68,7 +106,6 @@ If you're using [Babel](https://babeljs.io/) in your build, make sure you disabl

The inner workings here are heavily inspired by [worker-loader](https://github.com/webpack-contrib/worker-loader). It's worth a read!


### License

[MIT License](https://oss.ninja/mit/developit) © [Jason Miller](https://jasonformat.com)