Add AceHalogenHooks (#162)

* Add AceHalogenHooks

* Add ace to packages.dhall

* Rename AceHalogenHooks to AceEditorHalogenHooks

* Install ace-builds as a dependency rather than storing it in recipe

* Use single definition for ace's html element label

* Clarify type via type annotation

* Remove added ace package; upgrade set to latest package set

Author: JordanMartinez

README.md

@@ -83,6 +83,7 @@ Running a web-compatible recipe:
 
 | Node | Web Browser | Recipe | Description |
 | :-: | :-: | - | - |
+|   | :heavy_check_mark: | [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: | [AddRemoveEventListenerJs](recipes/AddRemoveEventListenerJs) | This recipe shows how to add and remove an event listener to an HTML element. |
 |   | :heavy_check_mark: | [BasicHalogenHooks](recipes/BasicHalogenHooks) | Displays a button that toggles the label to "On" and "Off". |
 | :heavy_check_mark: | :heavy_check_mark: | [BigIntJs](recipes/BigIntJs) | This recipe shows how to print, create, and use values of the `BigIntJs` type in either the node.js or web browser console. |

package.json

@@ -6,6 +6,7 @@
     "spago": "^0.15.3"
   },
   "dependencies": {
+    "ace-builds": "^1.4.11",
     "big-integer": "^1.6.48",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

recipes/AceEditorHalogenHooks/.gitignore

@@ -0,0 +1,15 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago
+/.cache/
+/dist/
+/web-dist/
+/prod-dist/
+/prod/

recipes/AceEditorHalogenHooks/README.md

@@ -0,0 +1,9 @@
+# AceEditorHalogenHooks
+
+A Halogen Hooks port of the ["Ace Editor" Halogen Example](https://github.com/purescript-halogen/purescript-halogen/tree/master/examples/ace).
+
+## Expected Behavior:
+
+### Browser
+
+The browser will wrap the Ace editor in a Halogen component.

recipes/AceEditorHalogenHooks/spago.dhall

@@ -0,0 +1,5 @@
+{ name = "AceEditorHalogenHooks"
+, dependencies = [ "ace", "console", "effect", "halogen-hooks", "psci-support" ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/AceEditorHalogenHooks/src/**/*.purs" ]
+}

recipes/AceEditorHalogenHooks/src/Main.purs

@@ -0,0 +1,104 @@
+module AceEditorHalogenHooks.Main where
+
+import Prelude
+
+import Ace (Editor)
+import Ace as Ace
+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)
+import Halogen (liftEffect)
+import Halogen as H
+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 as Hooks
+import Halogen.Query.EventSource as ES
+import Halogen.VDom.Driver (runUI)
+
+main :: Effect Unit
+main =
+  HA.runHalogenAff do
+    body <- HA.awaitBody
+    void $ runUI containerComponent unit body
+
+_ace = SProxy :: SProxy "ace"
+
+containerComponent
+  :: forall unusedQuery unusedInput unusedOutput anyMonad
+   . MonadAff anyMonad
+  => H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
+containerComponent = Hooks.component \rec _ -> Hooks.do
+  msg /\ msgIdx <- Hooks.useState ""
+  Hooks.pure $
+    HH.div_
+      [ HH.h1_
+          [ HH.text "ace editor" ]
+      , HH.div_
+          [ HH.p_
+              [ HH.button
+                  [ HE.onClick \_ -> Just do
+                      void $ Hooks.query rec.slotToken _ace unit $ H.tell (ChangeText "")
+                  ]
+                  [ HH.text "Clear" ]
+              ]
+          ]
+      , HH.div_
+          [ HH.slot _ace unit aceComponent unit \(TextChanged t) -> Just do
+              Hooks.put msgIdx t
+          ]
+      , HH.p_
+          [ HH.text ("Current text: " <> msg) ]
+      ]
+
+data ParentAction
+  = ClearText
+  | HandleAceUpdate AceOutput
+
+data AceQuery a = ChangeText String a
+
+data AceOutput = TextChanged String
+
+aceElemLabel :: H.RefLabel
+aceElemLabel = H.RefLabel "ace"
+
+aceComponent
+  :: forall unusedInput anyMonad
+   . MonadAff anyMonad
+  => H.Component HH.HTML AceQuery unusedInput AceOutput anyMonad
+aceComponent = Hooks.component \rec _ -> Hooks.do
+  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
+          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
+
+  Hooks.useQuery rec.queryToken case _ of
+    ChangeText text next -> do
+      maybeEditor <- Hooks.get stateIdx
+      case maybeEditor of
+        Nothing -> pure unit
+        Just editor -> do
+          current <- liftEffect $ Editor.getValue editor
+          when (text /= current) do
+            void $ H.liftEffect $ Editor.setValue text Nothing editor
+      Hooks.raise rec.outputToken $ TextChanged text
+      pure (Just next)
+
+  Hooks.pure $
+    HH.div [ HP.ref aceElemLabel ] []

recipes/AceEditorHalogenHooks/web/index.html

@@ -0,0 +1,18 @@
+<!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 src="./index.js"></script>
+</body>
+
+</html>

recipes/AceEditorHalogenHooks/web/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/AceEditorHalogenHooks.Main/index.js").main();