A GHCJS binding to React based on the Flux design. The flux design pushes state and complicated logic out of the view, allowing the rendering functions and event handlers to be pure Haskell functions. When combined with React's composable components and the one-way flow of data, React, Flux, and GHCJS work very well together.

Project Status

ORPHANED IN EXPERIMENTAL STAGE

to be specific, this means:

• nobody has touched this in years.
• your PRs may take weeks or months to be processes, or never get processed.
• there are serious known bugs and design flaws.
• master may show breaking changes without prior notice and with very short public discussion.

you've been warned!

Getting started

Add this to your stack.yaml:

packages:
- location:
    git: https://github.com/liqula/react-hs
    commit: 8eb9d31fcfa0a79ef006565f299d47b210bdd690  # please check if that's still the most recent commit on master.
  extra-dep: true
  subdirs:
  - react-hs
  - react-hs-servant
  - react-hs-examples

Then read the rest of this README and the READMEs in the packages.

Details

This is a fork of three unmaintained bitbucket repositories:

• https://bitbucket.org/wuzzeb/react-flux/commits/2be756ffa5d60bdc15f767f4006f0e145efcb39e
• https://bitbucket.org/wuzzeb/react-flux-servant/commits/86f086f71667197aae15ee48672207ba0012e98c
• https://bitbucket.org/wuzzeb/react-flux-example/commits/ecdb19e3264b7b23fed92a28eb8a89b1191de935

We are currently working on getting the change logs and issue lists updated. Having this said and with the caveat that you may have to read a lot of source code to get it to do what you want, we believe this version already works a lot better than the original.

Package version numbers are chosen in accordance with https://pvp.haskell.org/.

See the package READMEs for more info.

Please vote on the open issues to help decide which to work on first.

Changes since react-flux

• use haskell equality on stores, props, states in shouldComponentUpdate.
• work-around ghcjs/ghcjs#570: compute store keys in registerInitialStore by hand.
• work-around ghcjs/ghcjs#556: do not use ToJSVal, FromJSVal instances for aeson Value type.
• simplify preventDefault, stopPropagation (eliminates a bizarre and beautiful, but unnecessary hack).
• set up travis ci.
• lots of small api improvements.
• remove lots of deprecated code.
• remove CPP clutter for building with ghc (not ghcjs).

Migration

If you have code that works with react-flux 1.2.3 (the latest on hackage as of the time of this fork), you need to make a few changes. Refer to the TODO app in react-hs-examples for some of the details.

• instead of renderSomeView, call mkSomeView and follow the type errors; except lifecycle views which still use the old types (see #7).
• use View instead of ReactView.
• use view instead of view_.
• mkStore is gone, you need to call registerInitialStore in the beginning of your main function.
• calls to mkControllerView contain a type argument that is a list of all stores that you want to pass to the function that constructs the content.
• make Eq instances for all your prop, state, store types (check out the example if you have un-Eq-able types like functions.)
• stopPropagation, preventDefault are used differently now. They are modifiers of the event handler types, so you should call them like this: div_ [onClick $ \_evt _mevt -> stopPropagation $ dispatch MyAction] $ .... Also, you now need to call an empty modification function 'simpleHandler' if you don't want to do any of this. The type errors will guide you. Check out the TODO example and the haddocks of 'simpleHandler'.

I think that's the gist of it, but I'm pretty sure i forgot a few interesting details. If you need more details or run into any questions, please open an issue.

Related (in no particular order)

• http://blog.wuzzeb.org/
• http://iankduncan.com/posts/2014-12-16-react-js-with-ghcjs.html
• https://hackage.haskell.org/package/reflex-dom
• https://hackage.haskell.org/package/miso
• https://hackage.haskell.org/package/glazier-react
• https://hackage.haskell.org/package/lensref
• https://medium.com/@saurabhnanda/benchmarks-fp-languages-libraries-for-front-end-development-a11af0542f7e