https://github.com/chrbauer/reflex-dom-th
reflex-dom-th transpiles HTML templates to haskell code for reflex-dom
https://github.com/chrbauer/reflex-dom-th
dom haskell html megaparsec reflex-frp template-haskell
Last synced: 4 months ago
JSON representation
reflex-dom-th transpiles HTML templates to haskell code for reflex-dom
- Host: GitHub
- URL: https://github.com/chrbauer/reflex-dom-th
- Owner: chrbauer
- Created: 2022-02-05T12:52:14.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-31T10:55:14.000Z (over 3 years ago)
- Last Synced: 2025-12-08T11:53:31.408Z (6 months ago)
- Topics: dom, haskell, html, megaparsec, reflex-frp, template-haskell
- Language: Haskell
- Homepage:
- Size: 62.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# reflex-dom-th
Do you develop for the web? And you know functional reactive programming is the way to go. So you must use Reflex-DOM.
But how can you integrate all these HTML snippet, which you found. You are tired in converting everything to to el, elAttr' etc, right?
From this day on this reflex-dom-th library will automate the task of converting your HTML templates to Reflex-Dom.
# Examples
The basic example
```
[dom|
hello|]
```
is equivalent to
```
el "div" $ text "hello"
```
You can also put the html in a external file and include it with
```
$(domFile "template.html")
```
It it possible to have multiple elements and attributes
```
[dom|
- Item1
- Item1
```
Dynamic content can be injected between two curly braces. It will reference an unbound variable. It is not a haskell expression. Keeping haskell out of the template will give you better error messages.
```
[dom|
- {{item1}}
- {{item2}}
where item1, item2 :: MonadWidget t m => m ()
item1 = text "Item1"
item2 = text "Item2"
```
It is also possible to bind additionally a `Dynamic t (Map Text Text)' to the attributes
```
divWithAttrs :: MonadWidget t m => Dynamic t (Map Text Text) -> m ()
divWithAttrs dynAttrs = [dom|
```
To bind events to the elements it is possible to extract get the elements as a result. The reference number is the position in the result tuple.
```
(li1, li2, ul, w) <- [dom|
- Item1
- Item1
- {{widget #3}}
```
There is also support for translatable text from [gettext-th](https://hackage.haskell.org/package/gettext-th).
To add translatable text in a template File (see domFile)
```
```