WASM hello world

.gitignore

@@ -1,3 +1,4 @@
 dist-newstyle
 .direnv
 *.cabal
+cabal.project.local

Makefile

@@ -1,8 +1,10 @@
 
 all: out/numbersquare.wasm out/ghc_wasm_jsffi.js
 
-out/numbersquare.wasm: app/* src/* numbersquare.cabal
-	wasm32-wasi-cabal build
+numbersquare.cabal: package.yaml
+	hpack
+
+out/numbersquare.wasm: app/*.hs src/*.hs numbersquare.cabal
 	wasm32-wasi-cabal install --installdir=out --overwrite-policy=always
 
 out/ghc_wasm_jsffi.js: out/numbersquare.wasm

app/App.hs

@@ -0,0 +1,19 @@
+module App where
+
+import Reflex
+import Reflex.Dom.Core
+
+import Language.Javascript.JSaddle
+
+testWidget ::
+    ( DomBuilder t m
+    , DomBuilderSpace m ~ GhcjsDomSpace
+    , MonadHold t m
+    , PostBuild t m
+    ) =>
+    m ()
+testWidget = elAttr "div" ("class" =: "content") do
+    text "hello, world!"
+
+start :: JSM ()
+start = mainWidget testWidget

app/Main.hs

@@ -1,4 +1,12 @@
+{-# LANGUAGE CPP #-}
+
 module Main (main) where
 
+import App qualified
+import Language.Javascript.JSaddle
+import Language.Javascript.JSaddle.Wasm qualified as W
+
+foreign export javascript "hs_start" main :: IO ()
+
 main :: IO ()
-main = putStrLn "hi"
+main = W.run $ App.start

cabal.project

@@ -1,2 +1,4 @@
 packages: ./numbersquare.cabal
 tests: True
+
+index-state: 2025-10-11T08:08:38Z

flake.lock

@@ -73,11 +73,11 @@
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1777268161,
-        "narHash": "sha256-bxrdOn8SCOv8tN4JbTF/TXq7kjo9ag4M+C8yzzIRYbE=",
+        "lastModified": 1777954456,
+        "narHash": "sha256-hGdgeU2Nk87RAuZyYjyDjFL6LK7dAZN5RE9+hrDTkDU=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "1c3fe55ad329cbcb28471bb30f05c9827f724c76",
+        "rev": "549bd84d6279f9852cae6225e372cc67fb91a4c1",
         "type": "github"
       },
       "original": {

flake.nix

@@ -19,13 +19,12 @@
       ...
     }:
     let
-      pkgs = nixpkgs.legacyPackages.x86_64-linux;
+      pkgs = import nixpkgs { system = "x86_64-linux"; };
     in
     {
-      inherit ghc-wasm-meta;
       devShells.x86_64-linux.default = pkgs.callPackage ./shell.nix {
-        wasm32-wasi-cabal = ghc-wasm-meta.packages.x86_64-linux.wasm32-wasi-cabal-9_14;
-        wasm32-wasi-ghc = ghc-wasm-meta.packages.x86_64-linux.wasm32-wasi-ghc-9_14;
+        wasm32-wasi-cabal = ghc-wasm-meta.packages.x86_64-linux.wasm32-wasi-cabal-9_12;
+        wasm32-wasi-ghc = ghc-wasm-meta.packages.x86_64-linux.wasm32-wasi-ghc-9_12;
       };
     };
 }

package.yaml

@@ -6,10 +6,11 @@ description: "a game where you number square"
 license: BSD3
 author: skulk
 
+language: GHC2021
 ghc-options: "-Wall"
 
 dependencies:
-  - "base == 4.*"
+  - base
   - random
   - array
   - text
@@ -30,6 +31,8 @@ default-extensions:
   - OverloadedLabels
   - NamedFieldPuns
   - TypeOperators
+  - BlockArguments
+  - OverloadedStrings
 
 build-type: Simple
 
@@ -41,6 +44,14 @@ executable:
   source-dirs:
     - app
   main: Main.hs
+  dependencies:
+    - base
+    - reflex
+    - reflex-dom-core
+    - "ghcjs-dom == 0.9.*"
+    - jsaddle
+    - jsaddle-wasm
+    - ghc-experimental
   when:
     - condition: arch(wasm32)
       ghc-options:

shell.nix

@@ -1,4 +1,5 @@
 {
+  callPackage,
   haskellPackages,
   haskell,
   zlib,
@@ -7,40 +8,72 @@
   wasm32-wasi-ghc,
   writeShellApplication,
   nodejs,
+  pkg-config,
   python3,
+  fetchFromGitHub,
 }:
-haskellPackages.developPackage {
-  name = "numbersquare";
-  root = ./.;
-  modifier =
-    let
-      addBuildTools =
-        drv:
-        haskell.lib.addBuildTools drv (
-          [
-            watchexec
-            wasm32-wasi-cabal
-            wasm32-wasi-ghc
-            nodejs
-            (writeShellApplication {
-              name = "dev-server";
-              text = ''
-                python -m http.server -d ./out
-              '';
-              runtimeInputs = [ python3 ];
-            })
-          ]
-          ++ (with haskellPackages; [
-            fourmolu
-            haskell-language-server
-            cabal-install
-            hpack
-            ghcid
-            cabal-fmt
-            hoogle
-          ])
-        );
-      addExtraLibraries = drv: haskell.lib.addExtraLibraries drv [ zlib ];
-    in
-    drv: addExtraLibraries (addBuildTools drv);
-}
+let
+  # TODO: this information is duplicated at the bottom. need to fix that.
+  ghc-wasm-compat-rev = "ef21ada9436046c7b118314d0c73752253ec58e1";
+  ghc-wasm-compat-src = fetchFromGitHub {
+    owner = "konn";
+    repo = "ghc-wasm-earthly";
+    rev = ghc-wasm-compat-rev;
+    hash = "sha256-oUf7HFLNxBZ/roFRe5q7Sz0D0ZRygu8prxEYoYuhSU8=";
+  };
+in
+let
+  shell = haskellPackages.developPackage {
+    name = "numbersquare";
+    root = ./.;
+    overrides = _: _: {
+      ghc-wasm-compat =
+        haskellPackages.callCabal2nix "ghc-wasm-compat" "${ghc-wasm-compat-src}/ghc-wasm-compat"
+          { };
+    };
+    modifier =
+      let
+        addBuildTools =
+          drv:
+          haskell.lib.addBuildTools drv (
+            [
+              watchexec
+              wasm32-wasi-cabal
+              wasm32-wasi-ghc
+              nodejs
+              pkg-config
+              (writeShellApplication {
+                name = "dev-server";
+                text = ''
+                  python -m http.server -d ./out
+                '';
+                runtimeInputs = [ python3 ];
+              })
+            ]
+            ++ (with haskellPackages; [
+              fourmolu
+              happy
+              haskell-language-server
+              cabal-install
+              hpack
+              ghcid
+              cabal-fmt
+              hoogle
+            ])
+          );
+        addExtraLibraries = drv: haskell.lib.addExtraLibraries drv [ zlib ];
+      in
+      drv: addExtraLibraries (addBuildTools drv);
+  };
+in
+shell.overrideAttrs (old: {
+  shellHook = (old.shellHook or "") + ''
+    cat > cabal.project.local <<EOF
+    source-repository-package
+      type: git
+      location: https://github.com/konn/ghc-wasm-earthly
+      tag: ${ghc-wasm-compat-rev}
+      subdir: ghc-wasm-compat
+    EOF
+  '';
+})