Update 21 react examples to v18

packages.dhall

@@ -1,6 +1,6 @@
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220723/packages.dhall
-        sha256:efb50561d50d0bebe01f8e5ab21cda51662cca0f5548392bafc3216953a0ed88
+      https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220808/packages.dhall
+        sha256:60eee64b04ca0013fae3e02a69fc3b176105c6baa2f31865c67cd5f881a412fd
 
 let overrides = {=}
 

recipes/BookReactHooks/spago.dhall

@@ -10,6 +10,7 @@
   , "react-basic-dom"
   , "react-basic-hooks"
   , "web-html"
+  , "web-dom"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/BookReactHooks/src/**/*.purs" ]

recipes/BookReactHooks/src/Main.purs

@@ -9,14 +9,14 @@ import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, component)
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 data TextState
@@ -25,15 +25,17 @@ data TextState
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      bookComponent <- mkBookComponent
-      render (bookComponent {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkBookComponent :: Component {}
-mkBookComponent = do
+mkApp :: Component {}
+mkApp = do
   let
     url = "https://elm-lang.org/assets/public-opinion.txt"
   component "Book" \_ -> React.do

recipes/ButtonsReactHooks/spago.dhall

@@ -7,6 +7,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall

recipes/ButtonsReactHooks/src/Main.purs

@@ -5,34 +5,34 @@ import Prelude
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      buttons <- mkButtons
-      render (buttons {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkButtons :: Component {}
-mkButtons = do
+mkApp :: Component {}
+mkApp =
   component "Buttons" \_ -> React.do
     count /\ setCount <- useState 0
-    let
-      handleClick = handler_ <<< setCount
-    pure
-      $ R.div_
-          [ R.button { onClick: handleClick (_ - 1), children: [ R.text "-" ] }
-          , R.div_ [ R.text (show count) ]
-          , R.button { onClick: handleClick (_ + 1), children: [ R.text "+" ] }
-          ]
+    let handleClick = handler_ <<< setCount
+    pure $ R.div_
+      [ R.button { onClick: handleClick (_ - 1), children: [ R.text "-" ] }
+      , R.div_ [ R.text (show count) ]
+      , R.button { onClick: handleClick (_ + 1), children: [ R.text "+" ] }
+      ]

recipes/CardsReactHooks/spago.dhall

@@ -9,6 +9,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall

recipes/CardsReactHooks/src/Main.purs

@@ -6,46 +6,46 @@ import Data.Array.NonEmpty (cons')
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (css, render)
+import React.Basic.DOM (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
 import Test.QuickCheck (mkSeed)
 import Test.QuickCheck.Gen (Gen, elements, runGen)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      cardsComponent <- mkCardsComponent
-      render (cardsComponent {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkCardsComponent :: Component {}
-mkCardsComponent = do
-  let
-    initialGenState = { newSeed: mkSeed 3, size: 1 }
+mkApp :: Component {}
+mkApp = do
+  let initialGenState = { newSeed: mkSeed 3, size: 1 }
   component "Cards" \_ -> React.do
     -- "Card state" is a tuple of the card and generator state.
     -- We don't need the actual generator state for rendering, so we're ignoring it with `_`.
     (card /\ _) /\ setCardState <- useState (runGen cardGenerator initialGenState)
     let
-      onClick =
-        handler_ do
-          -- Modify the card generator state by re-running the generator.
-          -- We don't need the card value for this update function, so it is ignored with `_`.
-          setCardState \(_ /\ genState) -> runGen cardGenerator genState
-    pure
-      $ R.div_
-          [ R.button { onClick, children: [ R.text "Draw" ] }
-          , R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
-          ]
+      onClick = handler_ do
+        -- Modify the card generator state by re-running the generator.
+        -- We don't need the card value for this update function, so it is ignored with `_`.
+        setCardState \(_ /\ genState) -> runGen cardGenerator genState
+    pure $ R.div_
+      [ R.button { onClick, children: [ R.text "Draw" ] }
+      , R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
+      ]
 
 data Card
   = Ace
@@ -63,22 +63,21 @@ data Card
   | King
 
 cardGenerator :: Gen Card
-cardGenerator =
-  elements
-    $ cons' Ace
-        [ Two
-        , Three
-        , Four
-        , Five
-        , Six
-        , Seven
-        , Eight
-        , Nine
-        , Ten
-        , Jack
-        , Queen
-        , King
-        ]
+cardGenerator = elements $
+  cons' Ace
+    [ Two
+    , Three
+    , Four
+    , Five
+    , Six
+    , Seven
+    , Eight
+    , Nine
+    , Ten
+    , Jack
+    , Queen
+    , King
+    ]
 
 viewCard :: Card -> String
 viewCard = case _ of

recipes/CatGifsReactHooks/spago.dhall

@@ -12,6 +12,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall

recipes/CatGifsReactHooks/src/Main.purs

@@ -11,16 +11,17 @@ import Data.Maybe (Maybe(..), maybe)
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Exception (throw)
-import React.Basic.DOM (css, render)
+import React.Basic.DOM (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, (/\))
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
 import React.Basic.Hooks.ResetToken (useResetToken)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 data GifState
@@ -30,33 +31,38 @@ data GifState
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      catGifs <- mkCatGifs
-      render (catGifs {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkCatGifs :: Component {}
-mkCatGifs = do
+mkApp :: Component {}
+mkApp = do
   component "CatGifs" \_ -> React.do
     (resetToken /\ reset) <- useResetToken
     gifState <- toGifState <$> useAff resetToken getRandomCatGif
-    let
-      onClick = handler_ reset
+    let onClick = handler_ reset
     pure
       $ R.div_
           [ R.h2_ [ R.text "Random Cats" ]
           , case gifState of
               Loading -> R.text "Loading..."
               Failure ->
                 R.div_
-                  [ R.text "I could not load a random cat for some reason. "
+                  [ R.text "I could not load a random cat for some reason."
                   , R.button { onClick, children: [ R.text "Try Again!" ] }
                   ]
               Success url ->
                 R.div_
-                  [ R.button { onClick, style: css { display: "block" }, children: [ R.text "More Please!" ] }
+                  [ R.button
+                      { onClick
+                      , style: css { display: "block" }
+                      , children: [ R.text "More Please!" ]
+                      }
                   , R.img { src: url }
                   ]
           ]
@@ -74,4 +80,10 @@ getRandomCatGif = do
   pure do
     -- Using `hush` to ignore the possible error messages
     { body } <- hush response
-    hush (decodeJson body >>= (_ .: "data") >>= (_ .: "images") >>= (_ .: "downsized") >>= (_ .: "url"))
+    hush
+      ( decodeJson body
+          >>= (_ .: "data")
+          >>= (_ .: "images")
+          >>= (_ .: "downsized")
+          >>= (_ .: "url")
+      )

recipes/ClockReactHooks/spago.dhall

@@ -10,6 +10,7 @@
   , "prelude"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall