Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the incorrect type annotation for ref in JSX4 #6718

Merged
merged 4 commits into from
Apr 11, 2024

Conversation

mununki
Copy link
Member

@mununki mununki commented Apr 7, 2024

Fixes #6714

In the Discouraged ForwardRef use case, if ref did not have a type annotation, JSX4 added an incorrect type as an annotation during transformation. While this PR change may cause build errors where the type 'ref cannot be generalized, I don't think it will be a problem because in most cases the type of ref can be inferred from the ForwardRef component implementation. I think adding an incorrect type is a bigger problem.

Original

module ForwardRef = {
  @react.component
  let make = React.forwardRef(ref => {
    React.useImperativeHandle1(
      ref,
      () =>
        Js.Nullable.return({
          bla: "bla",
        }),
      [],
    )
    React.null
  })
}

Before this change

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

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

    \"ForwardRefWithoutAnnotation$ForwardRef"
  })
}

After this chage

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

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

    \"ForwardRefWithoutAnnotation$ForwardRef"
  })
}

[(true, "ref", [], Location.none, refTypeVar Location.none)]
else [])
@ namedTypeList)
psig_loc namedTypeList
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like I implemented unnecessary handling in the initial version of JSX4. This handling is unnecessary because we typically use the labeled ~ref in the interface of React.forwardRef implementations. Please see the tests I've added. 34d17b7

Copy link

@jfrolich jfrolich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing 🙌

Copy link
Collaborator

@cristianoc cristianoc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Go ahead if this is ready to go.

@mununki mununki merged commit 1df3b23 into 11.0_release Apr 11, 2024
14 checks passed
@mununki mununki deleted the jsx4-forward-ref branch April 11, 2024 02:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants