Add Haskell support using GHC in the browser

[sharno]

Following the browser-side Rust support in #1027, I would like to add Haskell using GHC in the browser. I am preparing an implementation that runs the compiler and programs entirely client-side in a worker, with editor syntax support, a starter template, documentation, and tests.

The upstream demo successfully compiles and executes Haskell in Chrome. Its compressed compiler/library archive is approximately 49 MB. The initial integration uses the bundled libraries, exposes stdout/diagnostics to JavaScript, and does not support interactive stdin or installing Hackage packages.

This issue tracks the implementation and provides a place to discuss the runtime choice and integration.

[pullfrog]

  ^{｜ Build this ➔ ｜ Make a plan ➔}

[hatemhosny]

Thank you @sharno
I'm very much interested in adding Haskell. In fact I was experimenting and came up with an initial working demo using MicroHs (see repo). You may want to check this.

MicroHs seems to be active, maintained and much smaller ~2mb. However does it have significant limitations as compared to GHC?
If we think both have their own advantages, we can support both (like we do with F# and F# (Wasm) and many other languages with 2 implementations).

For adding the language to LiveCodes, please check the guide for adding languages and point your agent to the contribution guide.

You may use zig-wasm as a reference for implementation (a script runs in the result pages, loads the wasm compiler in a web worker, creates integration with JS for input, output, errors and exitCode). The starter template demonstrates usage.
For editor support, monaco-languages already have Haskell. I will add support for codemirror, isA.

Thank you!

[hatemhosny]

@sharno

I have created a wrapper for MicroHs here: https://github.com/live-codes/browser-haskell

This is a minimal playground: https://browser-haskell.pages.dev/

It can be used like this: demo

import { createHaskell } from '@live-codes/browser-haskell';

const haskell = await createHaskell({ // ~1.9 MB of wasm, once per page
  baseUrl: 'https://unpkg.com/@live-codes/browser-haskell@0.1.2/dist/'
});


const result = await haskell.run({
  code: `
main :: IO ()
main = do
  [n, k] <- fmap (map read . words) getLine
  print (n + k :: Int)`,
  stdin: "2 40\n",
});

console.log(result.stdout); // "42\n"
console.log(result.error); // null
console.log(result.exitCode); // 0

I started a PR here: #1036

I will call your language implementation (that uses GHC add here #1035 ): Haskell (Wasm).
This is a convention in LiveCodes. Many languages have 2 implementations, one light weight and another with the real compiler compiled to wasm (e.g. Go, C++, Python, Lua, F#, Ruby, etc)

Please give it a try and let me know what you think.

[sharno]

I would suggest the other be visibly called haskell (microHS) or something. So anyone using it would know the limitations of it.

[sharno]

I wonder if you have a mechanism to show the version of the compiler or language being used. This is ghc 9.14 for example. Which matters for the features support

[hatemhosny]

I wonder if you have a mechanism to show the version of the compiler or language being used. This is ghc 9.14 for example. Which matters for the features support

I add it in the language docs: https://haskell.livecodes.pages.dev/docs/languages/haskell#compiler

I would suggest the other be visibly called haskell (microHS) or something. So anyone using it would know the limitations of it.

I used to do that, then it became too much, e.g. Python (Pyodide), Lua (Fengari), etc.
So I renamed all light implementation to the language name and the heavy wasm compiler gets (wasm) appended for simplicity and consistency.
Most users would just want to experiment and would not expect a ~50mb download to try a quick code snippet, so I kept the light version as the default.

However the compiler used is clarified in the docs and language info (small info button beside the language name in the menu).

[sharno]

Makes sense

[hatemhosny]

I also add a note in docs about the difference between such implementations.
E.g. https://dev.livecodes.io/docs/languages/python/