Improve code generated for default arguments in JSX V4

This
```res
@react.component
let foo = (~x, ~y=3+x, ?z) => ...
```

was generating

```res
({props: props<_, _, _>) => {
  let x = props.x
  let y = switch props.y {
  | None => 3 + x
  | Some(y) => y
  }
  let z = props.z
...
```

now it generates instead
```
({x, ?y, ?z}: props<_, _, _>) => {
  let x = x
  let y = switch y {
  | None => 3 + x
  | Some(y) => y
  }
  let z = z
...
```

the different in generated code is that bindings such as `let x = props.x` are not present in the `js` output.

Author: cristianoc

CHANGELOG.md

@@ -75,6 +75,7 @@ These are only breaking changes for unformatted code.
 - Fix issue with integer overflow check https://github.com/rescript-lang/rescript-compiler/pull/6028
 - Fix issue with JSX V4 and newtype https://github.com/rescript-lang/rescript-compiler/pull/6029
 - Fix issue with JSX V4 when components are nested https://github.com/rescript-lang/rescript-compiler/pull/6031
+- Improve code generated for default arguments in JSX V4 https://github.com/rescript-lang/rescript-compiler/pull/6041
 
 #### :nail_care: Polish
 

docs/JSXV4.md

@@ -264,19 +264,21 @@ let make = React.forwardRef({
 ### Transformation for Component Definition
 
 ```rescript
-@react.component (~x, ~y=3+x, ?z) => body
+@react.component (~x, ~y=3+x, ~z=?) => body
 ```
 
 is transformed to
 
 ```rescript
 type props<'x, 'y, 'z> = {x: 'x, y?: 'y, z?: 'z}
 
-({x, y, z}: props<_>) => {
-  let y = switch props.y {
+({x, ?y, ?z}: props<_, _, _>) => {
+  let x = x
+  let y = switch y {
   | None => 3 + x
   | Some(y) => y
   }
+  let z = z
   body
 }
 ```

jscomp/test/alias_default_value_test.js

@@ -2,9 +2,9 @@
 
 
 function Alias_default_value_test$C0(props) {
+  var b = props.b;
   var a = props.a;
   var a$1 = a !== undefined ? a : 2;
-  var b = props.b;
   var b$1 = b !== undefined ? b : (a$1 << 1);
   return a$1 + b$1 | 0;
 }
@@ -14,9 +14,9 @@ var C0 = {
 };
 
 function Alias_default_value_test$C1(props) {
-  var foo = props.foo;
-  if (foo !== undefined) {
-    return foo;
+  var bar = props.foo;
+  if (bar !== undefined) {
+    return bar;
   } else {
     return "";
   }
@@ -26,6 +26,19 @@ var C1 = {
   make: Alias_default_value_test$C1
 };
 
+function Alias_default_value_test$C2(props) {
+  var a = props.a;
+  var bar = props.foo;
+  var bar$1 = bar !== undefined ? bar : "";
+  var a$1 = a !== undefined ? a : bar$1;
+  return bar$1 + a$1 + props.b;
+}
+
+var C2 = {
+  make: Alias_default_value_test$C2
+};
+
 exports.C0 = C0;
 exports.C1 = C1;
+exports.C2 = C2;
 /* No side effect */

jscomp/test/alias_default_value_test.res

@@ -15,3 +15,10 @@ module C1 = {
     React.string(bar)
   }
 }
+
+module C2 = {
+  @react.component
+  let make = (~foo as bar="", ~a=bar, ~b) => {
+    React.string(bar ++ a ++ b)
+  }
+}

res_syntax/src/reactjs_jsx_v4.ml

@@ -850,9 +850,7 @@ let vbMatch (name, default, _, alias, loc, _) =
     Vb.mk
       (Pat.var (Location.mkloc alias loc))
       (Exp.match_
-         (Exp.field
-            (Exp.ident {txt = Lident "props"; loc = Location.none})
-            (Location.mknoloc @@ Lident label))
+         (Exp.ident {txt = Lident alias; loc = Location.none})
          [
            Exp.case
              (Pat.construct
@@ -866,9 +864,7 @@ let vbMatch (name, default, _, alias, loc, _) =
   | None ->
     Vb.mk
       (Pat.var (Location.mkloc alias loc))
-      (Exp.field
-         (Exp.ident {txt = Lident "props"; loc = Location.none})
-         (Location.mknoloc @@ Lident label))
+      (Exp.ident {txt = Lident label; loc = Location.none})
 
 let vbMatchExpr namedArgList expr =
   let rec aux namedArgList =
@@ -1043,11 +1039,6 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
       | [] -> Pat.any ()
       | _ -> Pat.record (List.rev patternsWithLabel) Open
     in
-    let recordPattern =
-      if hasDefaultValue namedArgList then
-        Pat.var {txt = "props"; loc = emptyLoc}
-      else recordPattern
-    in
     let expression =
       Exp.fun_ Nolabel None
         (Pat.constraint_ recordPattern

res_syntax/tests/ppx/react/aliasProps.res

@@ -14,3 +14,10 @@ module C2 = {
   @react.component
   let make = (~foo as bar="") => React.string(bar)
 }
+
+module C3 = {
+  @react.component
+  let make = (~foo as bar="", ~a=bar, ~b) => {
+    React.string(bar ++ a ++ b)
+  }
+}

res_syntax/tests/ppx/react/expected/aliasProps.res.txt

@@ -3,9 +3,9 @@
 module C0 = {
   type props<'priority, 'text> = {priority: 'priority, text?: 'text}
 
-  let make = (props: props<_, _>) => {
-    let _ = props.priority
-    let text = switch props.text {
+  let make = ({priority: _, ?text, _}: props<_, _>) => {
+    let _ = priority
+    let text = switch text {
     | Some(text) => text
     | None => "Test"
     }
@@ -22,9 +22,9 @@ module C0 = {
 module C1 = {
   type props<'priority, 'text> = {priority: 'priority, text?: 'text}
 
-  let make = (props: props<_, _>) => {
-    let p = props.priority
-    let text = switch props.text {
+  let make = ({priority: p, ?text, _}: props<_, _>) => {
+    let p = priority
+    let text = switch text {
     | Some(text) => text
     | None => "Test"
     }
@@ -41,8 +41,8 @@ module C1 = {
 module C2 = {
   type props<'foo> = {foo?: 'foo}
 
-  let make = (props: props<_>) => {
-    let bar = switch props.foo {
+  let make = ({foo: ?bar, _}: props<_>) => {
+    let bar = switch bar {
     | Some(foo) => foo
     | None => ""
     }
@@ -55,3 +55,28 @@ module C2 = {
     \"AliasProps$C2"
   }
 }
+
+module C3 = {
+  type props<'foo, 'a, 'b> = {foo?: 'foo, a?: 'a, b: 'b}
+
+  let make = ({foo: ?bar, ?a, b, _}: props<_, _, _>) => {
+    let bar = switch bar {
+    | Some(foo) => foo
+    | None => ""
+    }
+    let a = switch a {
+    | Some(a) => a
+    | None => bar
+    }
+    let b = b
+
+    {
+      React.string(bar ++ a ++ b)
+    }
+  }
+  let make = {
+    let \"AliasProps$C3" = (props: props<_>) => make(props)
+
+    \"AliasProps$C3"
+  }
+}

res_syntax/tests/ppx/react/expected/defaultValueProp.res.txt

@@ -1,11 +1,11 @@
 module C0 = {
   type props<'a, 'b> = {a?: 'a, b?: 'b}
-  let make = (props: props<_, _>) => {
-    let a = switch props.a {
+  let make = ({?a, ?b, _}: props<_, _>) => {
+    let a = switch a {
     | Some(a) => a
     | None => 2
     }
-    let b = switch props.b {
+    let b = switch b {
     | Some(b) => b
     | None => a * 2
     }
@@ -21,12 +21,12 @@ module C0 = {
 module C1 = {
   type props<'a, 'b> = {a?: 'a, b: 'b}
 
-  let make = (props: props<_, _>) => {
-    let a = switch props.a {
+  let make = ({?a, b, _}: props<_, _>) => {
+    let a = switch a {
     | Some(a) => a
     | None => 2
     }
-    let b = props.b
+    let b = b
 
     React.int(a + b)
   }

res_syntax/tests/ppx/react/expected/uncurriedProps.res.txt

@@ -1,8 +1,8 @@
 @@jsxConfig({version: 4})
 type props<'a> = {a?: 'a}
 
-let make = (props: props<(. unit) => unit>) => {
-  let a = switch props.a {
+let make = ({?a, _}: props<(. unit) => unit>) => {
+  let a = switch a {
   | Some(a) => a
   | None => (. ()) => ()
   }
@@ -28,8 +28,8 @@ func(~callback=(. str, a, b) => {
 module Foo = {
   type props<'callback> = {callback?: 'callback}
 
-  let make = (props: props<(. string, bool, bool) => unit>) => {
-    let callback = switch props.callback {
+  let make = ({?callback, _}: props<(. string, bool, bool) => unit>) => {
+    let callback = switch callback {
     | Some(callback) => callback
     | None => (. _, _, _) => ()
     }