www/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="name" value="Daniel" required />
    <button id="btn-greet">Greet</button>

    <script type="module">
      import ZigWASMWrapper from "./helper.js";

      let wasm = await ZigWASMWrapper.initialize("./main.wasm");

      // === Interface Test ===
      console.log("=== Testing silence");
      wasm.silence();

      console.log("=== Testing void type");
      console.log(wasm.testVoid());
      wasm.printVoid(undefined);

      console.log("=== Testing bool type");
      console.log(wasm.testBool());
      wasm.printBool(true);

      console.log("=== Testing integer type");
      console.log(wasm.testInt());
      wasm.printInt(-12345);

      console.log("=== Testing unsigned integer type");
      console.log(wasm.testUint());
      wasm.printUint(12345);

      console.log("=== Testing float type");
      console.log(wasm.testFloat());
      wasm.printFloat(1.2345);

      console.log("=== Testing bytes type");
      console.log(wasm.testBytes());
      wasm.printBytes(new TextEncoder().encode("Hello World"));

      console.log("=== Testing string type");
      console.log(wasm.testString());
      wasm.printString("Bye World");

      console.log("=== Testing json type");
      console.log(wasm.testJSON());
      wasm.printJSON({ message: "Greetings" });

      console.log("=== Testing zig function type");
      const testFunctionRef = wasm.testFunctionRef();
      console.log(testFunctionRef());
      console.log(wasm.testFunction(testFunctionRef));
      console.log(wasm.testFunctionWithArgs(testFunctionRef, ["Hello", "from", "JS"]));

      console.log("=== Testing js function type");
      console.log(wasm.testFunction((...args) => {
        console.log('I got called by reference from Zig with these arguments =', args)
        return "JS says hello!"
      }))
      console.log(wasm.testFunctionWithArgs((...args) => {
        console.log('I got called by reference from Zig with these arguments =', args)
        return "JS says hello!"
      }, ["Hello", "from", "JS"]))

      console.log("=== Testing greet");
      console.log(wasm.greet("Daniel"));

      // === Example Application ===
      console.log("=== Testing example app");

      function measure(label, func) {
        const t0 = performance.now();

        func();

        const t1 = performance.now();
        console.log(`${label} took ${t1 - t0}ms.`);
      }

      document.getElementById("btn-greet").addEventListener("click", () => {
        measure("greet and hash", () => {
          const name = document.getElementById("name").value;

          console.log(wasm.greet(name));

          console.log(wasm.blake2b(`this is a hashing input for ${name}`));
        });
      });

      measure("initial greet and hash", () => {
        console.log(wasm.greet("Daniel"));

        console.log(
          wasm.blake2b("This is just some hashing input to think about")
        );
      });

      // === Hash Benchmark ===
      console.log("=== Testing hash benchmark");

      const ROUNDS = 1000;

      const t0 = performance.now();

      for (let i = 0; i < ROUNDS; i++) {
        // NOTE: There is an obvious performance penalty here, in JS and Zig,
        //       compared to raw native performance.
        wasm.blake2b("Some hash");
      }

      const t1 = performance.now();
      console.log(
        `Benchmark (hash with ${ROUNDS}rounds): total=${t1 - t0}ms; per round=${
          (t1 - t0) / ROUNDS
        }`
      );
    </script>
  </body>
</html>