Support async component for React Server component in JSX v4

CHANGELOG.md

@@ -24,6 +24,7 @@
 - Add builtin abstract types for File and Blob APIs. https://github.com/rescript-lang/rescript-compiler/pull/6383
 - Untagged variants: Support `promise`, RegExes, Dates, File and Blob. https://github.com/rescript-lang/rescript-compiler/pull/6383
 - Support aliased types as payloads to untagged variants. https://github.com/rescript-lang/rescript-compiler/pull/6394
+- Support the async component for React Server Component in JSX V4. https://github.com/rescript-lang/rescript-compiler/pull/6399
 
 #### :nail_care: Polish
 

jscomp/others/jsxPPXReactSupportC.res

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

jscomp/others/jsxPPXReactSupportU.res

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

jscomp/syntax/src/react_jsx_common.ml

@@ -63,3 +63,18 @@ let removeArity binding =
     | _ -> expr
   in
   {binding with pvb_expr = removeArityRecord binding.pvb_expr}
+
+let is_async : Parsetree.attribute -> bool =
+ fun ({txt}, _) -> txt = "async" || txt = "res.async"
+
+let async_component ~async expr =
+  if async then
+    let open Ast_helper in
+    Exp.apply
+      (Exp.ident
+         {
+           loc = Location.none;
+           txt = Ldot (Lident "JsxPPXReactSupport", "asyncComponent");
+         })
+      [(Nolabel, expr)]
+  else expr

jscomp/syntax/src/reactjs_jsx_v4.ml

@@ -909,6 +909,11 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
     let bindingWrapper, hasForwardRef, expression =
       modifiedBinding ~bindingLoc ~bindingPatLoc ~fnName binding
     in
+    let isAsync =
+      Ext_list.find_first binding.pvb_expr.pexp_attributes
+        React_jsx_common.is_async
+      |> Option.is_some
+    in
     (* do stuff here! *)
     let namedArgList, newtypes, _typeConstraints =
       recursivelyTransformNamedArgsForMake
@@ -942,6 +947,9 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
           (Pat.var @@ Location.mknoloc "props")
           (Typ.constr (Location.mknoloc @@ Lident "props") [Typ.any ()])
     in
+    let innerExpression =
+      React_jsx_common.async_component ~async:isAsync innerExpression
+    in
     let fullExpression =
       (* React component name should start with uppercase letter *)
       (* let make = { let \"App" = props => make(props); \"App" } *)
@@ -1083,6 +1091,7 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
                 | _ -> [Typ.any ()]))))
         expression
     in
+    let expression = Ast_async.add_async_attribute ~async:isAsync expression in
     let expression =
       (* Add new tupes (type a,b,c) to make's definition *)
       newtypes

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

@@ -0,0 +1,19 @@
+let f = a => Js.Promise.resolve(a + a)
+
+module C0 = {
+  @react.component
+  let make = async (~a) => {
+    let a = await f(a)
+    <div> {React.int(a)} </div>
+  }
+}
+
+module C1 = {
+  @react.component
+  let make = async (~status) => {
+    switch status {
+    | #on => React.string("on")
+    | #off => React.string("off")
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+let f = a => Js.Promise.resolve(a + a)
+
+module C0 = {
+  type props<'a> = {a: 'a}
+
+  let make = async ({a, _}: props<_>) => {
+    let a = await f(a)
+    ReactDOM.jsx("div", {children: ?ReactDOM.someElement({React.int(a)})})
+  }
+  let make = {
+    let \"AsyncAwait$C0" = (props: props<_>) => JsxPPXReactSupport.asyncComponent(make(props))
+
+    \"AsyncAwait$C0"
+  }
+}
+
+module C1 = {
+  type props<'status> = {status: 'status}
+
+  let make = async ({status, _}: props<_>) => {
+    switch status {
+    | #on => React.string("on")
+    | #off => React.string("off")
+    }
+  }
+  let make = {
+    let \"AsyncAwait$C1" = (props: props<_>) => JsxPPXReactSupport.asyncComponent(make(props))
+
+    \"AsyncAwait$C1"
+  }
+}