dmjio / miso

:ramen: A tasty Haskell front-end framework
https://haskell-miso.org
BSD 3-Clause "New" or "Revised" License
2.19k stars 139 forks source link

GHC WebAssembly/JS backend support #724

Open mikelpr opened 1 year ago

mikelpr commented 1 year ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

https://github.com/haskellari/splitmix/pull/75

amesgen commented 7 months ago

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 commented 7 months ago
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 commented 7 months ago

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: https://github.com/tweag/ghc-wasm-miso-examples/issues/10

ysangkok commented 7 months ago

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

mikelpr commented 6 months ago

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