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.
- ⚡ 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.
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 (
<div>
<span>fib of number {num}: {fibNum}</span>
{children}
</div>
);
};import { Fib } from './Fib.worker'
function App() {
const [count, setCount] = useState(40);
return (
<div>
<h1>Workers</h1>
<span>Count: {count}</span>
<button id="increment" type="button" onClick={() => setCount(count + 1)}>
+1
</button>
<button
id="decrement"
type="button"
onClick={() => setCount((c) => c - 1)}
>
-1
</button>
<Suspense fallback={<div>Loading...</div>}>
<Fib num={count} />
</Suspense>
</div>
);
}
export default App;
npm install -D react-worker-components-plugin
This plugin for now works in Vite, and it's tested properly there.
// vite.config.js
import { defineConfig } from "vite";
import { vite as rwc } from "react-worker-components-plugin";
export default defineConfig({
plugins: [rwc()]
});It's planned to support other bundlers, any help is appreciated in that case!
Please try the plugin, find issues, report and fix them by sending Pull requests and issues! I appreciate that.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent