more general props type for ref

Author: mununki

cli/reactjs_jsx_ppx.ml

@@ -1557,7 +1557,7 @@ module V4 = struct
   let makePropsTypeParamsTvar namedTypeList =
     namedTypeList
     |> List.filter_map (fun (_isOptional, label, _, _interiorType) ->
-           if label = "key" || label = "ref" then None
+           if label = "key" then None
            else Some (Typ.var @@ safeTypeFromValue (Labelled label)))
 
   let stripOption coreType =
@@ -1566,13 +1566,37 @@ module V4 = struct
       List.nth_opt coreTypes 0
     | _ -> Some coreType
 
-  (* make type params for make sig arguments and for external *)
-  (* let make: React.componentLike<props<string, option<string>>, React.element> *)
-  (* external make: React.componentLike<props< .. >, React.element> = "default" *)
-  let makePropsTypeParams ?(stripExplicitOption = false) namedTypeList =
+  let stripJsNullable coreType =
+    match coreType with
+    | {
+     ptyp_desc =
+       Ptyp_constr
+         ({txt = Ldot (Ldot (Lident "Js", "Nullable"), "t")}, coreTypes);
+    } ->
+      List.nth_opt coreTypes 0
+    | _ -> Some coreType
+
+  (* Make type params of the props type *)
+  (* (Sig) let make: React.componentLike<props<string>, React.element> *)
+  (* (Str) let make = ({x, _}: props<'x>) => body *)
+  (* (Str) external make: React.componentLike<props< .. >, React.element> = "default" *)
+  let makePropsTypeParams ?(stripExplicitOption = false)
+      ?(stripExplicitJsNullableOfRef = false) namedTypeList =
     namedTypeList
     |> List.filter_map (fun (isOptional, label, _, interiorType) ->
-           if label = "key" || label = "ref" then None
+           if label = "key" then None
+             (* TODO: Worth thinking how about "ref_" or "_ref" usages *)
+           else if label = "ref" then
+             (*
+                If ref has a type annotation then use it, else `ReactDOM.Ref.currentDomRef.
+                For example, if JSX ppx is used for React Native, type would be different.
+             *)
+             match interiorType with
+             | {ptyp_desc = Ptyp_var label} -> Some (refType Location.none)
+             | _ ->
+               (* Strip explicit Js.Nullable.t in case of forwardRef *)
+               if stripExplicitJsNullableOfRef then stripJsNullable interiorType
+               else Some interiorType
              (* Strip the explicit option type in implementation *)
              (* let make = (~x: option<string>=?) => ... *)
            else if isOptional && stripExplicitOption then
@@ -1584,10 +1608,6 @@ module V4 = struct
     |> List.map (fun (isOptional, label, _, interiorType) ->
            if label = "key" then
              Type.field ~loc ~attrs:optionalAttr {txt = label; loc} interiorType
-           else if label = "ref" then
-             Type.field ~loc
-               ~attrs:(if isOptional then optionalAttr else [])
-               {txt = label; loc} interiorType
            else if isOptional then
              Type.field ~loc ~attrs:optionalAttr {txt = label; loc}
                (Typ.var @@ safeTypeFromValue @@ Labelled label)
@@ -1951,12 +1971,22 @@ module V4 = struct
     | Pexp_fun
         ( Nolabel,
           _,
-          {
-            ppat_desc =
-              Ppat_var _ | Ppat_constraint ({ppat_desc = Ppat_var _}, _);
-          },
+          ({
+             ppat_desc =
+               Ppat_var {txt} | Ppat_constraint ({ppat_desc = Ppat_var {txt}}, _);
+           } as pattern),
           _expression ) ->
-      (args, newtypes, coreType)
+      if txt = "ref" then
+        let type_ =
+          match pattern with
+          | {ppat_desc = Ppat_constraint (_, type_)} -> Some type_
+          | _ -> None
+        in
+        (* The ref arguement of forwardRef should be optional *)
+        ( (Optional "ref", None, pattern, txt, pattern.ppat_loc, type_) :: args,
+          newtypes,
+          coreType )
+      else (args, newtypes, coreType)
     | Pexp_fun (Nolabel, _, pattern, _expression) ->
       Location.raise_errorf ~loc:pattern.ppat_loc
         "React: react.component refs only support plain arguments and type \
@@ -2293,11 +2323,7 @@ module V4 = struct
             let vbMatchList = List.map vbMatch namedArgWithDefaultValueList in
             (* type props = { ... } *)
             let propsRecordType =
-              makePropsRecordType "props" emptyLoc
-                ((if hasForwardRef then
-                  [(true, "ref", [], refType Location.none)]
-                 else [])
-                @ namedTypeList)
+              makePropsRecordType "props" emptyLoc namedTypeList
             in
             let innerExpression =
               Exp.apply
@@ -2366,12 +2392,12 @@ module V4 = struct
               | Pexp_fun
                   (arg_label, _default, ({ppat_loc; ppat_desc} as pattern), expr)
                 -> (
-                let pattern = stripConstraint pattern in
+                let patternWithoutConstraint = stripConstraint pattern in
                 if isLabelled arg_label || isOptional arg_label then
                   returnedExpression
                     (( {loc = ppat_loc; txt = Lident (getLabel arg_label)},
                        {
-                         pattern with
+                         patternWithoutConstraint with
                          ppat_attributes =
                            (if isOptional arg_label then optionalAttr else [])
                            @ pattern.ppat_attributes;
@@ -2382,7 +2408,8 @@ module V4 = struct
                   (* Special case of nolabel arg "ref" in forwardRef fn *)
                   (* let make = React.forwardRef(ref => body) *)
                   match ppat_desc with
-                  | Ppat_var {txt} ->
+                  | Ppat_var {txt}
+                  | Ppat_constraint ({ppat_desc = Ppat_var {txt}}, _) ->
                     returnedExpression patternsWithLabel
                       (( {loc = ppat_loc; txt = Lident txt},
                          {
@@ -2400,27 +2427,29 @@ module V4 = struct
             let patternsWithLabel, patternsWithNolabel, expression =
               returnedExpression [] [] expression
             in
-            let pattern =
-              match patternsWithLabel with
-              | [] -> Pat.any ()
-              | _ -> Pat.record (List.rev patternsWithLabel) Open
-            in
             (* add pattern matching for optional prop value *)
             let expression =
               if List.length vbMatchList = 0 then expression
               else Exp.let_ Nonrecursive vbMatchList expression
             in
             let expression =
+              (* (ref) => expr *)
               List.fold_left
                 (fun expr (_, pattern) -> Exp.fun_ Nolabel None pattern expr)
                 expression patternsWithNolabel
             in
+            let recordPattern =
+              match patternsWithLabel with
+              | [] -> Pat.any ()
+              | _ -> Pat.record (List.rev patternsWithLabel) Open
+            in
             let expression =
               Exp.fun_ Nolabel None
-                (Pat.constraint_ pattern
+                (Pat.constraint_ recordPattern
                    (Typ.constr ~loc:emptyLoc
                       {txt = Lident "props"; loc = emptyLoc}
                       (makePropsTypeParams ~stripExplicitOption:true
+                         ~stripExplicitJsNullableOfRef:hasForwardRef
                          namedTypeList)))
                 expression
             in

tests/ppx/react/expected/externalWithRef.res.txt

@@ -0,0 +1,36 @@
+@@jsxConfig({version: 3})
+
+module V3 = {
+  @obj
+  external makeProps: (
+    ~x: string,
+    ~ref: ReactDOM.Ref.currentDomRef=?,
+    ~key: string=?,
+    unit,
+  ) => {"x": string, "ref": option<ReactDOM.Ref.currentDomRef>} = ""
+  @module("componentForwardRef")
+  external make: React.componentLike<
+    {"x": string, "ref": option<ReactDOM.Ref.currentDomRef>},
+    React.element,
+  > = "component"
+}
+
+@@jsxConfig({version: 4, mode: "classic"})
+
+module V4C = {
+  type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+
+  @module("componentForwardRef")
+  external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
+    "component"
+}
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module V4C = {
+  type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+
+  @module("componentForwardRef")
+  external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
+    "component"
+}

tests/ppx/react/expected/externalWithTypeVariables.res.txt

@@ -0,0 +1,32 @@
+@@jsxConfig({version: 3})
+
+module V3 = {
+  @obj
+  external makeProps: (
+    ~x: t<'a>,
+    ~children: React.element,
+    ~key: string=?,
+    unit,
+  ) => {"x": t<'a>, "children": React.element} = ""
+  @module("c")
+  external make: React.componentLike<{"x": t<'a>, "children": React.element}, React.element> =
+    "component"
+}
+
+@@jsxConfig({version: 4, mode: "classic"})
+
+module V4C = {
+  type props<'x, 'children> = {x: 'x, children: 'children}
+
+  @module("c")
+  external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
+}
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module V4C = {
+  type props<'x, 'children> = {x: 'x, children: 'children}
+
+  @module("c")
+  external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
+}

tests/ppx/react/expected/forwardRef.res.txt

@@ -66,14 +66,17 @@ module V3 = {
 
 module V4C = {
   module FancyInput = {
-    type props<'className, 'children> = {
-      ref?: ReactDOM.Ref.currentDomRef,
+    type props<'className, 'children, 'ref> = {
       className?: 'className,
       children: 'children,
+      ref?: 'ref,
     }
 
     @react.component
-    let make = ({?className, children, _}: props<'className, 'children>, ref) =>
+    let make = (
+      {?className, children, _}: props<'className, 'children, ReactRef.currentDomRef>,
+      ref: Js.Nullable.t<ReactRef.currentDomRef>,
+    ) =>
       ReactDOMRe.createDOMElementVariadic(
         "div",
         [
@@ -82,7 +85,7 @@ module V4C = {
             ~props=ReactDOMRe.domProps(
               ~type_="text",
               ~className?,
-              ~ref=?{Js.Nullable.toOption(ref)->Belt.Option.map(ReactDOM.Ref.domRef)},
+              ~ref=?{Js.Nullable.toOption(ref)->Belt.Option.map(React.Ref.domRef)},
               (),
             ),
             [],
@@ -123,14 +126,17 @@ module V4C = {
 
 module V4A = {
   module FancyInput = {
-    type props<'className, 'children> = {
-      ref?: ReactDOM.Ref.currentDomRef,
+    type props<'className, 'children, 'ref> = {
       className?: 'className,
       children: 'children,
+      ref?: 'ref,
     }
 
     @react.component
-    let make = ({?className, children, _}: props<'className, 'children>, ref) =>
+    let make = (
+      {?className, children, _}: props<'className, 'children, ReactDOM.Ref.currentDomRef>,
+      ref,
+    ) =>
       ReactDOM.jsxs(
         "div",
         {

tests/ppx/react/expected/interfaceWithRef.res.txt

@@ -0,0 +1,13 @@
+type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+@react.component
+let make = (
+  {x, _}: props<string, ReactDOM.Ref.currentDomRef>,
+  ref: Js.Nullable.t<ReactDOM.Ref.currentDomRef>,
+) => {
+  let _ = ref->Js.Nullable.toOption->Belt.Option.map(ReactDOM.Ref.domRef)
+  React.string(x)
+}
+let make = React.forwardRef({
+  let \"InterfaceWithRef" = (props: props<_>, ref) => make(props, ref)
+  \"InterfaceWithRef"
+})

tests/ppx/react/expected/interfaceWithRef.resi.txt

@@ -0,0 +1,2 @@
+type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+let make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element>

tests/ppx/react/externalWithRef.res

@@ -0,0 +1,29 @@
+@@jsxConfig({version: 3})
+
+module V3 = {
+  @module("componentForwardRef") @react.component
+    external make: (
+      ~x: string,
+      ~ref: ReactDOM.Ref.currentDomRef=?,
+    ) => React.element = "component"
+}
+
+@@jsxConfig({version: 4, mode: "classic"})
+
+module V4C = {
+  @module("componentForwardRef") @react.component
+    external make: (
+      ~x: string,
+      ~ref: ReactDOM.Ref.currentDomRef=?,
+    ) => React.element = "component"
+}
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module V4C = {
+  @module("componentForwardRef") @react.component
+    external make: (
+      ~x: string,
+      ~ref: ReactDOM.Ref.currentDomRef=?,
+    ) => React.element = "component"
+}

tests/ppx/react/externalWithTypeVariables.res

@@ -0,0 +1,29 @@
+@@jsxConfig({version: 3})
+
+module V3 = {
+  @module("c") @react.component
+    external make: (
+      ~x: t<'a>,
+      ~children: React.element,
+    ) => React.element = "component"
+}
+
+@@jsxConfig({version: 4, mode: "classic"})
+
+module V4C = {
+  @module("c") @react.component
+    external make: (
+      ~x: t<'a>,
+      ~children: React.element,
+    ) => React.element = "component"
+}
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module V4C = {
+  @module("c") @react.component
+    external make: (
+      ~x: t<'a>,
+      ~children: React.element,
+    ) => React.element = "component"
+}

tests/ppx/react/forwardRef.res

@@ -30,12 +30,12 @@ module V3 = {
 module V4C = {
   module FancyInput = {
     @react.component
-    let make = React.forwardRef((~className=?, ~children, ref) =>
+    let make = React.forwardRef((~className=?, ~children, ref: Js.Nullable.t<ReactRef.currentDomRef>) =>
       <div>
         <input
           type_="text"
           ?className
-          ref=?{Js.Nullable.toOption(ref)->Belt.Option.map(ReactDOM.Ref.domRef)}
+          ref=?{Js.Nullable.toOption(ref)->Belt.Option.map(React.Ref.domRef)}
         />
         children
       </div>

tests/ppx/react/interfaceWithRef.res

@@ -0,0 +1,5 @@
+@react.component
+let make = React.forwardRef((~x: string, ref: Js.Nullable.t<ReactDOM.Ref.currentDomRef>) => {
+  let _ = ref->Js.Nullable.toOption->Belt.Option.map(ReactDOM.Ref.domRef)
+  React.string(x)
+})

tests/ppx/react/interfaceWithRef.resi

@@ -0,0 +1,2 @@
+@react.component
+let make: (~x: string, ~ref: ReactDOM.Ref.currentDomRef=?) => React.element