From c16196b1f6cce1ac39e72f4face45dd19c7c9b38 Mon Sep 17 00:00:00 2001 From: Peter Murphy <26548438+ptrfrncsmrph@users.noreply.github.com> Date: Sun, 20 Aug 2023 22:00:50 -0400 Subject: [PATCH] Restore KeyboardInputHalogenHooks --- README.md | 1 + broken/KeyboardInputHalogenHooks/web/index.js | 2 -- .../KeyboardInputHalogenHooks/.gitignore | 0 .../KeyboardInputHalogenHooks/README.md | 0 .../KeyboardInputHalogenHooks/spago.dhall | 11 +++++++++-- .../KeyboardInputHalogenHooks/src/Main.purs | 8 ++++---- .../KeyboardInputHalogenHooks/web/index.html | 2 +- recipes/KeyboardInputHalogenHooks/web/index.js | 4 ++++ 8 files changed, 19 insertions(+), 9 deletions(-) delete mode 100644 broken/KeyboardInputHalogenHooks/web/index.js rename {broken => recipes}/KeyboardInputHalogenHooks/.gitignore (100%) rename {broken => recipes}/KeyboardInputHalogenHooks/README.md (100%) rename {broken => recipes}/KeyboardInputHalogenHooks/spago.dhall (60%) rename {broken => recipes}/KeyboardInputHalogenHooks/src/Main.purs (91%) rename {broken => recipes}/KeyboardInputHalogenHooks/web/index.html (73%) create mode 100644 recipes/KeyboardInputHalogenHooks/web/index.js diff --git a/README.md b/README.md index f98c72ee..60d0c000 100644 --- a/README.md +++ b/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). | diff --git a/broken/KeyboardInputHalogenHooks/web/index.js b/broken/KeyboardInputHalogenHooks/web/index.js deleted file mode 100644 index 4b0282bb..00000000 --- a/broken/KeyboardInputHalogenHooks/web/index.js +++ /dev/null @@ -1,2 +0,0 @@ -"use strict"; -require("../../../output/KeyboardInputHalogenHooks.Main/index.js").main(); diff --git a/broken/KeyboardInputHalogenHooks/.gitignore b/recipes/KeyboardInputHalogenHooks/.gitignore similarity index 100% rename from broken/KeyboardInputHalogenHooks/.gitignore rename to recipes/KeyboardInputHalogenHooks/.gitignore diff --git a/broken/KeyboardInputHalogenHooks/README.md b/recipes/KeyboardInputHalogenHooks/README.md similarity index 100% rename from broken/KeyboardInputHalogenHooks/README.md rename to recipes/KeyboardInputHalogenHooks/README.md diff --git a/broken/KeyboardInputHalogenHooks/spago.dhall b/recipes/KeyboardInputHalogenHooks/spago.dhall similarity index 60% rename from broken/KeyboardInputHalogenHooks/spago.dhall rename to recipes/KeyboardInputHalogenHooks/spago.dhall index 6c3a6e10..f6796dce 100644 --- a/broken/KeyboardInputHalogenHooks/spago.dhall +++ b/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" ] diff --git a/broken/KeyboardInputHalogenHooks/src/Main.purs b/recipes/KeyboardInputHalogenHooks/src/Main.purs similarity index 91% rename from broken/KeyboardInputHalogenHooks/src/Main.purs rename to recipes/KeyboardInputHalogenHooks/src/Main.purs index e98288eb..233c6b8f 100644 --- a/broken/KeyboardInputHalogenHooks/src/Main.purs +++ b/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 diff --git a/broken/KeyboardInputHalogenHooks/web/index.html b/recipes/KeyboardInputHalogenHooks/web/index.html similarity index 73% rename from broken/KeyboardInputHalogenHooks/web/index.html rename to recipes/KeyboardInputHalogenHooks/web/index.html index e83dc2e0..73e4509d 100644 --- a/broken/KeyboardInputHalogenHooks/web/index.html +++ b/recipes/KeyboardInputHalogenHooks/web/index.html @@ -6,6 +6,6 @@ - + diff --git a/recipes/KeyboardInputHalogenHooks/web/index.js b/recipes/KeyboardInputHalogenHooks/web/index.js new file mode 100644 index 00000000..2bec5495 --- /dev/null +++ b/recipes/KeyboardInputHalogenHooks/web/index.js @@ -0,0 +1,4 @@ +"use strict"; +import { main } from "../../../output/KeyboardInputHalogenHooks.Main/index.js"; + +main();