Add jsx ppx for attribute @react.componentWithProps

[mununki]

This PR introduces a new @react.componentWithProps attribute that explicitly handles the props with shared props:

// source
type props = sharedProps
@react.componentWithProps
let make = props => React.string(props.x)

// transformed to
type props = sharedProps
let make = props => React.string(props.x)
let make = {
  let \"SharedPropsWithProps" = props => make(props)
  \"SharedPropsWithProps"
}

[github-actions]

⚠️ Performance Alert ⚠️

Possible performance regression was detected for benchmark 'Syntax Benchmarks'.
Benchmark result of this commit is worse than the previous benchmark result exceeding threshold 1.05.

Benchmark suite	Current: 998282d	Previous: e1b7fb7	Ratio
Print RedBlackTree.res - time/run	2.5336877066666665 ms	2.3104395133333333 ms	1.10
Print RedBlackTreeNoComments.res - time/run	2.3414450266666664 ms	2.10057036 ms	1.11
Print Napkinscript.res - time/run	81.58969135333332 ms	77.00100409999999 ms	1.06
Print HeroGraphic.res - time/run	9.61578382 ms	8.775952553333333 ms	1.10

This comment was automatically generated by workflow using github-action-benchmark.

[cknitt]

Great work! Thanks a lot! Could you add a CHANGELOG entry?

[mununki]

Great work! Thanks a lot! Could you add a CHANGELOG entry?

Sure.
I will request another review after adding warnings for unsupported use cases. One notable example would be the discouraged forwardRef usage cases.

[cknitt]

Thanks again!

[dkirchhof]

Does it also work for bindings?
Tried it out but observed this behavior:

Old syntax:

@module("react-konva") @jsx.component(: props)
external make: props => Jsx.element = "Rect"

JsxRuntime.jsx(ReactKonva.Rect, {
  x: rect.x,
  y: rect.y,
  width: rect.width,
  height: rect.height,
  fill: "black"
}, key);

New syntax (doesn't work):

@module("react-konva") @jsx.componentWithProps
external make: props => Jsx.element = "Rect"

JsxRuntime.jsx(prim => ReactKonva.Rect(prim), {
  x: rect.x,
  y: rect.y,
  width: rect.width,
  height: rect.height,
  fill: "black"
}, key);

[mununki]

Does it also work for bindings? Tried it out but observed this behavior:

Old syntax:

@module("react-konva") @jsx.component(: props)
external make: props => Jsx.element = "Rect"

JsxRuntime.jsx(ReactKonva.Rect, {
  x: rect.x,
  y: rect.y,
  width: rect.width,
  height: rect.height,
  fill: "black"
}, key);

New syntax (doesn't work):

@module("react-konva") @jsx.componentWithProps
external make: props => Jsx.element = "Rect"

JsxRuntime.jsx(prim => ReactKonva.Rect(prim), {
  x: rect.x,
  y: rect.y,
  width: rect.width,
  height: rect.height,
  fill: "black"
}, key);

Oh, I think we need to add the syntax error for external bindings for @react.componentWithProps. Thank you for catching this.

BTW, the old one seems the proper binding for your case. @react.comnponentWithProps is for the definition of components except the external bindings.

[dkirchhof]

So no chance to get it also working for external bindings? Asking just for consistency.