virtual-hom

Haskell+GHCJS implementation of virtual-dom, mixed with a lens-based API for creating and composing user interfaces.

data AppState = Loading (...) | Error (...) | Done (...)
makePrisms ''AppState


stateView :: View Identity AppState
stateView =
  (on _Loading loadingView) <>
  (on _Error   errorView)   <>
  (on _Done    doneView)

theUI :: View Identity Int
theUI i = [container & children .~ [
  row & children .~ [
    h1 "Hello, world",
    p & content .~ "I am a paragraph!",
    p & content .~ ("This button has been clicked " <> (show i) <> " times"),
    btnDefault 
      & content .~ "Submit"
      & callbacks . click ?~ (\_ -> return . succ)]
    ]
  ]

Documentation

Slides from my lightning talk at Haskell Exchange 2016: https://github.com/j-mueller/talks/blob/master/2016-10-haskell-exchange/2016-10-07-virtual-hom.pdf
Example project (ready to build): https://github.com/j-mueller/virtual-hom-example

Status of Project

The virtual-dom part is functional. However, since I've built this to support another project of mine, I haven't spent much time on providing a complete list of constructors for all dom elements. So it definitely needs some polishing before it can be released properly. In the meantime, you can build any kind of element directly, look at Html.hs for examples.

Comparison of virtual-dom parts with their equivalents in virtual-hom:

vdom, a render and patch algorithm for vtree: See prepare and render in Rendering.hs
vtree, a realtime diff algorithm: See diff in Rendering.hs. (Not sure if it qualifies as "realtime")
virtual-hyperscript, a DSL for creating virtual trees: Not really a DSL here, it's the Elem cb a data type in Element.hs, and constructors in Html.hs

TO DO:

Support a user-defined key property to allow re-ordering of child elements instead of mutation
Decide whether to use JSString everywhere, instead of Text
XmlHTTPRequest example with ghcjs-dom
Performance improvements

DONE:

Fix bug that results in elements being rendered in the wrong order
Add constructors for remaining HTML5 elements to Html.hs
Improve callbacks (more callbacks)
Improve callbacks (callbacks with arguments)

How to build

stack setup
stack build

To generate the haddocks, stack --stack-yaml stack-ghc.yaml haddock
To build the examples, stack build --flag virtual-hom:examples
To run the tests, stack test --stack-yaml=stack-ghc.yaml

License

BSD3

Contributions

Bug reports, pull requests, feature requests are welcome

Ideas etc

Prisms for validation

j-mueller / virtual-hom