HSX - Haskell

2020-09-19 18:17:56

@Sridhar Ratnakumar I just found https://github.com/seereason/hsx2hs and I wonder whether it couldn't make inline HTML is something like Reflex much more readable

seereason/hsx2hs

Literal XML syntax in Haskell source code. Contribute to seereason/hsx2hs development by creating an account on GitHub.

TheMatten

2020-09-19 18:23:30

Random example with hypothetical translation (that parses):

app = divClass "container" $ do
  el "br" blank
  elAttr "h1" ("style" =: "text-align: center") $ text "PEG SOLITAIRE"
  el "div" $ do
    el "br" blank
    el "div" $ do
      rec
        gs  <- foldDyn move initialState pos
        pos <- mkBoard gs
        elAttr "h3" ("style" =: "text-align: center") $
          dynText $ fmap (\g -> "Score: " <> (T.pack . show . score) g) gs
      return ()

app = <container>
  <br />
  <h1 style="text-align: center">PEG SOLITAIRE</h1>
  <div>
    <br />
    <div><% do
      rec
        gs  <- foldDyn move initialState pos
        pos <- mkBoard gs
        <h3 style="text-align: center">
          <% dynText $ fmap (\g -> "Score: " <> (T.pack . show . score) g) gs %>
        </h3>
      return ()
    %></div>
  </div>
</container>

TheMatten

2020-09-19 18:25:51

I runs on haskell-source-exts and so it may not support all extensions and HS syntax quirks, but I would have no problem moving few problematic definitions around to get this syntax working

Sridhar Ratnakumar

2020-09-19 18:29:36

@TheMatten readable for designers?

TheMatten

2020-09-19 18:36:32

I just find it less cluttered compared to el.., quotes, parens and several operators in normal syntax - but it may be personal taste after all :big_smile:

Sridhar Ratnakumar

2020-09-19 18:38:03

I can see it being useful for allowing end-users to customize the HTML, but that will require compiling (generated) Haskell code on every change - which is not totaly impractical, as we can ship ghc with neuron. :-)

Sridhar Ratnakumar

2020-09-19 18:38:56

I'm of course thinking of https://github.com/srid/neuron/issues/253

Full themes support · Issue #253 · srid/neuron

What we have right now is the ability to override color schemes. It would be nice to also be able to override HTML layout and CSS styles. Since neuron uses reflex-dom for HTML and clay for CSS, a t...

TheMatten

2020-09-19 18:41:50

I mean, HS often makes in-language data construction pretty terse, it's just that there still seems to be some space for improvement
hsx2hs seems to be quick, so I guess it won't make that much difference
Oh, I didn't really think of possibility of using this as markup in neuron, but that sounds interesting too :big_smile:

Asad Saeeduddin

2020-09-21 17:02:07

@TheMatten In PureScript I ended up making a few infix operators for building up vdom elements from plain functions and records etc. Here's some examples of what it looks like:

  in R.section
     |= { className: "todoapp" }
     |< [ hdr
        , veil $ R.section
          |= { className: "main" }
          |< [ tgl
             , tds
             ]
        , veil $ ftr
        ]
     <> dbg

R.ul
     |= { className: "filters" }
     |< [ R.li |~ all |- a All
        , R.li |~ act |- a Active
        , R.li |~ com |- a Completed
        ]

  in R.footer
     |= { className: "footer" }
     |< [ R.span
          |= { className: "todo-count" }
          |- count
        , fltrs
        , veil
          $ clear
            |= { className: "clear-completed" }
            |- R.text "Clear completed"
        ]

  in R.header
     |= { className: "header" }
     |< [ R.h1 |- R.text "todos"
        , inp |~ key $ { className: "new-todo", placeholder: "What needs to be done?" }
        ]

TheMatten

2020-09-21 17:44:22

Oh, that's nice
I ended up using qualified do (in PS too):

  I.input O.do
    I.ref input
    I.placeholder "Type something"
    I.errorD $ String.contains (String.Pattern "e") <$> R.value input