bs-webapi-incubator icon indicating copy to clipboard operation
bs-webapi-incubator copied to clipboard

Add functor to type CustomEvent.detail

Open mununki opened this issue 4 years ago • 0 comments

Hi, team.

I'm working on the CustomEvent to use the typed CustomEvent.detail whichever I want to generate and use. Because it is not clearly typed yet. So that I'd like to add a functor to generate a CustomEvent module with typed detail as below;

// Webapi__Dom__CustomEvent.re

type t = Dom.customEvent;

include Webapi__Dom__Event.Impl({
  type nonrec t = t;
});

[@bs.new] external make: string => t = "CustomEvent";
[@bs.new] external makeWithOptions: (string, Js.t({..})) => t = "CustomEvent";

// START of added functor
module MakeEmittedCustomEvent = (T: {type t;}) => {
  type t = Dom.customEvent;

  include Webapi__Dom__Event.Impl({
    type nonrec t = t;
  });

  [@bs.new] external make: string => t = "CustomEvent";
  [@bs.new]
  external makeWithOptions: (string, t) => t = "CustomEvent";
  [@bs.get] external detail: t => T.t = "detail";
};
// END of added functor

Example to use

module OnChangeDetail = {
  type t = {
    component: string,
    valueAsDate: Js.Date.t,
    value: string,
  };
};

module NewOnChangeEvent = Webapi.Dom.CustomEvent.MakeEmittedCustomEvent(OnChangeDetail);

---
onChange={e => {
  Js.log(e->Webapi.Dom.CustomEvent.preventDefault);  // still can use as before.
  Js.log(e->NewOnChangeEvent.preventDefault);  // can use from new CustomEvent
  Js.log2("make", NewOnChangeEvent.makeWithOptions("foo", bar)); // can make with options..
  Js.log(e->NewOnChangeEvent.detail.valueAsDate); // typed detail!
}}

mununki avatar Sep 24 '20 04:09 mununki