Skip to content

Commit 4826e10

Browse files
committed
Merge pull request #56 from ethul/topic/react-0.14
Topic/react 0.14
2 parents ffb8e61 + 2e74041 commit 4826e10

File tree

12 files changed

+167
-364
lines changed

12 files changed

+167
-364
lines changed

README.md

Lines changed: 6 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,17 @@
1-
purescript-react
2-
================
1+
# purescript-react
32

4-
[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.13.3](https://img.shields.io/badge/react-0.13.3-lightgrey.svg)
3+
[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.14](https://img.shields.io/badge/react-0.14-lightgrey.svg)
54

65
Low-level React Bindings for PureScript.
76

87
For a more high-level set of bindings, you might like to look at `purescript-thermite`.
98

109
- [Module Documentation](docs/)
1110

12-
## Dynamic children
13-
14-
There are two ways that child elements can be passed to components:
15-
- The first way is to spread the child element array when passing them to React's `createElement` function. The [React.DOM](docs/React/DOM.md) and [React.DOM.SVG](docs/React/DOM/SVG.md) spread the child element array.
16-
- The second way is to pass the child element array to `createElement` without spreading. This is useful when dealing with [dynamic children](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children). In this case a `key` property should be assigned direclty to each child. The [React.DOM.Dynamic](docs/React/DOM/Dynamic.md) and [React.DOM.SVG.Dynamic](docs/React/DOM/SVG/Dynamic.md) pass the child element array without spreading.
17-
18-
Note that this module provides functions `createElement` and `createElementDynamic` to handle the two cases above for component classes.
19-
20-
## Building
21-
22-
The library and example can be built with Pulp as follows:
23-
24-
pulp dep update
25-
pulp build
26-
27-
pulp test -r cat > example/index.js
28-
open example/index.html
11+
```
12+
bower install purescript-react
13+
```
2914

3015
## Example
3116

32-
```purescript
33-
module Main where
34-
35-
import Prelude
36-
37-
import Control.Monad.Eff
38-
39-
import Data.Maybe.Unsafe (fromJust)
40-
import Data.Nullable (toMaybe)
41-
42-
import DOM (DOM())
43-
import DOM.HTML (window)
44-
import DOM.HTML.Document (body)
45-
import DOM.HTML.Types (htmlElementToElement)
46-
import DOM.HTML.Window (document)
47-
48-
import DOM.Node.Types (Element())
49-
50-
import React
51-
52-
import qualified React.DOM as D
53-
import qualified React.DOM.Props as P
54-
55-
incrementCounter ctx e = do
56-
val <- readState ctx
57-
writeState ctx (val + 1)
58-
59-
counter = createClass $ spec 0 \ctx -> do
60-
val <- readState ctx
61-
return $ D.p [ P.className "Counter"
62-
, P.onClick (incrementCounter ctx)
63-
]
64-
[ D.text (show val)
65-
, D.text " Click me to increment!"
66-
]
67-
68-
main = container >>= render ui
69-
where
70-
ui :: ReactElement
71-
ui = D.div [] [ createFactory counter {} ]
72-
73-
container :: forall eff. Eff (dom :: DOM | eff) Element
74-
container = do
75-
win <- window
76-
doc <- document win
77-
elm <- fromJust <$> toMaybe <$> body doc
78-
return $ htmlElementToElement elm
79-
```
17+
Please refer to [purescript-react-example](https://github.com/purescript-contrib/purescript-react)

bower.json

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
{
22
"name": "purescript-react",
3-
"version": "0.0.5",
43
"homepage": "https://github.com/purescript-contrib/purescript-react",
5-
"description": "Purescript bindings for React.js",
4+
"description": "PureScript bindings for react",
5+
"main": "",
66
"keywords": [
77
"purescript",
88
"react"
99
],
1010
"license": "MIT",
1111
"ignore": [
12-
"**/.*",
13-
"node_modules",
14-
"bower_components",
15-
"test",
16-
"tests"
12+
"*",
13+
"!src/**/*"
1714
],
1815
"repository": {
1916
"type": "git",
2017
"url": "git://github.com/purescript-contrib/purescript-react.git"
2118
},
2219
"dependencies": {
23-
"purescript-dom": "~0.2.6"
24-
},
25-
"devDependencies": {
26-
"purescript-console": "~0.1.1",
27-
"react": "~0.13.3"
20+
"purescript-eff": "~0.1.2",
21+
"purescript-unsafe-coerce": "~0.1.0"
2822
}
2923
}

docs/React.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ data ReactElement :: *
1818

1919
A virtual DOM node, or component.
2020

21+
#### `ReactComponent`
22+
23+
``` purescript
24+
data ReactComponent :: *
25+
```
26+
27+
A mounted react component
28+
2129
#### `ReactThis`
2230

2331
``` purescript
@@ -302,6 +310,14 @@ createClass :: forall props state eff. ReactSpec props state eff -> ReactClass p
302310

303311
Create a React class from a specification.
304312

313+
#### `createClassStateless`
314+
315+
``` purescript
316+
createClassStateless :: forall props. (props -> ReactElement) -> ReactClass props
317+
```
318+
319+
Create a stateless React class.
320+
305321
#### `handle`
306322

307323
``` purescript
@@ -350,20 +366,4 @@ createFactory :: forall props. ReactClass props -> props -> ReactElement
350366

351367
Create a factory from a React class.
352368

353-
#### `render`
354-
355-
``` purescript
356-
render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) ReactElement
357-
```
358-
359-
Render a React element in a document element.
360-
361-
#### `renderToString`
362-
363-
``` purescript
364-
renderToString :: ReactElement -> String
365-
```
366-
367-
Render a React element as a string.
368-
369369

example/.gitignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

example/index.html

Lines changed: 0 additions & 10 deletions
This file was deleted.

package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "purescript-react",
3+
"files": [],
4+
"peerDependencies": {
5+
"react": "^0.14.3"
6+
}
7+
}

0 commit comments

Comments
 (0)