Showcase webworker usage

Author: ryyppy

next.config.js

@@ -48,14 +48,14 @@ const config = {
           path: false,
         };
       }
-      useEsbuildMinify(config);
+      //useEsbuildMinify(config);
       // We need this additional rule to make sure that mjs files are
       // correctly detected within our src/ folder
       config.module.rules.push({
         test: /\.m?js$/,
         // v-- currently using an experimental setting with esbuild-loader
-        //use: options.defaultLoaders.babel,
-        use: [{loader: 'esbuild-loader', options: { loader: 'jsx'}}],
+        use: options.defaultLoaders.babel,
+        //use: [{loader: 'esbuild-loader', options: { loader: 'jsx'}}],
         exclude: /node_modules/,
         type: "javascript/auto",
         resolve: {

pages/test.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useCallback } from 'react'
+
+export default function Index() {
+  const workerRef = useRef()
+  useEffect(() => {
+    console.log(import.meta.url);
+    workerRef.current = new Worker(new URL('../worker.js', import.meta.url))
+    workerRef.current.onmessage = (evt) =>
+      alert(`WebWorker Response => ${evt.data}`)
+    return () => {
+      workerRef.current.terminate()
+    }
+  }, [])
+
+  const handleWork = useCallback(async () => {
+    workerRef.current.postMessage(100000)
+  }, [])
+
+  return (
+    <div>
+      <p>Do work in a WebWorker!</p>
+      <button onClick={handleWork}>Calculate PI</button>
+    </div>
+  )
+}

worker.js

@@ -0,0 +1,12 @@
+function pi(n) {
+  var v = 0
+  for (let i = 1; i <= n; i += 4) {
+    // increment by 4
+    v += 1 / i - 1 / (i + 2) // add the value of the series
+  }
+  return 4 * v // apply the factor at last
+}
+
+addEventListener('message', (event) => {
+  postMessage(pi(event.data))
+})