complete for functions creating React.element when in a JSX context

CHANGELOG.md

@@ -21,6 +21,7 @@
 - Add support for completion in patterns. https://github.com/rescript-lang/rescript-vscode/pull/670
 - Add support for pattern completion of unsaved tuples. https://github.com/rescript-lang/rescript-vscode/pull/679
 - Add support for completion in typed expressions. https://github.com/rescript-lang/rescript-vscode/pull/682
+- Complete for `React.element` creator functions (`React.string` etc) when in JSX context. https://github.com/rescript-lang/rescript-vscode/pull/681
 
 #### :nail_care: Polish
 

analysis/src/CompletionBackEnd.ml

@@ -1477,7 +1477,7 @@ let rec getCompletionsForContextPath ~full ~opens ~rawOpens ~allFiles ~pos ~env
                else None)
       | None -> [])
     | None -> [])
-  | CPPipe {contextPath = cp; id = funNamePrefix; lhsLoc} -> (
+  | CPPipe {contextPath = cp; id = funNamePrefix; lhsLoc; inJsx} -> (
     match
       cp
       |> getCompletionsForContextPath ~full ~opens ~rawOpens ~allFiles ~pos ~env
@@ -1584,7 +1584,7 @@ let rec getCompletionsForContextPath ~full ~opens ~rawOpens ~allFiles ~pos ~env
         | None -> None
       in
       match completionPath with
-      | Some completionPath ->
+      | Some completionPath -> (
         let completionPathMinusOpens =
           completionPath
           |> removeRawOpens package.opens
@@ -1599,14 +1599,45 @@ let rec getCompletionsForContextPath ~full ~opens ~rawOpens ~allFiles ~pos ~env
           |> getCompletionsForPath ~completionContext:Value ~exact:false
                ~package ~opens ~allFiles ~pos ~env ~scope
         in
-        completions
-        |> List.map (fun (completion : Completion.t) ->
-               {
-                 completion with
-                 name = completionName completion.name;
-                 env
-                 (* Restore original env for the completion after x->foo()... *);
-               })
+        let completions =
+          completions
+          |> List.map (fun (completion : Completion.t) ->
+                 {
+                   completion with
+                   name = completionName completion.name;
+                   env
+                   (* Restore original env for the completion after x->foo()... *);
+                 })
+        in
+        (* We add React element functions to the completion if we're in a JSX context *)
+        let forJsxCompletion =
+          if inJsx then
+            match getTypePath typ with
+            | Some (Path.Pident id) when Ident.name id = "int" -> Some "int"
+            | Some (Path.Pident id) when Ident.name id = "float" -> Some "float"
+            | Some (Path.Pident id) when Ident.name id = "string" ->
+              Some "string"
+            | Some (Path.Pident id) when Ident.name id = "array" -> Some "array"
+            | _ -> None
+          else None
+        in
+        match forJsxCompletion with
+        | Some builtinNameToComplete
+          when checkName builtinNameToComplete ~prefix:funNamePrefix
+                 ~exact:false ->
+          [
+            Completion.createWithSnippet
+              ~name:("React." ^ builtinNameToComplete)
+              ~kind:(Value typ) ~env ~sortText:"A"
+              ~docstring:
+                [
+                  "Turns `" ^ builtinNameToComplete
+                  ^ "` into `React.element` so it can be used inside of JSX.";
+                ]
+              ();
+          ]
+          @ completions
+        | _ -> completions)
       | None -> [])
     | None -> [])
   | CTuple ctxPaths ->

analysis/src/CompletionFrontEnd.ml

@@ -914,6 +914,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
       !scope |> Scope.addModule ~name:md.pmd_name.txt ~loc:md.pmd_name.loc
   in
   let setLookingForPat ctxPath = lookingForPat := Some ctxPath in
+  let inJsxContext = ref false in
 
   let unsetLookingForPat () = lookingForPat := None in
   (* Identifies expressions where we can do typed pattern or expr completion. *)
@@ -1035,6 +1036,13 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
     if not !processed then
       Ast_iterator.default_iterator.structure_item iterator item
   in
+  let value_binding (iterator : Ast_iterator.iterator)
+      (value_binding : Parsetree.value_binding) =
+    let oldInJsxContext = !inJsxContext in
+    if Utils.isReactComponent value_binding then inJsxContext := true;
+    Ast_iterator.default_iterator.value_binding iterator value_binding;
+    inJsxContext := oldInJsxContext
+  in
   let signature (iterator : Ast_iterator.iterator)
       (signature : Parsetree.signature) =
     let oldScope = !scope in
@@ -1111,6 +1119,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
     Ast_iterator.default_iterator.attribute iterator (id, payload)
   in
   let expr (iterator : Ast_iterator.iterator) (expr : Parsetree.expression) =
+    let oldInJsxContext = !inJsxContext in
     let processed = ref false in
     let setFound () =
       found := true;
@@ -1125,11 +1134,20 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
         match exprToContextPath lhs with
         | Some pipe ->
           setResult
-            (Cpath (CPPipe {contextPath = pipe; id; lhsLoc = lhs.pexp_loc}));
+            (Cpath
+               (CPPipe
+                  {
+                    contextPath = pipe;
+                    id;
+                    lhsLoc = lhs.pexp_loc;
+                    inJsx = !inJsxContext;
+                  }));
           true
         | None -> false)
       | Some (pipe, lhsLoc) ->
-        setResult (Cpath (CPPipe {contextPath = pipe; id; lhsLoc}));
+        setResult
+          (Cpath
+             (CPPipe {contextPath = pipe; id; lhsLoc; inJsx = !inJsxContext}));
         true
     in
     typedCompletionExpr expr;
@@ -1201,6 +1219,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
             | None -> ())
         | Pexp_apply ({pexp_desc = Pexp_ident compName}, args)
           when Res_parsetree_viewer.isJsxExpression expr ->
+          inJsxContext := true;
           let jsxProps = extractJsxProps ~compName ~args in
           let compNamePath = flattenLidCheckDot ~jsx:true compName in
           if debug then
@@ -1359,7 +1378,8 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
           scope := oldScope;
           processed := true
         | _ -> ());
-      if not !processed then Ast_iterator.default_iterator.expr iterator expr
+      if not !processed then Ast_iterator.default_iterator.expr iterator expr;
+      inJsxContext := oldInJsxContext
   in
   let typ (iterator : Ast_iterator.iterator) (core_type : Parsetree.core_type) =
     if core_type.ptyp_loc |> Loc.hasPos ~pos:posNoWhite then (
@@ -1468,6 +1488,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor ~text =
       structure_item;
       typ;
       type_kind;
+      value_binding;
     }
   in
 

analysis/src/SharedTypes.ml

@@ -316,12 +316,13 @@ module Completion = struct
       insertTextFormat = None;
     }
 
-  let createWithSnippet ~name ?insertText ~kind ~env ?sortText () =
+  let createWithSnippet ~name ?insertText ~kind ~env ?sortText ?(docstring = [])
+      () =
     {
       name;
       env;
       deprecated = None;
-      docstring = [];
+      docstring;
       kind;
       sortText;
       insertText;
@@ -546,6 +547,7 @@ module Completable = struct
     | CPPipe of {
         contextPath: contextPath;
         id: string;
+        inJsx: bool;  (** Whether this pipe was found in a JSX context. *)
         lhsLoc: Location.t;
             (** The loc item for the left hand side of the pipe. *)
       }
@@ -648,7 +650,10 @@ module Completable = struct
         completionContextToString completionContext ^ list sl
       | CPField (cp, s) -> contextPathToString cp ^ "." ^ str s
       | CPObj (cp, s) -> contextPathToString cp ^ "[\"" ^ s ^ "\"]"
-      | CPPipe {contextPath; id} -> contextPathToString contextPath ^ "->" ^ id
+      | CPPipe {contextPath; id; inJsx} ->
+        contextPathToString contextPath
+        ^ "->" ^ id
+        ^ if inJsx then " <<jsx>>" else ""
       | CTuple ctxPaths ->
         "CTuple("
         ^ (ctxPaths |> List.map contextPathToString |> String.concat ", ")

analysis/src/Utils.ml

@@ -168,3 +168,8 @@ let rec unwrapIfOption (t : Types.type_expr) =
   | Tlink t1 | Tsubst t1 | Tpoly (t1, []) -> unwrapIfOption t1
   | Tconstr (Path.Pident {name = "option"}, [unwrappedType], _) -> unwrappedType
   | _ -> t
+let isReactComponent (vb : Parsetree.value_binding) =
+  vb.pvb_attributes
+  |> List.exists (function
+       | {Location.txt = "react.component"}, _payload -> true
+       | _ -> false)

analysis/src/Xform.ml

@@ -212,13 +212,8 @@ module AddTypeAnnotation = struct
       match si.pstr_desc with
       | Pstr_value (_recFlag, bindings) ->
         let processBinding (vb : Parsetree.value_binding) =
-          let isReactComponent =
-            (* Can't add a type annotation to a react component, or the compiler crashes *)
-            vb.pvb_attributes
-            |> List.exists (function
-                 | {Location.txt = "react.component"}, _payload -> true
-                 | _ -> false)
-          in
+          (* Can't add a type annotation to a react component, or the compiler crashes *)
+          let isReactComponent = Utils.isReactComponent vb in
           if not isReactComponent then processPattern vb.pvb_pat;
           processFunction vb.pvb_expr
         in

analysis/tests/src/CompletionJsx.res

@@ -0,0 +1,33 @@
+let someString = "hello"
+ignore(someString)
+
+// someString->st
+//               ^com
+
+module SomeComponent = {
+  @react.component
+  let make = (~someProp) => {
+    let someInt = 12
+    let someArr = [React.null]
+    ignore(someInt)
+    ignore(someArr)
+    // someString->st
+    //               ^com
+    <div>
+      {React.string(someProp)}
+      <div> {React.null} </div>
+      // {someString->st}
+      //                ^com
+      // {"Some string"->st}
+      //                   ^com
+      // {"Some string"->Js.String2.trim->st}
+      //                                    ^com
+      // {someInt->}
+      //           ^com
+      // {12->}
+      //      ^com
+      // {someArr->a}
+      //            ^com
+    </div>
+  }
+}