Skip to content

Commit 4e21666

Browse files
JordanMartinezJordanMartinez
authored
Port all Halogen examples to Halogen Hooks recipes (#177)
* Add ComponentsInputHalogenHooks * Add ComponentsMultiTypeHalogenHooks * Add DriverIoHalogenHooks * Remove unused dependency: halogen-hooks-extra * Add DriverRoutingHalogenHooks * Add DriverWebSocketsHalogenHooks * Add InterpretHalogenHooks * Add KeyboardInputHalogenHooks * Add LifecycleHalogenHooks * Fix compiler warning about shadowed variable name * Import constructors; remove unused import
1 parent 0b49a62 commit 4e21666

File tree

49 files changed

+1064
-0
lines changed

Some content is hidden

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

49 files changed

+1064
-0
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,15 @@ Running a web-compatible recipe:
9595
| | :heavy_check_mark: | [CatGifsHalogenHooks](recipes/CatGifsHalogenHooks) | A Halogen port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
9696
| | :heavy_check_mark: | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
9797
| | :heavy_check_mark: | [ComponentsHalogenHooks](recipes/ComponentsHalogenHooks) | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. |
98+
| | :heavy_check_mark: | [ComponentsInputHalogenHooks](recipes/ComponentsInputHalogenHooks) | Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly. |
99+
| | :heavy_check_mark: | [ComponentsMultiTypeHalogenHooks](recipes/ComponentsMultiTypeHalogenHooks) | Demonstrates a component that can communicate with its children that have differing types. |
98100
| :heavy_check_mark: | :heavy_check_mark: | [DebuggingLog](recipes/DebuggingLog) | This recipe shows how to do print-debugging using the `Debug` module's `spy` and `traceM` functions. The compiler will emit warnings to remind you to remove these debug functions before you ship production code. |
99101
| :heavy_check_mark: | | [DiceCLI](recipes/DiceCLI) | This recipe shows how to create an interactive command line prompt that repeatedly generates a random number between 1 and 6. |
100102
| :heavy_check_mark: | :heavy_check_mark: | [DiceLog](recipes/DiceLog) | This recipe shows how to log a random integer between 1 and 6 (representing a roll of a die) in either the node.js or web browser console. |
101103
| | :heavy_check_mark: | [DragAndDropHalogenHooks](recipes/DragAndDropHalogenHooks) | A Halogen port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop). |
104+
| | :heavy_check_mark: | [DriverIoHalogenHooks](recipes/DriverIoHalogenHooks) | Demonstrates how to communicate with a Halogen application by sending messages to and receiving messages from the root-level component via the driver. |
105+
| | :heavy_check_mark: | [DriverRoutingHalogenHooks](recipes/DriverRoutingHalogenHooks) | Demonstrates using `hashchange` events to drive the root component in a Halogen application via the driver. |
106+
| | :heavy_check_mark: | [DriverWebSocketsHalogenHooks](recipes/DriverWebSocketsHalogenHooks) | Demonstrates using a WebSocket to drive the main component in a Halogen application. |
102107
| | :heavy_check_mark: | [FileUploadHalogenHooks](recipes/FileUploadHalogenHooks) | A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |
103108
| | :heavy_check_mark: | [FindDomElementJs](recipes/FindDomElementJs) | This recipe shows how to find elements in the DOM by using query selectors. |
104109
| | :heavy_check_mark: | [FormsReactHooks](recipes/FormsReactHooks) | A React port of the ["User Interface - Forms" Elm Example](https://elm-lang.org/examples/forms). |
@@ -110,6 +115,9 @@ Running a web-compatible recipe:
110115
| :heavy_check_mark: | :heavy_check_mark: | [HelloWorldLog](recipes/HelloWorldLog) | This recipe shows how to run a simple "Hello world!" program in either the node.js or web browser console. |
111116
| :heavy_check_mark: | :heavy_check_mark: | [HeterogenousArrayLog](recipes/HeterogenousArrayLog) | This recipe demonstrates how to create a heterogenous array and process its elements. |
112117
| | :heavy_check_mark: | [ImagePreviewsHalogenHooks](recipes/ImagePreviewsHalogenHooks) | A Halogen port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop). |
118+
| | :heavy_check_mark: | [InterpretHalogenHooks](recipes/InterpretHalogenHooks) | Demonstrates how to use a custom monad (in this case, using `ReaderT` with `Aff` as the effect type) for a component, and then interpreting that custom monad back down to `Aff`, so it can be run as a normal component. |
119+
| | :heavy_check_mark: | [KeyboardInputHalogenHooks](recipes/KeyboardInputHalogenHooks) | This example demonstrates how to selectively capture keyboard events and, more generally, how to use `EventSource`s in Halogen. |
120+
| | :heavy_check_mark: | [LifecycleHalogenHooks](recipes/LifecycleHalogenHooks) | Demonstrates component lifecycle. |
113121
| | :heavy_check_mark: | [NumbersHalogenHooks](recipes/NumbersHalogenHooks) | A Halogen port of the ["Random - Numbers" Elm Example](https://elm-lang.org/examples/numbers). |
114122
| | :heavy_check_mark: | [NumbersReactHooks](recipes/NumbersReactHooks) | A React port of the ["Random - Numbers" Elm Example](https://elm-lang.org/examples/numbers). |
115123
| | :heavy_check_mark: | [PositionsHalogenHooks](recipes/PositionsHalogenHooks) | A Halogen port of the ["Random - Positions" Elm Example](https://elm-lang.org/examples/positions). |

‎recipes/ComponentsInputHalogenHooks/.gitignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
/.spago
11+
/web-dist/
12+
/prod-dist/
13+
/prod/

‎recipes/ComponentsInputHalogenHooks/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# ComponentsInputHalogenHooks
2+
3+
Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly.
4+
5+
## Expected Behavior:
6+
7+
### Browser
8+
9+
The parent stores an `Int`. Clicking the buttons will increment/decrement that value. The children will produce the result of a mathematical computation using that value.

‎recipes/ComponentsInputHalogenHooks/spago.dhall

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{ name = "ComponentsInputHalogenHooks"
2+
, dependencies =
3+
[ "console"
4+
, "effect"
5+
, "halogen-hooks"
6+
, "psci-support"
7+
]
8+
, packages = ../../packages.dhall
9+
, sources = [ "recipes/ComponentsInputHalogenHooks/src/**/*.purs" ]
10+
}

‎recipes/ComponentsInputHalogenHooks/src/Main.purs

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
module ComponentsInputHalogenHooks.Main where
2+
3+
import Prelude hiding (top)
4+
5+
import Data.Maybe (Maybe(..))
6+
import Data.Symbol (SProxy(..))
7+
import Data.Tuple.Nested ((/\))
8+
import Effect (Effect)
9+
import Effect.Class (class MonadEffect)
10+
import Halogen as H
11+
import Halogen.Aff as HA
12+
import Halogen.HTML as HH
13+
import Halogen.HTML.Events as HE
14+
import Halogen.Hooks as Hooks
15+
import Halogen.VDom.Driver (runUI)
16+
17+
main :: Effect Unit
18+
main =
19+
HA.runHalogenAff do
20+
body <- HA.awaitBody
21+
void $ runUI containerComponent unit body
22+
23+
_button :: SProxy "button"
24+
_button = SProxy
25+
26+
containerComponent
27+
:: forall unusedQuery unusedInput unusedOutput anyMonad
28+
. MonadEffect anyMonad
29+
=> H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
30+
containerComponent = Hooks.component \_ _ -> Hooks.do
31+
state /\ stateIdx <- Hooks.useState 0
32+
Hooks.pure $
33+
HH.div_
34+
[ HH.ul_
35+
[ HH.slot _display 1 displayComponent state absurd
36+
, HH.slot _display 2 displayComponent (state * 2) absurd
37+
, HH.slot _display 3 displayComponent (state * 3) absurd
38+
, HH.slot _display 4 displayComponent (state * 10) absurd
39+
, HH.slot _display 5 displayComponent (state * state) absurd
40+
]
41+
, HH.button
42+
[ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ + 1) ]
43+
[ HH.text "+1"]
44+
, HH.button
45+
[ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ - 1) ]
46+
[ HH.text "-1"]
47+
]
48+
49+
_display = SProxy :: SProxy "display"
50+
51+
displayComponent
52+
:: forall unusedQuery unusedOutput anyMonad
53+
. MonadEffect anyMonad
54+
=> H.Component HH.HTML unusedQuery Int unusedOutput anyMonad
55+
displayComponent = Hooks.component \_ input -> Hooks.do
56+
Hooks.pure $
57+
HH.div_
58+
[ HH.text "My input value is:"
59+
, HH.strong_ [ HH.text (show input) ]
60+
]

‎recipes/ComponentsInputHalogenHooks/web/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>ComponentsInputHalogenHooks</title>
6+
</head>
7+
8+
<body>
9+
<script src="./index.js"></script>
10+
</body>
11+
</html>

‎recipes/ComponentsInputHalogenHooks/web/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
"use strict";
2+
require("../../../output/ComponentsInputHalogenHooks.Main/index.js").main();

‎recipes/ComponentsMultiTypeHalogenHooks/.gitignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
/.spago
11+
/web-dist/
12+
/prod-dist/
13+
/prod/

‎recipes/ComponentsMultiTypeHalogenHooks/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# ComponentsMultiTypeHalogenHooks
2+
3+
Demonstrates a component that can communicate with its children that have differing types.
4+
5+
## Expected Behavior:
6+
7+
### Browser
8+
9+
A toggle button, a count button, and an input field are the children of the parent. The user can modify either of those children's values and then click the "Check now" button. The parent will get the latest state from each of its children and display all states.

‎recipes/ComponentsMultiTypeHalogenHooks/spago.dhall

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{ name = "ComponentsMultiTypeHalogenHooks"
2+
, dependencies =
3+
[ "console"
4+
, "effect"
5+
, "halogen-hooks"
6+
, "psci-support"
7+
]
8+
, packages = ../../packages.dhall
9+
, sources = [ "recipes/ComponentsMultiTypeHalogenHooks/src/**/*.purs" ]
10+
}

0 commit comments

Comments
 (0)