Restore Halogen recipes (#306)

* Restore RoutingHashHalogenHooks

* Restore RoutingPushHalogenHooks

* Fix naming in DogImages recipe

* Restore AceEditorHalogenHooks

* Restore DriverRoutingHalogenHooks

* Restore DriverIoHalogenHooks

* Restore TimeHalogenHooks

* Restore KeyboardInputHalogenHooks

* Restore DriverWebSocketsHalogenHooks

* AceEditorHalogenHooks still broken on TPS

* Remove unnecessary "use strict"

---------

Co-authored-by: Peter Murphy <[email protected]>

README.md

@@ -87,6 +87,7 @@ Running a web-compatible recipe:
 
 | Node | Web Browser | Recipe | Description |
 | :-: | :-: | - | - |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/AceEditorHalogenHooks/src/Main.purs) - [fixme](recipes/AceEditorHalogenHooks/tryFixMe.md)) | [AceEditorHalogenHooks](recipes/AceEditorHalogenHooks) | A Halogen Hooks port of the ["Ace Editor" Halogen Example](https://github.com/purescript-halogen/purescript-halogen/tree/master/examples/ace). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/AddRemoveEventListenerJs/src/Main.purs) - [fixme](recipes/AddRemoveEventListenerJs/tryFixMe.md)) | [AddRemoveEventListenerJs](recipes/AddRemoveEventListenerJs) | This recipe shows how to add and remove an event listener to an HTML element. |
 | :heavy_check_mark: |   | [AffjaxPostNode](recipes/AffjaxPostNode) | Performs a simple HTTP Post request using the [Affjax](https://pursuit.purescript.org/packages/purescript-affjax/) library. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/BasicHalogenHooks/src/Main.purs)) | [BasicHalogenHooks](recipes/BasicHalogenHooks) | Displays a button that toggles the label to "On" and "Off". |
@@ -113,6 +114,9 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DogImagesReactHooks/src/Main.purs)) | [DogImagesReactHooks](recipes/DogImagesReactHooks) | Fetches random dog images from the [Dog API](https://dog.ceo/dog-api/). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DragAndDropHalogenHooks/src/Main.purs)) | [DragAndDropHalogenHooks](recipes/DragAndDropHalogenHooks) | A Halogen port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DragAndDropReactHooks/src/Main.purs)) | [DragAndDropReactHooks](recipes/DragAndDropReactHooks) | A React port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop). |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DriverIoHalogenHooks/src/Main.purs)) | [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. |
+|   | :heavy_check_mark: | [DriverRoutingHalogenHooks](recipes/DriverRoutingHalogenHooks) | Demonstrates using `hashchange` events to drive the root component in a Halogen application via the driver. |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/DriverWebSocketsHalogenHooks/src/Main.purs)) | [DriverWebSocketsHalogenHooks](recipes/DriverWebSocketsHalogenHooks) | Demonstrates using a WebSocket to drive the main component in a Halogen application. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/FileUploadHalogenHooks/src/Main.purs)) | [FileUploadHalogenHooks](recipes/FileUploadHalogenHooks) | A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/FileUploadReactHooks/src/Main.purs)) | [FileUploadReactHooks](recipes/FileUploadReactHooks) | A React port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |
 |   | :heavy_check_mark: | [FindDomElementJs](recipes/FindDomElementJs) | This recipe shows how to find elements in the DOM by using query selectors. |
@@ -129,6 +133,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ImagePreviewsHalogenHooks/src/Main.purs) - [fixme](recipes/ImagePreviewsHalogenHooks/tryFixMe.md)) | [ImagePreviewsHalogenHooks](recipes/ImagePreviewsHalogenHooks) | A Halogen port of the ["Files - Drag-and-Drop" Elm Example](https://elm-lang.org/examples/drag-and-drop) with an additional feature to display image thumbnails. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ImagePreviewsReactHooks/src/Main.purs)) | [ImagePreviewsReactHooks](recipes/ImagePreviewsReactHooks) | A React port of the ["Files - Image-Previews" Elm Example](https://elm-lang.org/examples/image-previews). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/InterpretHalogenHooks/src/Main.purs)) | [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. |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/KeyboardInputHalogenHooks/src/Main.purs)) | [KeyboardInputHalogenHooks](recipes/KeyboardInputHalogenHooks) | This example demonstrates how to selectively capture keyboard events and, more generally, how to use `EventSource`s in Halogen. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/LifecycleHalogenHooks/src/Main.purs)) | [LifecycleHalogenHooks](recipes/LifecycleHalogenHooks) | Demonstrates component lifecycle. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/NumbersHalogenHooks/src/Main.purs)) | [NumbersHalogenHooks](recipes/NumbersHalogenHooks) | A Halogen port of the ["Random - Numbers" Elm Example](https://elm-lang.org/examples/numbers). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/NumbersReactHooks/src/Main.purs)) | [NumbersReactHooks](recipes/NumbersReactHooks) | A React port of the ["Random - Numbers" Elm Example](https://elm-lang.org/examples/numbers). |
@@ -137,8 +142,10 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/PositionsReactHooks/src/Main.purs)) | [PositionsReactHooks](recipes/PositionsReactHooks) | A React port of the ["Random - Positions" Elm Example](https://elm-lang.org/examples/positions). |
 | :heavy_check_mark: |   | [RandomNumberGameNode](recipes/RandomNumberGameNode) | This recipe shows how to build a "guess the random number" game using a custom `AppM` monad via the `ReaderT` design pattern and `Aff`, storing the game state in a mutable variable via a `Ref`. |
 | :heavy_check_mark: |   | [ReadPrintFileContentsNode](recipes/ReadPrintFileContentsNode) | Reads a file's contents and prints it to the console. |
+|   | :heavy_check_mark: | [RoutingHashHalogenClassic](recipes/RoutingHashHalogenClassic) | This recipe shows how to use `purescript-routing` to do client-side hash-based routing in a Halogen-based single-page application (SPA). |
 |   | :heavy_check_mark: | [RoutingHashLog](recipes/RoutingHashLog) | This recipe demonstrates hash-based routing with `purescript-routing`. No web framework is used. |
 |   | :heavy_check_mark: | [RoutingHashReactHooks](recipes/RoutingHashReactHooks) | This recipe shows how to use `purescript-routing` to do client-side hash-based routing in a React-based single-page application (SPA). |
+|   | :heavy_check_mark: | [RoutingPushHalogenClassic](recipes/RoutingPushHalogenClassic) | This recipe shows how to use `purescript-routing` to do client-side push-state routing in a Halogen-based single-page application (SPA). |
 |   | :heavy_check_mark: | [RoutingPushReactHooks](recipes/RoutingPushReactHooks) | This recipe shows how to use `purescript-routing` to do client-side push-state routing in a React-based single-page application (SPA). |
 | :heavy_check_mark: |   | [RunCapabilityPatternNode](recipes/RunCapabilityPatternNode) | A skeletal version of an application structuring pattern using purescript-run and free dsls. |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ShapesHalogenHooks/src/Main.purs)) | [ShapesHalogenHooks](recipes/ShapesHalogenHooks) | Demonstrates rendering of SVG shapes. |
@@ -150,6 +157,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/TextFieldsHalogenHooks/src/Main.purs)) | [TextFieldsHalogenHooks](recipes/TextFieldsHalogenHooks) | A Halogen port of the ["User Interface - Text Fields" Elm Example](https://elm-lang.org/examples/text-fields). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/TextFieldsReactHooks/src/Main.purs)) | [TextFieldsReactHooks](recipes/TextFieldsReactHooks) | A React port of the ["User Interface - Text Fields" Elm Example](https://elm-lang.org/examples/text-fields). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/TicTacToeReactHooks/src/Main.purs) - [fixme](recipes/TicTacToeReactHooks/tryFixMe.md)) | [TicTacToeReactHooks](recipes/TicTacToeReactHooks) | A PureScript port of the official reactjs.org documentation's [Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html) example. |
+|   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/TimeHalogenHooks/src/Main.purs)) | [TimeHalogenHooks](recipes/TimeHalogenHooks) | A Halogen port of the ["Time - Time" Elm Example](https://elm-lang.org/examples/time). |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/TimeReactHooks/src/Main.purs)) | [TimeReactHooks](recipes/TimeReactHooks) | A React port of the ["User Interface - Time" Elm Example](https://elm-lang.org/examples/time). |
 | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/ValueBasedJsonCodecLog/src/Main.purs)) | [ValueBasedJsonCodecLog](recipes/ValueBasedJsonCodecLog) | This recipe shows how to use [`codec`](https://pursuit.purescript.org/packages/purescript-codec/3.0.0) and [`codec-argonaut`](https://pursuit.purescript.org/packages/purescript-codec-argonaut/) to write value-based bidirectional JSON codecs to encode and decode examples written in "meta-language." |
 |   | :heavy_check_mark: ([try](https://try.purescript.org/?github=/JordanMartinez/purescript-cookbook/master/recipes/WindowPropertiesJs/src/Main.purs)) | [WindowPropertiesJs](recipes/WindowPropertiesJs) | This recipe shows how to get and print various properties in the browser's `window` object. |

recipes/AceEditorHalogenHooks/spago.dhall

@@ -0,0 +1,16 @@
+{ name = "AceEditorHalogenHooks"
+, dependencies =
+  [ "ace"
+  , "aff"
+  , "effect"
+  , "foldable-traversable"
+  , "halogen"
+  , "halogen-hooks"
+  , "halogen-subscriptions"
+  , "maybe"
+  , "prelude"
+  , "tuples"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/AceEditorHalogenHooks/src/**/*.purs" ]
+}

broken/AceEditorHalogenHooks/src/Main.purs → recipes/AceEditorHalogenHooks/src/Main.purs

@@ -8,7 +8,6 @@ import Ace.EditSession as Session
 import Ace.Editor as Editor
 import Data.Foldable (traverse_)
 import Data.Maybe (Maybe(..))
-import Data.Symbol (SProxy(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff.Class (class MonadAff)
@@ -19,16 +18,17 @@ import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
 import Halogen.Hooks as Hooks
-import Halogen.Query.EventSource as ES
+import Halogen.Subscription as HS
 import Halogen.VDom.Driver (runUI)
+import Type.Proxy (Proxy(..))
 
 main :: Effect Unit
 main =
   HA.runHalogenAff do
     body <- HA.awaitBody
     void $ runUI containerComponent unit body
 
-_ace = SProxy :: SProxy "ace"
+_ace = Proxy :: Proxy "ace"
 
 containerComponent
   :: forall unusedQuery unusedInput unusedOutput anyMonad
@@ -43,14 +43,14 @@ containerComponent = Hooks.component \rec _ -> Hooks.do
       , HH.div_
           [ HH.p_
               [ HH.button
-                  [ HE.onClick \_ -> Just do
-                      void $ Hooks.query rec.slotToken _ace unit $ H.tell (ChangeText "")
+                  [ HE.onClick \_ -> do
+                      void $ Hooks.tell rec.slotToken _ace unit (ChangeText "")
                   ]
                   [ HH.text "Clear" ]
               ]
           ]
       , HH.div_
-          [ HH.slot _ace unit aceComponent unit \(TextChanged t) -> Just do
+          [ HH.slot _ace unit aceComponent unit \(TextChanged t) -> do
               Hooks.put msgIdx t
           ]
       , HH.p_
@@ -73,18 +73,19 @@ aceComponent
    . MonadAff anyMonad
   => H.Component AceQuery unusedInput AceOutput anyMonad
 aceComponent = Hooks.component \rec _ -> Hooks.do
-  state /\ stateIdx <- Hooks.useState (Nothing :: Maybe Editor)
+  _state /\ stateIdx <- Hooks.useState (Nothing :: Maybe Editor)
   Hooks.useLifecycleEffect do
     Hooks.getHTMLElementRef aceElemLabel >>= traverse_ \element -> do
       editor <- liftEffect $ Ace.editNode element Ace.ace
       session <- liftEffect $ Editor.getSession editor
       Hooks.put stateIdx $ Just editor
-      void $ Hooks.subscribe $ ES.effectEventSource \emitter -> do
-        Session.onChange session \_ -> ES.emit emitter do
+      { emitter, listener } <- H.liftEffect HS.create
+      void $ Hooks.subscribe emitter
+      H.liftEffect $ Session.onChange session \_ ->
+        HS.notify listener do
           Hooks.get stateIdx >>= traverse_ \editor' -> do
             text <- liftEffect (Editor.getValue editor')
             Hooks.raise rec.outputToken $ TextChanged text
-        pure mempty
     pure $ Just do
       Hooks.put stateIdx Nothing
 

recipes/AceEditorHalogenHooks/web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>AceEditorHalogenHooks</title>
+    <style type="text/css" media="screen">
+      .ace_editor {
+        height: 200px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>

recipes/AceEditorHalogenHooks/web/index.js

@@ -0,0 +1,4 @@
+import "ace-builds/src-min-noconflict/ace.js";
+import { main } from "../../../output/AceEditorHalogenHooks.Main/index.js";
+
+main();

recipes/DogImagesReactHooks/src/Main.purs

@@ -38,7 +38,7 @@ mkApp :: Component {}
 mkApp = do
   component "DogImages" \_ -> React.do
     resetToken /\ reset <- useResetToken
-    response <- useAff resetToken getRandomCatGif
+    response <- useAff resetToken getRandomDogImage
 
     let
       onClick = handler_ reset
@@ -65,8 +65,8 @@ mkApp = do
                   ]
           ]
 
-getRandomCatGif :: Aff (Either String String)
-getRandomCatGif = do
+getRandomDogImage :: Aff (Either String String)
+getRandomDogImage = do
   response <-
     Affjax.get
       ResponseFormat.json

broken/DriverIoHalogenHooks/spago.dhall → recipes/DriverIoHalogenHooks/spago.dhall

@@ -2,8 +2,12 @@
 , dependencies =
   [ "console"
   , "effect"
+  , "halogen"
   , "halogen-hooks"
-  , "psci-support"
+  , "halogen-subscriptions"
+  , "maybe"
+  , "prelude"
+  , "tuples"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/DriverIoHalogenHooks/src/**/*.purs" ]

broken/DriverIoHalogenHooks/src/Main.purs → recipes/DriverIoHalogenHooks/src/Main.purs

@@ -2,7 +2,6 @@ module DriverIoHalogenHooks.Main where
 
 import Prelude
 
-import Control.Coroutine as CR
 import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
@@ -14,23 +13,24 @@ import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
 import Halogen.Hooks as Hooks
+import Halogen.Subscription as HS
 import Halogen.VDom.Driver (runUI)
 
 main :: Effect Unit
 main = HA.runHalogenAff do
   body <- HA.awaitBody
   io <- runUI buttonComponent unit body
 
-  io.subscribe $ CR.consumer \(Toggled newState) -> do
+  _ <- liftEffect $ HS.subscribe io.messages \(Toggled newState) -> do
     liftEffect $ log $ "Button was internally toggled to: " <> show newState
     pure Nothing
 
-  state0 <- io.query $ H.request IsOn
+  state0 <- io.query $ H.mkRequest IsOn
   liftEffect $ log $ "The button state is currently: " <> show state0
 
-  void $ io.query $ H.tell (SetState true)
+  void $ io.query $ H.mkTell (SetState true)
 
-  state1 <- io.query $ H.request IsOn
+  state1 <- io.query $ H.mkRequest IsOn
   liftEffect $ log $ "The button state is now: " <> show state1
 
 data ButtonQuery a
@@ -55,7 +55,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
       ]

broken/DriverIoHalogenHooks/web/index.html → recipes/DriverIoHalogenHooks/web/index.html

@@ -6,6 +6,6 @@
   </head>
 
   <body>
-    <script src="./index.js"></script>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>

recipes/DriverIoHalogenHooks/web/index.js

@@ -0,0 +1,3 @@
+import { main } from "../../../output/DriverIoHalogenHooks.Main/index.js";
+
+main();

broken/DriverRoutingHalogenHooks/spago.dhall → recipes/DriverRoutingHalogenHooks/spago.dhall

@@ -1,10 +1,19 @@
 { name = "DriverRoutingHalogenHooks"
 , dependencies =
-  [ "console"
+  [ "aff"
+  , "aff-coroutines"
+  , "arrays"
+  , "coroutines"
   , "effect"
+  , "foldable-traversable"
+  , "halogen"
   , "halogen-hooks"
-  , "psci-support"
-  , "aff-coroutines"
+  , "maybe"
+  , "prelude"
+  , "strings"
+  , "tuples"
+  , "web-events"
+  , "web-html"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/DriverRoutingHalogenHooks/src/**/*.purs" ]