GHC WebAssembly/JS backend support

[fatmalama]

Is your feature request related to a problem? Please describe.
ghcjs is a bit outdated and stuck at ghc 8.*

Describe the solution you'd like
both tweag's WebAssembly backend and a new JS backend were recently merged into GHC 9 and will probably get the most support going forward wrt haskell on browsers

Additional context
the new JS backend talks about not being complete enough yet (missing Template Haskell) and the WebAssembly backend I don't know if has access to the DOM

anyways, would be exciting!

[noinia]

According to the IOG blog ghcjs-base and friends have been updated to support the ghc js backend, so I think that means this issue has finally become actionable :).

[ysangkok]

Everything seems to compile on ghc 9.10-alpha3 from ghcup and head.hackage with this patch

diff --git a/miso.cabal b/miso.cabal
index dd27739..bf2a39a 100644
--- a/miso.cabal
+++ b/miso.cabal
@@ -137,6 +137,7 @@ library
     hs-source-dirs:
       text-src
   build-depends:
+    ghcjs-base,
     aeson,
     base < 5,
     bytestring,
diff --git a/src/Miso/Html/Types.hs b/src/Miso/Html/Types.hs
index 3310fda..a2b4dfb 100644
--- a/src/Miso/Html/Types.hs
+++ b/src/Miso/Html/Types.hs
@@ -65,7 +65,7 @@ import           Text.HTML.TagSoup          (Tag(..))
 import           Miso.Effect
 import           Miso.Event
 import           Miso.FFI
-import           Miso.String                hiding (reverse)
+import           Miso.String                hiding (elem, reverse)
 
 -- | Core type for constructing a `VTree`, use this instead of `VTree` directly.
 data View action

I use the command

cabal build --with-ghc=javascript-unknown-ghcjs-ghc --with-ghc-pkg=javascript-unknown-ghcjs-ghc-pkg --allow-newer

But I run out of memory during linking of the first demo application in the README. Only have 8G of RAM on this laptop, will try another machine some other day if nobody else in this thread has time...

[hasufell]

I ran the test suite (needed a change for aeson-2) and also had to pass --with-hsc2hs=javascript-unknown-ghcjs-hsc2hs to cabal. It succeeded.

---

edit: apparently have to run the test through the browsers. There I get:

uncaught exception in Haskell main thread: ReferenceError: h$splitmix_init is not defined

[hasufell]

haskellari/splitmix#75

[amesgen]

As another resource: We have some examples of how to use Miso with the WASM backend here: https://github.com/tweag/ghc-wasm-miso-examples

[hasufell]

uncaught exception in Haskell main thread: ReferenceError: h$splitmix_init is not defined

Fixing that with a source-repository-package stanza in cabal.project now leads to:

uncaught exception in Haskell main thread: ReferenceError: $1 is not defined

The offending generated code is:

function h$$72640042() {var a=h$stack[(h$sp-1)];
h$sp-=2;
window.global_test_results = $1;(a);
return h$rs();
};

[hasufell]

As another resource: We have some examples of how to use Miso with the WASM backend here: https://github.com/tweag/ghc-wasm-miso-examples

Doesn't work here: haskell-wasm/ghc-wasm-miso-examples#10

[ysangkok]

Seems like the JavaScript part of this issue is addressed in:

• Support GHC JavaScript backend #738

[fatmalama]

has anyone done a size comparison between WASM and (the new) GHC JS backends? considering @dmjio worries about size on #738

[functora]

Does it make sense to enable wasm backend support by removing TH like it's done here? master...amesgen:miso:remove-th
I don't see the other easy way to work around TH when compiling for a wasm target. Maybe it would be ok to make a custom setup script to auto-generate Haskell code with inlined JS files instead of using TH. However, custom setup will not work for the wasm target either, it needs to be simple for this specific target.

[amesgen]

Does it make sense to enable wasm backend support by removing TH like it's done here? master...amesgen:miso:remove-th I don't see the other easy way to work around TH when compiling for a wasm target. Maybe it would be ok to make a custom setup script to auto-generate Haskell code with inlined JS files instead of using TH. However, custom setup will not work for the wasm target either, it needs to be simple for this specific target.

That used to be necessary; but not anymore as the Wasm backend now has Template Haskell support: https://www.tweag.io/blog/2024-11-21-ghc-wasm-th-ghci/ (custom setup is unrelated and still unsupported, but miso doesn't use a custom setup).

See e.g. https://github.com/tweag/ghc-wasm-miso-examples for a concrete example

[dmjio]

miso, miso-examples and client (for haskell-miso.org) now all support the WASM backend. Miso also builds with the latest JS backend as well.

#768 <-- instructions are in this PR.