Support fast refresh in workers

[itsdouges]

Description

Currently this plugin assigns variables to window - which is unavailable inside workers. If instead we targeted globalThis as an alternative [...The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments.] that would be a way forward where the same code can function in both a DOM and worker environment.

Suggested solution

Replace all window usage with globalThis.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ArnaudBarre]

Do you React components inside your worker files?

[itsdouges]

There's an experimental react three fiber api that runs scenes inside a worker, to simplify the model react is ran inside there as well.

That's why you see in another thread folks wanting to be able to disable fast refresh in 4.0. A better alternative is to keep it working imo.

[ArnaudBarre]

Yeah but that's not trivial, you need to inject the fast refresh runtime exactly one per worker, and before any component run.

Can you provide a small setup with a component running inside a worker with a state so I can experiment with it?

Does react three fiber recommend using only one worker or multiple?

[itsdouges]

@drcmda would you be able to create one?

[drcmda]

@ArnaudBarre here's a vite example. https://github.com/pmndrs/react-three-offscreen/tree/main/examples/vite

due to #151 it only works with [email protected] atm.

[ArnaudBarre]

Thanks I will look into it to understand why #151 happens.

For the feature request here, I will need to know if using multiple workers doing offscreen render is expected or not?

[drcmda]

thanks arnaud! i think not. it would be to allow a react root to run off the main thread and the result of its view is sent into a offscreen canvas. im guessing most react canvas renderers will only require a single worker, react-konva, react-skia, babylon, pixi, etc.

[siefkenj]

I just encountered this issue. I am using React in a webworker to statically render markup via ReactDOM, and this plugin is currently crashing my webworker by using window. It would be neat to support refreshing in webworkers, but at a minimum, I would hope that the plugin could self-disable to avoid erroring in a webworker.

[ArnaudBarre]

The assignment for window is now behind a check to not fail inside workers. The support for Fast refresh in web worker requires first Vite support for HMR inside web web workers: vitejs/vite#5396

I'm closing this for now, this update of the plugin will be straight forward if the feature lands into core (There is a stale but interesting draft PR for this)