Restore KeyboardInputHalogenHooks

README.md

@@ -132,6 +132,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). |

broken/KeyboardInputHalogenHooks/spago.dhall → recipes/KeyboardInputHalogenHooks/spago.dhall

@@ -1,9 +1,16 @@
 { name = "KeyboardInputHalogenHooks"
 , dependencies =
-  [ "console"
+  [ "aff"
   , "effect"
+  , "halogen"
   , "halogen-hooks"
-  , "psci-support"
+  , "maybe"
+  , "prelude"
+  , "strings"
+  , "tuples"
+  , "web-events"
+  , "web-html"
+  , "web-uievents"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/KeyboardInputHalogenHooks/src/**/*.purs" ]

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

@@ -12,7 +12,7 @@ import Halogen as H
 import Halogen.Aff as HA
 import Halogen.HTML as HH
 import Halogen.Hooks as Hooks
-import Halogen.Query.EventSource as ES
+import Halogen.Query.Event as HE
 import Halogen.VDom.Driver (runUI)
 import Web.Event.Event as E
 import Web.HTML (window) as Web
@@ -30,14 +30,14 @@ component
   :: forall unusedInput unusedQuery unusedOutput anyMonad
    . MonadAff anyMonad
   => H.Component unusedQuery unusedInput unusedOutput anyMonad
-component = Hooks.component \rec _ -> Hooks.do
+component = Hooks.component \_ _ -> Hooks.do
   chars /\ charsIdx <- Hooks.useState ""
   Hooks.useLifecycleEffect do
     document <- liftEffect $ Web.document =<< Web.window
     let target = HTMLDocument.toEventTarget document
     Hooks.subscribe' \sid -> do
       let
-        handleKey subId keyEvent
+        handleKey _subId keyEvent
           | KE.shiftKey keyEvent = do
               liftEffect $ E.preventDefault (KE.toEvent keyEvent)
               let char = KE.key keyEvent
@@ -50,7 +50,7 @@ component = Hooks.component \rec _ -> Hooks.do
           | otherwise = do
               pure unit
 
-      ES.eventListenerEventSource KET.keyup target \e ->
+      HE.eventListener KET.keyup target \e ->
         handleKey sid <$> KE.fromEvent e
 
     pure Nothing

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

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

recipes/KeyboardInputHalogenHooks/web/index.js

@@ -0,0 +1,4 @@
+"use strict";
+import { main } from "../../../output/KeyboardInputHalogenHooks.Main/index.js";
+
+main();