Build with trunk

This streamlines the project configuration.

.gitignore

@@ -1,6 +1,7 @@
 # Rust
-/backend/target/
-/backend/pkg/
+/target/
+/pkg/
+/dist/
 
 # Nix
 /result*

Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "password-hash-self-service-backend"
+name = "password-hash-self-service"
 version = "0.0.0"
 authors = ["Simon Bruder <simon@sbruder.de>"]
 license = "AGPL-3.0-or-later"

Trunk.toml

@@ -0,0 +1,2 @@
+[build]
+offline = true

app.js

@@ -1,5 +1,3 @@
-import init, { hash_bcrypt, hash_sha512crypt } from "./backend/pkg/password_hash_self_service_backend.js"
-
 function displayHash(hash) {
   document.getElementById("hash").innerText = hash
   document.getElementById("hash-container").classList.add("done")
@@ -31,17 +29,15 @@ function getHashSetup(formData) {
 function getHasher(hashType) {
   switch (hashType) {
     case "bcrypt":
-      return (password, { cost }) => hash_bcrypt(password, cost)
+      return (password, { cost }) => wasmBindings.hash_bcrypt(password, cost)
     case "sha512crypt":
-      return (password, { rounds }) => hash_sha512crypt(password, rounds)
+      return (password, { rounds }) => wasmBindings.hash_sha512crypt(password, rounds)
     default:
       throw Error("Invalid hash type specified: " + hashType)
   }
 }
 
 (async () => {
-  await init()
-
   document.getElementById("generate").addEventListener("click", e => {
     e.target.disabled = true
     const buttonText = e.target.innerText

flake.nix

@@ -26,78 +26,43 @@
     in
     rec {
       packages = {
-        backend = naerskLib.buildPackage {
-          src = ./backend;
+        password-hash-self-service = naerskLib.buildPackage {
+          src = self;
 
           nativeBuildInputs = with pkgs; [
             binaryen # wasm-opt
+            trunk
             wasm-bindgen-cli
-            wasm-pack
           ];
 
           # required, otherwise the dependencies are built for the host system
           CARGO_BUILD_TARGET = "wasm32-unknown-unknown";
-          WASM_PACK_CACHE = "/build/wasm-pack-cache";
 
           overrideMain = (o: o // {
             buildPhase = ''
               runHook preBuild
-              # FIXME this fails when the locked wasm-pack version is different from the one in nixpkgs
-              wasm-pack build --target web --release --mode no-install -- --offline
+              trunk build --release --offline --frozen
               runHook postBuild
             '';
 
             installPhase = ''
               runHook preInstall
-              cp -r pkg $out
+              cp -r dist $out
               runHook postInstall
             '';
           });
         };
 
-        frontend = pkgs.stdenvNoCC.mkDerivation {
-          name = "password-hash-self-service";
-
-          src = self;
-
-          dontBuild = true;
-
-          installPhase = ''
-            runHook preInstall
-
-            mkdir $out
-            cp \
-                index.html \
-                style.css \
-                app.js \
-                $out
-
-            mkdir $out/backend
-            ln -s ${packages.backend} $out/backend/pkg
-
-            runHook postInstall
-          '';
-        };
-
-        default = packages.frontend;
+        default = packages.password-hash-self-service;
       };
 
       devShell = pkgs.mkShell {
         buildInputs = with pkgs; [
           binaryen # wasm-opt
           rustToolchain
+          trunk
           wasm-bindgen-cli
-          wasm-pack
         ];
       };
-
-      apps = {
-        serve = {
-          type = "app";
-          program = toString (pkgs.writeShellScript "serve" ''
-            ${pkgs.python3}/bin/python3 -m http.server
-          '');
-        };
-      };
     });
 }

index.html

@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <meta name="description" content="A simple web-app to generate bcrypt and SHA512-crypt hashes">
     <title>Password Hash Self-Service</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="preload" href="backend/pkg/password_hash_self_service_backend.js" as="script" crossOrigin="anonymous">
+    <link rel="css" href="style.css" data-trunk>
   </head>
   <body>
     <div class="container">
@@ -53,6 +52,7 @@
       </footer>
     </div>
 
-    <script type="module" src="app.js"></script>
+    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z"/>
+    <script src="app.js" data-trunk></script>
   </body>
 </html>