Make echo a bit more intesting

ostcar · ostcar · commit b91bce504c41 · 2023-06-25T17:15:52.000+02:00
diff --git a/examples/echo/host.js b/examples/echo/host.js
@@ -1,13 +1,10 @@
-async function roc_web_platform_run(wasm_filename, input, callback) {
-  let exit_code;
-
+async function load_wasm(file) {
   const importObj = {
     wasi_snapshot_preview1: {
       proc_exit: (code) => {
         if (code !== 0) {
           console.error(`Exited with code ${code}`);
         }
-        exit_code = code;
       },
       fd_write: (x) => {
         console.error(`fd_write not supported: ${x}`);
@@ -20,7 +17,7 @@ async function roc_web_platform_run(wasm_filename, input, callback) {
     },
   };
 
-  const fetchPromise = fetch(wasm_filename);
+  const fetchPromise = fetch(file);
 
   let wasm;
   if (WebAssembly.instantiateStreaming) {
@@ -33,41 +30,43 @@ async function roc_web_platform_run(wasm_filename, input, callback) {
     wasm = await WebAssembly.instantiate(module_bytes, importObj);
   }
 
-  try {
-    // Encode the input message as json
-    const message = new TextEncoder().encode(JSON.stringify(input));
-    
-    // Allocate enough memory in wasm
-    const in_pointer = wasm.instance.exports.allocUint8(message.length);
+  return async function (input, callback) {
+    try {
+      // Encode the input message as json
+      const message = new TextEncoder().encode(JSON.stringify(input));
+
+      // Allocate enough memory in wasm
+      const in_pointer = wasm.instance.exports.allocUint8(message.length);
+
+      // Init the wasm memory
+      const memory_bytes = new Uint8Array(wasm.instance.exports.memory.buffer);
+
+      // Write the encoded input to the wasm memory
+      memory_bytes.set(message, in_pointer);
 
-    // Init the wasm memory
-    const memory_bytes = new Uint8Array(wasm.instance.exports.memory.buffer);
+      // Call the roc code
+      const out_pointer = wasm.instance.exports.run_roc(in_pointer, message.length);
 
-    // Write the encoded input to the wasm memory
-    memory_bytes.set(message, in_pointer);
-  
-    // Call the roc code
-    const out_pointer = wasm.instance.exports.run_roc(in_pointer, message.length);
-    
-    // Find the end of the roc return value (the first 0 byte)
-    let stop;
-    for (stop = out_pointer; memory_bytes[stop] != 0; stop++) ;
+      // Find the end of the roc return value (the first 0 byte)
+      let stop;
+      for (stop = out_pointer; memory_bytes[stop] != 0; stop++);
 
-    // Decode the roc value
-    let result = JSON.parse(new TextDecoder().decode(memory_bytes.slice(out_pointer, stop)));
+      // Decode the roc value
+      const result = JSON.parse(new TextDecoder().decode(memory_bytes.slice(out_pointer, stop)));
 
-    callback(result);
+      callback(result);
 
-  } catch (e) {
-    const is_ok = e.message === "unreachable" && exit_code === 0;
-    if (!is_ok) {
-      console.error(e);
+    } catch (e) {
+      const is_ok = e.message === "unreachable" && exit_code === 0;
+      if (!is_ok) {
+        console.error(e);
+      }
     }
   }
 }
 
 if (typeof module !== "undefined") {
   module.exports = {
-    roc_web_platform_run,
+    load_wasm,
   };
 }
diff --git a/examples/echo/index.html b/examples/echo/index.html
@@ -1,12 +1,19 @@
 <html>
   <body>
+    <input placeholder="Enter some text">
     <div id="output"></div>
     <script src="./host.js"></script>
     <script>
-      const elem = document.getElementById("output");
-      roc_web_platform_run("./echo.wasm", "hello from javascript", (string_from_roc) => {
-        elem.textContent = string_from_roc;
-      });
+      const input = document.querySelector("input");
+      const output = document.getElementById("output");
+
+      load_wasm("./echo.wasm").then((run_roc) => {
+        input.addEventListener("input", (event) => {
+          run_roc(event.target.value, (string_from_roc) => {
+            output.textContent = string_from_roc;
+          });
+        });
+      });      
     </script>
   </body>
 </html>
