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
base: next
from

Conversation

Projects
None yet
@iansu
Collaborator

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

This comment has been minimized.

imranismail commented Feb 28, 2018

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

@veekas

This comment has been minimized.

veekas commented Mar 7, 2018

Awesome. Looking forward to this getting merged!

@gpolyn

This comment has been minimized.

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

This comment has been minimized.

packetstracer commented Jun 5, 2018

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

@iansu iansu force-pushed the iansu:webworker branch from 1aa1a16 to 2ec7eaa Jun 10, 2018

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

This comment has been minimized.

@dijs

dijs Aug 5, 2018

Typo. WebWorkers

@dijs

This comment has been minimized.

dijs commented Aug 5, 2018

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

@brettimus

This comment has been minimized.

brettimus commented Aug 19, 2018

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

@mariusheine

This comment has been minimized.

mariusheine commented Aug 30, 2018

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

This comment has been minimized.

haywirez commented Sep 17, 2018

Waiting for this also 🤞

@Timer Timer closed this Sep 26, 2018

@Timer Timer reopened this Sep 26, 2018

rbuels added a commit to GMOD/jbrowse-create-react-app that referenced this pull request Oct 4, 2018

rbuels added a commit to GMOD/jbrowse-components that referenced this pull request Oct 6, 2018

@barrymichaeldoyle

This comment has been minimized.

barrymichaeldoyle commented Oct 17, 2018

Looking forward to having this PR resolved and merged 🥇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment