git.iko.soy/rowtype-yoga/purescript-yoga-react-dom
on main help sign in
rowtype-yoga/purescript-yoga-react-dom/README.md
85 lines 3.1 kB history raw
1# DOM for react-basic
3After using react-basic-hooks for a while I've gathered a small wishlist for things that I'd like to work a little differently.
5## What it looks like:
7```purescript
8module Example where
10import Prelude hiding (div)
11import Yoga.React.DOM.HTML (div, a, span)
12import Yoga.React.DOM (text)
14example =
15 div { "data-testid": "example" }
16 [ a { href: "https://example.com" }
17 $ span { "aria-label": "somelabel" } "Example"
18 , span {} " and so on..."
19 ]
20```
22vs.
24```purescript
25module Example where
27import Prelude hiding (div)
28import React.Basic.DOM (div, a, span, text)
29import Foreign.Object (singleton) as Object
31example =
32 div
33 { _data: Object.singleton "testid" "example"
34 , children:
35 [ a { href: "https://exmaple.com", children: [ span { _aria: Object.singleton "label" "somelabel", children: [ text "Example" ] } ] }
36 , span { children: [ text " and so on..." ] }
37 ]
38 }
39```
41## Trying it out / Installation
43This is a library that works on its own and in conjunction with the existing react-basic-hooks-dom library.
46Then run:
48```sh
49spago install yoga-react-dom
50```
52## Features and design goals
54### Documentation with examples for each component
55Since there's no tooling in PureScript that will autocomplete possible record keys, I've decided to work around this limitation by providing some short documentation with the most important attributes for each component and a copy-pasteable exmaple.
57There are also certain relationships between HTML elements that are very difficult to enforce in the type system, such as how to nest tags correctly (e.g. `table`, contains `thead`, and `tbody` which contains `tr`, which contains `td` or `th`, ...). I hope that the provided examples remedy these problems a lot since the documentation will popup when autocompleting the HTML tag's name.
59### Ability to pass any "aria-*" or "data-*" prop directly
60This makes working with Hooks that return these props and expect the user to spread them onto your own component's props a lot easier and less error-prone.
62### `aria-*` props are typechecked
63In contrast to `data-*` props, `aria-*` props are finite and can't have arbitrary names.
64This is an improvement that could be made in the current DOM as well, but I decided to skip it and do it here.
67### Improved readability by separating the children prop out
69This is in line with HTML where the children are not part of the attributes and aren't named.
71### Allows passing single children and the empty array without runtime casts
73React's `createElement` may be invoked without any children, or with zero to many children. The only way to approximate this in PureScript was via a typeclass as in the `Simplified` DOM.
75The downside of this is that this stops working within Arrays because PureScript requires arrays to be of the same shape. Here is a workaround:
77Manually casting the text to be JSX via `text`:
79```purescript
80module Example where
81import Yoga.React.DOM (text)
82import Yoga.React.DOM.HTML.P (p)
84x = [ text "A string", p {} "A p" ]
85```