convert async component type

Author: mununki

jscomp/others/jsxPPXReactSupportC.res

@@ -48,3 +48,7 @@ let createElementWithKey = (~key=?, component, props) =>
 
 let createElementVariadicWithKey = (~key=?, component, props, elements) =>
   createElementVariadic(component, addKeyProp(~key?, props), elements)
+
+external asyncComponent: ('props => promise<Jsx.element>) => Jsx.component<
+  'props,
+> = "%identity"

jscomp/others/jsxPPXReactSupportU.res

@@ -50,3 +50,7 @@ let createElementWithKey = (~key=?, component, props) =>
 
 let createElementVariadicWithKey = (~key=?, component, props, elements) =>
   createElementVariadic(component, addKeyProp(~key?, props), elements)
+
+external asyncComponent: ('props => promise<Jsx.element>) => Jsx.component<
+  'props,
+> = "%identity"

jscomp/syntax/src/react_jsx_common.ml

@@ -76,3 +76,13 @@ let add_async_attribute ~async (body : Parsetree.expression) =
 
 let is_async : Parsetree.attribute -> bool =
  fun ({txt}, _) -> txt = "async" || txt = "res.async"
+
+let async_component expr =
+  let open Ast_helper in
+  Exp.apply
+    (Exp.ident
+       {
+         loc = Location.none;
+         txt = Ldot (Lident "JsxPPXReactSupport", "asyncComponent");
+       })
+    [(Nolabel, expr)]

jscomp/syntax/src/reactjs_jsx_v4.ml

@@ -969,6 +969,17 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
         |> Ast_uncurried.uncurriedFun ~loc:fullExpression.pexp_loc ~arity:1
       else fullExpression
     in
+    let fullExpression =
+      if isAsync then
+        Exp.apply
+          (Exp.ident
+             {
+               loc = Location.none;
+               txt = Ldot (Lident "JsxPPXReactSupport", "asyncComponent");
+             })
+          [(Nolabel, fullExpression)]
+      else fullExpression
+    in
     let fullExpression =
       match fullModuleName with
       | "" -> fullExpression

jscomp/syntax/tests/ppx/react/expected/asyncAwait.res.txt

@@ -6,7 +6,7 @@ let make = async ({a, _}: props<_>) => {
   ReactDOM.jsx("div", {children: ?ReactDOM.someElement({React.int(a)})})
 }
 let make = {
-  let \"AsyncAwait" = (props: props<_>) => make(props)
+  let \"AsyncAwait" = JsxPPXReactSupport.asyncComponent((props: props<_>) => make(props))
 
   \"AsyncAwait"
 }