Let's say you've tried out miso. Awesome! Now you want to make a bigger app, but you probably don't want to have the entire app in one big Model
, one huge set of Action
s and a view
function larger than the Eiffel tower. You'll want to divide things up into components. Each of those components should:
- Be reusable
- Have its own state (
Model
) - Hide its complexity from its parents, yet...
- Communicate key events to its parents
- Be able to embed its own components
See Button.hs
, which is the component, and Main.hs
, which embeds two buttons.
The Button
module has its own Model
, Action
, updateModel
and viewModel
. When looking at updateModel
and viewModel
, we see that their definitions are slightly different than we're used to.
Function | Expected | Actual |
---|---|---|
updateModel |
Action -> Model -> Transition action Model () |
Interface action -> Action -> Transition action Model () |
viewModel |
Model -> View Action |
Interface action -> Model -> View action |
The Interface action
is defined above in the file. The component decides which actions are interesting for its parent through this data structure. The Interface
record has a field for every such Action
. This allows the parent to listen to the important actions, while not having to bother with the ones that are only meant for the component itself.
From this directory, run:
nix-shell --run 'cabal configure && cabal build'
Then open dist/build/main/main.jsexe/index.html
Alternatively:
nix-build
Then open result/bin/main.jsexe/index.html