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;

Install

npm install -D react-worker-components-plugin

Plugins

Vite

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

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.