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 support for WebWorker with worker-loader (#3660) #3934

Closed
wants to merge 1 commit into from

Conversation

iansu
Copy link
Contributor

@iansu iansu commented Jan 29, 2018

Use worker-loader to turn any file that ends with .worker.js into a WebWorker.

Closes #3660

Here is the sample WebWorker code I used to test this:

// hello.worker.js

let helloInterval;

const sayHello = () => {
  self.postMessage({ message: 'Hello' });
};

self.addEventListener('message', event => {
  if (event.data.run === true) {
    self.postMessage({ status: 'Worker started' });
    helloInterval = setInterval(sayHello, 1000);
  }

  if (event.data.run === false) {
    self.postMessage({ status: 'Worker stopped' });
    clearInterval(helloInterval);
  }
});
// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import HelloWorker from './hello.worker.js';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

const helloWorker = new HelloWorker();
let messageCount = 0;

helloWorker.postMessage({ run: true });

helloWorker.onmessage = event => {
  if (event.data.status) {
    console.log('STATUS', event.data.status);
  }

  if (event.data.message) {
    messageCount += 1;
    console.log('MESSAGE', event.data.message);

    if (messageCount >= 5) {
      helloWorker.postMessage({ run: false });
    }
  }

}

@imranismail
Copy link

This looks good to be merged. I hope we can use this soon to fix janks 👍

@veekas
Copy link

veekas commented Mar 7, 2018

Awesome. Looking forward to this getting merged!

@gpolyn
Copy link

gpolyn commented May 1, 2018

Nice!

Might be helpful to include notes on use-case, including limitations. As examples,

  • handling overlapping tasks for multiple workers, or one or more workers per component and one or more components rendered
  • worker termination, e.g., per task or on unmount?

These are questions I have, at least.

@packetstracer
Copy link

Cool, the changes work in my current project perfectly @iansu, looking forward to this being merged

@@ -213,6 +213,32 @@ module.exports = {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process WebWorkder JS with Babel.
Copy link

Choose a reason for hiding this comment

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

Typo. WebWorkers

@dijs
Copy link

dijs commented Aug 5, 2018

What is holding this back? Seems like a beautiful solution.

@brettimus
Copy link

If there are any loose ends (documentation, etc), I’d be happy to help! Really wanna try this out

@mariusheine
Copy link

Nice feature. It did exactly what i needed.

By the way: Would be great to have something like a workerTransform to be able to test web workers in their surrounding with jest. I have not much experience with webpack, babel and jest but i build some simple dirty stuff:
webpack-config.zip

Maybe you could use it to get an idea of what i mean.

@haywirez
Copy link

Waiting for this also 🤞

@barrymichaeldoyle
Copy link

Looking forward to having this PR resolved and merged 🥇

@gaearon gaearon closed this Nov 1, 2018
@lock lock bot locked and limited conversation to collaborators Jan 18, 2019
@iansu iansu deleted the webworker branch October 18, 2019 05:52
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.