Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aslemammad/react-worker-components-plugin

⚡ Something like react server components, but web workers instead of a server
https://github.com/aslemammad/react-worker-components-plugin

next react server-components vite webpack worker

Last synced: about 2 months ago
JSON representation

⚡ Something like react server components, but web workers instead of a server

Awesome Lists containing this project

README

        

# react-worker-components-plugin ⚡

![](https://img.shields.io/static/v1?label=mode&message=experimental&color=red)

> *something like react server components, but web workers instead of a server*

**react-worker-components-plugin** is a plugin that renders components in web workers and not in the main thread, which helps in rendering blocking components in a non-blocking way. This project is based on the experimental [react-worker-components](https://github.com/dai-shi/react-worker-components).

- ⚡ Fast
- 💥 Powered by `Suspense`
- 🔥 Easy to use


You just need to create a file with a name that contains `.worker.`, in case you want to render its components in a Worker.

## Example
[Try online (Stackblitz)](https://stackblitz.com/edit/vitejs-vite-eneunr)

### `Fib.worker.tsx`
```tsx
const fib = (i: number): number => {
const result = i <= 1 ? i : fib(i - 1) + fib(i - 2);
return result;
};

export const Fib = ({ num, children }) => {
const fibNum = fib(num);

return (


fib of number {num}: {fibNum}
{children}

);
};
```
### `App.tsx`
```tsx
import { Fib } from './Fib.worker'

function App() {
const [count, setCount] = useState(40);
return (


Workers


Count: {count}
setCount(count + 1)}>
+1

setCount((c) => c - 1)}
>
-1

Loading...
}>



);
}

export default App;

```

![chrome-capture](https://user-images.githubusercontent.com/37929992/153716004-8e4bd404-47ce-4a60-8931-db11018a4967.gif)

## Install
```
npm install -D react-worker-components-plugin
```
## Plugins
### Vite
This plugin for now works in Vite, and it's tested properly there.
```js
// vite.config.js
import { defineConfig } from "vite";
import { vite as rwc } from "react-worker-components-plugin";

export default defineConfig({
plugins: [rwc()]
});
```

### Next/Webpack/...
It's planned to support other bundlers, any help is appreciated in that case!

## Contributing
Please try the plugin, find issues, report and fix them by sending Pull requests and issues! I appreciate that.