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

WIP: Add support for WebWorker with worker-loader #5886

Open
wants to merge 3 commits into
base: master
from

Conversation

@iansu
Copy link
Collaborator

commented Nov 23, 2018

This is an updated version of #3934

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 });
    }
  }
}

To Do

  • Make ESLint ignore references to self in workers
  • Add TypeScript support
@@ -170,6 +170,7 @@ module.exports = function(webpackEnv) {
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
globalObject: 'this',

This comment has been minimized.

Copy link
@iansu

iansu Nov 23, 2018

Author Collaborator

This is required due to what seems to be a bug/regression in webpack 4. More details can be found here: webpack/webpack#6642

This comment has been minimized.

Copy link
@ri7nz

ri7nz Jan 18, 2019

Hello @iansu , can i ask a question . Why globalObject value is this , not self ?

This comment has been minimized.

Copy link
@developit
// Process WebWorker JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.worker\.(js|jsx|mjs)$/,

This comment was marked as resolved.

Copy link
@0xcaff

0xcaff Nov 23, 2018

Shouldn't this be?

Suggested change
test: /\.worker\.(js|jsx|mjs)$/,
test: /\.worker\.(js|jsx|mjs|ts|tsx)$/,

This comment was marked as resolved.

Copy link
@iansu

iansu Nov 23, 2018

Author Collaborator

Yes it should. This is from my previous PR which was pre-TypeScript.

@l27-0-0-1

This comment has been minimized.

Copy link

commented Nov 26, 2018

This is dope, but FYI eslint marks any use of "self" inside workers as error because of the rule "no-restricted-globals".

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Nov 27, 2018

Yes, that's true. If we decide to go forward with this we'll want to relax that rule (hopefully only in .worker.js files). I'll look into that.

@0xcaff

This comment has been minimized.

Copy link

commented Nov 28, 2018

Also, we'd probably want to do something similar for typescript?

Some Ideas of how to do this.

Idea 1

When compiling typescript for a webworker, add the "webworker" to the lib field in compilerOptions. https://stackoverflow.com/questions/38715001/how-to-make-web-workers-with-typescript-and-webpack

I'm not sure how well this would work if both the worker and main bundle require the same file. They would probably be compiled twice. Maybe the default tsconfig.json should have webworker typings enabled everywhere.

Idea 2

Make the user explicitly reference the ambient declaration file for workers at the top of .worker.ts files.

This would look something like:

/// <reference lib="webworker" />

self.addEventListener((message) => console.log(message));

I think idea 2 is better but it does push some work onto the end user of create react app. What do you think?

@stale

This comment has been minimized.

Copy link

commented Dec 29, 2018

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Dec 29, 2018

@ianschmitz ianschmitz removed the stale label Dec 31, 2018

@noelyoo

This comment has been minimized.

Copy link
Contributor

commented Jan 10, 2019

Any updates for this PR?

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Jan 10, 2019

No updates at the moment. There's still some more work to do to get this ready. I've added a couple of to do items to the description.

@noelyoo

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2019

@iansu Right, thanks 👍

@JavaJamie

This comment has been minimized.

Copy link

commented Jan 20, 2019

Thanks for all your hard work guys. Any idea of date/time when this will be released? We've had to revert back to an older Webpack 3 non-PWA version of our product as the worker worked flawlessly then.

Thanks

@stale

This comment has been minimized.

Copy link

commented Feb 19, 2019

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Feb 19, 2019

@mishawakerman

This comment has been minimized.

Copy link

commented Feb 23, 2019

Is this PR still being worked on?

@stale stale bot removed the stale label Feb 23, 2019

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Feb 23, 2019

I'm not actively working on it at the moment but I am still planning on getting it into Create React App one of these days.

@mishawakerman

This comment has been minimized.

Copy link

commented Feb 23, 2019

@iansu, I've taken a look at your PR and am not seeing any ESLint issues relating to self in the workers (after creating a dummy app like yours). Is this now solved? If not, can you confirm what you mean by this?

I'm also happy to take a look at TypeScript support (though this isn't an area I know very well).

jzhng added a commit to kaios-design/create-kaios-app that referenced this pull request Mar 14, 2019

@jzhng

This comment has been minimized.

Copy link

commented Mar 14, 2019

Thx for the pr and I stealed it to my project first. To whom may use worker-loader in CRA, please be aware of this issue webpack-contrib/worker-loader#176, yarn build to generate production build may fail.

@iansu iansu changed the title Add support for WebWorker with worker-loader WIP: Add support for WebWorker with worker-loader Mar 18, 2019

@psychowico psychowico referenced this pull request Mar 24, 2019
11 of 19 tasks complete

@amyrlam amyrlam force-pushed the facebook:master branch from cecd762 to d3b19f9 Mar 24, 2019

@ixtli

This comment has been minimized.

Copy link

commented Mar 26, 2019

This is likely the last thing required to use CRA out of the box as scaffolding for building complete games and other types of complex 3d simulations in the browser.

@mattdarveniza

This comment has been minimized.

Copy link

commented Apr 1, 2019

@iansu I'm super keen to get this into CRA. Would you be open to someone else picking up this PR to get it to a state where it's ready to be merged? I'd be happy to set up the ESLint configuration and add some documentation for WebWorkers in general as well as usage with TypeScript.

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Apr 3, 2019

@mattdarveniza I would absolutely welcome some help with this PR!

@mattdarveniza

This comment has been minimized.

Copy link

commented Apr 17, 2019

@iansu PR at iansu#1 is updated and everything seems to be working for JS and TS in my test cases. Could you take a look when you get the chance?

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Apr 17, 2019

@mattdarveniza Yes, I will take a look soon. We're trying to get the 3.0 release done so that's my focus right now.

@pavinthan

This comment has been minimized.

Copy link
Contributor

commented Apr 23, 2019

@iansu could you please have a look into this?

// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,

This comment has been minimized.

Copy link
@amankkg

amankkg May 7, 2019

Shouldn't it be isEnvDevelopment instead of true? nvm...

@bebbi

This comment has been minimized.

Copy link
Contributor

commented May 28, 2019

@iansu Apologies for disturbing, do you have a new ETA on reviewing this now that 3.0 is out? It looks like this would make a lot of people super happy!

@StephanMa

This comment has been minimized.

Copy link

commented Jun 6, 2019

Bump

@mishawakerman

This comment has been minimized.

Copy link

commented Jun 16, 2019

@iansu hasn't been active on this PR for two months so I was wondering if anybody from the CRA team could please provide an update on this PR? It looks like there are a number of folks wanting this functionality and, speaking personally, my team has been resisting ejecting for months but it would be great to know what's preventing this PR from being merged so we can plan accordingly.

@gaearon @Timer @amyrlam @mrmckeb @ianschmitz

(apologies in advance if @'ing the CRA team directly is considered rude)

@1valdis

This comment has been minimized.

Copy link

commented Jun 18, 2019

This should be included as soon as possible. It's a pity it hasn't been included in 2.0 (as it was planned initially), and there's 3.0 out already. I'm using CRA for apps like Paint replica and audio processing with Web Audio, and there's a lot of potential to optimize heavy calculations and make things like offscreen canvas drawing, and both of my projects would greatly benefit from that.

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Jun 19, 2019

Apologies for the delay but we've had a lot on our plate the last few months. I'm adding this to the 3.1 feature list.

@iansu iansu added this to In progress in v3.1 via automation Jun 19, 2019

@iansu iansu added this to the 3.1 milestone Jun 19, 2019

@mattdarveniza

This comment has been minimized.

Copy link

commented Jun 19, 2019

Thanks Ian! Appreciate all the hard work you're putting into CRA.

@Gregoirevda

This comment has been minimized.

Copy link

commented Jun 27, 2019

@iansu Applying this patch without the @remove-on-eject-begin until @remove-on-eject-end works well with yarn start, but yarn build doesn't output anything in the build directory.

@Gregoirevda

This comment has been minimized.

Copy link

commented Jun 27, 2019

Seems like this is a current fix: webpack-contrib/worker-loader#176 (comment)

@talolard talolard referenced this pull request Jul 7, 2019

nurpax added a commit to nurpax/c64jasm-browser that referenced this pull request Jul 13, 2019

Compile source with web workers
Use web workers for compilation so that this time-consuming
activity is taken off the main UI thread, resulting in
shorter editing latency.

As create-react-app doesn't currently support web workers,
so this change add a webpack project that's used to
compile a c64jasm compiler bundle.

See  facebook/create-react-app#5886 for
CRA web worker support.

@bugzpodder bugzpodder added this to In progress in v3.2 via automation Aug 11, 2019

@bugzpodder bugzpodder removed this from In progress in v3.1 Aug 11, 2019

@dai-shi dai-shi referenced this pull request Aug 12, 2019
@GuskiS

This comment has been minimized.

Copy link

commented Aug 19, 2019

3.1 landed, but this isn't in 😭

@mishawakerman

This comment has been minimized.

Copy link

commented Aug 20, 2019

@iansu any comment about this not making it to 3.1, is there a new expected release/date?

I've been convincing my team not to eject based on this time frame but it's probably a lost battle at this stage.

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 20, 2019

3.1 was originally going to be the 3.0.2 release but we upgraded some packages that required us to do a minor release. The rest of the features that were scheduled for 3.1 have moved to 3.2.

There's also a new plugin from the Chrome team that we're exploring using to bundle workers.

@GuskiS

This comment has been minimized.

Copy link

commented Aug 20, 2019

Is there some ETA for 3.2 release?

@iansu

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 20, 2019

There is no release date for 3.2. Hopefully in the next month or so. All the maintainers of this project are volunteers so we just try to do things as quickly as we can with the time we have.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.