Skip to content

Commit 32146cd

Browse files
author
Madeline Trotter
committed
Add hooks examples and resolve compatibility issues
1 parent be2e6c2 commit 32146cd

56 files changed

Lines changed: 1038 additions & 341 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples-hooks/component/.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-hooks/component/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-hooks/component/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Component 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-hooks/component/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-hooks/component/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.7.0-alpha.2",
4+
"react-dom": "16.7.0-alpha.2"
5+
},
6+
"devDependencies": {
7+
"browserify": "^16.2.2"
8+
}
9+
}

‎examples-hooks/component/src/Container.purs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module Container where
2+
3+
import Prelude
4+
5+
import React.Basic.Hooks(CreateComponent, component, element)
6+
import React.Basic.Hooks as React
7+
import React.Basic.DOM as R
8+
import ToggleButton (mkToggleButton)
9+
10+
mkToggleButtonContainer :: CreateComponent {} Unit
11+
mkToggleButtonContainer = do
12+
toggleButton <- mkToggleButton
13+
14+
component "Container" \_ ->
15+
React.pure $ R.div
16+
{ children:
17+
[ element toggleButton { label: "A" }
18+
, element toggleButton { label: "B" }
19+
]
20+
}

‎examples-hooks/component/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 Container (mkToggleButtonContainer)
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+
toggleButtonContainer <- mkToggleButtonContainer
23+
let app = element toggleButtonContainer {}
24+
render app c

‎examples-hooks/component/src/ToggleButton.purs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module ToggleButton where
2+
3+
import Prelude
4+
5+
import Effect.Console (log)
6+
import React.Basic.Hooks(CreateComponent, UseEffect, UseState, component, toKey, useEffect, useState, (/\))
7+
import React.Basic.Hooks as React
8+
import React.Basic.DOM as R
9+
import React.Basic.DOM.Events (capture_)
10+
11+
mkToggleButton :: CreateComponent { label :: String } (UseEffect (UseState Boolean Unit))
12+
mkToggleButton = do
13+
component "ToggleButton" \{ label } -> React.do
14+
on /\ setOn <- useState false
15+
16+
useEffect [toKey on] do
17+
log $ "State: " <> if on then "On" else "Off"
18+
pure (pure unit)
19+
20+
React.pure $ R.button
21+
{ onClick: capture_ $ setOn not
22+
, children:
23+
[ R.text label
24+
, R.text if on then " On" else " Off"
25+
]
26+
}

‎examples-hooks/controlled-input/.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-hooks/controlled-input/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+

0 commit comments

Comments
 (0)