Applicative Forms

[LukaHorvat]

This isn't really an issue, I just wanted to share something I thought was neat.

I wanted to be able to build a widget that constructs a bigger structure out of widgets that construct it's parts. So basically a form builder. After a few attempts and remembering a trick with existential states that the foldl library uses, I came up with this:

data Form a where
    Form :: state -> (state -> [Widget HTML (Maybe event)]) -> (state -> event -> state) -> (state -> a) -> Form a
instance Functor Form where
    fmap f (Form s w u p) = Form s w u (f . p)
instance Applicative Form where
    pure a = Form () (\() -> []) (\() () -> ()) (\() -> a)
    Form s1 w1 u1 p1 <*> Form s2 w2 u2 p2 =
        Form (s1, s2) w u p
        where
        w (s1', s2') = (fmap (fmap Left) <$> w1 s1') <> (fmap (fmap Right) <$> w2 s2')
        u (s1', s2') (Left e1) = (u1 s1' e1, s2')
        u (s1', s2') (Right e2) = (s1', u2 s2' e2)
        p (s1', s2') = p1 s1' (p2 s2')

formToWidget :: Form a -> Widget HTML a
formToWidget (Form s w u p) = go s
    where
    go s' = do
        e <- div [] (w s')
        case e of
            Nothing -> return (p s')
            Just e -> go (u s' e)

So basically, a Form is a widget with an internal state that it knows how to update. When you applicatively combine two forms, you get a bigger form that runs the widgets in parallel until one of them signals that it's done (by returning Nothing). It then projects out it's internal state into some structure.

Here's how it can be used:

textForm :: Form Text
textForm =
    Form "" (\st -> Just . targetValue . target <$> input [value st, onInput]) (\_ t -> t) Prelude.id

submit :: Form ()
submit =
    Form () (\() -> Nothing <$ input [type_ "submit", onClick]) (\() () -> ()) Prelude.id

data Combo = Combo
    { a :: Text
    , b :: Text }
    deriving Show

testCombo :: Form Combo
testCombo = (\a b _ -> Combo a b) <$> textForm <*> textForm <*> submit

In a sense, a Form is a widget with parallel composition instead of sequential.

[pkamenarsky]

This is super useful, thanks! If you feel motivated enough to package it up as a separate module in the examples folder and submit a PR I'll merge 🙇

[LukaHorvat]

Sure. I'm still iterating on the design as I'm working on my project so I'll do that when it's done.

I'm really enjoying the mental shift when working with concur-replica so far.