A binding to React based on the Flux application architecture for GHCJS https://bitbucket.org/wuzzeb/react-flux
|Latest on Hackage:||1.2.3|
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.
The haddocks contain the documentation.
Using in your own project
I use stack to build my frontend which uses react-flux. I set up stack and
ghcjs using these
instructions. Note that
react-flux requires GHCJS master (a.k.a. improved base). I keep updated with
the latest version of GHCJS and lts. As I write this, I use the following
but as new LTS versions or new GHCJS versions come out I keep updating to them (and
probably forget to update this README :)
resolver: lts-6.1 packages: - . extra-deps: - react-flux-(version) compiler: ghcjs-0.2.0.20160414_ghc-7.10.3 compiler-check: match-exact setup-info: ghcjs: source: ghcjs-0.2.0.20160414_ghc-7.10.3: url: https://s3.amazonaws.com/ghcjs/ghcjs-0.2.0.20160414_ghc-7.10.3.tar.gz sha1: 6d6f307503be9e94e0c96ef1308c7cf224d06be3
The source contains some example applications. To try out the TODO example, clone the repository, set up ghcjs manually as in the previous section, and then execute:
stack build make cd example/todo firefox todo.html
If you don't have closure installed, you can open
todo-dev.html instead of
todo.html. For more details on
the example applications, see the README.
To run the test suite, first you must build both the example applications and
the test-client using ghcjs. (The test-client is a react-flux application
which contains code for everything not contained in the todo example.) This is
stack build below. Then, you must build the test suite, which is a
haskell application using
must be built using GHC (not GHCJS), so there is a separate
test/spec directory. Also,
react-intl must be installed in the test client
directory. In summary, run the following commands:
cd test/client npm install react-intl cd test/spec stack build
Finally, start selenium-server-standalone and execute the test suite. Make sure you also have
closure installed, since the test suite will compress the todo app before testing it. It must be
started from the
cd test/spec stack exec react-flux-spec
It differes significantly from the other two react bindings, react-haskell and ghcjs-react. In particular, the major difference is how events are handled. In the Flux design, the state is moved out out of the view and then handlers produce actions which transform the state. Thus there is a one-way flow of data from the store into the view. In contrast, react-haskell and ghcjs-react both have event signals propagaing up the react component tree, transforming state at each node. In particular, react-haskell with its InSig and OutSig have the signals propagate up the tree and optionally transform state at each node and change the type of the signal.
liftViewToStateHandlerutility functions which can be used to transform the handler that a
Update the test suite to use hspec-webdriver-1.2. There was no change to any code besides the test suite.
A few fixes to get the haddock documentation (hopefully) working on hackage, no functional change to any code in this release.
(Breaking Change) Add timeout support to the AJAX functionality. This has three changes. First, the AJAX code moved into it's own module
React.Flux.Ajaxwhich is not re-exported by
React.Flux. Second, the
AjaxRequesthas a new entry
reqTimeoutto optionally specify a timeout value. Finally, the
jsonAjaxfunction now takes a
RequestTimeoutas the first parameter.
When compiling with GHC (not GHCJS), add fake instances for FromJSVal to allow more programs to compile with GHC. (Thanks Sönke Hahn!)
React.Flux.Addons.Intl. These functions, which have been used internally for a while, convert a Haskell
react-fluxwhen you want to pass dates or times to messages.
Some haddock improvements to
Breaking Change - I removed the use of
Stringand replaced it with either
ghcjs-base). If a value was just going to be passed straight into react, I made it a JSString and if the value was intended to be manipulated in Haskell I used Text. The main changes are:
Despite being quite a large change, it didn't take much effort for me to convert my application to this new API. You can see the conversion of the todo example application here: https://bitbucket.org/wuzzeb/react-flux/commits/a630da5f9032745ab92da6e3d9f9038915b9b319 The main things that required changing are:
* Converting between `String` and `JSString` is done via `pack` and `unpack` in `Data.JSString`. Converting between `Text` and `JSString` is done via `textToJSString` and `textFromJSString` in the `Data.JSString.Text` module. In fact, this conversion needed to happen in only a few places for me because for the most part the `IsString` instance and `OverloadedStrings` extension properly converted the string literals to the proper type. A few places I needed to use `<>` from `Data.Monoid` to concatenate `JSString`s. * A few places I was accidentally using `$=` for non-literal strings. Switching these to `&=` was enough, since `&=` is polymorphic over the type of the property value. * Most places using `elemText` had an error, but here it was straightforward to switch to either `elemString` or keep `elemText` and use `Text` values inside my store.
React-flux has used the shouldComponentUpdate lifetime method to prevent re-rendering in some cases, but it was finicky and sometimes wouldn't work (not a correctness bug, just a missed performance improvement). I now better understand when it works and does not work, and edited the documentation to explain this and what you can do in your own code (primarily add bang patterns to force thunks). The new documentation is at the end of the main module page.
The shouldComponentUpdate lifetime method now knows about view props which are tuples of size two or three, and will be able to skip re-rendering as long as each component of the tuple is unchanged (and is not a thunk).
React.Flux.Addons.Intlnow uses a new type
IntlPropertydefined in the module instead of using the pair type from aeson. This allows passing arbitrary JSVals to i18n functions instead of just aeson values. This causes API breakage in
stylecombinator to easily write inline styles on elements.
viewWithSKeyfor views with integer and string keys. The old
viewWithKeywas akward to use when OverloadedStrings was enabled.
Fix the build when building with GHC instead of GHCJS (an import was incorrectly protected by CPP)
- Fix a rare bug in stateful view event handlers: occasionally deepseq was not called and so there was a race between react reusing the event and the haskell code extracting data from the event.
- Add overlapping pragmas to the Callback instances, making the
callbackfunction easier to use without requiring explicit type signatures. This change is backwards compatible.
- Some minor documentation updates.
Fix a bug in the
jsonAjaximplementation: the request body was not properly JSON encoded.
Add helper functions
React.Flux.Combinatorsto assist with sending a request to the backend and turning the response into actions. See the haddocks for more information.
Everything in react-flux is working with no changes against React 15 release candidate 1, although react-bootstrap is currently not compatible (https://github.com/react-bootstrap/react-bootstrap/issues/1686).
React.Flux.Addons.Intlis working with no changes with react-intl 2.0 release candidate 1.
I switched to using stack to build, and updated the documentation to explain how to use stack. It is still possible to use cabal but I suggest using stack. There is no functionality change in this release, just updated documentation.
Update to build with latest ghcjs master. The breaking change was https://github.com/ghcjs/ghcjs-base/commit/968dff527c2be2d3d4815e437ad9b2931ea1f35d which renamed JSRef to JSVal. Therefore, react-flux no longer builds with ghcjs versions without this commit.
Add formatting support for properties to
React.Flux.Addons.Intl. These are needed for example to translate the placeholder text for an input element. This improvement caused a few changes to the types the Internal module.
Add a new example purecss-side-menu showing a responsive side menu built with PureCSS.
React.Flux.PropertiesAndEventsto allow easily setting class names based on calculations.
Add a new module
React.Flux.Combinatorswhich is re-exported by
Combinatorsmodule contains useful utilities that while not required, make your life a little simpler.
Bindings to react-intl (http://formatjs.io/react/) for i18n support. This is useful even if your app is a single language, as it allows easy number, date, relative time, and message formatting like pluralization. It also supports multiple locales and translations of messages.
The type of
callbackhas extended to allow arbitrary function properties to be passed to foreign classes. The old
callbackaccepted callbacks of type
Aeson.Value -> handlerwhile the new callback allows functions of any number of arguments, as long as each argument implements
FromJSVal, any existing calls to
callbackshould still work. This change also caused some changes to types in
Add a function
React.Flux.PropertiesAndEventsto create nested properties.
- Support for React 0.14
- React 0.13 and 0.14 are both supported from the same Haskell code, the differences are handled internally.
- If you are using React 0.14, you will have to include
react-dom.min.jsand make sure the
ReactDOMvariable is protected by closure similar to how
Reactmust be protected.
initializeTouchEventshas been removed from React 0.14, so you can remove the call from your app.
- The SVG
image_tag is now supported by
- The new media events on images and videos don't have direct Haskell equivalents, instead the handlers can be
created by the new
- The CSS transitions in
React.Flux.Addons.Reactwere made simpler by just passing the raw properties. There were several changes to the possible properties in React 0.14 and covering them all from Haskell is not worth it when the properties can easily be created directly.
reactRenderToStringwas added to allow executing a react-flux application using node.
- Fix to build with latest ghcjs-base (requires at least aaa4d59117f37d1b9c60a154a9128b3bcc6301cd) of ghcjs-base), so you may need to recompile ghcjs and ghcjs-base.
- Add a function 'property' to create a property from any JSVal, not just Aeson values.
- Add a function 'elementProperty' to create a property from a ReactElementM, useful for interacting with foreign React classes.
Don't require web-routes dependency if not building the routing example
- Bindings to react-bootstrap and the react addons
- Add new routing example application (thanks Vladimir Sekissov!)
Switch to use the improved-base branch of ghcjs (thanks Vladimir Sekissov!)
- Initial release