diff --git a/README.md b/README.md index e37b2442..2618627a 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,10 @@ Running a web-compatible recipe: | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/CatGifsHalogenHooks/src/Main.purs)) | [CatGifsHalogenHooks](recipes/CatGifsHalogenHooks) | A Halogen port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/CatGifsReactHooks/src/Main.purs)) | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ClockReactHooks/src/Main.purs)) | [ClockReactHooks](recipes/ClockReactHooks) | A React port of the ["User Interface - Clock" Elm Example](https://elm-lang.org/examples/clock). | +| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsHalogenHooks/src/Main.purs)) | [ComponentsHalogenHooks](recipes/ComponentsHalogenHooks) | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. | +| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputHalogenHooks/src/Main.purs)) | [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. | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputReactHooks/src/Main.purs)) | [ComponentsInputReactHooks](recipes/ComponentsInputReactHooks) | Each time the parent's state updates, it will pass a new prop value into the child, and the child will update accordingly. | +| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs)) | [ComponentsMultiTypeHalogenHooks](recipes/ComponentsMultiTypeHalogenHooks) | Demonstrates a component that can communicate with its children that have differing types. | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsMultiTypeReactHooks/src/Main.purs)) | [ComponentsMultiTypeReactHooks](recipes/ComponentsMultiTypeReactHooks) | Demonstrates a parent component with several children components, each with different prop types. | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsReactHooks/src/Main.purs)) | [ComponentsReactHooks](recipes/ComponentsReactHooks) | Demonstrates how to nest one React Hooks-based component inside another and send props from the parent to the child component. | | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/DateTimeBasicsLog/src/Main.purs)) | [DateTimeBasicsLog](recipes/DateTimeBasicsLog) | This recipe shows how to use `purescript-datetime` library to create `Time`, `Date`, and `DateTime` values and adjust/diff them. | diff --git a/broken/ComponentsHalogenHooks/spago.dhall b/broken/ComponentsHalogenHooks/spago.dhall deleted file mode 100644 index f4508fd7..00000000 --- a/broken/ComponentsHalogenHooks/spago.dhall +++ /dev/null @@ -1,11 +0,0 @@ -{ name = "ComponentsHalogenHooks" -, dependencies = - [ "console", "effect", "psci-support", "halogen-hooks" ] -, packages = ../../packages.dhall -, sources = [ "recipes/ComponentsHalogenHooks/src/**/*.purs" ] -} -{- -sources does not work with paths relative to this config - sources = [ "src/**/*.purs" ] -Paths must be relative to where this command is run --} diff --git a/broken/ComponentsHalogenHooks/.gitignore b/recipes/ComponentsHalogenHooks/.gitignore similarity index 100% rename from broken/ComponentsHalogenHooks/.gitignore rename to recipes/ComponentsHalogenHooks/.gitignore diff --git a/broken/ComponentsHalogenHooks/README.md b/recipes/ComponentsHalogenHooks/README.md similarity index 100% rename from broken/ComponentsHalogenHooks/README.md rename to recipes/ComponentsHalogenHooks/README.md diff --git a/recipes/ComponentsHalogenHooks/spago.dhall b/recipes/ComponentsHalogenHooks/spago.dhall new file mode 100644 index 00000000..acb3ec4b --- /dev/null +++ b/recipes/ComponentsHalogenHooks/spago.dhall @@ -0,0 +1,15 @@ +{ name = "ComponentsHalogenHooks" +, dependencies = + [ "console" + , "effect" + , "halogen" + , "halogen-hooks" + , "maybe" + , "prelude" + , "psci-support" + , "refs" + , "tuples" + ] +, packages = ../../packages.dhall +, sources = [ "recipes/ComponentsHalogenHooks/src/**/*.purs" ] +} diff --git a/broken/ComponentsHalogenHooks/src/Main.purs b/recipes/ComponentsHalogenHooks/src/Main.purs similarity index 88% rename from broken/ComponentsHalogenHooks/src/Main.purs rename to recipes/ComponentsHalogenHooks/src/Main.purs index 673be165..a9cb770f 100644 --- a/broken/ComponentsHalogenHooks/src/Main.purs +++ b/recipes/ComponentsHalogenHooks/src/Main.purs @@ -3,7 +3,6 @@ module ComponentsHalogenHooks.Main where import Prelude hiding (top) import Data.Maybe (Maybe(..), maybe) -import Data.Symbol (SProxy(..)) import Data.Tuple.Nested ((/\)) import Effect (Effect) import Effect.Class (class MonadEffect) @@ -14,9 +13,10 @@ import Halogen.Aff as HA import Halogen.HTML as HH import Halogen.HTML.Events as HE import Halogen.HTML.Properties as HP -import Halogen.Hooks (Hooked, UseEffect, UseRef) +import Halogen.Hooks (type (<>), Hook, UseEffect, UseRef) import Halogen.Hooks as Hooks import Halogen.VDom.Driver (runUI) +import Type.Proxy (Proxy(..)) main :: Effect Unit main = @@ -24,8 +24,8 @@ main = body <- HA.awaitBody void $ runUI containerComponent unit body -_button :: SProxy "button" -_button = SProxy +_button :: Proxy "button" +_button = Proxy containerComponent :: forall unusedQuery unusedInput unusedOutput anyMonad @@ -37,7 +37,7 @@ containerComponent = Hooks.component \rec _ -> Hooks.do buttonState /\ buttonStateIdx <- Hooks.useState (Nothing :: Maybe Boolean) Hooks.pure $ HH.div_ - [ HH.slot _button unit buttonComponent unit \_ -> Just do + [ HH.slot _button unit buttonComponent unit \_ -> do Hooks.modify_ toggleCountIdx (_ + 1) , HH.p_ [ HH.text ("Button has been toggled " <> show toggleCount <> " time(s)") ] @@ -47,8 +47,8 @@ containerComponent = Hooks.component \rec _ -> Hooks.do <> (maybe "(not checked yet)" (if _ then "on" else "off") buttonState) <> ". " , HH.button - [ HE.onClick \_ -> Just do - mbBtnState <- Hooks.query rec.slotToken _button unit $ H.request IsOn + [ HE.onClick \_ -> do + mbBtnState <- Hooks.query rec.slotToken _button unit $ H.mkRequest IsOn Hooks.put buttonStateIdx mbBtnState ] [ HH.text "Check now" ] @@ -73,7 +73,7 @@ buttonComponent = Hooks.component \rec _ -> Hooks.do Hooks.pure $ HH.button [ HP.title label - , HE.onClick \_ -> Just do + , HE.onClick \_ -> do newState <- Hooks.modify enabledIdx not Hooks.raise rec.outputToken $ Toggled newState ] @@ -82,7 +82,7 @@ buttonComponent = Hooks.component \rec _ -> Hooks.do useRenderCount :: forall m a . MonadEffect m - => Hooked m a (UseEffect (UseRef Int a)) Int + => Hook m (UseRef Int <> UseEffect <> a) Int useRenderCount = Hooks.do renders /\ rendersRef <- Hooks.useRef 1 Hooks.captures {} Hooks.useTickEffect do diff --git a/broken/ComponentsHalogenHooks/web/index.html b/recipes/ComponentsHalogenHooks/web/index.html similarity index 100% rename from broken/ComponentsHalogenHooks/web/index.html rename to recipes/ComponentsHalogenHooks/web/index.html diff --git a/broken/ComponentsHalogenHooks/web/index.js b/recipes/ComponentsHalogenHooks/web/index.js similarity index 100% rename from broken/ComponentsHalogenHooks/web/index.js rename to recipes/ComponentsHalogenHooks/web/index.js diff --git a/broken/ComponentsInputHalogenHooks/.gitignore b/recipes/ComponentsInputHalogenHooks/.gitignore similarity index 100% rename from broken/ComponentsInputHalogenHooks/.gitignore rename to recipes/ComponentsInputHalogenHooks/.gitignore diff --git a/broken/ComponentsInputHalogenHooks/README.md b/recipes/ComponentsInputHalogenHooks/README.md similarity index 100% rename from broken/ComponentsInputHalogenHooks/README.md rename to recipes/ComponentsInputHalogenHooks/README.md diff --git a/broken/ComponentsInputHalogenHooks/spago.dhall b/recipes/ComponentsInputHalogenHooks/spago.dhall similarity index 78% rename from broken/ComponentsInputHalogenHooks/spago.dhall rename to recipes/ComponentsInputHalogenHooks/spago.dhall index 549cfc0e..397111ce 100644 --- a/broken/ComponentsInputHalogenHooks/spago.dhall +++ b/recipes/ComponentsInputHalogenHooks/spago.dhall @@ -2,8 +2,13 @@ , dependencies = [ "console" , "effect" + , "halogen" , "halogen-hooks" + , "maybe" + , "prelude" , "psci-support" + , "refs" + , "tuples" ] , packages = ../../packages.dhall , sources = [ "recipes/ComponentsInputHalogenHooks/src/**/*.purs" ] diff --git a/broken/ComponentsInputHalogenHooks/src/Main.purs b/recipes/ComponentsInputHalogenHooks/src/Main.purs similarity index 83% rename from broken/ComponentsInputHalogenHooks/src/Main.purs rename to recipes/ComponentsInputHalogenHooks/src/Main.purs index ca65812d..defdc5c4 100644 --- a/broken/ComponentsInputHalogenHooks/src/Main.purs +++ b/recipes/ComponentsInputHalogenHooks/src/Main.purs @@ -2,8 +2,6 @@ module ComponentsInputHalogenHooks.Main where import Prelude hiding (top) -import Data.Maybe (Maybe(..)) -import Data.Symbol (SProxy(..)) import Data.Tuple.Nested ((/\)) import Effect (Effect) import Effect.Class (class MonadEffect, liftEffect) @@ -12,9 +10,10 @@ import Halogen as H import Halogen.Aff as HA import Halogen.HTML as HH import Halogen.HTML.Events as HE -import Halogen.Hooks (Hooked, UseEffect, UseRef) +import Halogen.Hooks (type (<>), Hook, UseEffect, UseRef) import Halogen.Hooks as Hooks import Halogen.VDom.Driver (runUI) +import Type.Proxy (Proxy(..)) main :: Effect Unit main = @@ -22,8 +21,8 @@ main = body <- HA.awaitBody void $ runUI containerComponent unit body -_button :: SProxy "button" -_button = SProxy +_button :: Proxy "button" +_button = Proxy containerComponent :: forall unusedQuery unusedInput unusedOutput anyMonad @@ -42,16 +41,16 @@ containerComponent = Hooks.component \_ _ -> Hooks.do , HH.slot _display 5 displayComponent (state * state) absurd ] , HH.button - [ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ + 1) ] + [ HE.onClick \_ -> Hooks.modify_ stateIdx (_ + 1) ] [ HH.text "+1"] , HH.button - [ HE.onClick \_ -> Just $ Hooks.modify_ stateIdx (_ - 1) ] + [ HE.onClick \_ -> Hooks.modify_ stateIdx (_ - 1) ] [ HH.text "-1"] , HH.p_ [ HH.text ("Parent has been rendered " <> show parentRenders <> " time(s)") ] ] -_display = SProxy :: SProxy "display" +_display = Proxy :: Proxy "display" displayComponent :: forall unusedQuery unusedOutput anyMonad @@ -67,7 +66,7 @@ displayComponent = Hooks.component \_ input -> Hooks.do useRenderCount :: forall m a . MonadEffect m - => Hooked m a (UseEffect (UseRef Int a)) Int + => Hook m (UseRef Int <> UseEffect <> a) Int useRenderCount = Hooks.do renders /\ rendersRef <- Hooks.useRef 1 Hooks.captures {} Hooks.useTickEffect do diff --git a/broken/ComponentsInputHalogenHooks/web/index.html b/recipes/ComponentsInputHalogenHooks/web/index.html similarity index 100% rename from broken/ComponentsInputHalogenHooks/web/index.html rename to recipes/ComponentsInputHalogenHooks/web/index.html diff --git a/broken/ComponentsInputHalogenHooks/web/index.js b/recipes/ComponentsInputHalogenHooks/web/index.js similarity index 100% rename from broken/ComponentsInputHalogenHooks/web/index.js rename to recipes/ComponentsInputHalogenHooks/web/index.js diff --git a/broken/ComponentsMultiTypeHalogenHooks/.gitignore b/recipes/ComponentsMultiTypeHalogenHooks/.gitignore similarity index 100% rename from broken/ComponentsMultiTypeHalogenHooks/.gitignore rename to recipes/ComponentsMultiTypeHalogenHooks/.gitignore diff --git a/broken/ComponentsMultiTypeHalogenHooks/README.md b/recipes/ComponentsMultiTypeHalogenHooks/README.md similarity index 100% rename from broken/ComponentsMultiTypeHalogenHooks/README.md rename to recipes/ComponentsMultiTypeHalogenHooks/README.md diff --git a/broken/ComponentsMultiTypeHalogenHooks/spago.dhall b/recipes/ComponentsMultiTypeHalogenHooks/spago.dhall similarity index 78% rename from broken/ComponentsMultiTypeHalogenHooks/spago.dhall rename to recipes/ComponentsMultiTypeHalogenHooks/spago.dhall index 63534a32..43630031 100644 --- a/broken/ComponentsMultiTypeHalogenHooks/spago.dhall +++ b/recipes/ComponentsMultiTypeHalogenHooks/spago.dhall @@ -2,8 +2,13 @@ , dependencies = [ "console" , "effect" + , "halogen" , "halogen-hooks" + , "maybe" + , "prelude" , "psci-support" + , "refs" + , "tuples" ] , packages = ../../packages.dhall , sources = [ "recipes/ComponentsMultiTypeHalogenHooks/src/**/*.purs" ] diff --git a/broken/ComponentsMultiTypeHalogenHooks/src/Main.purs b/recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs similarity index 86% rename from broken/ComponentsMultiTypeHalogenHooks/src/Main.purs rename to recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs index 66ef0224..8fd8154c 100644 --- a/broken/ComponentsMultiTypeHalogenHooks/src/Main.purs +++ b/recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs @@ -3,7 +3,6 @@ module ComponentsMultiTypeHalogenHooks.Main where import Prelude import Data.Maybe (Maybe(..)) -import Data.Symbol (SProxy(..)) import Data.Tuple.Nested ((/\)) import Effect (Effect) import Effect.Class (class MonadEffect, liftEffect) @@ -13,9 +12,10 @@ import Halogen.Aff as HA import Halogen.HTML as HH import Halogen.HTML.Events as HE import Halogen.HTML.Properties as HP -import Halogen.Hooks (Hooked, UseEffect, UseRef) +import Halogen.Hooks (type (<>), Hook, UseEffect, UseRef) import Halogen.Hooks as Hooks import Halogen.VDom.Driver (runUI) +import Type.Proxy (Proxy(..)) main :: Effect Unit main = @@ -23,8 +23,8 @@ main = body <- HA.awaitBody void $ runUI containerComponent unit body -_button :: SProxy "button" -_button = SProxy +_button :: Proxy "button" +_button = Proxy containerComponent :: forall unusedQuery unusedInput unusedOutput anyMonad @@ -34,9 +34,9 @@ containerComponent = Hooks.component \rec _ -> Hooks.do parentRenders <- useRenderCount state /\ stateIdx <- Hooks.useState { a: Nothing, b: Nothing, c: Nothing } let - _a = SProxy :: SProxy "a" - _b = SProxy :: SProxy "b" - _c = SProxy :: SProxy "c" + _a = Proxy :: Proxy "a" + _b = Proxy :: Proxy "b" + _c = Proxy :: Proxy "c" Hooks.pure $ HH.div_ @@ -63,10 +63,10 @@ containerComponent = Hooks.component \rec _ -> Hooks.do , HH.li_ [ HH.text ("Component C: " <> show state.c) ] ] , HH.button - [ HE.onClick \_ -> Just do - a <- Hooks.query rec.slotToken _a unit (H.request IsOn) - b <- Hooks.query rec.slotToken _b unit (H.request GetCount) - c <- Hooks.query rec.slotToken _c unit (H.request GetValue) + [ HE.onClick \_ -> do + a <- Hooks.query rec.slotToken _a unit (H.mkRequest IsOn) + b <- Hooks.query rec.slotToken _b unit (H.mkRequest GetCount) + c <- Hooks.query rec.slotToken _c unit (H.mkRequest GetValue) Hooks.put stateIdx { a, b, c } ] [ HH.text "Check states now" ] @@ -89,7 +89,7 @@ componentA = Hooks.component \rec _ -> Hooks.do HH.div_ [ HH.p_ [ HH.text "Toggle me!" ] , HH.button - [ HE.onClick \_ -> Just do + [ HE.onClick \_ -> do Hooks.modify_ enabledIdx not ] [ HH.text (if enabled then "On" else "Off") ] ] @@ -112,7 +112,7 @@ componentB = Hooks.component \rec _ -> Hooks.do , HH.strong_ [ HH.text (show count) ] ] , HH.button - [ HE.onClick \_ -> Just $ Hooks.modify_ countIdx (_ + 1) ] + [ HE.onClick \_ -> Hooks.modify_ countIdx (_ + 1) ] [ HH.text ("Increment") ] ] @@ -132,14 +132,14 @@ componentC = Hooks.component \rec _ -> Hooks.do [ HH.p_ [ HH.text "What do you have to say?" ] , HH.input [ HP.value state - , HE.onValueInput (Just <<< Hooks.put stateIdx) + , HE.onValueInput (Hooks.put stateIdx) ] ] useRenderCount :: forall m a . MonadEffect m - => Hooked m a (UseEffect (UseRef Int a)) Int + => Hook m (UseRef Int <> UseEffect <> a) Int useRenderCount = Hooks.do renders /\ rendersRef <- Hooks.useRef 1 Hooks.captures {} Hooks.useTickEffect do diff --git a/broken/ComponentsMultiTypeHalogenHooks/web/index.html b/recipes/ComponentsMultiTypeHalogenHooks/web/index.html similarity index 100% rename from broken/ComponentsMultiTypeHalogenHooks/web/index.html rename to recipes/ComponentsMultiTypeHalogenHooks/web/index.html diff --git a/broken/ComponentsMultiTypeHalogenHooks/web/index.js b/recipes/ComponentsMultiTypeHalogenHooks/web/index.js similarity index 100% rename from broken/ComponentsMultiTypeHalogenHooks/web/index.js rename to recipes/ComponentsMultiTypeHalogenHooks/web/index.js