The aim of the lib is to provide a set of functions that allow
div (className "myWarning" $ id_ "mydiv" $ defGlobals) $ do
in place of
elAttr "div" ("class" =: "myWarning" <> "id" =: "mydiv") $ do
and prevents writing e.g.
p ( href (URL "..") $ def) $ do ..
as p-tag doesn't have href-attribute.
Another aim is to have components with pre-defined functionality. The components try to be self-contained so that there would be no or low need to maintain (dynamic) states outside the components.
The lib uses Reflex.Dom and similar design choices apply when using it.
As of the beginning of 2018, lib started to use new project-stuff.
There are examples:
- example1: basic use
- exampleTbl: table-component
- exampleTree: tree-component
About the naming conventions
- ' at the end of a tag name is similar as in elAttr' (it calls elAttr' internally)
- D at the end of a tag name means dynamic (it uses elDynAttr internally)
- D' at the end of a tag name is similar as in elDynAttr'
- N at the end of a tag name means default attributes
- N' is like el'.
- _ at the end of a tag name means default attributes (that is, empty) and blank content (only a few elements have this defined).
- "class" attribute function is className in this lib
Lib is probably going to see some re-organization and re-naming etc. Suggestions are more than wellcome!
First, get the repo with
git clone and
cd into the directory, and after that make sure that the reflex-platform is in place:
git submodule update --init --recursive
To build with GHC, use the nix-shell command to enter the sandbox shell and use cabal (which is supplied by the sandbox):
nix-shell -A shells.ghc cabal new-build all
Or in ghc-shell with ghci
:rel and then point the browser to the localhost with appropriate
To build with GHCJS:
nix-shell -A shells.ghcjs cabal --project-file=cabal-ghcjs.project --builddir=dist-ghcjs new-build all
You can also build examples separately by replacing all with exe:name, e.g.
cabal new-build exe:tableEx cabal --project-file=cabal-ghcjs.project --builddir=dist-ghcjs new-build exe:exampleTbl
For further information, see the following
Note that if you have already obtained repo but want to update the reflex-platform, you can try, e.g.,
git submodule foreach "(git checkout develop; git pull --recurse-submodules)&"
(Note that the above command gets the develop-branch of the platform.)
See also the .ghci. The warp-compilation can be used with ghci. Also, the dev-server.sh can be used if first uncommenting the corresponding target from exampleTbl.cabal-file and then entering the nix-shell with ghc-tools (not ghcjs).
The wish list is quite long at the moment. The list can be seen at todo.md. It includes larger ones that probably take longer time and things that are on to-be-done-next list and on would-be-nice-to-have list.
As this lib is in it's infancy, maybe it is better to be open to naming convention and re-structuring suggestions etc. At the moment, some of the chosen names for attribute combinators are not consistent with regards to each other.
Bugs are more than likely to be found, as this is early work and there are no test cases (except example-programs).
If you want to compile the examples to android, the singletons-package is a bit problematic at the moment. (This lib may be split because of this.) If you comment the singletons-package from cabal-files and corresponding modules (VS-ending and the examples), then the examples compile to android.
See github, there are other libs possibly doing the same or almost the same thing. (TODO, check the available libs.)