ReScript v12

.github/workflows/bindings.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
         env:
           CI: true
       - name: Set up OCaml

.github/workflows/build-release.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 23.x
         env:
           CI: true
       - name: Set up OCaml
@@ -64,7 +64,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 23.x
         env:
           CI: true
       - name: Set up OCaml
@@ -154,7 +154,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
         env:
           CI: true
       - name: Set up OCaml

.github/workflows/cli.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
         env:
           CI: true
       - name: Install

.github/workflows/integration-tests.yml

@@ -16,7 +16,7 @@ jobs:
           submodules: "true"
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
         env:
           CI: true
       - uses: actions-rs/toolchain@v1

CHANGELOG.md

@@ -1,6 +1,10 @@
 # master
 
+# 4.0.0
+
 - Support `@exhaustive` on interfaces as well.
+- Remove `ReactDOMExperimental` module, since everything needed is in the official RescriptReact bindings now.
+- Move fully to ReScript v12. From `4.x`, only v12 is supported.
 
 # 3.5.1
 

README.md

@@ -69,7 +69,7 @@ let make = (~user) => {
     <div>
       <p>
         {React.string(
-          userData.firstName ++ (" has " ++ (userData.friendCount->string_of_int ++ " friends.")),
+          userData.firstName ++ (" has " ++ (userData.friendCount->Int.toString ++ " friends.")),
         )}
       </p>
     </div>
@@ -100,11 +100,21 @@ let make = () => {
 
 ## Note about versioning
 
-There's plenty of work ongoing to bring RescriptRelay to full ReScript v11 support, including uncurried mode. Here's the versioning scheme that'll be followed going forward:
+RescriptRelay has moved through a few major lines with different ReScript baselines. Use the compatibility guide below to pick the right versions:
+
+### Compatibility
+
+| RescriptRelay | Required ReScript |
+| ------------- | ----------------- |
+| 4.x and newer | v12.x (or newer)  |
+| 3.x and below | v11.x (or older)  |
+
+Additional context on historical focus areas:
 
 - 1.x will receive critical bug fixes etc, but new features won't be added
-- 2.x will focus on compatibility with ReScript v11, and uncurried mode (uncurried mode will be optional). This is intended to make the transition to v11+ smooth
-- 3.x is fully embracing uncurried mode (no curried mode available), and adds a bunch of new stuff + change existing APIs to make them better and more ergonomic
+- 2.x focuses on compatibility with ReScript v11, and uncurried mode (uncurried mode can be optional). This is intended to make the transition to v11+ smooth
+- 3.x fully embraces uncurried mode (no curried mode available), and adds a bunch of new stuff + changes existing APIs to make them better and more ergonomic
+- 4.x focuses exclusively on ReScript v12+.
 
 ## Examples
 

packages/rescript-relay/__tests__/ProvidedVariables.res

@@ -10,7 +10,7 @@ module InputC = {
 }
 
 module InputCArr = {
-  let get = (): option<array<RelaySchemaAssets_graphql.input_InputC>> => Some([{intStr: 123}])
+  let get = () => Some([({intStr: 123}: RelaySchemaAssets_graphql.input_InputC)])
 }
 
 module IntStr = {

packages/rescript-relay/__tests__/RelayEnv.res

@@ -12,8 +12,8 @@ let fetchQuery: RescriptRelay.Network.fetchFunctionPromise = async (
     {
       method: #POST,
       body: {"query": operation.text, "id": operation.id, "variables": variables}
-      ->Js.Json.stringifyAny
-      ->Belt.Option.getExn
+      ->JSON.stringifyAny
+      ->Option.getOrThrow
       ->Body.string,
       headers: Headers.fromObject({
         "content-type": "application/json",
@@ -27,6 +27,6 @@ let fetchQuery: RescriptRelay.Network.fetchFunctionPromise = async (
     RescriptRelay.Network.preloadResources(~operation, ~variables, ~response=json)
     json
   } else {
-    raise(Graphql_error("Request failed: " ++ Response.statusText(resp)))
+    throw(Graphql_error("Request failed: " ++ Response.statusText(resp)))
   }
 }

packages/rescript-relay/__tests__/TestRelayResolvers.res

@@ -34,7 +34,7 @@ let localUser = () => {
  * @RelayResolver LocalUser.nameRepeated(times: Int!): String
  */
 let nameRepeated = (user, args) => {
-  user.name->Js.String2.repeat(args.times)
+  user.name->String.repeat(args.times)
 }
 
 /**

packages/rescript-relay/__tests__/TestRelayUserResolver2.res

@@ -13,5 +13,5 @@ module Fragment = %relay(`
  */
 let fullName2 = (user, args) => {
   let user = Fragment.readResolverFragment(user)
-  `${user.firstName} ${user.lastName}`->Js.String2.slice(~from=0, ~to_=args.maxLength)
+  `${user.firstName} ${user.lastName}`->String.slice(~start=0, ~end=args.maxLength)
 }

packages/rescript-relay/__tests__/Test_catch.res

@@ -24,7 +24,7 @@ module TestLoggedInUserProp = {
       | Ok({value: createdAt}) =>
         <div>
           {React.string(
-            "Got createdAt: " ++ createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10),
+            "Got createdAt: " ++ createdAt->Date.toISOString->String.slice(~start=0, ~end=10),
           )}
         </div>
       | Error(_) => <div> {React.string("Error!")} </div>
@@ -57,7 +57,7 @@ module TestLoggedInUserPropFragmentData = {
     | Ok({value: {createdAt}}) =>
       <div>
         {React.string(
-          "Got createdAt: " ++ createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10),
+          "Got createdAt: " ++ createdAt->Date.toISOString->String.slice(~start=0, ~end=10),
         )}
       </div>
     | Error(_) => <div> {React.string("Error!")} </div>
@@ -88,7 +88,7 @@ module TestMember = {
           "Got user id: " ++
           id ++
           ", and createdAt: " ++
-          createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10),
+          createdAt->Date.toISOString->String.slice(~start=0, ~end=10),
         )}
       </div>
     | Error(_) => <div> {React.string("Error!")} </div>
@@ -125,7 +125,7 @@ module TestMemberNested = {
           "Got user id: " ++
           id ++
           ", and createdAt: " ++
-          createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10),
+          createdAt->Date.toISOString->String.slice(~start=0, ~end=10),
         )}
       </div>
     | Some(User({memberOfSingular: Error(_)})) => <div> {React.string("Error nested!")} </div>
@@ -156,19 +156,19 @@ module TestMembers = {
 
     let members =
       query.members
-      ->Belt.Option.flatMap(v => v.edges)
-      ->Belt.Option.getWithDefault([])
-      ->Belt.Array.keepMap(x => x->Belt.Option.map(r => r.node))
+      ->Option.flatMap(v => v.edges)
+      ->Option.getOr([])
+      ->Array.filterMap(x => x->Option.map(r => r.node))
 
     members
-    ->Js.Array2.map(r =>
+    ->Array.map(r =>
       switch r {
       | Ok({value: Some(User({id, createdAt}))}) =>
-        `User: ${id} - ${createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10)}`
+        `User: ${id} - ${createdAt->Date.toISOString->String.slice(~start=0, ~end=10)}`
       | _ => "Error!"
       }
     )
-    ->Js.Array2.joinWith(", ")
+    ->Array.joinUnsafe(", ")
     ->React.string
   }
 }
@@ -198,9 +198,7 @@ module TestUnionMember = {
   @react.component
   let make = () => {
     let query = QueryUnionMember.use(~variables=())
-    let fragmentData = UnionMemberFragment.useOpt(
-      query.member->Belt.Option.map(r => r.fragmentRefs),
-    )
+    let fragmentData = UnionMemberFragment.useOpt(query.member->Option.map(r => r.fragmentRefs))
 
     switch fragmentData {
     | Some(Ok({value: User({id, createdAt})})) =>
@@ -209,7 +207,7 @@ module TestUnionMember = {
           "Got user id: " ++
           id ++
           ", and createdAt: " ++
-          createdAt->Js.Date.toISOString->Js.String2.slice(~from=0, ~to_=10),
+          createdAt->Date.toISOString->String.slice(~start=0, ~end=10),
         )}
       </div>
     | Some(Ok({value: Group({id, name})})) =>

packages/rescript-relay/__tests__/Test_codesplit.res

@@ -32,7 +32,8 @@ module Test = {
       <button
         onClick={_ => {
           setShouldRender(_ => true)
-        }}>
+        }}
+      >
         {React.string("Render")}
       </button>
     | (true, None) => React.string("not found")

packages/rescript-relay/__tests__/Test_connections.res

@@ -120,14 +120,13 @@ module Test = {
   @react.component
   let make = () => {
     let makeDate = () =>
-      Js.Date.makeWithYMDHMS(
-        ~date=1.,
-        ~hours=1.,
-        ~minutes=0.,
-        ~month=0.,
-        ~seconds=0.,
-        ~year=2022.,
-        (),
+      Date.makeWithYMDHMS(
+        ~year=Float.toInt(2022.),
+        ~month=Float.toInt(0.),
+        ~day=Float.toInt(1.),
+        ~hours=Float.toInt(1.),
+        ~minutes=Float.toInt(0.),
+        ~seconds=Float.toInt(0.),
       )
 
     let query = Query.use(
@@ -159,18 +158,20 @@ module Test = {
 
     <div>
       {friends
-      ->Belt.Array.map(friend => <div key=friend.id> {React.string(friend.id)} </div>)
+      ->Array.map(friend => <div key=friend.id> {React.string(friend.id)} </div>)
       ->React.array}
       <button
         onClick={_ => {
           addFriend(false)->RescriptRelay.Disposable.ignore
-        }}>
+        }}
+      >
         {React.string("Add friend")}
       </button>
       <button
         onClick={_ => {
           addFriend(false)->RescriptRelay.Disposable.ignore
-        }}>
+        }}
+      >
         {React.string("Add friend with findAllConnectionIds")}
       </button>
     </div>

packages/rescript-relay/__tests__/Test_customScalars.res

@@ -21,7 +21,7 @@ module Test = {
     let query = {
       Query.use(
         ~variables={
-          beforeDate: Js.Date.fromFloat(1514764800000.),
+          beforeDate: Date.fromTime(1514764800000.),
           number: [2],
         },
       )
@@ -30,14 +30,13 @@ module Test = {
     <>
       <div>
         {React.string(
-          "loggedInUser createdAt: " ++
-          query.loggedInUser.createdAt->Js.Date.getTime->Js.Float.toString,
+          "loggedInUser createdAt: " ++ query.loggedInUser.createdAt->Date.getTime->Float.toString,
         )}
       </div>
       <div>
         {switch query.member {
         | Some(User(user)) =>
-          React.string("member createdAt: " ++ user.createdAt->Js.Date.getTime->Js.Float.toString)
+          React.string("member createdAt: " ++ user.createdAt->Date.getTime->Float.toString)
         | Some(UnselectedUnionMember(_)) | None => React.null
         }}
       </div>

packages/rescript-relay/__tests__/Test_deferredComponent.res

@@ -1,4 +1,4 @@
 module DeferredTest = %relay.deferredComponent(TestDeferredComponent.make)
 
 let jsx = <DeferredTest name="Name" />
-Js.log(jsx)
+Console.log(jsx)

packages/rescript-relay/__tests__/Test_fragment.res

@@ -61,7 +61,7 @@ module TestPlural = {
 
     <div>
       {allUsers
-      ->Belt.Array.map(user =>
+      ->Array.map(user =>
         <div key=user.id>
           {React.string(
             user.firstName ++
@@ -105,7 +105,7 @@ module Test = {
 
     let users = switch query {
     | {users: Some({edges: Some(edges)})} =>
-      edges->Belt.Array.keepMap(edge =>
+      edges->Array.filterMap(edge =>
         switch edge {
         | Some({node: Some(node)}) => Some(node.fragmentRefs)
         | _ => None
@@ -123,7 +123,7 @@ module Test = {
         | _ => "-"
         }),
       )}
-      {switch users->Belt.Array.length {
+      {switch users->Array.length {
       | 0 => React.null
       | _ => <TestPlural users />
       }}
@@ -140,13 +140,14 @@ module Test = {
         <div>
           {("Inline data: " ++
           {"firstName": data.InlineFragment.Types.firstName, "onlineStatus": data.onlineStatus}
-          ->Js.Json.stringifyAny
-          ->Belt.Option.getWithDefault(""))->React.string}
+          ->JSON.stringifyAny
+          ->Option.getOr(""))->React.string}
         </div>
       }}
       <button
         onClick={_ =>
-          setDataViaInline(_ => Some(InlineFragment.readInline(query.loggedInUser.fragmentRefs)))}>
+          setDataViaInline(_ => Some(InlineFragment.readInline(query.loggedInUser.fragmentRefs)))}
+      >
         {React.string("Set data via inline")}
       </button>
     </div>