Feedback from the forum for JSX v4

[mununki]

Feedback from the forum for JSX v4
https://forum.rescript-lang.org/t/call-for-help-test-the-react-jsx-v4/3713

Fixes

• Formatting {...str} to spreadProps=str
• Spread props without any other props Fix the usage of spreadProps without any other props syntax#645
• Not passing key to the component in V4 + classic Remove key prop from JSX props type syntax#635 Fix type error by Jsx.addKeyProp for the empty props syntax#641
• Handle the ref in props type: external binding https://forum.rescript-lang.org/t/call-for-help-test-the-react-jsx-v4/3713/57?u=moondaddi More generalized props type for ref and type variables syntax#637

Improvements

• Update the migration doc
  • Breaking changes between v3 and v4
  • Explanation about jsx configuration, e.g. what the classic and automatic means
• Update the spec docs
  • Spread props
• Error message about missing props: better phrasing Improve error message for missing props. #5674
• Error message about missing props: mention all the props missing Print all missing labels in error message for records, not just one. #5657
• Type information about props type in the editor. This is not specific about JSX but follows from Expand type aliases one level when hovering rescript-vscode#557
• Update json schema for bsconfig.json 0d0333d
• Error message about type error in props: special case use wrapper memo Compiler@master sometimes reports module name instead of source file as error location #5635

[cristianoc]

For the type info in the editor, let's first see if adjusting the location of the props type definitio helps.

[cristianoc]

@mattdamon108 found out this by chance, a little thing that you might find interesting.

This innocent-looking code does not compile with V3:

module type OptT = {
  module type Opt2 = {
    @react.component
    let make: (~s: string) => React.element
  }
}

module Opt: OptT = {
  module Opt2 = {
    @react.component
    let make = (~s) => React.string(s)
  }
  module type Opt2 = module type of Opt2
}

The reason is that the type for makeProps in the implementation of Opt2 is polymorphic because there's no type annotation on the argument s.

So it's equivalent to this code:

module type OptT = {
  module type Opt2 = {
    @obj external makeProps: (~s: string, ~key: string=?, unit) => {"s": string} = ""
  }
}

module Opt: OptT = {
  module type Opt2 = {
    @obj external makeProps: (~s: 's, ~key: string=?, unit) => {"s": 's} = ""
  }
}
// Values do not match:
//    external makeProps: (~s: string, ~key: string=?, unit) => {"s": string} =
//  "" "#rescript-external"
//  is not included in
//    external makeProps: (~s: 's, ~key: string=?, unit) => {"s": 's} =
//  "" "#rescript-external"

However it compilers perfectly fine with V4 because there's no makeProps generated.

[mununki]

However it compilers perfectly fine with V4 because there's no makeProps generated.

It looks really cool. It is due to making the props type as polymorphic and using the type information(string) in the type declaration make. 👍

module type OptT = {                   
  module type Opt2 = {
    type props<'s> = {key?: string, s: 's}

    let make: React.componentLike<props<string>, React.element> // <- using string type information
  }
}

module Opt: OptT = {
  module Opt2 = {
    type props<'s> = {key?: string, s: 's}

    @react.component let make = ({s, _}: props<'s>) => React.string(s)
    let make = {
      let \"Interesting$Opt$Opt2" = (props: props<_>) => make(props)
      \"Interesting$Opt$Opt2"
    }
  }
  module type Opt2 = module type of Opt2
}

[cristianoc]

However it compilers perfectly fine with V4 because there's no makeProps generated.

It looks really cool. It is due to making the props type as polymorphic and using the type information(string) in the type declaration make. 👍

module type OptT = {                   
  module type Opt2 = {
    type props<'s> = {key?: string, s: 's}

    let make: React.componentLike<props<string>, React.element> // <- using string type information
  }
}

module Opt: OptT = {
  module Opt2 = {
    type props<'s> = {key?: string, s: 's}

    @react.component let make = ({s, _}: props<'s>) => React.string(s)
    let make = {
      let \"Interesting$Opt$Opt2" = (props: props<_>) => make(props)
      \"Interesting$Opt$Opt2"
    }
  }
  module type Opt2 = module type of Opt2
}

Yes that's precisely why it works.
Abstracting a bit form the details, it's because there's less magic, so no leaky abstraction.

[cristianoc]

@mattdamon108 wondering whether we should revisit key.

Ovservation: is it OK to pass key to a component that does not expect it? For normal props, that's an error.
I think it should be down to the component to define key (and JSX checks that it's of optional string type).
What do you think?

Separately there's the question of what happens when we pass no props (currently key:?None is used to encode an empty record), but we don't need to confuse the 2 different issues.

[mununki]

Thank you for raising the key issue.

I think this example shows what we need to fix. We don't need to pass the key in the props record. I believe we don't have the same issue in V4 + automatic. I've already removed the key not to pass to the component. Sorry for making confusion, key should be there React.createElement(Bar.make, {key: "k", x: "x"}).

// original
module Foo = {
  @react.component
  let make = () => <Bar key="k" x="x" />
}

// V4 + classic
module Foo = {
  type props = {key?: string}

  @react.component let make = (_: props) => React.createElement(Bar.make, {key: "k", x: "x"})
                                                                          ^^^^^^^^^^^^^^^^^^^
                                                                          // should be {key: "k", x: "x"}
  let make = {
    let \"Interesting$Foo" = props => make(props)
    \"Interesting$Foo"
  }
}

// V4 + automatic
module Foo = {                         
  type props = {key?: string}
  @react.component let make = (_: props) => React.jsxKeyed(Bar.make, {x: "x"}, "k")
  let make = {
    let \"Interesting$Foo" = props => make(props)
    \"Interesting$Foo"
  }
}

In the case of no props, I think we have to pass {key: ?None} to encode an empty record {}.

module Foo = {                         
  type props = {key?: string}
  @react.component let make = (_: props) => React.createElement(Bar.make, {key: ?None})
  let make = {
    let \"Interesting$Foo" = props => make(props)
    \"Interesting$Foo"
  }
}

What do you think?

[mununki]

is it OK to pass key to a component that does not expect it? For normal props, that's an error.
I think it should be down to the component to define key (and JSX checks that it's of optional string type).
What do you think?

Sorry for making confusion. Can you explain little more detail about it?

Generally we don't pass the key to the component, unless key props is populated.

// original
module Bar = {
  @react.component
  let make = (~x) => React.string(x)
}

module Foo = {
  @react.component
  let make = () => <Bar x="x" />
}

// converted
module Bar = {                         
  type props<'x> = {key?: string, x: 'x}
  ...
}

module Foo = {
  ...
  @react.component let make = (_: props) => React.createElement(Bar.make, {x: "x"}) // here
  ...
}

[cristianoc]

My proposal is to explore using key as follows:

@react.componet
let make = (~key=?, ~a) => <div ?key> {React.string(a)} </div>

If your component wants to use key then it needs to list it in the props.
If it does not, then you cannot pass key to it.

[cristianoc]

In the case of no props, I think we have to pass {key: ?None} to encode an empty record {}.

#5658

[mununki]

My proposal is to explore using key as follows:

@react.componet
let make = (~key=?, ~a) => <div ?key> {React.string(a)} </div>

If your component wants to use key then it needs to list it in the props. If it does not, then you cannot pass key to it.

I'm afraid it would violate the rule of React API, which is that key should not be used inside the component. This is an anti-pattern in React.js.

const Foo = ({key, x}) => {
  return (<div key> {x} </div>)
}

[mununki]

The prop key is special in Reac.js. No need to be defined, but all components have it.

[cristianoc]

The prop key is special in Reac.js. No need to be defined, but all components have it.

deleted confused comment

[cristianoc]

OK so since key should not be used inside the component, we should find a way to not make it appear in the definition of props.

[cristianoc]

I think the only reason why key is in the prop type is a little technicality:

React.createElement(Bar.make, {key: "k", x: "x"}

So we're passing the record to make, but we just said that make cannot use key as it violates the rules of React API.