Opt-Out of Web-View's Atomic CSS

[seanhess]

See #100. Basically, if users don't want to use the atomic CSS in web-view, or want to use an existing stylesheet, they ought to be able to without too much pain. (Note that web-view IS required, we need that type variable on View. Maybe we can come up with a way to let the user integrate with the type checker via the Reader effect or something?)

Options / ideas:

1. Create a separate Web.Hyperbole.Minimal that does not include web-view by default.

2. Take web-view exports out of Web.Hyperbole, and require users to add a second import:

import Web.Hyperbole
import Web.Hyperbole.View

Then the user could switch to another approach by changing the second import to Web.Hyperbole.External or something...

Are there other frameworks or projects that have figured out how to do this effectively?

Open Questions and Issues:

1. Will the approach we use work with the forms support? We don't want them to have to re-implement them just because they aren't using atomic css.

[pegesund]

This would be very cool to get into production, with some documentation. Flexible css-handling is must :)

[seanhess]

This is fixed in the big atomic PR: seanhess/atomic-css#21 - Atomic CSS is now opt-in, and there is basic support for adding classes:

Note that the class_ attribute MERGES classes. This makes it much easier to conditionally apply them. See below.

module Example.Page.ExternalCSS where

import Data.Text (Text)
import Web.Hyperbole

main :: IO ()
main = do
  run 3000 $ do
    liveApp (basicDocument "Example") (runPage page)

page :: (Hyperbole :> es) => Eff es (Page '[Items])
page = do
  pure $ do
    stylesheet "external.css"
    hyper Items $ itemsView "one"

data Items = Items
  deriving (Generic, ViewId)

instance HyperView Items es where
  data Action Items = Select Text
    deriving (Generic, ViewAction)

  update (Select t) = do
    pure $ itemsView t

itemsView :: Text -> View Items ()
itemsView sel = do
  el @ class_ "parent" $ do
    item "one"
    item "two"
    item "three"
    item "four"
    item "five"
 where
  selected i =
    if sel == i
      then class_ "selected"
      else id

  item i =
    -- the class_ attribute MERGES classes if you set it more than once
    button (Select i) @ class_ "item" . selected i $ text i