how to debug reflex-dom programs-

Question

So I just discovered this library and thought it might be awesome for building UI's. Here is a small exercise I tried to implement when learning this library. Basically it tries to open a directory on the local file system and displays all the files in this directory. It compiles with no problem but when I open the index.html it just shows a blank page. I have no idea how to debug the program. Here is the code:

{-# LANGUAGE OverloadedStrings #-}
import           Reflex.Dom
import qualified Data.Text as T
import           System.Directory
import           System.FilePath
import           Control.Monad
import           Data.List (map)


main :: IO ()
main = do
  files <- getDirectoryContents "/"
  let names = map (T.pack . show) files
  mainWidget $ body  names

body :: MonadWidget t m => [T.Text] ->  m ()
body files = el "div" $ do
  el "h2" $ text "Reflex File Test"
  el "ul" $ do
    let lables = map text files
    mapM_ (el "li")  lables

Does anything show up if you don't try to use `getDirectoryContents`? — duplode, Feb 22 '18 at 04:45
yes. for example, if I hard code `names=["1","2","3"]`, everything just works. — user2812201, Feb 22 '18 at 05:03
For an introduction to reflex-dom, you can read [this tutorial](https://github.com/hansroland/reflex-dom-inbits) — Jogger, Feb 22 '18 at 10:42

score 3 · Accepted Answer · answered Feb 22 '18 at 06:35

3

A good first step in debugging ghcjs problems is to check the browser console. In this case you will see : "/: getDirectoryContents: failed (operation unsupported on this platform)" .

This makes sense. The code is running in the browser - not on the server, or directly on the client. So the whole file system concept does not really apply here.

answered Feb 22 '18 at 06:35

Dave Compton

1,421
1
11
18

1

Cf. [the shim for `System.Directory`](https://github.com/ghcjs/shims/blob/6fb94ef2e0aa93dc862cef2fa98d440b14184a2c/pkg/directory.js) in GHCJS, in which functions appear (if I'm interpreting that correctly) to be enabled or disabled depending on whether the code is built targeting Node or the browser. – duplode Feb 22 '18 at 13:28
So a backend like yesod or happstack is must if one wants do access local file system? – user2812201 Feb 22 '18 at 15:37
2

You can compile reflex with ghc instead of ghcjs to produce a standalone executable that can access the local file system. If you run your program in this mode then it shows directory contents. – Dave Compton Feb 23 '18 at 02:00

how to debug reflex-dom programs-

1 Answers1