Make react recipes compatible with try-purescript

recipes/BookReactHooks/src/Main.purs

@@ -13,9 +13,9 @@ import React.Basic.DOM as R
 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 data TextState
@@ -24,24 +24,25 @@ data TextState
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       bookComponent <- mkBookComponent
-      render (bookComponent {}) c
+      render (bookComponent {}) (toElement b)
 
 mkBookComponent :: Component {}
 mkBookComponent = do
   let
     url = "https://elm-lang.org/assets/public-opinion.txt"
   component "Book" \_ -> React.do
-    textState <- useAff unit do
-      result <- Affjax.get ResponseFormat.string url
-      pure case result of
-        Right response
-          | response.status == StatusCode 200 -> Success response.body
-        _ -> Failure
+    textState <-
+      useAff unit do
+        result <- Affjax.get ResponseFormat.string url
+        pure case result of
+          Right response
+            | response.status == StatusCode 200 -> Success response.body
+          _ -> Failure
     pure case textState of
       Nothing -> R.text "Loading..."
       Just Failure -> R.text "I was unable to load your book."

recipes/ButtonsReactHooks/src/Main.purs

@@ -9,19 +9,19 @@ import React.Basic.DOM as R
 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       buttons <- mkButtons
-      render (buttons {}) c
+      render (buttons {}) (toElement b)
 
 mkButtons :: Component {}
 mkButtons = do

recipes/CardsReactHooks/src/Main.purs

@@ -12,19 +12,19 @@ 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       cardsComponent <- mkCardsComponent
-      render (cardsComponent {}) c
+      render (cardsComponent {}) (toElement b)
 
 mkCardsComponent :: Component {}
 mkCardsComponent = do

recipes/CatGifsReactHooks/src/Main.purs

@@ -17,9 +17,9 @@ 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 data GifState
@@ -29,12 +29,12 @@ data GifState
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       catGifs <- mkCatGifs
-      render (catGifs {}) c
+      render (catGifs {}) (toElement b)
 
 mkCatGifs :: Component {}
 mkCatGifs = do

recipes/ClockReactHooks/src/Main.purs

@@ -13,22 +13,22 @@ import React.Basic.DOM (render)
 import React.Basic.DOM.SVG as SVG
 import React.Basic.Hooks (Component, Hook, JSX, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 type Time
   = { hours :: Number, minutes :: Number, seconds :: Number }
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       clock <- mkClock
-      render (clock {}) c
+      render (clock {}) (toElement b)
 
 mkClock :: Component {}
 mkClock = do

recipes/FormsReactHooks/src/Main.purs

@@ -10,19 +10,19 @@ import React.Basic.DOM.Events (preventDefault, targetValue)
 import React.Basic.Events (EventHandler, handler)
 import React.Basic.Hooks (Component, component, useState, (/\), Hook, UseState, type (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       form <- mkForm
-      render (form {}) c
+      render (form {}) (toElement b)
 
 mkForm :: Component {}
 mkForm = do

recipes/GroceriesReactHooks/src/Main.purs

@@ -7,19 +7,19 @@ import Effect.Exception (throw)
 import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.Hooks (Component, component)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
+  body <- body =<< document =<< window
+  case body of
     Nothing -> throw "Root element not found."
-    Just c -> do
+    Just b -> do
       groceries <- mkGroceries
-      render (groceries {}) c
+      render (groceries {}) (toElement b)
 
 mkGroceries :: Component {}
 mkGroceries = do

recipes/HelloReactHooks/src/Main.purs

@@ -7,19 +7,19 @@ import Effect.Exception (throw)
 import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.Hooks (Component, component)
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       helloComponent <- mkHelloComponent
-      render (helloComponent {}) c
+      render (helloComponent {}) (toElement b)
 
 mkHelloComponent :: Component {}
 mkHelloComponent = do

recipes/NumbersReactHooks/src/Main.purs

@@ -10,19 +10,19 @@ import React.Basic.DOM as R
 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       numbers <- mkNumbers
-      render (numbers {}) c
+      render (numbers {}) (toElement b)
 
 mkNumbers :: Component {}
 mkNumbers = do

recipes/PositionsReactHooks/src/Main.purs

@@ -10,19 +10,19 @@ import React.Basic.DOM as R
 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       positions <- mkPositions
-      render (positions {}) c
+      render (positions {}) (toElement b)
 
 mkPositions :: Component {}
 mkPositions = do

recipes/TextFieldsReactHooks/src/Main.purs

@@ -12,19 +12,19 @@ import React.Basic.DOM.Events (targetValue)
 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 (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       textField <- mkTextField
-      render (textField {}) c
+      render (textField {}) (toElement b)
 
 mkTextField :: Component {}
 mkTextField = do

recipes/TimeReactHooks/src/Main.purs

@@ -14,22 +14,22 @@ import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.Hooks (Component, Hook, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
-import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.HTMLDocument (body)
+import Web.HTML.HTMLElement (toElement)
 import Web.HTML.Window (document)
 
 type Time
   = { hours :: Int, minutes :: Int, seconds :: Int }
 
 main :: Effect Unit
 main = do
-  container <- getElementById "root" =<< map toNonElementParentNode (document =<< window)
-  case container of
-    Nothing -> throw "Root element not found."
-    Just c -> do
+  body <- body =<< document =<< window
+  case body of
+    Nothing -> throw "Could not find body."
+    Just b -> do
       time <- mkTime
-      render (time {}) c
+      render (time {}) (toElement b)
 
 mkTime :: Component {}
 mkTime = do