Support react@canary release

[ellemedit]

React have plans to add new valid element/node type, hooks and APIs as react canary released.
I summarized that required for upcoming react canary things. Can we support these?

New React hooks and APIs are:

• use: (promise<'value> | context<'value>) => 'value
  • I would suggest new type valueContainer<'value> to express above as they defined value container in RFC.
  • TypeScript type binding
• cache: 'value => 'value
  • next.js docs
  • TypeScript: export function cache<CachedFunction extends Function>(fn: CachedFunction): CachedFunction
• useTransition (already bound, just ignore)
• useDeferredValue (already bound, just ignore)
• startTransition: ((. unit => unit) => unit)

New ReactDOM hooks and APIs are:

• flushSync: ((. unit => unit) => unit)
• experimental_useFormStatus: (unit => { pending: boolean, action: promise<void> | (data: FormData) => unit, method: string, data: FormData })
  • next.js docs
• experimental_useOptimistic: (@uncurry ('state, ('state, 'action) => 'state)) => ('state, ('action) => unit)
  • next.js docs
  • State postfix removed from another PR.

Client Action Function Support: string | (formData: FormData) => unit

• <button formAction={(formData) => { ... }} />
• <form action={(formData) => { ... }} />

Async component:

rescript input:

type user = {id: string, name: string}
let fetchUserById = async (userId) => {
 {
 id: userId,
 name: Js.Float.toStringWithRadix(Js.Math.random(), ~radix=16),
 }
}

@react.component
let make = async (~userId) => {
 let user = await fetchUserById(userId)
 <div> {React.string(user.name)} </div>
}

Async component JS output expectation:

import * as JsxRuntime from "react/jsx-runtime";
async function fetchUserById(userId) {
 return { id: userId, name: Math.random().toString(16) };
}
async function Playground(props) {
 var user = await fetchUserById(props.userId);
 return JsxRuntime.jsx("div", { children: user.name });
}
var make = Playground;
export { fetchUserById, make };

New valid node:

Promise node:

type user = {id: string, name: string}
let fetchUserById = async (userId) => {
 {
 id: userId,
 name: Js.Float.toStringWithRadix(Js.Math.random(), ~radix=16),
 }
}

let fetchUserNameById = async (userId) => {
 let user = await fetchUserById(userId)
 user.name
}

@react.component
let make = (~userId) => {
 let userName = fetchUserNameById(userId)
 <React.Suspense>
 {React.promise(userName)}
 </React.Suspense>
}

expect output:

import * as React from "react";
import * as JsxRuntime from "react/jsx-runtime";
async function fetchUserById(userId) {
 return { id: userId, name: Math.random().toString(16) };
}
async function fetchUserNameById(userId) {
 return (await fetchUserById(userId)).name;
}
function Playground(props) {
 var userName = fetchUserNameById(props.userId);
 return JsxRuntime.jsx(React.Suspense, { children: userName });
}
var make = Playground;
export { fetchUserById, fetchUserNameById, make };

React.Context node

---

thank you for reading this.

[mununki]

Can you add a references about the new apis, async component and promise node?

[ellemedit]

I’ll append link RFC, actual PR and docs for each change.

[ellemedit]

@mununki I attached link to body and added context node too.

[ellemedit]

I don't know FormData exists in @rescript/react. Perhaps, it should be referenced to https://github.com/TheSpyder/rescript-webapi ? Some type expression may not correct but it's my best effort to guess from TypeScript land...

[ellemedit]

Please understand replacing next.js reference and PR instead official document, canary release doesn't have official document as React core team said (but API won't be break as possible..?).

[mununki]

What about putting this on the forum(https://forum.rescript-lang.org/) and have a further community discussion about it?

[ellemedit]

I created new topic