Port of rescript-lang/rescript#6041

Author: cristianoc

CHANGELOG.md

@@ -66,6 +66,7 @@
 - Fix formatting of props spread for multiline JSX expression https://github.com/rescript-lang/syntax/pull/736
 - Fix issue with JSX V4 and newtype https://github.com/rescript-lang/syntax/pull/737
 - Fix issue with JSX V4 when components are nested https://github.com/rescript-lang/syntax/pull/738
+- Improve code generated for default arguments in JSX V4 https://github.com/rescript-lang/syntax/pull/739
 
 #### :eyeglasses: Spec Compliance
 

cli/JSXV4.md

@@ -18,7 +18,7 @@ To build an entire project in V4 mode, including all its dependencies, use the n
 ### Dependency-level config
 
 Dependencies inherit the `jsx` configuration of the root project. So if the root project uses V4 then the dependencies are built using V4, and the same for V3.
-To build certain dependencies in V3 compatibility mode, whatever the version used in the root project, use `"v3-dependencies"`: the listed dependencies will be built in V3 mode, and in addition `-open ReatcV3` is added to the compiler options.
+To build certain dependencies in V3 compatibility mode, whatever the version used in the root project, use `"v3-dependencies"`: the listed dependencies will be built in V3 mode, and in addition `-open ReactV3` is added to the compiler options.
 
 For example, suppose a V3 project uses rescript-react 0.11, which requires compatibility mode if compiled with V3, and that 2 dependencies `"rescript-react-native", "rescript-react-navigation"` only build with compatibility mode. Then the setting will be:
 
@@ -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
 }
 ```

cli/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

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)
+  }
+}

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"
+  }
+}

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)
   }

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 => (. _, _, _) => ()
     }