Discussion on: Reason(React) Best Practices - Part 3

View post

Please don't let this be all, brother. I have tried at various times to write bindings to the github.com/developit/mitt library for no other reason than its super short and should be doable as a learning experience. Why not a bonus post in this series binding that library?!! Thanks for sharing your knowledge here. This has been invaluable and a go to series for me.

Peace to you.

Alain • Oct 28 '19 • Edited

This is where I keep getting stuck.

I can't figure out how to bind to the star symbol and anything else really.
Js code is:

type EventHandlerMap = {
  '*'?: WildCardEventHandlerList,
  [type: string]: EventHandlerList,
};

and can be found here:github.com/developit/mitt/blob/2ab...

Yawar Amin • Oct 28 '19 • Edited

Hey Alain, roughly speaking this should work:

module EventHandlerMap = {
  type t;
  type wildCardEventHandlerList;
  type eventHandlerList;

  [@bs.get] external star: t => option(wildCardEventHandlerList) = "*";
  [@bs.get_index] external get: (t, string) => option(eventHandlerList) = "";
};

let f(eventHandlerMap) = EventHandlerMap.star(eventHandlerMap);
let g(eventHandlerMap) = EventHandlerMap.get(eventHandlerMap, "foo");

It models the EventHandlerMap and its values as abstract types, you can fill in more details if you know them.

[EDIT: I made the get return an option because a dynamic key lookup may always return undefined.]

Florian Hammerschmidt • Oct 29 '19 • Edited

Yawar, you really are an OCaml/Reason guru and probably the most helpful guy I ever met in any community. Keep it up!

Yawar Amin • Oct 29 '19

Aw, shucks 😊it's very gratifying to see people get pulled into the ReasonML community/tech ecosystem and make cool stuff. And one of these days, I'll manage to ship some Reason at work too–fingers crossed 😁

Florian Hammerschmidt • Oct 28 '19

Ahhh, that's a tough one. But the library is short enough that I would rewrite in Reason completely. Many JS hacks though (I suppose for performance).

Having a Map of different types is just not possible (IMHO) in Reason. You'd need a wrapper EventHandlerList type which works for both WildCardEventHandlerList and EventHandlerList.

Sometimes, you just need to use plain JS Objects and Obj.magic, I guess, sorry.

Florian Hammerschmidt • Oct 28 '19

As said, there will be more - just not under the "Reason(React) Best Practices" umbrella. I want to cover all of the bs.* annotations at some point.