Use field names when serializing events to JS (#848)

* Use field names when serializing events to JS

- Default ToJSVal encodes Map as an Array, so use an Object encoding instead
- Update TypeScripts to reflect the change

* Make sure the tests pass too.

* Parenify

Author: dmjio

js/miso.spec.js

@@ -2045,7 +2045,7 @@ describe('js tests', () => {
     );
 
     /* setup event delegation */
-    events = { click: ['click', true] };
+    events = [ { name : 'click', capture: true } ];
     var getVTree = function (cb) {
       cb(vtree);
     };

package.json

@@ -8,7 +8,7 @@
     "test": "bun test js/miso.spec.js && bun run lcov",
     "lcov": "lcov-viewer lcov -o ./coverage ./coverage/lcov.info",
     "watch": "tsc ts/miso.ts --watch",
-    "pretty": "prettier --write ts/*.ts",
+    "pretty": "prettier --write ts/miso/*.ts ts/*.ts",
     "build": "bun build --outfile=js/miso.js ./ts/index.ts --target=browser"
   },
   "type": "module",

src/Miso/Delegate.hs

@@ -1,3 +1,4 @@
+{-# LANGUAGE RecordWildCards #-}
 -----------------------------------------------------------------------------
 {-# LANGUAGE OverloadedStrings #-}
 -----------------------------------------------------------------------------
@@ -17,10 +18,28 @@ module Miso.Delegate
 import           Control.Monad.IO.Class (liftIO)
 import           Data.IORef (IORef, readIORef)
 import qualified Data.Map.Strict as M
-import           Language.Javascript.JSaddle (JSM, JSVal, Object(..), toJSVal)
+import           Language.Javascript.JSaddle (create, JSM, JSVal, Object(..), ToJSVal(toJSVal))
 import           Miso.FFI (delegateEvent, undelegateEvent)
 import           Miso.Html.Types (VTree(..))
 import           Miso.String (MisoString)
+import qualified Miso.FFI as FFI
+-----------------------------------------------------------------------------
+-- | Local Event type, used to create field names for a delegated event
+data Event
+  = Event
+  { name :: MisoString
+  -- ^ Event name
+  , capture :: Bool
+  -- ^ Capture settings for event
+  } deriving (Show, Eq)
+-----------------------------------------------------------------------------
+-- | Instance used to initialize event delegation
+instance ToJSVal Event where
+  toJSVal Event {..} = do
+    o <- create
+    flip (FFI.set "name") o =<< toJSVal name
+    flip (FFI.set "capture") o =<< toJSVal capture
+    toJSVal o
 -----------------------------------------------------------------------------
 -- | Entry point for event delegation
 delegator
@@ -30,7 +49,7 @@ delegator
   -> Bool
   -> JSM ()
 delegator mountPointElement vtreeRef es debug = do
-  evts <- toJSVal (M.toList es)
+  evts <- toJSVal (uncurry Event <$> M.toList es)
   delegateEvent mountPointElement evts debug $ do
     VTree (Object vtree) <- liftIO (readIORef vtreeRef)
     pure vtree

ts/miso/event.ts

@@ -7,11 +7,11 @@ export function delegate(
 ) {
   for (var event in events) {
     mount.addEventListener(
-      events[event][0],
+      events[event]['name'],
       function (e: any) {
         listener(e, mount, getVTree, debug);
       },
-      events[event][1],
+      events[event]['capture'],
     );
   }
 }
@@ -32,11 +32,11 @@ export function undelegate(
 ) {
   for (var event in events) {
     mount.removeEventListener(
-      events[event][0],
+      events[event]['name'],
       function (e: any) {
         listener(e, mount, getVTree, debug);
       },
-      events[event][1],
+      events[event]['capture'],
     );
   }
 }