Practical usage of GenType

I’m trying to display some UI with Microsoft’s Fluent UI React library using the ReScript React bindings. The DetailList component has a zillion properties and events. I want to use GenType to to ensure my ReScript bindings are correct rather than just throwing code over the wall with @send. I’ve spent many hours now trying to model many of the FluentUI structures in React. For example, below is the Selection structure. I tried just modeling a few properties but this generated a syntax error since I need to pass this thing into the constructor and the constructor expects a lot of it. I’m wondering if I should instead create a detailListWrapper.ts file that does all the heavy lifting and only import exactly what I need. Maybe I’d create a wrapper around the detail list constructor where I just pass the 2 or 3 properties that matter to me and then GenType import that.

How are people practically working with GenType? It seems like writing a full set of bindings for a complex thing like Microsoft’s Fluid UI React library is an overwhelming task. I could also choose to do all my UI in typescript, but that isn’t much fun since I really like using ReScript.

type t<'item> = {
    count: int,
    getItems: unit => array<'item>,
    mode: Mode.t,
    canSelectItem: ('item, Js.undefined<int>) => bool,
    setChangeEvents: (bool, Js.undefined<bool>) => unit,
    setItems: (array<'item>, bool) => unit,
    getSelection: unit => array<'item>,
    getSelectedIndices: unit => array<int>,
    getSelectedCount: unit => int,
    isRangeSelected: (int, int) => bool,
    isAllSelected: unit => bool,
    isKeySelected: string => bool,
    isIndexSelected: int => bool,
    isModal: option<unit => bool>,
    setAllSelected: bool => unit,
    setKeySelected: (string, bool, bool) => unit,
    setIndexSelected: (int, bool, bool) => unit,
    setModal: option<bool => unit>,
    selectToKey: (string, Js.undefined<bool>) => unit,
    selectToIndex: (int, Js.undefined<bool>) => unit,
    toggleAllSelected: unit => unit,
    toggleKeySelected: string => unit,
    toggleIndexSelected: int => unit,
    toggleRangeSelected: (int, int) => unit,
  }

Hi

I understand your frustrations. One way I have used such components is to make a wrapper typescript react component which has much simpler props and export that to rescript. Thus a middle ground. Not an answer your expecting I guess

-Srikanth

1 Like