adapt the primitive completions inside of jsx to the generic JSX moe

Author: zth

analysis/src/CompletionBackEnd.ml

@@ -1010,14 +1010,23 @@ and getCompletionsForContextPath ~debug ~full ~opens ~rawOpens ~pos ~env ~exact
         | Some (builtinNameToComplete, typ)
           when Utils.checkName builtinNameToComplete ~prefix:funNamePrefix
                  ~exact:false ->
+          let name =
+            match package.genericJsxModule with
+            | None -> "React." ^ builtinNameToComplete
+            | Some g ->
+              g ^ "." ^ builtinNameToComplete
+              |> String.split_on_char '.'
+              |> TypeUtils.removeOpensFromCompletionPath ~rawOpens
+                   ~package:full.package
+              |> String.concat "."
+          in
           [
-            Completion.createWithSnippet
-              ~name:("React." ^ builtinNameToComplete)
-              ~kind:(Value typ) ~env ~sortText:"A"
+            Completion.createWithSnippet ~name ~kind:(Value typ) ~env
+              ~sortText:"A"
               ~docstring:
                 [
                   "Turns `" ^ builtinNameToComplete
-                  ^ "` into `React.element` so it can be used inside of JSX.";
+                  ^ "` into a JSX element so it can be used inside of JSX.";
                 ]
               ();
           ]

analysis/src/CompletionDecorators.ml

@@ -164,10 +164,17 @@ Example `@raises(Exn)` or `@raises([E1, E2, E3])` for multiple exceptions.
 
 You will need this decorator whenever you want to use a ReScript / React component in ReScript JSX expressions.
 
-Note: The `@react.component` decorator requires the react-jsx config to be set in your `bsconfig.json` to enable the required React transformations.
+Note: The `@react.component` decorator requires the `jsx` config to be set in your `rescript.json`/`bsconfig.json` to enable the required React transformations.
 
 [Read more and see examples in the documentation](https://rescript-lang.org/syntax-lookup#react-component-decorator).|};
       ] );
+    ( "jsx.component",
+      None,
+      [
+        {|The `@jsx.component` decorator is used to annotate functions that are JSX components used with ReScript's [generic JSX transform](https://rescript-lang.org/docs/manual/latest/jsx#generic-jsx-transform-jsx-beyond-react-experimental).
+
+You will need this decorator whenever you want to use a JSX component in ReScript JSX expressions.|};
+      ] );
     ( "return",
       Some "return(${1:nullable})",
       [

analysis/src/CompletionFrontEnd.ml

@@ -659,7 +659,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
   let value_binding (iterator : Ast_iterator.iterator)
       (value_binding : Parsetree.value_binding) =
     let oldInJsxContext = !inJsxContext in
-    if Utils.isReactComponent value_binding then inJsxContext := true;
+    if Utils.isJsxComponent value_binding then inJsxContext := true;
     (match value_binding with
     | {pvb_pat = {ppat_desc = Ppat_constraint (_pat, coreType)}; pvb_expr}
       when locHasCursor pvb_expr.pexp_loc -> (

analysis/src/TypeUtils.ml

@@ -1083,4 +1083,4 @@ let removeOpensFromCompletionPath ~rawOpens ~package completionPath =
 let pathToElementProps package =
   match package.genericJsxModule with
   | None -> ["ReactDOM"; "domProps"]
-  | Some g -> (g |> String.split_on_char '.') @ ["DOM"; "props"]
+  | Some g -> (g |> String.split_on_char '.') @ ["Elements"; "props"]

analysis/src/Utils.ml

@@ -156,10 +156,10 @@ let rec unwrapIfOption (t : Types.type_expr) =
   | Tconstr (Path.Pident {name = "option"}, [unwrappedType], _) -> unwrappedType
   | _ -> t
 
-let isReactComponent (vb : Parsetree.value_binding) =
+let isJsxComponent (vb : Parsetree.value_binding) =
   vb.pvb_attributes
   |> List.exists (function
-       | {Location.txt = "react.component"}, _payload -> true
+       | {Location.txt = "react.component" | "jsx.component"}, _payload -> true
        | _ -> false)
 
 let checkName name ~prefix ~exact =

analysis/src/Xform.ml

@@ -215,9 +215,9 @@ module AddTypeAnnotation = struct
       match si.pstr_desc with
       | Pstr_value (_recFlag, bindings) ->
         let processBinding (vb : Parsetree.value_binding) =
-          (* 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;
+          (* Can't add a type annotation to a jsx component, or the compiler crashes *)
+          let isJsxComponent = Utils.isJsxComponent vb in
+          if not isJsxComponent then processPattern vb.pvb_pat;
           processFunction vb.pvb_expr
         in
         bindings |> List.iter (processBinding ~argNum:1);

analysis/tests-generic-jsx-transform/package-lock.json

@@ -5,6 +5,6 @@
   },
   "private": true,
   "dependencies": {
-    "rescript": "11.1.0-rc.1"
+    "rescript": "11.1.0-rc.2"
   }
 }

analysis/tests-generic-jsx-transform/package.json

@@ -33,14 +33,15 @@ type fragmentProps = {children?: element}
 @module("preact") external jsxFragment: component<fragmentProps> = "Fragment"
 
 /* The Elements module is the equivalent to the ReactDOM module in React. This holds things relevant to _lowercase_ JSX elements. */
-module DOM = {
+module Elements = {
   /* Here you can control what props lowercase JSX elements should have. 
   A base that the React JSX transform uses is provided via JsxDOM.domProps, 
   but you can make this anything. The editor tooling will support 
   autocompletion etc for your specific type. */
   type props = {
-	testing?: bool,
-	test2?: string
+    testing?: bool,
+    test2?: string,
+    children?: element
   }
 
   @module("preact")

analysis/tests-generic-jsx-transform/src/GenericJsx.res

@@ -1,5 +1,25 @@
 // <div 
 //      ^com
 
-// <div testing= 
-//              ^com
+// <div testing={} 
+//               ^com
+
+module SomeComponent = {
+  @jsx.component
+  let make = (~someProp) => {
+	let someString = ""
+    let someInt = 12
+    let someArr = [GenericJsx.null]
+    ignore(someInt)
+    ignore(someArr)
+    // someString->st
+    //               ^com
+	open GenericJsx
+    <div>
+      {GenericJsx.string(someProp)}
+      <div> {GenericJsx.null} </div>
+      // {someString->st}
+      //                ^com
+    </div>
+  }
+}