JSX4: Bug with ForwardRef's transformation output being different with or without type annotation

[mununki]

Original

type inputRef = {bla: string}
module ForwardRef = {
  @react.component
  let make = React.forwardRef((ref: Js.Nullable.t<React.ref<inputRef>>) => { // type annotation for ref
    React.useImperativeHandle1(
      ref,
      () => {
        bla: "bla",
      },
      [],
    )
    React.null
  })
}

Output with type annotation

type inputRef = {bla: string}
module ForwardRef = {
  type props<'ref> = {ref?: 'ref}

  let make = (_: props<React.ref<inputRef>>, ref: Js.Nullable.t<React.ref<inputRef>>) => {
    React.useImperativeHandle1(
      ref,
      () => {
        bla: "bla",
      },
      [],
    )
    React.null
  }
  let make = React.forwardRef({
    let \"Bigint$ForwardRef" = (props: props<_>, ref) => make(props, ref)

    \"Bigint$ForwardRef"
  })
}

Output without type annotation

type inputRef = {bla: string}
module ForwardRef = {
  type props<'ref> = {ref?: 'ref}

  let make = (_: props<ReactDOM.Ref.currentDomRef>, ref) => {
    React.useImperativeHandle1(
      ref,
      () => {
        bla: "bla",
      },
      [],
    )
    React.null
  }
  let make = React.forwardRef({
    let \"Bigint$ForwardRef" = (props: props<_>, ref) => make(props, ref)

    \"Bigint$ForwardRef"
  })
}

[mununki]

Additionally If add a value to ref, then it is not compiled in JSX4 and v11.

type inputRef = {
  bla: string
}
module ForwardRef = {
  @react.component
  let make = React.forwardRef((ref) => {
    let _ = ref
    React.useImperativeHandle(ref, () => {
      bla: "bla"
    }, [])
    React.null
  })
}

module JsxBugForwardRef = {
  let make = () => {
   	let refInstance = React.useRef((Js.Nullable.null))
    refInstance.current = Js.Nullable.return({bla: "bla"}) // <- here!
    <ForwardRef ref=refInstance />
  }
}

[mununki]

It looks okay with JSX3 and v10.1.2 https://rescript-lang.org/try?version=v10.1.2&code=ALBWGcA8GEHsDsBmBLA5gCgN4AIBuBTAJ3GQQC5sBmAGmwFtYATfCgIgEMBXAF1jve7IAxq2wBfAJQAoKdwCeAB3zZk8BTwBK+RNgC82TFOzYARgBt2FcN0KrUUsVIaNOZ5QDFYhAO7tCjLR19Q2NgQnx2IW4AOiE+BQR8eG4jbDduenYAa2V9LUiYxC9ff0D0dHDECT0APgNU43TsAH09bEqG7Hyo6M5wfABJOiVCAWQCAAl2eEY3AEYK7Vp0at06kONN80tsVm3WTrFaAG0AXWlNroie+FczVMkHGWdXZQApKAAhTlRPHz8Ato2hsmvwcm0VrV6psAJBNSoDeDWaZCXJXAq9fpldAfaIAOTu7HM+GitzMZgkF02CKR3BRJKEnEI4WSbVxBPJRLc0XC3CZ8Cw2zY+0elwAPH8SoCdJVdDTkfBUdgAPQ1B4OIA

[mununki]

Additionally If add a value to ref, then it is not compiled in JSX4 and v11.

type inputRef = {
  bla: string
}
module ForwardRef = {
  @react.component
  let make = React.forwardRef((ref) => {
    let _ = ref
    React.useImperativeHandle(ref, () => {
      bla: "bla"
    }, [])
    React.null
  })
}

module JsxBugForwardRef = {
  let make = () => {
   	let refInstance = React.useRef((Js.Nullable.null))
    refInstance.current = Js.Nullable.return({bla: "bla"}) // <- here!
    <ForwardRef ref=refInstance />
  }
}

The type of refInstance is React.ref<Js.Nullable.t<inputRef>>, and the forwarded ref type of the ForwardRef component is Js.Nullable.t<refInstance>, which means that it should be Js.Nullable.t<React.ref<Js.Nullable.t<inputRef>>>, so the code should be modified as follows

type inputRef = {bla: string}
module ForwardRef = {
  @react.component
  let make = React.forwardRef(ref => {  // <- 1
    React.useImperativeHandle1(
      ref,
      () =>
        Js.Nullable.return({  // wrap with Js.Nullable.t because the refInstance type is React.ref<Js.Nullable.t<inputRef>>
          bla: "bla",
        }),
      [],
    )
    React.null
  })
}

module JsxBugForwardRef = {
  let make = () => {
    let refInstance = React.useRef(Js.Nullable.null)
    refInstance.current = Js.Nullable.return({bla: "bla"})
    <ForwardRef ref=refInstance />
  }
}

However, it still won't build because JSX4 transforms as below if one doesn't give a type annotation to the ref in the location 1.

type props<'ref> = { ref: 'ref }
let make = (_: props<ReactDOM.Ref.currentDomRef>, ref) => {  // conflict React.ref<Js.Nullable.t<inputRef>> v.s. ReactDOM.Ref.currentDomRef = React.ref<Js.Nullable.t<Dom.element>>
  ...

Once one applies the type annotation ref: Js.Nullable.t<React.ref<Js.Nullable.t<inputRef>>>> in the location 1, the compilation is okay.

[mununki]

The root cause is that JSX4 is adding type annotation ReactDOM.Ref.currentDomRef if the type annotation for ref is omitted.

module ForwardRef = {
  type props<'ref> = {ref?: 'ref}

  // ReactDOM.Ref.currentDomRef = React.ref<Js.Nullable.t<Dom.element>>
  let make = (_: props<ReactDOM.Ref.currentDomRef>, ref) => {
    React.useImperativeHandle1(
      ref,
      () =>
        Js.Nullable.return({
          bla: "bla",
        }),
      [],
    )
    React.null
  }
  ...
}

It had to give the type annotation because if it omitted with props<_>, build error.

The type of this module contains type variables that cannot be generalized:
  {
  type props<'ref> = {ref?: 'ref}
  let make: React.component<props<'_weak1>>
}
  
  This happens when the type system senses there's a mutation/side-effect,
  in combination with a polymorphic value.
  Using or annotating that value usually solves it.

[mununki]

I think we should fix JSX4 transformation as below for the forwarded ref component definition:

type props<'ref> = {ref?: 'ref}

let make = (_: props<'ref>, ref: Js.Nullable.t<'ref>) => {
  React.useImperativeHandle1(
    ref,
    () =>
      Js.Nullable.return({
        bla: "bla",
      }),
    [],
  )
  React.null
}

For more general use cases, it should be converted like this.

type props<'className, 'children, 'ref> = {
  className?: 'className,
  children: 'children,
  ref?: 'ref,
}
let make = ({?className, children, _}: props<_, _, 'ref>, ref: Js.Nullable.t<'ref>) =>
  ReactDOM.jsxs(
    "div",
    {
      children: React.array([
        ReactDOM.jsx(
          "input",
          {
            type_: "text",
            ?className,
            ref: ?{
              let _ = ()
              Belt.Option.map(Js.Nullable.toOption(ref), ReactDOM.Ref.domRef)
            },
          },
        ),
        children,
      ]),
    },
  )

[mununki]

type props<'ref> = {ref?: 'ref}

let make = (_: props<'ref>, ref: Js.Nullable.t<'ref>) => {
  ...
}

The reason it's correct to transform like this is that most implementations of forwarded ref components will contain implementations how to use refs, so it's unlikely that you'll encounter a build error about not being able to generalize type. This is more correct than adding ReactDOM.Ref.currentDomRef in the indeterminate case where there is no type annotation.