live webview of pretty-simple in action

[cdepillabout]

It would be nice to have a website that could be used interactively to show how pretty-simple formats things.

This could be done in the following steps:

1. Figure how to compile pretty-simple with GHCJS.
2. Create a small frontend application in either Haskell with GHCJS or just plain JavaScript. The frontend application should roughly look like this: https://jsoneditoronline.org/. It should have a textbox on the left for entering some sort of showed Haskell datatype. It should have another Haskell datatype on the right that shows the input Haskell datatype formatted with pretty-simple.
3. The frontend application needs a way to convert from ansi escape sequences output from pretty-simple to HTML for showing in a web page. Maybe there is already a Haskell library (or JavaScript library) that does this?
4. Send a PR with the above.
5. Together we can figure out how to use github-pages to host this example page.

I think there is another pretty-printing library for Haskell that does something like the above, but I forget what the library is called. It might be a good idea to look at how they are doing it.

[cdepillabout]

I'm adding the beginner-friendly label to this, since the actual code you have to write shouldn't be too difficult. However, figuring out how GHCJS works and how to make a frontend app with Haskell (or a frontend JS app that calls out to Haskell), is non-trivial. It may take a long time to actually get the above working for a beginner.

[noughtmare]

I think there is another pretty-printing library for Haskell that does something like the above, but I forget what the library is called. It might be a good idea to look at how they are doing it.

From the footnotes of this blog post, the library is called shower. Here is their interactive webpage: https://monadfix.com/shower/.

[noughtmare]

It is written using GHCJS and Reflex: https://github.com/monadfix/shower/tree/master/js

[georgefst]

With #73, the HTML generation becomes pretty trivial:

pPrintHtml :: Show a => a -> Html ()
pPrintHtml = renderHtml . fmap renderStyle . treeForm . layoutString defaultOutputOptionsLightBg . show
  where
    renderStyle (Style mc b i) =
        (if b then b_ else id) . case mc of
            Nothing -> id
            Just c -> span_ [style_ $ renderColor c]
    renderColor c = "color:" <> T.pack (show c)

(I'm not quite sure what to do with the intensity value)

renderHtml comes from prettyprinter-lucid, which I'll publish once I've found a satisfactory solution to https://github.com/georgefst/prettyprinter-lucid/issues/2.

This would be quite a cool thing to have in place for the 4.0 release.

[georgefst]

Ugly proof of concept using Miso: https://georgefst.github.io/

The full colour highlighting actually works properly in a local version (with jsaddle), but unfortunately it seems to trigger a bug in GHCJS. I'll try to narrow down the source of that.

[cdepillabout]

@georgefst Wow, that's really neat!

[georgefst]

Made a branch for this in case you're interested. Obviously very much WIP.

[georgefst]

@cdepillabout You'll notice I've gone a bit quiet. And it could be a while yet before I come back to this. So I'm thinking, we:

• Release 4.0 on Hackage today
• Open a fresh issue detailing what can be done to polish things up (most of the discussion on this page is no longer relevant)
• Announce on Reddit, with a link to the existing webview, and the new issue, encouraging contributions. There's a workshop going on right now at Munihac about Miso, so this is potentially very good timing.

Are you happy if I go ahead with the release?

[cdepillabout]

@georgefst Thanks for all your work.

Please feel free to go ahead with the release.

Eventually I'd like to move the webview URL to something like https://cdepillabout.github.io/pretty-simple/, so that I also have control over updating it, but I am fine with it being at https://georgefst.github.io/pretty-simple/ for now.

When you do the release, can you make sure to do the following two things:

• Update the CHANGELOG.md with all changes end-users would care about
• Create a git tag at the commit you've pushed to Hackage

[georgefst]

Closing in favour of #81