Transform original webworker call site to ReScript

Author: ryyppy

pages/test.js

@@ -1,25 +1,5 @@
-import { useEffect, useRef, useCallback } from 'react'
+import EvalTestRes from "src/EvalTest.mjs"
 
-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>
-  )
+export default function Test(props) {
+  return <EvalTestRes {...props} />
 }

src/EvalTest.mjs

@@ -0,0 +1,52 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Belt_Option from "rescript/lib/es6/belt_Option.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
+
+function useEval(param) {
+  var workerRef = React.useRef(undefined);
+  React.useEffect((function () {
+          var worker = (new Worker(new URL("../worker.js", import.meta.url)));
+          workerRef.current = Caml_option.some(worker);
+          worker.onmessage = (function (evt) {
+              console.log("value: " + evt.data);
+              
+            });
+          console.log(worker);
+          return (function (param) {
+                    Belt_Option.map(workerRef.current, (function (worker) {
+                            worker.terminate();
+                            
+                          }));
+                    
+                  });
+        }), []);
+  var handleWork = React.useCallback((function (param) {
+          return Belt_Option.forEach(workerRef.current, (function (worker) {
+                        worker.postMessage(100000);
+                        
+                      }));
+        }), []);
+  return [
+          workerRef,
+          handleWork
+        ];
+}
+
+function EvalTest$default(Props) {
+  var match = useEval(undefined);
+  return React.createElement("div", undefined, React.createElement("p", undefined, "Do work in a WebWorker!"), React.createElement("button", {
+                  onClick: match[1]
+                }, "Calculate PI"));
+}
+
+var $$default = EvalTest$default;
+
+export {
+  useEval ,
+  $$default ,
+  $$default as default,
+  
+}
+/* react Not a pure module */

src/EvalTest.res

@@ -0,0 +1,36 @@
+@send
+external terminate: 'a => unit = "terminate"
+@send external postMessage: ('a, int) => unit = "postMessage"
+@set external onmessage: ('a, 'cb) => unit = "onmessage"
+
+let useEval = () => {
+  let workerRef = React.useRef(None)
+
+  React.useEffect1(() => {
+    let worker = %raw(`new Worker(new URL("../worker.js", import.meta.url))`)
+    workerRef.current = Some(worker)
+
+    worker->onmessage(evt => {
+      Js.log(`value: ${evt["data"]}`)
+    })
+    Js.log(worker)
+    Some(() => workerRef.current->Belt.Option.map(worker => worker->terminate)->ignore)
+  }, [])
+  let handleWork = React.useCallback1(_ => {
+    workerRef.current->Belt.Option.forEach(worker => {
+      worker->postMessage(100000)
+    })
+  }, [])
+
+  (workerRef, handleWork)
+}
+
+@react.component
+let default = () => {
+  let (_workerRef, handleWork) = useEval()
+
+  <div>
+    <p> {React.string("Do work in a WebWorker!")} </p>
+    <button onClick={handleWork}> {React.string("Calculate PI")} </button>
+  </div>
+}