ES module build for browser (#440)

* Add Browser ES module build * ES module browser fix * Rename build * Remove prepare script * fix browser tests for ESM build * update package lock * Package lock update * Fix browser test
iden3 · Oct 27, 2023 · 86ea360 · 86ea360
1 parent f6e3bf7
commit 86ea360
Show file tree

Hide file tree

Showing 13 changed files with 37,080 additions and 3,432 deletions.
diff --git a/browser_tests/package-lock.json b/browser_tests/package-lock.json
diff --git a/browser_tests/package.json b/browser_tests/package.json
@@ -7,6 +7,7 @@
   },
   "devDependencies": {
     "puppeteer": "20.2.0",
+    "ffjavascript": "^0.2.62",
     "st": "3.0.0"
   }
 }
diff --git a/browser_tests/test/groth16.html b/browser_tests/test/groth16.html
@@ -1,40 +1,79 @@
-<head>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
     <script src="/build/snarkjs.js"></script>
-</head>
-
-<body>
+    <script type="importmap">
+      {
+        "imports": {
+          "ffjavascript": "../node_modules/ffjavascript/build/browser.esm.js"
+        }
+      }
+    </script>
+  </head>
+  <body>
     <script type="module">
-        const ptau_final = "https://hermez.s3-eu-west-1.amazonaws.com/powersOfTau28_hez_final_10.ptau";
+      async function testBrowserBuilds(build) {
+        const ptau_final =
+          "https://hermez.s3-eu-west-1.amazonaws.com/powersOfTau28_hez_final_10.ptau";
         const r1cs = "/test/circuit/circuit.r1cs";
         const wasm = "/test/circuit/circuit.wasm";
         const zkey_0 = { type: "mem" };
         const zkey_1 = { type: "mem" };
         const zkey_final = { type: "mem" };
         const wtns = { type: "mem" };
 
-        await snarkjs.zKey.newZKey(r1cs, ptau_final, zkey_0);
+        await build.zKey.newZKey(r1cs, ptau_final, zkey_0);
 
-        await snarkjs.zKey.contribute(zkey_0, zkey_1, "p2_C1", "pa_Entropy1");
+        await build.zKey.contribute(zkey_0, zkey_1, "p2_C1", "pa_Entropy1");
 
-        await snarkjs.zKey.beacon(zkey_1, zkey_final, "B3", "0102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f20", 10);
+        await build.zKey.beacon(
+          zkey_1,
+          zkey_final,
+          "B3",
+          "0102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f20",
+          10
+        );
 
-        const verifyFromR1csResult = await snarkjs.zKey.verifyFromR1cs(r1cs, ptau_final, zkey_final);
+        const verifyFromR1csResult = await build.zKey.verifyFromR1cs(
+          r1cs,
+          ptau_final,
+          zkey_final
+        );
         console.assert(verifyFromR1csResult);
 
-        const verifyFromInit = await snarkjs.zKey.verifyFromInit(zkey_0, ptau_final, zkey_final);
+        const verifyFromInit = await build.zKey.verifyFromInit(
+          zkey_0,
+          ptau_final,
+          zkey_final
+        );
         console.assert(verifyFromInit);
 
-        const vKey = await snarkjs.zKey.exportVerificationKey(zkey_final);
+        const vKey = await build.zKey.exportVerificationKey(zkey_final);
 
-        await snarkjs.wtns.calculate({ a: 11, b: 2 }, wasm, wtns);
+        await build.wtns.calculate({ a: 11, b: 2 }, wasm, wtns);
 
-        await snarkjs.wtns.check(r1cs, wtns);
+        await build.wtns.check(r1cs, wtns);
 
-        const { proof, publicSignals } = await snarkjs.groth16.prove(zkey_final, wtns);
+        const { proof, publicSignals } = await build.groth16.prove(
+          zkey_final,
+          wtns
+        );
 
-        const verified = await snarkjs.groth16.verify(vKey, publicSignals, proof);
+        const verified = await build.groth16.verify(vKey, publicSignals, proof);
         console.assert(verified);
+      }
 
-        shutdown();
+      await testBrowserBuilds(snarkjs);
+      const esmBuild = await import("/build/browser.esm.js");
+      await testBrowserBuilds(esmBuild);
+      shutdown();
     </script>
-</body>
+  </body>
+</html>
+
+<head> </head>
+
+<body></body>