@@ -1,6 +1,4 @@
1−# Beta DOM for react-basic
2−
3−Want to help out? Checkout [CONTRIBUTING.md](./CONTRIBUTING.md)
1+# DOM for react-basic
42
53After using react-basic-hooks for a while I've gathered a small wishlist for things that I'd like to work a little differently.
64
@@ -17,67 +15,38 @@ example =
1715 div { "data-testid": "example" }
1816 [ a { href: "https://example.com" }
1917 $ span { "aria-label": "somelabel" } "Example"
20− , text " and so on..."
18+ , span {} " and so on..."
2119 ]
2220```
2321
2422vs.
2523
2624```purescript
27−-- this is a bit unfair because the "simplified" DOM also exists and would make this quite a bit better
2825module Example where
2926
3027import Prelude hiding (div)
31−import React.Basic.DOM (div, a, span)
28+import React.Basic.DOM (div, a, span, text)
3229import Foreign.Object (singleton) as Object
3330
3431example =
3532 div
3633 { _data: Object.singleton "testid" "example"
3734 , children:
38− [ a { href: "https://exmaple.com", children: [ span { _aria: Object.singleton "label" "somelabel", children: [ "Example" ] } ] }
39− , text " and so on..."
35+ [ a { href: "https://exmaple.com", children: [ span { _aria: Object.singleton "label" "somelabel", children: [ text "Example" ] } ] }
36+ , span { children: [ text " and so on..." ] }
4037 ]
4138 }
4239```
4340
4441## Trying it out / Installation
4542
46−This is a work-in-progress library that works on its own and in conjunction with the existing react-basic-hooks-dom library.
47−
48−I don't want to publish it yet, but you can easily integrate it via your `packages.dhall` file.
49−
50−Add this to your `packages.dhall` file:
51−```dhall
52−with react-basic-dom-beta =
53− { dependencies =
54− [ "datetime"
55− , "effect"
56− , "forgetmenot"
57− , "functions"
58− , "nullable"
59− , "prelude"
60− , "react-basic"
61− , "react-basic-hooks"
62− , "record"
63− , "type-equality"
64− , "typelevel-prelude"
65− , "unsafe-coerce"
66− , "web-dom"
67− , "web-events"
68− , "web-html"
69− , "web-touchevents"
70− ]
71− , repo =
72− "https://github.com/rowtype-yoga/purescript-react-basic-dom-Yoga.React.git"
73− , version = "main"
74− }
75−```
43+This is a library that works on its own and in conjunction with the existing react-basic-hooks-dom library.
44+
7645
7746Then run:
7847
7948```sh
80−spago install react-basic-dom-beta
49+spago install yoga-react-dom
8150```
8251
8352## Features and design goals
@@ -103,7 +72,7 @@ This is in line with HTML where the children are not part of the attributes and
10372
10473React'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.
10574
106−The downside of this is that this stops working within Arrays because PureScript requires arrays to be of the same shape. There are two workarounds that I know of:
75+The downside of this is that this stops working within Arrays because PureScript requires arrays to be of the same shape. Here is a workaround:
10776
10877Manually casting the text to be JSX via `text`:
10978
@@ -114,34 +83,3 @@ import Yoga.React.DOM.HTML.P (p)
11483
11584x = [ text "A string", p {} "A p" ]
11685```
117−
118−Or foregoing the array altogether and using an operator:
119−
120−```purescript
121−module Example where
122−import Yoga.React.DOM.Internal ((++))
123−import Yoga.React.DOM.HTML.P (p)
124−
125−x = "A string" ++ p {} "A p"
126−```
127−
128−I dislike both of these, because they are likely to trip beginners up.
129−
130−#### Difference to the existing Simplified DOM
131−This DOM does not wrap anything in an `Array` because React's API does not require that anyway.
132−
133−Another difference to the existing Simplified version is that this supports passing an empty array, while Simplified supports passing an array of anything that's has a `ToJSX` instance.
134−
135−This is the difference in code with workarounds applied:
136−
137−##### Simplified:
138−```purescript
139−strings = p {} [ "A string", "Another string" ]
140−empties = p {} ([] :: _ JSX)
141−```
142−
143−##### Beta:
144−```purescript
145−strings = p {} "A stringAnother string"
146−empties = p {} []
147−```