Upgrade to Rescript 11 and several improvements

examples/Async.res

@@ -9,14 +9,14 @@ type user = {
 let getUserMock = (~id) =>
   Js.Promise.make((~resolve, ~reject as _) =>
     switch id {
-    | "" => resolve(. None)
+    | "" => resolve(None)
     | _ =>
       let _ = Js.Global.setTimeout(() =>
-        resolve(.
+        resolve(
           Some({
-            id: id,
+            id,
             username: "User " ++ id,
-            avatar: j`https://avatars.githubusercontent.com/$id?size=64`, //avatars.githubusercontent.com/$id?size=64|j},
+            avatar: `https://avatars.githubusercontent.com/$id?size=64`, //avatars.githubusercontent.com/$id?size=64|j},
           }),
         )
       , 1_000)
@@ -85,11 +85,21 @@ module App = {
   @react.component
   let make = () => <>
     <UserIdPicker />
-    <React.Suspense fallback={"Loading ..."->React.string}> <UserCard /> </React.Suspense>
+    <React.Suspense fallback={"Loading ..."->React.string}>
+      <UserCard />
+    </React.Suspense>
   </>
 }
 
 switch ReactDOM.querySelector("#root") {
-| Some(root) => ReactDOM.render(<Recoil.RecoilRoot> <App /> </Recoil.RecoilRoot>, root)
+| Some(container) => {
+    let root = ReactDOM.Client.createRoot(container)
+    ReactDOM.Client.Root.render(
+      root,
+      <Recoil.RecoilRoot>
+        <App />
+      </Recoil.RecoilRoot>,
+    )
+  }
 | None => ()
 }

examples/Loadable.res

@@ -9,10 +9,10 @@ type user = {
 let getUserMock = (~id) =>
   Js.Promise.make((~resolve, ~reject as _) => {
     let _ = Js.Global.setTimeout(() =>
-      resolve(. {
-        id: id,
+      resolve({
+        id,
         username: "User " ++ id,
-        avatar: j`https://avatars.githubusercontent.com/$id?size=64`, //avatars.githubusercontent.com/$id?size=64|j},
+        avatar: `https://avatars.githubusercontent.com/$id?size=64`, //avatars.githubusercontent.com/$id?size=64|j},
       })
     , 1000)
   })
@@ -69,14 +69,11 @@ module UserCard = {
          * It's actually not needed since data will be fetched
          * when component gets mounted.
          ")
-      (
-        Recoil.Loadable.toPromise(userLoadable)
-        |> Js.Promise.then_(user => {
+      ignore(Js.Promise.then_(user => {
           Js.log(user)
           Js.Promise.resolve()
-        })
-        |> ignore
-      )
+        }, Recoil.Loadable.toPromise(userLoadable)))
+
       None
     }, [userLoadable])
 
@@ -96,10 +93,21 @@ module UserCard = {
 
 module App = {
   @react.component
-  let make = () => <> <UserIdPicker /> <UserCard /> </>
+  let make = () => <>
+    <UserIdPicker />
+    <UserCard />
+  </>
 }
 
 switch ReactDOM.querySelector("#root") {
-| Some(root) => ReactDOM.render(<Recoil.RecoilRoot> <App /> </Recoil.RecoilRoot>, root)
+| Some(container) => {
+    let rootElement = ReactDOM.Client.createRoot(container)
+    ReactDOM.Client.Root.render(
+      rootElement,
+      <Recoil.RecoilRoot>
+        <App />
+      </Recoil.RecoilRoot>,
+    )
+  }
 | None => ()
 }

examples/TodoList.res

@@ -52,10 +52,10 @@ let todoListStatsState = Recoil.selector({
       totalNum === 0 ? 0.0 : totalCompletedNum->Float.fromInt /. totalNum->Float.fromInt
 
     {
-      totalNum: totalNum,
-      totalCompletedNum: totalCompletedNum,
-      totalUncompletedNum: totalUncompletedNum,
-      percentCompleted: percentCompleted,
+      totalNum,
+      totalCompletedNum,
+      totalUncompletedNum,
+      percentCompleted,
     }
   },
 })
@@ -181,19 +181,19 @@ module TodoListStats = {
   @react.component
   let make = () => {
     let {
-      totalNum,
-      totalCompletedNum,
-      totalUncompletedNum,
+      totalNum: _,
+      totalCompletedNum: _,
+      totalUncompletedNum: _,
       percentCompleted,
     } = Recoil.useRecoilValue(todoListStatsState)
 
-    let formattedPercentCompleted = Js.Math.round(percentCompleted *. 100.0)
+    let _formattedPercentCompleted = Js.Math.round(percentCompleted *. 100.0)
 
     <ul>
-      <li> {j`Total items: $totalNum`->React.string} </li>
-      <li> {j`Items completed: $totalCompletedNum`->React.string} </li>
-      <li> {j`Items not completed: $totalUncompletedNum`->React.string} </li>
-      <li> {j`Percent completed: $(formattedPercentCompleted)%`->React.string} </li>
+      <li> {`Total items: $totalNum`->React.string} </li>
+      <li> {`Items completed: $totalCompletedNum`->React.string} </li>
+      <li> {`Items not completed: $totalUncompletedNum`->React.string} </li>
+      <li> {`Percent completed: $(formattedPercentCompleted)%`->React.string} </li>
     </ul>
   }
 }
@@ -207,13 +207,21 @@ module TodoList = {
       <TodoListFilters />
       <TodoItemCreator />
       {todoList
-      ->Array.map(({id} as todoItem) => <TodoItem item=todoItem key=j`$id` />)
+      ->Array.map(({id: _} as todoItem) => <TodoItem item=todoItem key={`$id`} />)
       ->React.array}
     </>
   }
 }
 
 switch ReactDOM.querySelector("#root") {
-| Some(root) => ReactDOM.render(<Recoil.RecoilRoot> <TodoList /> </Recoil.RecoilRoot>, root)
+| Some(container) => {
+    let rootElement = ReactDOM.Client.createRoot(container)
+    ReactDOM.Client.Root.render(
+      rootElement,
+      <Recoil.RecoilRoot>
+        <TodoList />
+      </Recoil.RecoilRoot>,
+    )
+  }
 | None => ()
 }

package.json

@@ -21,18 +21,19 @@
   "author": "bloodyowl <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@rescript/react": "^0.10.1",
+    "@rescript/react": "^0.12.1",
+    "@rescript/core": "^1.1.0",
     "moduleserve": "^0.9.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "recoil": "0.1.2",
-    "rescript": "^9.1.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recoil": "0.7.7",
+    "rescript": "^11.0.1",
     "rescript-test": "^3.0.0"
   },
   "peerDependencies": {
-    "@rescript/react": "^0.10.1",
+    "@rescript/react": "^0.12.1",
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1",
-    "recoil": ">=0.1.1"
+    "recoil": ">=0.7.7"
   }
 }

rescript.json

@@ -0,0 +1,41 @@
+{
+  "name": "rescript-recoil",
+  "version": "3.1.0",
+  "jsx": {
+    "version": 4,
+    "module": "react"
+  },
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    },
+    {
+      "dir": "test",
+      "subdirs": true,
+      "type": "dev"
+    },
+    {
+      "dir": "examples",
+      "subdirs": true,
+      "type": "dev"
+    }
+  ],
+  "package-specs": [
+    {
+      "module": "commonjs",
+      "in-source": true,
+      "suffix": ".bs.js"
+    }
+  ],
+  "bs-dependencies": [
+    "@rescript/react",
+    "@rescript/core"
+  ],
+  "bs-dev-dependencies": [
+    "rescript-test"
+  ],
+  "warnings": {
+    "error": "+101"
+  }
+}