Combine Provider.Keydown and Provider.Keyup into `Provider.Keyboa…

…rd` (#663)

core/source/Provider/Keyboard.mint

@@ -0,0 +1,57 @@
+/* Represents a subscription for `Provider.Keyboard` */
+record Provider.Keyboard.Subscription {
+  downs : Function(Html.Event, Promise(Void)),
+  ups : Function(Html.Event, Promise(Void))
+}
+
+/* A provider for global keyboard events. */
+provider Provider.Keyboard : Provider.Keyboard.Subscription {
+  /* The listener unsubscribe functions. */
+  state listeners : Maybe(Tuple(Function(Void), Function(Void))) = Maybe::Nothing
+
+  /* Updates the provider. */
+  fun update : Promise(Void) {
+    if Array.isEmpty(subscriptions) {
+      Maybe.map(
+        listeners,
+        (methods : Tuple(Function(Void), Function(Void))) {
+          let {keydownListener, keyupListener} =
+            methods
+
+          keydownListener()
+          keyupListener()
+        })
+
+      next { listeners: Maybe::Nothing }
+    } else {
+      case listeners {
+        Maybe::Nothing =>
+          next
+            {
+              listeners:
+                Maybe::Just(
+                  {
+                    Window.addEventListener(
+                      "keydown",
+                      true,
+                      (event : Html.Event) {
+                        for subscription of subscriptions {
+                          subscription.downs(event)
+                        }
+                      }),
+                    Window.addEventListener(
+                      "keyup",
+                      true,
+                      (event : Html.Event) {
+                        for subscription of subscriptions {
+                          subscription.ups(event)
+                        }
+                      })
+                  })
+            }
+
+        => next { }
+      }
+    }
+  }
+}

core/source/Test/Html.mint

@@ -137,6 +137,36 @@ module Test.Html {
     `
   }
 
+  /* Triggers a keydown event with the specified key on the element that matches the given selector. */
+  fun triggerKeyDown (
+    context : Test.Context(Dom.Element),
+    selector : String,
+    key : String
+  ) : Test.Context(Dom.Element) {
+    `
+    #{context}.step((element) => {
+      const event = new KeyboardEvent('keydown', { key: #{key} });
+      element.querySelector(#{selector}).dispatchEvent(event)
+      return element
+    })
+    `
+  }
+
+  /* Triggers a keyup event with the specified key on the element that matches the given selector. */
+  fun triggerKeyUp (
+    context : Test.Context(Dom.Element),
+    selector : String,
+    key : String
+  ) : Test.Context(Dom.Element) {
+    `
+    #{context}.step((element) => {
+      const event = new KeyboardEvent('keyup', { key: #{key} });
+      element.querySelector(#{selector}).dispatchEvent(event)
+      return element
+    })
+    `
+  }
+
   /* Asserts the text of the element that matches the given selector. */
   fun assertTextOf (
     context : Test.Context(Dom.Element),

core/tests/tests/Provider/Keyboard.mint

@@ -0,0 +1,41 @@
+component Test.Provider.Keyboard {
+  state downs : Number = 0
+  state ups : Number = 0
+
+  use Provider.Keyboard {
+    downs: (event : Html.Event) : Promise(Void) { next { downs: downs + 1 } },
+    ups: (event : Html.Event) : Promise(Void) { next { ups: ups + 1 } }
+  }
+
+  fun render : Html {
+    <div>
+      <downs>
+        <{ Number.toString(downs) }>
+      </downs>
+
+      <ups>
+        <{ Number.toString(ups) }>
+      </ups>
+    </div>
+  }
+}
+
+suite "Provider.Keyboard.downs" {
+  test "calls downs on keydown" {
+    <Test.Provider.Keyboard/>
+    |> Test.Html.start()
+    |> Test.Html.assertTextOf("downs", "0")
+    |> Test.Html.triggerKeyDown("div", "A")
+    |> Test.Html.assertTextOf("downs", "1")
+  }
+}
+
+suite "Provider.Keyboard.ups" {
+  test "calls ups on keyup" {
+    <Test.Provider.Keyboard/>
+    |> Test.Html.start()
+    |> Test.Html.assertTextOf("ups", "0")
+    |> Test.Html.triggerKeyUp("div", "A")
+    |> Test.Html.assertTextOf("ups", "1")
+  }
+}