Haskell WebAssembly for Browser Interaction
The Goal
I wanted to test out the WASM support that GHC now offers in the very recent versions. Since this blog has very little JS itself, I thought it would serve as a good testbed by building a little theme toggle with the following requirements:
- The logic should be written in Haskell, it can’t just be a value-less shim that just wraps around some JavaScript logic.
- If possible it would make use of at least one dependency that isn’t part of the standard library, because it would be nice to use helpful libraries and not have to reimplement them badly.
The Setup
From what I found (at the time of writing) this appeared to be the best starting point to work from: ghc-wasm-meta. As it’s a nix flake and my blog code includes some nix to provide the tooling that drives it, then I should be hopefully off to a good start. It’s worth pointing out however that this is using a bleeding edge version of GHC 9.14, so the usual Danger Will Robinson warning applies with something like that.
The Build
This was a little fiddly in the end and a fair chunk of the options originated from my assistant Claude.
wasm32-wasi-cabal update
wasm32-wasi-cabal configure \
--ghc-options="-no-hs-main -O2 -optl-mexec-model=reactor -optl-Wl,--export=hs_init,--export=hs_initializeThemeToggle -optl-Wl,--strip-all -optl-Wl,--gc-sections" \
--enable-library-vanilla \
--disable-library-profiling \
--disable-shared
wasm32-wasi-cabal build
cp $(wasm32-wasi-cabal list-bin exe:haskell-wasm) output/haskell-wasm.wasm
$(wasm32-wasi-ghc --print-libdir)/post-link.mjs -i output/haskell-wasm.wasm -o output/ghc_wasm_jsffi.js
The highlights are the following:
-optl-mexec-model=reactor
- This is a WASM option which makes it setup so that the exports can be invoked multiple times after it is instantiated.--export=hs_init,--export=hs_initializeThemeToggle
- Export the general Haskell initialisation and the function which actually does the part we’re interested in.post-link.mjs
- This produces a special file used when hooking the WASM into the JavaScript that fires it up.
Most of the rest are oriented around getting the size of the compiled WASM bundle down.
Along with this there’s some additional use of wasm-opt
to shrink the WASM even further but it’s irrelevant to getting things actually working.
The JavaScript
This is the part which took the longest in the end, I wish this was just a one-liner and really should be but this appears to be the state of the art right now:
// Import the FFI bindings and WASI shim
import createGhcWasmJsffi from '/js/ghc_wasm_jsffi.js';
import { WASI, File, OpenFile, ConsoleStdout } from 'https://cdn.jsdelivr.net/npm/@bjorn3/browser_wasi_shim@0.4.2/dist/index.js';
let wasmInstance = null;
let wasmExports = null;
// Fetch the WASM file
const wasmResponse = await fetch('/js/haskell-wasm.wasm');
if (!wasmResponse.ok) {
throw new Error('Failed to fetch WASM: ' + wasmResponse.status + ' ' + wasmResponse.statusText);
}
const wasmBuffer = await wasmResponse.arrayBuffer();
// Set up exports proxy for FFI
let exportedFunctions = null;
const exportsProxy = new Proxy({}, {
get: (_, property) => {
if (!exportedFunctions) {
throw new Error('WASM exports not initialized when accessing ' + String(property));
}return exportedFunctions[property];
};
})
// Create GHC WASM FFI bindings
const ghcWasmJsffi = createGhcWasmJsffi(exportsProxy);
// Create WASI instance with console stdout
const fds = [
new OpenFile(new File([])), // stdin (fd 0)
.lineBuffered(msg => console.log(msg)), // stdout (fd 1)
ConsoleStdout.lineBuffered(msg => console.error(msg)), // stderr (fd 2)
ConsoleStdout;
]const wasi = new WASI([], [], fds);
const wasiImports = wasi.wasiImport;
// Instantiate the WASM module
const wasmInstantiation = await WebAssembly.instantiate(wasmBuffer, {
"wasi_snapshot_preview1": wasiImports,
"ghc_wasm_jsffi": ghcWasmJsffi
;
})
= wasmInstantiation.instance;
wasmInstance = wasmInstance.exports;
exportedFunctions = wasmInstance.exports;
wasmExports
// Initialize WASI with the instantiated module
.inst = wasmInstance;
wasi
// Initialize the Haskell runtime
.hs_init();
wasmExports
// Initialize the theme toggle
.hs_initializeThemeToggle(); wasmExports
Even with a shim for the WASI side of things this feels like a lot of needless yak shaving. Getting any of this wrong often resulted in weird errors that aren’t at all very clear, especially when you’re only 2 hours into actually looking at WebAssembly.
The long and the short of this is that it’s loading and instantiating the WASM, somewhat akin to a weird linker and then via the exports
property of the instance makes available to the caller the exported API.
The Haskell
Here’s the interesting bit:
{-# LANGUAGE ForeignFunctionInterface #-}
module HaskellWasm
( initializeThemeTogglewhere
)
import GHC.Wasm.Prim
import Data.Enum.Circular
-- Create a JavaScript callback from a Haskell IO action
import javascript "wrapper"
foreign makeCallback :: IO () -> IO JSVal
-- DOM element access
import javascript unsafe "document.getElementById($1)"
foreign js_getElementById :: JSString -> IO JSVal
-- Element property access
import javascript unsafe "$1.classList"
foreign js_getClassList :: JSVal -> IO JSVal
import javascript unsafe "$1.querySelector($2)"
foreign js_elementQuerySelector :: JSVal -> JSString -> IO JSVal
-- Element property setters
import javascript unsafe "$1.textContent = $2"
foreign js_setTextContent :: JSVal -> JSString -> IO ()
-- ClassList operations
import javascript unsafe "$1.remove($2)"
foreign js_classListRemove :: JSVal -> JSString -> IO ()
import javascript unsafe "$1.add($2)"
foreign js_classListAdd :: JSVal -> JSString -> IO ()
-- Event handling
import javascript unsafe "$1.addEventListener($2, $3)"
foreign js_elementAddEventListener :: JSVal -> JSString -> JSVal -> IO ()
-- LocalStorage operations
import javascript unsafe "localStorage.getItem($1)"
foreign js_localStorageGetItem :: JSString -> IO JSString
import javascript unsafe "localStorage.setItem($1, $2)"
foreign js_localStorageSetItem :: JSString -> JSString -> IO ()
-- Media query
import javascript unsafe "window.matchMedia($1).matches"
foreign js_windowMatchMediaMatches :: JSString -> IO Bool
-- Document operations
import javascript unsafe "document.documentElement"
foreign js_getDocumentElement :: IO JSVal
import javascript unsafe "$1.setAttribute($2, $3)"
foreign js_elementSetAttribute :: JSVal -> JSString -> JSString -> IO ()
import javascript unsafe "$1 === null"
foreign js_stringIsNull :: JSString -> Bool
-- Theme data type
data Theme = Light | Dark
deriving (Show, Eq, Enum, Bounded)
-- Convert theme to string for storage/attributes
themeToString :: Theme -> JSString
Light = toJSString "light"
themeToString Dark = toJSString "dark"
themeToString
-- Convert string to theme
stringToTheme :: JSString -> Maybe Theme
stringToTheme s| js_stringIsNull s = Nothing
| fromJSString s == "light" = Just Light
| fromJSString s == "dark" = Just Dark
| otherwise = Nothing
-- Convert theme to icon
themeToIcon :: Theme -> JSString
Light = toJSString "🌞"
themeToIcon Dark = toJSString "🌙"
themeToIcon
-- Apply theme to the page
applyTheme :: Theme -> IO ()
= do
applyTheme theme -- Set data-theme attribute on document element
<- js_getDocumentElement
docElement "data-theme") (themeToString theme)
js_elementSetAttribute docElement (toJSString
-- Update button icon to show the NEXT theme (what you'll switch to)
<- js_getElementById (toJSString "theme-toggle-button")
button <- js_elementQuerySelector button (toJSString ".theme-icon")
iconElement
js_setTextContent iconElement (themeToIcon (csucc theme))
-- Store theme in localStorage
"theme") (themeToString theme)
js_localStorageSetItem (toJSString
-- Get current theme from localStorage or media query
getCurrentTheme :: IO Theme
= do
getCurrentTheme <- js_localStorageGetItem (toJSString "theme")
stored case stringToTheme stored of
Just theme -> pure theme
Nothing -> do
<- js_windowMatchMediaMatches (toJSString "(prefers-color-scheme: dark)")
prefersDark pure $ if prefersDark then Dark else Light
-- Toggle theme to the next value using circular enum
toggleTheme :: IO ()
= do
toggleTheme <- getCurrentTheme
currentTheme let nextTheme = csucc currentTheme
applyTheme nextTheme
-- Initialize the theme toggle functionality
initializeThemeToggle :: IO ()
= do
initializeThemeToggle -- Get and apply initial theme
<- getCurrentTheme
currentTheme
applyTheme currentTheme
-- Get the button element
<- js_getElementById (toJSString "theme-toggle-button")
button
-- Get the classList and manipulate it
<- js_getClassList button
classList "hidden")
js_classListRemove classList (toJSString "theme-toggle")
js_classListAdd classList (toJSString
-- Create a JavaScript callback for the toggle function
<- makeCallback toggleTheme
callback
-- Add click handler to the button
"click") callback
js_elementAddEventListener button (toJSString
-- Foreign exports for WASM - makes functions callable from JavaScript
"hs_initializeThemeToggle" initializeThemeToggle :: IO () foreign export ccall
There’s clearly 3 parts to this:
- Special functions that call JavaScript so that we can interact with the web page.
- Regular old Haskell code.
- A special export that makes a Haskell function available to the calling JavaScript.
The "wrapper"
calling convention is special - it tells GHC to generate JavaScript code that properly marshals between JavaScript function calls and Haskell IO actions. The generated FFI binding looks like:
...args) => __exports.ghc_wasm_jsffi_callback($1, ...args) (
This wrapper handles Haskell runtime context, threading, and ensures the callback can be called from JavaScript as a normal function.
It makes use of the csucc function from the circular-enum package, which satisfies our requirement for an additional package but also makes handling the toggling very simple and everything would continue to work if I added a third theme.
Wait A Second
If it wasn’t clear by now that little icon up in the top right of this very page is what I implemented, with that logic powering the toggling and defaulting of the theme.
Conclusion
Going back to the goals, while it does have a lot of shim JS, it is just that and all the logic is in the Haskell code. Plus it made use of a non-standard library, so that part is proved out as well. Plus it “just works”, once all of those tedious bits are put into place.
The output after all the shrinking is a 791KB WASM file and 3KB of FFI bindings to make this all work, which isn’t that crazy given how much is packed in there but the stock JavaScript approach to this would be probably less than the FFI bindings in size.
One thing that crossed my mind once I had all the workings up and running was that it would be fairly easy to create a rudimentary React-like library and the entire page would be controlled by Haskell that way. I’m not sure if I’d particularly want to, but the important part is that it’s totally possible.
Either way, this was a fun (albeit at times frustrating getting it to work) little experiment and I hope that it becomes even easier in the future.