`js->type_Get` does not compile when translated to ReScript

[Pet3ris]

The syntax js->type_Get does not translate to ReScript code that compiles.

Running bsc -format on this file results in the following error:

  83 ┆
  84 ┆ let make = js => {
  85 ┆   type_: js->type_Get,
  86 ┆   autoComplete: js->autoCompleteGet,
  87 ┆   multiple: js->multipleGet,

  The value type_Get can't be found

Any thoughts on how to make this work?

let unary = (fn: 'a) : 'a => [%raw "(a) => fn(a)" ];
let (||>) = (f, g, x) => g(f(x));
let (<$>) = (option, mapper) => switch (option) {
  | None => None
  | Some(value) => Some(mapper(value))
};

[@bs.deriving abstract]
type file = {
  lastModified: int,
  name: string,
  size: int,
  [@bs.as "type"] type_: string,
};

type onClick = ReactEvent.Mouse.t => unit;
type onKeyDown = ReactEvent.Keyboard.t => unit;
type onFocus = ReactEvent.Focus.t => unit;
type onBlur = ReactEvent.Focus.t => unit;
type onDragStart = ReactEvent.Mouse.t => unit;
type onDragEnter = ReactEvent.Mouse.t => unit;
type onDragOver = ReactEvent.Mouse.t => unit;
type onDragLeave = ReactEvent.Mouse.t => unit;
type ref = Js.nullable(Dom.element) => unit;

module Accept = {
  type t = [ | `single(string) | `many(list(string))];

  type js;

  external makeString: string => js = "%identity";
  external makeArray: array(string) => js = "%identity";

  let make =
    fun
    | `single(s) => s |> makeString
    | `many(m) => m |> Array.of_list |> makeArray;
};

module GetInputProps = {
  type onChange = ReactEvent.Form.t => unit;

  module Input = {
    [@bs.deriving abstract]
    type js = {
      [@bs.optional] refKey: string,
      [@bs.optional] onChange: onChange,
      [@bs.optional] onClick: onClick,
    };

    type t = {
      refKey: option(string),
      onChange: option(onChange),
      onClick: option(onClick),
    };
  };

  module Output = {
    [@bs.deriving abstract]
    type js = {
      [@bs.as "type"] type_: string,
      autoComplete: string,
      multiple: bool,
      onChange: onChange,
      onClick: onClick,
      tabIndex: int,
      style: ReactDOMRe.style,
      ref: ref,
    };

    type t = {
      type_: string,
      autoComplete: string,
      multiple: bool,
      onChange: onChange,
      onClick: onClick,
      tabIndex: int,
      style: ReactDOMRe.style,
      ref: ref,
    };

    let make = (js) => {
      type_: js->type_Get,
      autoComplete: js->autoCompleteGet,
      multiple: js->multipleGet,
      onChange: js->onChangeGet,
      onClick: js->onClickGet,
      tabIndex: js->tabIndexGet,
      style: js->styleGet,
      ref: js->refGet,
    };
  };

  type js = Input.js => Output.js;
  type t = (
    ~refKey: string=?,
    ~onChange: onChange=?,
    ~onClick: onClick=?,
    unit
  ) => Output.t;

  let make = (fn) => (
    ~refKey=?,
    ~onChange=?,
    ~onClick=?,
    ()
  ) => Input.js(
    ~refKey?,
    ~onChange?,
    ~onClick?,
    ()
  ) |> fn |> Output.make;
};

module GetRootProps = {
  type onDrop = ReactEvent.Mouse.t => unit;

  module Input = {
    [@bs.deriving abstract]
    type js = {
      [@bs.optional] refKey: string,
      [@bs.optional] onKeyDown: onKeyDown,
      [@bs.optional] onFocus: onFocus,
      [@bs.optional] onBlur: onBlur,
      [@bs.optional] onClick: onClick,
      [@bs.optional] onDragStart: onDragStart,
      [@bs.optional] onDragEnter: onDragEnter,
      [@bs.optional] onDragOver: onDragOver,
      [@bs.optional] onDragLeave: onDragLeave,
      [@bs.optional] onDrop: onDrop,
    };

    type t = {
      refKey: option(string),
      onKeyDown: option(onKeyDown),
      onFocus: option(onFocus),
      onBlur: option(onBlur),
      onClick: option(onClick),
      onDragStart: option(onDragStart),
      onDragEnter: option(onDragEnter),
      onDragOver: option(onDragOver),
      onDragLeave: option(onDragLeave),
      onDrop: option(onDrop),
    };
  };

  module Output = {
    [@bs.deriving abstract]
    type js = {
      onKeyDown: onKeyDown,
      onFocus: onFocus,
      onBlur: onBlur,
      onClick: onClick,
      onDragStart: onDragStart,
      onDragEnter: onDragEnter,
      onDragOver: onDragOver,
      onDragLeave: onDragLeave,
      onDrop: onDrop,
      tabIndex: int,
      ref: ref
    };

    type t = {
      onKeyDown: onKeyDown,
      onFocus: onFocus,
      onBlur: onBlur,
      onClick: onClick,
      onDragStart: onDragStart,
      onDragEnter: onDragEnter,
      onDragOver: onDragOver,
      onDragLeave: onDragLeave,
      onDrop: onDrop,
      tabIndex: int,
      ref: ref
    };

    let make = (js) => {
      onKeyDown: js->onKeyDownGet,
      onFocus: js->onFocusGet,
      onBlur: js->onBlurGet,
      onClick: js->onClickGet,
      onDragStart: js->onDragStartGet,
      onDragEnter: js->onDragEnterGet,
      onDragOver: js->onDragOverGet,
      onDragLeave: js->onDragLeaveGet,
      onDrop: js->onDropGet,
      tabIndex: js->tabIndexGet,
      ref: js->refGet,
    };
  }

  type js = Input.js => Output.js;
  type t = (
    ~refKey: string=?,
    ~onKeyDown: onKeyDown=?,
    ~onFocus: onFocus=?,
    ~onBlur: onBlur=?,
    ~onClick: onClick=?,
    ~onDragStart: onDragStart=?,
    ~onDragEnter: onDragEnter=?,
    ~onDragOver: onDragOver=?,
    ~onDragLeave: onDragLeave=?,
    ~onDrop: onDrop=?,
    unit
  ) => Output.t;

  let make = (fn) => (
    ~refKey=?,
    ~onKeyDown=?,
    ~onFocus=?,
    ~onBlur=?,
    ~onClick=?,
    ~onDragStart=?,
    ~onDragEnter=?,
    ~onDragOver=?,
    ~onDragLeave=?,
    ~onDrop=?,
    ()
  ) => Input.js(
    ~refKey?,
    ~onKeyDown?,
    ~onFocus?,
    ~onBlur?,
    ~onClick?,
    ~onDragStart?,
    ~onDragEnter?,
    ~onDragOver?,
    ~onDragLeave?,
    ~onDrop?,
    ()
  ) |> fn |> Output.make;
};

module Children = {
  module Input = {
    [@bs.deriving abstract]
    type js = {
      getRootProps: GetRootProps.js,
      getInputProps: GetInputProps.js,
      [@bs.as "open"] open_: unit => unit,
      isDragActive: bool,
      isDragAccept: bool,
      isDragReject: bool,
      isFocused: bool,
      acceptedFiles: array(FileReader.File.t),
      rejectedFiles: array(FileReader.File.t),
      draggedFiles: array(FileReader.File.t)
    };

    type t = {
      getRootProps: GetRootProps.t,
      getInputProps: GetInputProps.t,
      open_: unit => unit,
      isDragActive: bool,
      isDragAccept: bool,
      isDragReject: bool,
      isFocused: bool,
      acceptedFiles: array(FileReader.File.t),
      rejectedFiles: array(FileReader.File.t),
      draggedFiles: array(FileReader.File.t),
    };

    let make = (js) => {
      getRootProps: js->getRootPropsGet |> unary |> GetRootProps.make,
      getInputProps: js->getInputPropsGet |> unary |> GetInputProps.make,
      open_: js->open_Get,
      isDragActive: js->isDragActiveGet,
      isDragAccept: js->isDragAcceptGet,
      isDragReject: js->isDragRejectGet,
      isFocused: js->isFocusedGet,
      acceptedFiles: js->acceptedFilesGet,
      rejectedFiles: js->rejectedFilesGet,
      draggedFiles: js->draggedFilesGet,
    };
  };

  type t = Input.t => ReasonReact.reactElement;

  type js = Input.js => ReasonReact.reactElement;

  let make = (||>) (Input.make);
}

[@bs.module "react-dropzone"] [@react.component]
external make:
 (
  ~accept: Accept.js=?,
  ~disabled: bool=?,
  ~maxSize: int=?,
  ~minSize: int=?,
  ~multiple: bool=?,
  ~name: string=?,
  ~onBlur: onBlur=?,
  ~onClick: onClick=?,
  ~onDragEnter: onDragEnter=?,
  ~onDragLeave: onDragLeave=?,
  ~onDragOver: onDragOver=?,
  ~onDragStart: onDragStart=?,
  ~onDrop: (array(FileReader.File.t), array(FileReader.File.t)) => unit=?,
  ~onDropAccepted: ReactEvent.Mouse.t => unit=?,
  ~onDropRejected: ReactEvent.Mouse.t => unit=?,
  ~onFileDialogCancel: ReactEvent.Mouse.t => unit=?,
  ~onFocus: onFocus=?,
  ~onKeyDown: onKeyDown=?,
  ~preventDropOnDocument: bool=?,
  ~children: Children.js
 ) => React.element = "default";


let makeProps = (
  ~accept=?,
  ~disabled=?,
  ~maxSize=?,
  ~minSize=?,
  ~multiple=?,
  ~name=?,
  ~onBlur=?,
  ~onClick=?,
  ~onDragEnter=?,
  ~onDragLeave=?,
  ~onDragOver=?,
  ~onDragStart=?,
  ~onDrop=?,
  ~onDropAccepted=?,
  ~onDropRejected=?,
  ~onFileDialogCancel=?,
  ~onFocus=?,
  ~onKeyDown=?,
  ~preventDropOnDocument=?,
  ~children
) => makeProps(
  ~accept=?accept <$> Accept.make,
  ~disabled?,
  ~maxSize?,
  ~minSize?,
  ~multiple?,
  ~name?,
  ~onBlur?,
  ~onClick?,
  ~onDragEnter?,
  ~onDragLeave?,
  ~onDragOver?,
  ~onDragStart?,
  ~onDrop?,
  ~onDropAccepted?,
  ~onDropRejected?,
  ~onFileDialogCancel?,
  ~onFocus?,
  ~onKeyDown?,
  ~preventDropOnDocument?,
  ~children=Children.make(children)
);

[IwanKaramazow]

Hey @Pet3ris, I pasted your file in the playground and it seems to convert: https://rescript-lang.org/try?code=LYewJgrgNgpgBAJRgQwMYBcAiB5AskuAXjgG8AoOOdATwAd4BnG2IuASwDt0yBfMs2OjgQOyAE7VWACgBmHAFxwA5MgCUilUQB8cAKRjkAdykAiKWu1w551SdUCYQgDomAPq60npMgDRwA5n4AHqqW-rJSIfaCcC4APAAkntIgtOhsIBx+wMi09GKhhFoUcAyGbOioABZwqemZpCWucABymfBFre1NcADKIMAwUgBuyFAQMIU6-YNSOXkwYiNjE6r2lHxkAAJgi2zDnOHIAEZMBhj2NPRWbCzE5JRQyEy44GwybDBgipzoPiWiQaKM6Hf6UBhsABeMB+XDBcC2z1MVxgdiodBgAH1gegxKDePwUbUOABhKBsVAAa1YSDQ6AAosMYFwAHSvCAMGAsoSdEQVMhEzIAaRg1EwIEMHBpKAwjOZ6BZIuoxxA4jA3MsfO4go4ADEQKgOdK6XLWfrDQwNbyOPydQAhcZiY2yplmg0cq06LUCjHEzAGfy9dDiHmIGUM10K9mcz3CG3a32Zf3Ifz0riLZ0R+VskAcrk8r3xn3XJMB7BMp3EWku7PR-Oaos65P+AAyKCZmdNUdzMYLcdtvrEMBkrAAUpaONAnsdYHFxcAWTBYIMuDprfyyKBICwAIKoVAwNKsB7o66hgDaAGIIRx-LApCDb6FmpechxqFJyUw4o--FpVAAuvwlBEgAVgwwFwDAQToIsohQHAOSUjAQZ4reOJof4ljgawJi6GwuxcBU1AmCU0GwWI8GIcgyE7mIBjUIo4gMT+uKHGuOg4cQeEEfKxGkSUMRIR0cBBNoJTguUlQ1GJJ6UC+N53kMDBTKUcAeNRyGoYcEnqXAr7IO+cyqcA6k6HRDEsiAMiYl+QgacJFnINQul8JsW7QPAADijgAJIcLQEDoAACmIqQMMeJQ6iSVSGf4InVlmbpiAufbeiUHksP5gWhnJCK7HiBy3uYpy4nS6yUKe8BcY0lWVVsdQZFRQ4yEqGH4nVlANWkTVjMSMVxTC-WxbeMDwnV3X1FRmRkhSlKKDN5JUuNcCbHVRK5bplAtW1tQ9ZkrGYVoK2UDNI3xQt+0cHEZ2DcdW39Ut817VNN2kk9911XwGyQZl8DYEFOWRRNBX7IcJVnOVulgRF9wPYiDDIhiaIotipRsbeJ1wMgQUgCSAy0IIQ2-ljwDQOkhNDSqIBQFjt2jQtpLnWND2LXNjOzctD3Bsc-m7EEsJ-A9TDULAiiJTg+BciLsBYy1igtSta2VRtwOdaj7WYw9OPoHjBNE5rgQPWTUAU2LcDU7TrNM4NHPM3T73s49c1YzzfPQYLWMy0NEt4EgLLe3Lw4K8OSuQY8jiaSJXE6HlIEYmj4EALRaKjPlC512O4-jwCU7BijJ1oOt67nRPp6T5NsJTBcMCnJtmzA5fWwNDNwIX9PxU3mds1SNcpz3lJd+rJzuwLbe16nI8cPzQ91d7fdaN7s+VfL48py1y-fatkEw6w2VBSyMdwAD6A5YfEHx2e0i6QAfjtoqG4QAD8K03x3Q3v8-r8DxzT1f7pWp4SqRPmfbgglI7CW8FkOAd9hxKi-jAz+L9EGOypAgqQaxxJ1X3gqcCUhYGtVFMgt+NtRrEIHsgjBz4dByDMsfQGB9hIEk3OATycB04IBACAEKYVaCw1qlVP0vDOyRhzHmWM6VKB-TgDgtWXVQZFSOKVc46AKqX2qvwuOCJGqZD6vfRi6NMJY0mr1BCwpRTiklIzJUlisjwx0dNPU7oGCM3NByYxDi+qZAdBAMQjMfFiA8VdLxqDnoDyCVNEJzYgwhkZtE4MYgM6dRMbosxHBmxpgonEgMmTFgRNMUIlM5ZFjZKKRWfJqTCmtnbB-dJAY2zICZBUxx-pUjZNSGHaGvpNqZ30ZdV6v5PqdXMWKCUCgXpNTejYsZQy6qZDcS4iZB15nONmZVbxjp+mTI2b4tZp1QlbOWaEvZVSYmJMOddUsKYznoBOVc1M6Y-FLMuXUlMuSxB3Nef4YpTyHFvWbD8z5zYGlMguf8+pNSgW8LBaWVIayt7K2kSAoKcj8p7EURDMqFwunXBqlokZtjrEWLGQ7BZrjnEOwCf4x0DtOZhNCQ7eJsTTkJKSXMr57zSkPIooyssFYuU-N5SmEFtTgU1N5W0oRHTuZT35p7B6q9FauXDoInpwyODTKscSTVdju5OItOSi0lLNnEgCbSp6v8XbWyZecllIYhXcpKVU95DqfkCvKdaiFjTRVeqaZ6yVsLaCu1lR7dgcIFXBzgEqr6KqhI0WjrDWO1sdULwJWM5e+yyVry0Csi0GbTUmvbhwAJ+af7ZoHqWr5NzU1VtZZWjJjya0NoovWvlTqi0AorK24VNSm2+sbo4CVtA+2pHzW7aeobC7jpnoOiNMgF4b1nTGn6UVfQ1RwefSwyLcEX1VdfOqBDdq-n-getNWqz0cBPZVEhWbc0civZQEhVKC2+IfSgullq0Ev1vvc6tdrElvpIc2p19z3mAfuW6qpPzwNfJFVykVMHWnDqlbQN9gCSjAIYQqMBEchCQOIFIXSchX76JgzqmDCyYMBJg3SxDAYbl0beY8xj3yKwsYQ9+09dTUhvowUArBlUN14IeoeohWMSE6s451G9zipNcYCXJ69FDxO-tZYpx9oHHnqZQZ2xY2mgP9v04G7TfHdJqLoXIXSGlt0siYe5VhLAYq3DAEOKUcMpEOfgLI9z9UFHgxOJDbF6012aIevFdAnDuGhXCooDhXCeHhXPljcLODot8Ni35AKQU0uWnAsYpEJhUjMjREVjgaMtQNgqFjNgDBmx7nSKCi2XCraZxq3V-ch50CKEttV2rAYkCgRgBgbrzXesLK+CNmmWMAD0AAqbGHW0hfF1LcGAizmLOSkCt2AtICosm2-mVQQdBsYGW6t9b9FNsHd24sfbq3uRHYei5lM8UwAHYuwxLbq2btiDu7AB7cBZvTeVTi+Aaq6rhciwl9L7DHBQ5y9yZLmWco5Yy+gVLvDLRsvWfQMrigKvrmx5QNrAZ6v7CpqNh6JOUx7gPGkSbLXOrU-8ANobXWmtTapwwcb3wOeM7qtN6blA0B09gm987TFLsfmuygPbB2Hszem0OE7Yv3uS8+zL5Acv7uqMV89-wr21fYyl19nbsvbvy91yDuqcbkKsCPloyH8XUfZqd1FzH6c6EiHEJIDScX3eJeEkj9HWXoeLMLil0POXPcaW9xIOh6cMeB-jXTXHicJ6lcxPm5nZPGuFxzxgcn2e+s08W+z-PJf-C0868X5srPhvZuZ-X9AxeecLxqzz-NguFui7O7AcPE8Redb72trvQvOrK7ZyPgf68YAq+n2PzO+vDcS+zcvhfS7KoIoJEAA

Which version of bsc are you using?

[Pet3ris]

Hi @IwanKaramazow, thanks a lot for double checking. I ran into this issue with bs-platform 8.2.0!

[IwanKaramazow]

@Pet3ris would it be possible to try a newer version?

I just tried the following minimal repro of your code and it compiles just fine on 8.4.2:

@deriving(abstract)
type js = {@as("type") type_: string}

type t = {type_: string}

let make = js => {
  type_: js->type_Get,
}

[Pet3ris]

@IwanKaramazow,

Unfortunately I have to use 8.2.0 as I'm still waiting for a tablecloth update. (darklang/tablecloth#191)

The generated code above is exactly what I get with bsc -format, it just doesn't compile under 8.2.0.

[chenglou]

Thanks, closing as this is already fixed.

Btw, as much as we try to encourage userland exploration, depending on an entire experimental standard library isn't recommended. We're talking about core data structures for your project here, not some leaf library.

Tablecloth is alpha-quality software, and is pre-1.0. The API will change over time as we get more users. Caveat emptor.

pbiggar moved to greener pastures (for good reasons imo). I'd suggest converting your app back to Js/Belt/Pervasives data structures.

[Pet3ris]

@chenglou absolutely, to be fair use is only limited to select functions that were missing from Belt but agree it's not worth it dragging down our version.

[chenglou]

That sounds less dangerous. If you've got some functions requests then feel free to file them in the compiler repo. No guarantees, but it may help other folks too =)