Skip to content

Commit dd6cb47

Browse files
maddie927maddie927
committed
Add context example
1 parent a758a62 commit dd6cb47

File tree

13 files changed

+136
-14
lines changed

13 files changed

+136
-14
lines changed

‎examples/component/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"dependencies": {
3-
"react": "16.7.0-alpha.2",
4-
"react-dom": "16.7.0-alpha.2"
3+
"react": "16.8.6",
4+
"react-dom": "16.8.6"
55
},
66
"devDependencies": {
7-
"browserify": "^16.2.2"
7+
"browserify": "^16.2.3"
88
}
99
}

‎examples/context/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
output
2+
html/index.js
3+
package-lock.json
4+
node_modules

‎examples/context/Makefile

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
all: node_modules
2+
purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
3+
purs bundle -m Main --main Main output/*/*.js > output/bundle.js
4+
node_modules/.bin/browserify output/bundle.js -o html/index.js
5+
6+
node_modules:
7+
npm install
8+

‎examples/context/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Context Example
2+
3+
## Building
4+
5+
```sh
6+
make
7+
```
8+
9+
This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
10+
11+
Then open `html/index.html` in your browser.

‎examples/context/html/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>react-basic example</title>
5+
</head>
6+
<body>
7+
<div id="container"></div>
8+
<script src="index.js"></script>
9+
</body>
10+
</html>

‎examples/context/package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"dependencies": {
3+
"react": "16.8.6",
4+
"react-dom": "16.8.6"
5+
},
6+
"devDependencies": {
7+
"browserify": "16.2.3"
8+
}
9+
}

‎examples/context/src/Context.purs

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
module Context where
2+
3+
import Prelude
4+
5+
import Data.Maybe (Maybe(..))
6+
import Effect (Effect)
7+
import React.Basic.DOM as R
8+
import React.Basic.Events (handler_)
9+
import React.Basic.Hooks (Context, CreateComponent, JSX, Tuple, component, contextProvider, createContext, element, fragment, useContext, useState, (/\))
10+
import React.Basic.Hooks as React
11+
12+
mkContext :: CreateComponent {}
13+
mkContext = do
14+
15+
counterContext <- createContext
16+
store <- mkStore counterContext
17+
counter <- mkCounter counterContext
18+
19+
component "Context" \props -> React.do
20+
21+
pure $ element store
22+
{ children:
23+
[ element counter {}
24+
, element counter {}
25+
, element counter {}
26+
]
27+
}
28+
29+
mkStore
30+
:: Context (Tuple Int (Effect Unit))
31+
-> CreateComponent { children :: Array JSX }
32+
mkStore context = do
33+
component "Store" \{ children } -> React.do
34+
counter /\ setCounter <- useState 0
35+
let increment = setCounter (_ + 1)
36+
pure $
37+
contextProvider context
38+
(counter /\ increment)
39+
(fragment children)
40+
41+
mkCounter
42+
:: Context (Tuple Int (Effect Unit))
43+
-> CreateComponent {}
44+
mkCounter counterContext = do
45+
component "Counter" \props -> React.do
46+
mCounter <- useContext counterContext
47+
48+
case mCounter of
49+
Nothing -> do
50+
pure $ R.text "no counter value found"
51+
Just (counter /\ increment) -> do
52+
pure $
53+
R.button
54+
{ onClick: handler_ increment
55+
, children: [ R.text $ "Increment: " <> show counter ]
56+
}

‎examples/context/src/Main.purs

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module Main where
2+
3+
import Prelude
4+
5+
import Context (mkContext)
6+
import Data.Maybe (Maybe(..))
7+
import Effect (Effect)
8+
import Effect.Exception (throw)
9+
import React.Basic.Hooks(element)
10+
import React.Basic.DOM (render)
11+
import Web.DOM.NonElementParentNode (getElementById)
12+
import Web.HTML (window)
13+
import Web.HTML.HTMLDocument (toNonElementParentNode)
14+
import Web.HTML.Window (document)
15+
16+
main :: Effect Unit
17+
main = do
18+
container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
19+
case container of
20+
Nothing -> throw "Container element not found."
21+
Just c -> do
22+
context <- mkContext
23+
let app = element context {}
24+
render app c

‎examples/controlled-input/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"dependencies": {
3-
"react": "16.7.0-alpha.2",
4-
"react-dom": "16.7.0-alpha.2"
3+
"react": "16.8.6",
4+
"react-dom": "16.8.6"
55
},
66
"devDependencies": {
7-
"browserify": "^16.2.2"
7+
"browserify": "^16.2.3"
88
}
99
}

‎examples/counter/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"dependencies": {
3-
"react": "16.7.0-alpha.2",
4-
"react-dom": "16.7.0-alpha.2"
3+
"react": "16.8.6",
4+
"react-dom": "16.8.6"
55
},
66
"devDependencies": {
77
"browserify": "16.2.3"

0 commit comments

Comments
 (0)