Skip to content

Commit 6075310

Browse files
maddie927maddie927
committed
Init
0 parents  commit 6075310

Some content is hidden

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

51 files changed

+1302
-0
lines changed

Diff for: ‎.editorconfig

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = false
9+
10+
[Makefile]
11+
indent_style = tab

Diff for: ‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*

Diff for: ‎Makefile

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
all: build examples
2+
3+
build: bower_components
4+
pulp build
5+
6+
examples: bower_components
7+
find examples -maxdepth 2 -type f -iname makefile -execdir make \;
8+
9+
bower_components:
10+
bower install
11+
12+
.PHONY: build examples

Diff for: ‎README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# react-basic-hooks
2+
3+
This is an experimental implementation of React hooks on [react-basic](https://github.com/lumihq/purescript-react-basic).
4+
5+
*Warning:* This API is *experimental* and relies on alpha-release React versions.
6+
It's here to allow experimentation while we get feedback on the API and wait for an official React release which supports hooks.
7+
For more info on hooks, see [React's documentation](https://reactjs.org/docs/hooks-intro.html).
8+
9+
It's also recommended while using this module to use PureScript's new "qualified do" syntax (it's used in the examples, `React.do`).
10+
It's available in the `0.12.2` release.
11+
12+
If we prefer this API over the existing react-basic API, we may eventually replace it with this.
13+
14+
*A note on Refs:* The `Ref` type is useful for passing to DOM nodes, but while this module remains a small extension to the existing react-basic library it won't be possible to pass a `ref` prop to the native DOM components.
15+
In the meantime, use `element (unsafeCreateDOMComponent "div") { ref: elementRef }`.

Diff for: ‎bower.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "purescript-react-basic-hooks",
3+
"license": "Apache-2.0",
4+
"ignore": [
5+
"**/.*",
6+
"node_modules",
7+
"bower_components",
8+
"output"
9+
],
10+
"repository": {
11+
"type": "git",
12+
"url": "git://github.com/spicydonuts/purescript-react-basic-hooks.git"
13+
},
14+
"dependencies": {
15+
"purescript-prelude": "^4.1.0",
16+
"purescript-console": "^4.2.0",
17+
"purescript-effect": "^2.0.0",
18+
"purescript-react-basic": "^7.0.0",
19+
"purescript-indexed-monad": "^1.0.0"
20+
},
21+
"devDependencies": {
22+
"purescript-psci-support": "^4.0.0"
23+
}
24+
}

Diff for: ‎examples/component/.gitignore

+4
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

Diff for: ‎examples/component/Makefile

+8
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+

Diff for: ‎examples/component/README.md

+11
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.

Diff for: ‎examples/component/html/index.html

+10
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>

Diff for: ‎examples/component/package.json

+9
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+
}

Diff for: ‎examples/component/src/Container.purs

+20
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 {}
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+
}

Diff for: ‎examples/component/src/Main.purs

+24
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

Diff for: ‎examples/component/src/ToggleButton.purs

+26
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.DOM as R
7+
import React.Basic.Events (handler_)
8+
import React.Basic.Hooks (CreateComponent, component, toKey, useEffect, useState, (/\))
9+
import React.Basic.Hooks as React
10+
11+
mkToggleButton :: CreateComponent { label :: String }
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: handler_ $ setOn not
22+
, children:
23+
[ R.text label
24+
, R.text if on then " On" else " Off"
25+
]
26+
}

Diff for: ‎examples/controlled-input/.gitignore

+4
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

Diff for: ‎examples/controlled-input/Makefile

+8
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+

Diff for: ‎examples/controlled-input/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Controlled Input 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.

Diff for: ‎examples/controlled-input/html/index.html

+10
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>

Diff for: ‎examples/controlled-input/package.json

+9
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+
}

Diff for: ‎examples/controlled-input/src/ControlledInput.purs

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
module ControlledInput where
2+
3+
import Prelude
4+
5+
import Control.Applicative.Indexed (ipure)
6+
import Data.Maybe (Maybe(..), fromMaybe, maybe)
7+
import React.Basic.DOM as R
8+
import React.Basic.DOM.Events (preventDefault, stopPropagation, targetValue, timeStamp)
9+
import React.Basic.Events (EventHandler, handler, merge)
10+
import React.Basic.Hooks (CreateComponent, Render, UseState, component, fragment, useState, (/\))
11+
import React.Basic.Hooks as React
12+
13+
mkControlledInput :: CreateComponent {}
14+
mkControlledInput = do
15+
component "ControlledInput" \props -> React.do
16+
firstName <- useInput "hello"
17+
lastName <- useInput "world"
18+
19+
React.pure $ R.form_
20+
[ renderInput firstName
21+
, renderInput lastName
22+
]
23+
where
24+
renderInput input =
25+
fragment
26+
[ R.input { onChange: input.onChange, value: input.value }
27+
, R.p_ [ R.text ("Current value = " <> show input.value) ]
28+
, R.p_ [ R.text ("Changed at = " <> maybe "never" show input.lastChanged) ]
29+
]
30+
31+
useInput
32+
:: forall hooks
33+
. String
34+
-> Render
35+
hooks
36+
(UseState { value :: String, lastChanged :: Maybe Number } hooks)
37+
{ onChange :: EventHandler
38+
, value :: String
39+
, lastChanged :: Maybe Number
40+
}
41+
useInput initialValue = React.do
42+
{ value, lastChanged } /\ replaceState <- useState { value: initialValue, lastChanged: Nothing }
43+
ipure
44+
{ onChange: handler
45+
(preventDefault >>> stopPropagation >>> merge { targetValue, timeStamp })
46+
\{ timeStamp, targetValue } -> do
47+
replaceState \_ ->
48+
{ value: fromMaybe "" targetValue
49+
, lastChanged: Just timeStamp
50+
}
51+
, value
52+
, lastChanged
53+
}

Diff for: ‎examples/controlled-input/src/Main.purs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module Main where
2+
3+
import Prelude
4+
5+
import ControlledInput (mkControlledInput)
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+
controlledInput <- mkControlledInput
23+
let app = element controlledInput {}
24+
render app c

Diff for: ‎examples/counter/.gitignore

+4
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

Diff for: ‎examples/counter/Makefile

+8
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+

Diff for: ‎examples/counter/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Counter 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.

Diff for: ‎examples/counter/html/index.html

+10
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>

Diff for: ‎examples/counter/package.json

+9
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.3"
8+
}
9+
}

Diff for: ‎examples/counter/src/Counter.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
3+
exports.setDocumentTitle = function(title) {
4+
return function() {
5+
document.title = title;
6+
};
7+
};

0 commit comments

Comments
 (0)