From 7076c497639665bb6e83ca141d493095d3b0d27a Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:11:54 +0200 Subject: [PATCH 01/22] Update package-set (same as try.purescript.org) See --- packages.dhall | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages.dhall b/packages.dhall index d6322c23..59908179 100644 --- a/packages.dhall +++ b/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 = {=} From e70d9045915c8848d8066c95a134f4b0381058c3 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:13:15 +0200 Subject: [PATCH 02/22] Update BookReactHooks --- recipes/BookReactHooks/spago.dhall | 1 + recipes/BookReactHooks/src/Main.purs | 24 +++++++++++++----------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/recipes/BookReactHooks/spago.dhall b/recipes/BookReactHooks/spago.dhall index 952b53b3..7d813d66 100644 --- a/recipes/BookReactHooks/spago.dhall +++ b/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" ] diff --git a/recipes/BookReactHooks/src/Main.purs b/recipes/BookReactHooks/src/Main.purs index 8078384a..35c6e229 100644 --- a/recipes/BookReactHooks/src/Main.purs +++ b/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 From fcd8502d7f74525982eb798474afd4d606abc6b2 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:19:48 +0200 Subject: [PATCH 03/22] Update ButtonsReactHooks --- recipes/ButtonsReactHooks/spago.dhall | 1 + recipes/ButtonsReactHooks/src/Main.purs | 38 ++++++++++++------------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/recipes/ButtonsReactHooks/spago.dhall b/recipes/ButtonsReactHooks/spago.dhall index f54a2e32..0e118838 100644 --- a/recipes/ButtonsReactHooks/spago.dhall +++ b/recipes/ButtonsReactHooks/spago.dhall @@ -7,6 +7,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/ButtonsReactHooks/src/Main.purs b/recipes/ButtonsReactHooks/src/Main.purs index b660491a..b989160b 100644 --- a/recipes/ButtonsReactHooks/src/Main.purs +++ b/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 "+" ] } + ] From 6fa6fef29d26cf150d828c94624ad65cc2b2c2c0 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:22:33 +0200 Subject: [PATCH 04/22] Update CardsReactHooks --- recipes/CardsReactHooks/spago.dhall | 1 + recipes/CardsReactHooks/src/Main.purs | 77 +++++++++++++-------------- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/recipes/CardsReactHooks/spago.dhall b/recipes/CardsReactHooks/spago.dhall index 7803a897..0906a9a7 100644 --- a/recipes/CardsReactHooks/spago.dhall +++ b/recipes/CardsReactHooks/spago.dhall @@ -9,6 +9,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/CardsReactHooks/src/Main.purs b/recipes/CardsReactHooks/src/Main.purs index 8d9d63f0..b794cc56 100644 --- a/recipes/CardsReactHooks/src/Main.purs +++ b/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 From 224069a721b809d0a6aad320b1b21b7245c77bff Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:31:12 +0200 Subject: [PATCH 05/22] Update CatGifsReactHooks --- recipes/CatGifsReactHooks/spago.dhall | 1 + recipes/CatGifsReactHooks/src/Main.purs | 44 ++++++++++++++++--------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/recipes/CatGifsReactHooks/spago.dhall b/recipes/CatGifsReactHooks/spago.dhall index 7fcf937f..df2a9d99 100644 --- a/recipes/CatGifsReactHooks/spago.dhall +++ b/recipes/CatGifsReactHooks/spago.dhall @@ -12,6 +12,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/CatGifsReactHooks/src/Main.purs b/recipes/CatGifsReactHooks/src/Main.purs index e3e8e93a..56b04ef8 100644 --- a/recipes/CatGifsReactHooks/src/Main.purs +++ b/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,20 +31,21 @@ 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" ] @@ -51,12 +53,16 @@ mkCatGifs = do 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") + ) From 7091c8bbaa6a0f5e8f4da5047acbd87cb518452c Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:35:28 +0200 Subject: [PATCH 06/22] Update ClockReactHooks --- recipes/ClockReactHooks/spago.dhall | 1 + recipes/ClockReactHooks/src/Main.purs | 51 +++++++++++++-------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/recipes/ClockReactHooks/spago.dhall b/recipes/ClockReactHooks/spago.dhall index 5ac767d1..27da9a5c 100644 --- a/recipes/ClockReactHooks/spago.dhall +++ b/recipes/ClockReactHooks/spago.dhall @@ -10,6 +10,7 @@ , "prelude" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/ClockReactHooks/src/Main.purs b/recipes/ClockReactHooks/src/Main.purs index 7a6e033d..693be70b 100644 --- a/recipes/ClockReactHooks/src/Main.purs +++ b/recipes/ClockReactHooks/src/Main.purs @@ -10,51 +10,50 @@ import Data.Number (cos, sin, tau) import Effect (Effect) import Effect.Exception (throw) import Effect.Timer (clearInterval, setInterval) -import React.Basic.DOM (render) +import React.Basic.DOM.Client (createRoot, renderRoot) 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 (body) -import Web.HTML.HTMLElement (toElement) +import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.Window (document) type Time = { hours :: Number, minutes :: Number, seconds :: Number } main :: Effect Unit main = do - body <- body =<< document =<< window - case body of - Nothing -> throw "Could not find body." - Just b -> do - clock <- mkClock - render (clock {}) (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 {}) -mkClock :: Component {} -mkClock = do +mkApp :: Component {} +mkApp = do now <- JSDate.now >>= getTime component "Clock" \_ -> React.do { hours, minutes, seconds } <- useCurrentTime now - pure - $ SVG.svg - { viewBox: "0 0 400 400" - , width: "400" - , height: "400" - , children: - [ SVG.circle { cx: "200", cy: "200", r: "120", fill: "#1293D8" } - , hand 6 60.0 (hours / 12.0) - , hand 6 90.0 (minutes / 60.0) - , hand 3 90.0 (seconds / 60.0) - ] - } + pure $ SVG.svg + { viewBox: "0 0 400 400" + , width: "400" + , height: "400" + , children: + [ SVG.circle { cx: "200", cy: "200", r: "120", fill: "#1293D8" } + , hand 6 60.0 (hours / 12.0) + , hand 6 90.0 (minutes / 60.0) + , hand 3 90.0 (seconds / 60.0) + ] + } hand :: Int -> Number -> Number -> JSX hand width length turns = let t = tau * (turns - 0.25) - x = 200.0 + length * cos t - y = 200.0 + length * sin t in SVG.line @@ -69,7 +68,7 @@ hand width length turns = newtype UseCurrentTime hooks = UseCurrentTime (UseEffect Unit (UseState Time hooks)) -derive instance ntUseCurrentTime :: Newtype (UseCurrentTime hooks) _ +derive instance Newtype (UseCurrentTime hooks) _ useCurrentTime :: Time -> Hook UseCurrentTime Time useCurrentTime initialTime = From f6fb2cc5fb03dc82d2b73ffb71e60e7fd175b0f5 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:39:55 +0200 Subject: [PATCH 07/22] Update ComponentsInputReactHooks --- recipes/ComponentsInputReactHooks/spago.dhall | 1 + .../ComponentsInputReactHooks/src/Main.purs | 83 +++++++++---------- 2 files changed, 39 insertions(+), 45 deletions(-) diff --git a/recipes/ComponentsInputReactHooks/spago.dhall b/recipes/ComponentsInputReactHooks/spago.dhall index af54add0..3e0277c7 100644 --- a/recipes/ComponentsInputReactHooks/spago.dhall +++ b/recipes/ComponentsInputReactHooks/spago.dhall @@ -7,6 +7,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/ComponentsInputReactHooks/src/Main.purs b/recipes/ComponentsInputReactHooks/src/Main.purs index dc8dd8f4..5e8be53e 100644 --- a/recipes/ComponentsInputReactHooks/src/Main.purs +++ b/recipes/ComponentsInputReactHooks/src/Main.purs @@ -6,63 +6,57 @@ import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Exception (throw) import Effect.Unsafe (unsafePerformEffect) -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 - , Render - , UseEffect - , UseRef - , component - , readRef - , useEffectAlways - , useRef - , useState - , writeRef - , (/\) - ) +import React.Basic.Hooks (Component, Render, UseEffect, UseRef, component, readRef, useEffectAlways, useRef, useState, writeRef, (/\)) 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 - container <- mkContainer - render (container unit) (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 {}) -mkContainer :: Component Unit -mkContainer = do +mkApp :: Component {} +mkApp = do display <- mkDisplay component "Container" \_ -> React.do parentRenders <- useRenderCount state /\ setState <- useState 0 - pure - $ R.div_ - [ R.ul_ - [ display state - , display (state * 2) - , display (state * 3) - , display (state * 10) - , display (state * state) - ] - , R.button - { onClick: handler_ (setState (_ + 1)) - , children: [ R.text "+1" ] - } - , R.button - { onClick: handler_ (setState (_ - 1)) - , children: [ R.text "-1" ] - } - , R.p_ - [ R.text ("Parent has been rendered " <> show parentRenders <> " time(s)") ] + pure $ R.div_ + [ R.ul_ + [ display state + , display (state * 2) + , display (state * 3) + , display (state * 10) + , display (state * state) + ] + , R.button + { onClick: handler_ (setState (_ + 1)) + , children: [ R.text "+1" ] + } + , R.button + { onClick: handler_ (setState (_ - 1)) + , children: [ R.text "-1" ] + } + , R.p_ + [ R.text + ( "Parent has been rendered " + <> show parentRenders + <> " time(s)" + ) ] + ] mkDisplay :: Component Int mkDisplay = @@ -80,6 +74,5 @@ useRenderCount = React.do renders <- readRef rendersRef writeRef rendersRef (renders + 1) pure mempty - let - renders = unsafePerformEffect (readRef rendersRef) + let renders = unsafePerformEffect (readRef rendersRef) pure renders From a483d469094b09998bf03bb8941e79a7c9af42d6 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 19:45:33 +0200 Subject: [PATCH 08/22] Update ComponentsMultiTypeReactHooks --- .../ComponentsMultiTypeReactHooks/spago.dhall | 1 + .../src/Main.purs | 48 +++++++------------ 2 files changed, 17 insertions(+), 32 deletions(-) diff --git a/recipes/ComponentsMultiTypeReactHooks/spago.dhall b/recipes/ComponentsMultiTypeReactHooks/spago.dhall index 345595c0..833f1e1f 100644 --- a/recipes/ComponentsMultiTypeReactHooks/spago.dhall +++ b/recipes/ComponentsMultiTypeReactHooks/spago.dhall @@ -8,6 +8,7 @@ , "react-basic-dom" , "react-basic-hooks" , "tuples" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/ComponentsMultiTypeReactHooks/src/Main.purs b/recipes/ComponentsMultiTypeReactHooks/src/Main.purs index 1f930a56..65d59f6e 100644 --- a/recipes/ComponentsMultiTypeReactHooks/src/Main.purs +++ b/recipes/ComponentsMultiTypeReactHooks/src/Main.purs @@ -7,44 +7,30 @@ import Data.Tuple (fst) import Effect (Effect) import Effect.Exception (throw) import Effect.Unsafe (unsafePerformEffect) -import React.Basic.DOM (render) import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.DOM.Events (targetValue) import React.Basic.Events (EventHandler, handler, handler_) -import React.Basic.Hooks - ( type (/\) - , Component - , Hook - , Render - , UseEffect - , UseRef - , UseState - , component - , readRef - , useEffectAlways - , useRef - , useState - , useState' - , writeRef - , (/\) - ) +import React.Basic.Hooks (type (/\), Component, Hook, Render, UseEffect, UseRef, UseState, component, readRef, useEffectAlways, useRef, useState, useState', writeRef, (/\)) 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 - container <- mkContainer - render (container unit) (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 {}) -mkContainer :: Component Unit -mkContainer = do +mkApp :: Component {} +mkApp = do componentA <- mkComponentA componentB <- mkComponentB componentC <- mkComponentC @@ -140,8 +126,7 @@ mkComponentC = useInput :: String -> Hook (UseState String) (String /\ EventHandler) useInput initialValue = React.do state /\ setState <- useState' initialValue - let - onChange = handler targetValue \t -> setState (fromMaybe "" t) + let onChange = handler targetValue \t -> setState (fromMaybe "" t) pure (state /\ onChange) useRenderCount :: forall a. Render a (UseEffect Unit (UseRef Int a)) Int @@ -151,6 +136,5 @@ useRenderCount = React.do renders <- readRef rendersRef writeRef rendersRef (renders + 1) pure mempty - let - renders = unsafePerformEffect (readRef rendersRef) + let renders = unsafePerformEffect (readRef rendersRef) pure renders From 1abf4f59c7d5d9cb72abebe7ff70a4d14b59b4f7 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:00:53 +0200 Subject: [PATCH 09/22] Update ComponentsReactHooks --- recipes/ComponentsReactHooks/spago.dhall | 1 + recipes/ComponentsReactHooks/src/Main.purs | 51 ++++++++-------------- 2 files changed, 20 insertions(+), 32 deletions(-) diff --git a/recipes/ComponentsReactHooks/spago.dhall b/recipes/ComponentsReactHooks/spago.dhall index 483bcf6c..936be463 100644 --- a/recipes/ComponentsReactHooks/spago.dhall +++ b/recipes/ComponentsReactHooks/spago.dhall @@ -7,6 +7,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/ComponentsReactHooks/src/Main.purs b/recipes/ComponentsReactHooks/src/Main.purs index 1e41444f..39f58acf 100644 --- a/recipes/ComponentsReactHooks/src/Main.purs +++ b/recipes/ComponentsReactHooks/src/Main.purs @@ -6,39 +6,29 @@ import Data.Maybe (Maybe(..), maybe) import Effect (Effect) import Effect.Exception (throw) import Effect.Unsafe (unsafePerformEffect) -import React.Basic.DOM (render) import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.Events (EventHandler, handler_) -import React.Basic.Hooks - ( Component - , Render - , UseEffect - , UseRef - , component - , readRef - , useEffectAlways - , useRef - , useState - , writeRef - , (/\) - ) +import React.Basic.Hooks (Component, Render, UseEffect, UseRef, component, readRef, useEffectAlways, useRef, useState, writeRef, (/\)) 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 - container <- mkContainer - render (container unit) (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 {}) -mkContainer :: Component Unit -mkContainer = do +mkApp :: Component {} +mkApp = do button <- mkButton component "Container" \_ -> React.do parentRenders <- useRenderCount @@ -46,10 +36,9 @@ mkContainer = do enabled /\ setEnabled <- useState false buttonState /\ setButtonState <- useState Nothing let - handleClick = - handler_ do - setCount (_ + 1) - setEnabled not + handleClick = handler_ do + setCount (_ + 1) + setEnabled not pure $ R.div_ [ button { enabled, handleClick } @@ -72,8 +61,7 @@ mkContainer = do mkButton :: Component { enabled :: Boolean, handleClick :: EventHandler } mkButton = component "Button" \props -> React.do - let - label = if props.enabled then "On" else "Off" + let label = if props.enabled then "On" else "Off" pure $ R.button { title: label @@ -88,6 +76,5 @@ useRenderCount = React.do renders <- readRef rendersRef writeRef rendersRef (renders + 1) pure mempty - let - renders = unsafePerformEffect (readRef rendersRef) + let renders = unsafePerformEffect (readRef rendersRef) pure renders From e3444600ea1038196939bb93f5366cd18bc2def9 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:04:24 +0200 Subject: [PATCH 10/22] Update DragAndDropReactHooks --- recipes/DragAndDropReactHooks/spago.dhall | 1 + recipes/DragAndDropReactHooks/src/Main.purs | 172 ++++++++++---------- 2 files changed, 89 insertions(+), 84 deletions(-) diff --git a/recipes/DragAndDropReactHooks/spago.dhall b/recipes/DragAndDropReactHooks/spago.dhall index e21e85fe..8b0782d4 100644 --- a/recipes/DragAndDropReactHooks/spago.dhall +++ b/recipes/DragAndDropReactHooks/spago.dhall @@ -9,6 +9,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-file" , "web-html" ] diff --git a/recipes/DragAndDropReactHooks/src/Main.purs b/recipes/DragAndDropReactHooks/src/Main.purs index 90818794..e6c7b6a2 100644 --- a/recipes/DragAndDropReactHooks/src/Main.purs +++ b/recipes/DragAndDropReactHooks/src/Main.purs @@ -6,104 +6,108 @@ import Data.Foldable as Foldable import Data.Maybe (Maybe(..)) import Data.Nullable as Nullable import Effect (Effect) -import Effect.Exception as Exception +import Effect.Exception (throw) import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.DOM.Events as DOM.Events import React.Basic.Events as Events import React.Basic.Hooks (Component, (/\)) import React.Basic.Hooks as React +import Web.DOM.NonElementParentNode (getElementById) import Web.File.File as File import Web.File.FileList as FileList -import Web.HTML as HTML +import Web.HTML (window) import Web.HTML.Event.DataTransfer as DataTransfer import Web.HTML.Event.DragEvent as DragEvent -import Web.HTML.HTMLDocument as HTMLDocument +import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.HTMLElement as HTMLElement import Web.HTML.HTMLInputElement as HTMLInputElement -import Web.HTML.Window as Window +import Web.HTML.Window (document) main :: Effect Unit main = do - maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window - case maybeBody of - Nothing -> Exception.throw "Could not find body." - Just body -> do + 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 - R.render (app unit) (HTMLElement.toElement body) + renderRoot reactRoot (app {}) -mkApp :: Component Unit -mkApp = do - React.component "App" \_ -> React.do - hover /\ setHover <- React.useState' false - files /\ setFiles <- React.useState [] - fileInputRef <- React.useRef Nullable.null - let - onButtonClick = - Events.handler_ do - maybeNode <- React.readRefMaybe fileInputRef - Foldable.for_ (HTMLElement.fromNode =<< maybeNode) \htmlElement -> do - HTMLElement.click htmlElement - pure - $ R.div - { style: - R.css - { display: "flex" - , flexDirection: "column" - , alignItems: "center" - , justifyContent: "center" - , margin: "min(8rem, calc(50vh - 6rem)) auto" - , borderRadius: "1rem" - , inlineSize: "32rem" - , blockSize: "12rem" - , borderWidth: "0.4rem" - , borderStyle: "dashed" - , borderColor: if hover then "purple" else "lightgray" +mkApp :: Component {} +mkApp = React.component "App" \_ -> React.do + hover /\ setHover <- React.useState' false + files /\ setFiles <- React.useState [] + fileInputRef <- React.useRef Nullable.null + let + onButtonClick = + Events.handler_ do + maybeNode <- React.readRefMaybe fileInputRef + Foldable.for_ (HTMLElement.fromNode =<< maybeNode) \htmlElement -> do + HTMLElement.click htmlElement + pure + $ R.div + { style: + R.css + { display: "flex" + , flexDirection: "column" + , alignItems: "center" + , justifyContent: "center" + , margin: "min(8rem, calc(50vh - 6rem)) auto" + , borderRadius: "1rem" + , inlineSize: "32rem" + , blockSize: "12rem" + , borderWidth: "0.4rem" + , borderStyle: "dashed" + , borderColor: if hover then "purple" else "lightgray" + } + , onDragEnter: + Events.handler_ do + setHover true + , onDragLeave: + Events.handler_ do + setHover false + , onDragOver: + Events.handler DOM.Events.preventDefault \_ -> do + setHover true + , onDrop: + Events.handler (DOM.Events.preventDefault >>> DOM.Events.nativeEvent) \e -> do + setHover false + let + maybeFileList = DataTransfer.files + =<< DragEvent.dataTransfer <$> DragEvent.fromEvent e + Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>)) + , children: + [ R.button + { onClick: onButtonClick + , children: [ R.text "Upload Images" ] } - , onDragEnter: - Events.handler_ do - setHover true - , onDragLeave: - Events.handler_ do - setHover false - , onDragOver: - Events.handler DOM.Events.preventDefault \_ -> do - setHover true - , onDrop: - Events.handler (DOM.Events.preventDefault >>> DOM.Events.nativeEvent) \e -> do - setHover false - let - maybeFileList = DataTransfer.files =<< DragEvent.dataTransfer <$> DragEvent.fromEvent e - Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>)) - , children: - [ R.button - { onClick: onButtonClick - , children: [ R.text "Upload Images" ] - } - , R.input - { ref: fileInputRef - , hidden: true - , type: "file" - , multiple: true - , accept: "image/*" - , onChange: - Events.handler DOM.Events.currentTarget \target -> - Foldable.for_ (HTMLInputElement.fromEventTarget target) \fileInput -> do - maybeFileList <- HTMLInputElement.files fileInput - Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>)) - } - , R.pre - { style: - R.css - { color: "gray" - , whiteSpace: "break-spaces" - , textAlign: "center" - , overflow: "hidden" - , textOverflow: "ellipsis" - , inlineSize: "100%" - } - , children: - [ R.text (show { hover, files: File.name <$> files }) - ] - } - ] - } + , R.input + { ref: fileInputRef + , hidden: true + , type: "file" + , multiple: true + , accept: "image/*" + , onChange: + Events.handler DOM.Events.currentTarget \target -> + Foldable.for_ (HTMLInputElement.fromEventTarget target) \fileInput -> do + maybeFileList <- HTMLInputElement.files fileInput + Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>)) + } + , R.pre + { style: + R.css + { color: "gray" + , whiteSpace: "break-spaces" + , textAlign: "center" + , overflow: "hidden" + , textOverflow: "ellipsis" + , inlineSize: "100%" + } + , children: + [ R.text (show { hover, files: File.name <$> files }) + ] + } + ] + } From 68f5b43963e24d0379c8c29954d1a46f6726cffa Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:06:48 +0200 Subject: [PATCH 11/22] Update FileUploadReactHooks --- recipes/FileUploadReactHooks/spago.dhall | 1 + recipes/FileUploadReactHooks/src/Main.purs | 24 ++++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/recipes/FileUploadReactHooks/spago.dhall b/recipes/FileUploadReactHooks/spago.dhall index d6c84a70..e9d655e8 100644 --- a/recipes/FileUploadReactHooks/spago.dhall +++ b/recipes/FileUploadReactHooks/spago.dhall @@ -8,6 +8,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-file" , "web-html" ] diff --git a/recipes/FileUploadReactHooks/src/Main.purs b/recipes/FileUploadReactHooks/src/Main.purs index 2a348457..31280ec6 100644 --- a/recipes/FileUploadReactHooks/src/Main.purs +++ b/recipes/FileUploadReactHooks/src/Main.purs @@ -6,31 +6,33 @@ import Data.Foldable (for_) 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.DOM.Events (currentTarget) import React.Basic.Events (handler) import React.Basic.Hooks (Component, component, fragment, useState', (/\)) import React.Basic.Hooks as React +import Web.DOM.NonElementParentNode (getElementById) import Web.File.File as File import Web.File.FileList as FileList import Web.HTML (window) -import Web.HTML.HTMLDocument (body) -import Web.HTML.HTMLElement (toElement) +import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.HTMLInputElement as HTMLInputElement 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 - fileUploadComponent <- mkFileUploadComponent - render (fileUploadComponent {}) (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 {}) -mkFileUploadComponent :: Component {} -mkFileUploadComponent = do +mkApp :: Component {} +mkApp = do component "FileUploadComponent" \_ -> React.do fileList /\ setFileList <- useState' [] let From 552f4b5edb49b93c8c878898c8fe0244c13f8f81 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:09:12 +0200 Subject: [PATCH 12/22] Update FormsReactHooks --- recipes/FormsReactHooks/spago.dhall | 1 + recipes/FormsReactHooks/src/Main.purs | 101 +++++++++++++------------- 2 files changed, 50 insertions(+), 52 deletions(-) diff --git a/recipes/FormsReactHooks/spago.dhall b/recipes/FormsReactHooks/spago.dhall index e45c610a..4b0dba79 100644 --- a/recipes/FormsReactHooks/spago.dhall +++ b/recipes/FormsReactHooks/spago.dhall @@ -7,6 +7,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/FormsReactHooks/src/Main.purs b/recipes/FormsReactHooks/src/Main.purs index 0d5f62aa..2d76cba5 100644 --- a/recipes/FormsReactHooks/src/Main.purs +++ b/recipes/FormsReactHooks/src/Main.purs @@ -5,70 +5,67 @@ import Prelude import Data.Maybe (Maybe(..), fromMaybe) 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.DOM.Events (preventDefault, targetValue) import React.Basic.Events (EventHandler, handler) import React.Basic.Hooks (type (/\), Component, Hook, UseState, 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 - form <- mkForm - render (form {}) (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 {}) -mkForm :: Component {} -mkForm = do - component "Form" \_ -> React.do - name /\ onNameChange <- useInput "" - password /\ onPasswordChange <- useInput "" - passwordAgain /\ onPasswordAgainChange <- useInput "" - let - renderValidation = - if password == passwordAgain then - R.div { style: css { color: "green" }, children: [ R.text "OK" ] } - else - R.div { style: css { color: "red" }, children: [ R.text "Passwords do not match!" ] } - pure - $ R.form - { onSubmit: handler preventDefault mempty - , children: - [ R.input - { placeholder: "Name" - , value: name - , onChange: onNameChange - } - , R.input - { type: "password" - , placeholder: "Password" - , value: password - , onChange: onPasswordChange - } - , R.input - { type: "password" - , placeholder: "Re-enter Password" - , value: passwordAgain - , onChange: onPasswordAgainChange - } - , renderValidation - ] - } +mkApp :: Component {} +mkApp = component "Form" \_ -> React.do + name /\ onNameChange <- useInput "" + password /\ onPasswordChange <- useInput "" + passwordAgain /\ onPasswordAgainChange <- useInput "" + let + renderValidation = + if password == passwordAgain then + R.div { style: css { color: "green" }, children: [ R.text "OK" ] } + else + R.div { style: css { color: "red" }, children: [ R.text "Passwords do not match!" ] } + pure + $ R.form + { onSubmit: handler preventDefault mempty + , children: + [ R.input + { placeholder: "Name" + , value: name + , onChange: onNameChange + } + , R.input + { type: "password" + , placeholder: "Password" + , value: password + , onChange: onPasswordChange + } + , R.input + { type: "password" + , placeholder: "Re-enter Password" + , value: passwordAgain + , onChange: onPasswordAgainChange + } + , renderValidation + ] + } -useInput - :: String - -> Hook - (UseState String) - (String /\ EventHandler) +useInput :: String -> Hook (UseState String) (String /\ EventHandler) useInput initialValue = React.do value /\ setValue <- useState initialValue - let - onChange = handler targetValue (setValue <<< const <<< fromMaybe "") + let onChange = handler targetValue (setValue <<< const <<< fromMaybe "") pure (value /\ onChange) From 3016c3f4e9477397522e979fd4ff0f84e66d232e Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:11:23 +0200 Subject: [PATCH 13/22] Update GroceriesReactHooks --- recipes/GroceriesReactHooks/spago.dhall | 1 + recipes/GroceriesReactHooks/src/Main.purs | 56 ++++++++++++----------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/recipes/GroceriesReactHooks/spago.dhall b/recipes/GroceriesReactHooks/spago.dhall index 2a8be941..8fb32168 100644 --- a/recipes/GroceriesReactHooks/spago.dhall +++ b/recipes/GroceriesReactHooks/spago.dhall @@ -6,6 +6,7 @@ , "prelude" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/GroceriesReactHooks/src/Main.purs b/recipes/GroceriesReactHooks/src/Main.purs index 8b54407c..08189b39 100644 --- a/recipes/GroceriesReactHooks/src/Main.purs +++ b/recipes/GroceriesReactHooks/src/Main.purs @@ -5,37 +5,39 @@ import Prelude import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Exception (throw) -import React.Basic.DOM (div_, h1_, li_, render, text, ul_) +import React.Basic.DOM (div_, h1_, li_, text, ul_) +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.Hooks (Component, component) +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 "Root element not found." - Just b -> do - groceries <- mkGroceries - render (groceries {}) (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 {}) -mkGroceries :: Component {} -mkGroceries = do - component "Groceries" \_ -> React.do - pure - $ div_ - [ h1_ [ text "My Grocery List" ] - , ul_ - [ li_ [ text "Black Beans" ] - , li_ [ text "Limes" ] - , li_ [ text "Greek Yogurt" ] - , li_ [ text "Cilantro" ] - , li_ [ text "Honey" ] - , li_ [ text "Sweet Potatoes" ] - , li_ [ text "Cumin" ] - , li_ [ text "Chili Powder" ] - , li_ [ text "Quinoa" ] - ] - ] +mkApp :: Component {} +mkApp = component "Groceries" \_ -> React.do + pure + $ div_ + [ h1_ [ text "My Grocery List" ] + , ul_ + [ li_ [ text "Black Beans" ] + , li_ [ text "Limes" ] + , li_ [ text "Greek Yogurt" ] + , li_ [ text "Cilantro" ] + , li_ [ text "Honey" ] + , li_ [ text "Sweet Potatoes" ] + , li_ [ text "Cumin" ] + , li_ [ text "Chili Powder" ] + , li_ [ text "Quinoa" ] + ] + ] From e3132a1e88ea6d5a3774c4695e1468455b13fb44 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:18:06 +0200 Subject: [PATCH 14/22] Update ImagePreviewsHalogenHooks --- recipes/ImagePreviewsReactHooks/spago.dhall | 1 + recipes/ImagePreviewsReactHooks/src/Main.purs | 30 ++++++++++--------- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/recipes/ImagePreviewsReactHooks/spago.dhall b/recipes/ImagePreviewsReactHooks/spago.dhall index 3a612999..bfe7d52d 100644 --- a/recipes/ImagePreviewsReactHooks/spago.dhall +++ b/recipes/ImagePreviewsReactHooks/spago.dhall @@ -11,6 +11,7 @@ , "react-basic-dom" , "react-basic-hooks" , "unsafe-coerce" + , "web-dom" , "web-file" , "web-html" ] diff --git a/recipes/ImagePreviewsReactHooks/src/Main.purs b/recipes/ImagePreviewsReactHooks/src/Main.purs index 9a70ad04..11180560 100644 --- a/recipes/ImagePreviewsReactHooks/src/Main.purs +++ b/recipes/ImagePreviewsReactHooks/src/Main.purs @@ -8,37 +8,41 @@ import Data.Maybe (Maybe(..)) import Data.Nullable as Nullable import Data.Traversable as Traversable import Effect (Effect) -import Effect.Exception as Exception +import Effect.Exception (throw) import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.DOM.Events as DOM.Events import React.Basic.Events (SyntheticEvent) import React.Basic.Events as Events import React.Basic.Hooks (Component, (/\)) import React.Basic.Hooks as React import Unsafe.Coerce as Coerce +import Web.DOM.NonElementParentNode (getElementById) import Web.File.File as File import Web.File.FileList (FileList) import Web.File.FileList as FileList import Web.File.Url as Url -import Web.HTML as HTML +import Web.HTML (window) import Web.HTML.Event.DataTransfer as DataTransfer import Web.HTML.Event.DragEvent (DragEvent) import Web.HTML.Event.DragEvent as DragEvent -import Web.HTML.HTMLDocument as HTMLDocument +import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.HTMLElement as HTMLElement import Web.HTML.HTMLInputElement as HTMLInputElement -import Web.HTML.Window as Window +import Web.HTML.Window (document) main :: Effect Unit main = do - maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window - case maybeBody of - Nothing -> Exception.throw "Could not find body." - Just body -> do + 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 - R.render (app unit) (HTMLElement.toElement body) + renderRoot reactRoot (app {}) -mkApp :: Component Unit +mkApp :: Component {} mkApp = do image <- mkImage React.component "App" \_ -> React.do @@ -89,8 +93,7 @@ mkApp = do , onDrop: Events.handler DOM.Events.preventDefault \e -> do setHover false - let - maybeFileList = DataTransfer.files (DragEvent.dataTransfer (toDragEvent e)) + let maybeFileList = DataTransfer.files (DragEvent.dataTransfer (toDragEvent e)) handleFiles maybeFileList , children: [ R.button @@ -139,8 +142,7 @@ mkImage = do , children: [ R.img { src: url - , style: - R.css { inlineSize: "100%" } + , style: R.css { inlineSize: "100%" } } ] } From b0b1e4231abc405a8ea0a6ebab46d70d7b062335 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:20:29 +0200 Subject: [PATCH 15/22] Update NumbersReactHooks --- recipes/NumbersReactHooks/spago.dhall | 1 + recipes/NumbersReactHooks/src/Main.purs | 24 +++++++++++++----------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/recipes/NumbersReactHooks/spago.dhall b/recipes/NumbersReactHooks/spago.dhall index 03e9c9c9..b3894f10 100644 --- a/recipes/NumbersReactHooks/spago.dhall +++ b/recipes/NumbersReactHooks/spago.dhall @@ -8,6 +8,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/NumbersReactHooks/src/Main.purs b/recipes/NumbersReactHooks/src/Main.purs index 2ca29dba..7e8ee8f1 100644 --- a/recipes/NumbersReactHooks/src/Main.purs +++ b/recipes/NumbersReactHooks/src/Main.purs @@ -6,27 +6,29 @@ import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Exception (throw) import Effect.Random (randomInt) -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 - numbers <- mkNumbers - render (numbers {}) (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 {}) -mkNumbers :: Component {} -mkNumbers = do +mkApp :: Component {} +mkApp = component "Numbers" \_ -> React.do roll /\ setRoll <- useState' 1 let From 412c4146eac690f37ae782d58cb3c34e887df36f Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:22:36 +0200 Subject: [PATCH 16/22] Update PositionsReactHooks --- recipes/PositionsReactHooks/spago.dhall | 1 + recipes/PositionsReactHooks/src/Main.purs | 25 +++++++++++++---------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/recipes/PositionsReactHooks/spago.dhall b/recipes/PositionsReactHooks/spago.dhall index b60a2264..c78c3b82 100644 --- a/recipes/PositionsReactHooks/spago.dhall +++ b/recipes/PositionsReactHooks/spago.dhall @@ -8,6 +8,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/PositionsReactHooks/src/Main.purs b/recipes/PositionsReactHooks/src/Main.purs index fe9f790d..48fad1f8 100644 --- a/recipes/PositionsReactHooks/src/Main.purs +++ b/recipes/PositionsReactHooks/src/Main.purs @@ -6,27 +6,30 @@ import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Exception (throw) import Effect.Random (randomInt) -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 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 - positions <- mkPositions - render (positions {}) (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 {}) -mkPositions :: Component {} -mkPositions = do +mkApp :: Component {} +mkApp = component "Positions" \_ -> React.do { x, y } /\ setPosition <- useState' { x: 100, y: 100 } let From 5efe2a9f528f108cfb5d5cbcd0def312781cd5e3 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:27:14 +0200 Subject: [PATCH 17/22] Update RoutingHashReactHooks --- recipes/RoutingHashReactHooks/spago.dhall | 1 + recipes/RoutingHashReactHooks/src/Main.purs | 44 +++++++++++--------- recipes/RoutingHashReactHooks/web/index.html | 17 ++++---- 3 files changed, 33 insertions(+), 29 deletions(-) diff --git a/recipes/RoutingHashReactHooks/spago.dhall b/recipes/RoutingHashReactHooks/spago.dhall index 1162f128..ff3b9d70 100644 --- a/recipes/RoutingHashReactHooks/spago.dhall +++ b/recipes/RoutingHashReactHooks/spago.dhall @@ -11,6 +11,7 @@ , "react-basic-hooks" , "routing" , "strings" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/RoutingHashReactHooks/src/Main.purs b/recipes/RoutingHashReactHooks/src/Main.purs index 87d0b9b7..d3653ce1 100644 --- a/recipes/RoutingHashReactHooks/src/Main.purs +++ b/recipes/RoutingHashReactHooks/src/Main.purs @@ -7,31 +7,36 @@ import Data.Foldable as Foldable import Data.Maybe (Maybe(..)) import Data.String as String import Effect (Effect) -import Effect.Exception as Exception +import Effect.Exception (throw) import React.Basic (JSX) -import React.Basic as R -import React.Basic.DOM as R +import React.Basic (fragment) as R +import React.Basic.DOM (a, h1_, header_, li_, nav_, p_, text, ul_) as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.Hooks (Component, (/\)) import React.Basic.Hooks as React import Routing.Hash as Hash import Routing.Match (Match) import Routing.Match as Match +import Web.DOM.NonElementParentNode (getElementById) +import Web.HTML (window) import Web.HTML as HTML -import Web.HTML.HTMLDocument as HTMLDocument -import Web.HTML.HTMLElement as HTMLElement +import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.Location as Location +import Web.HTML.Window (document) import Web.HTML.Window as Window main :: Effect Unit main = do - maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window - case maybeBody of - Nothing -> Exception.throw "Could not find body." - Just body -> do + 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 - R.render (app unit) (HTMLElement.toElement body) + renderRoot reactRoot (app {}) -mkApp :: Component Unit +mkApp :: Component {} mkApp = do postIndex <- mkPostIndex post <- mkPost @@ -79,15 +84,14 @@ mkPostIndex = pure (R.ul_ postLinks) where postLinks = - Array.range 1 10 - <#> \n -> - R.li_ - [ R.a - { href: "#/posts/" <> show n - , children: - [ R.text ("Post " <> show n) ] - } - ] + Array.range 1 10 <#> \n -> + R.li_ + [ R.a + { href: "#/posts/" <> show n + , children: + [ R.text ("Post " <> show n) ] + } + ] mkPost :: Component Int mkPost = diff --git a/recipes/RoutingHashReactHooks/web/index.html b/recipes/RoutingHashReactHooks/web/index.html index 9fb82398..42ee0fdd 100644 --- a/recipes/RoutingHashReactHooks/web/index.html +++ b/recipes/RoutingHashReactHooks/web/index.html @@ -1,13 +1,12 @@ + + + RoutingHashReactHooks + - - - RoutingHashReactHooks - - - - - - + +
+ + From 18b3316ee3b25f45917c8e70ebd39d5402b6aabd Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:35:11 +0200 Subject: [PATCH 18/22] Update RoutingPushReactHooks --- recipes/RoutingPushReactHooks/spago.dhall | 1 + recipes/RoutingPushReactHooks/src/Main.purs | 58 +++++++++----------- recipes/RoutingPushReactHooks/web/index.html | 17 +++--- 3 files changed, 36 insertions(+), 40 deletions(-) diff --git a/recipes/RoutingPushReactHooks/spago.dhall b/recipes/RoutingPushReactHooks/spago.dhall index 7f3cb746..f274cc35 100644 --- a/recipes/RoutingPushReactHooks/spago.dhall +++ b/recipes/RoutingPushReactHooks/spago.dhall @@ -13,6 +13,7 @@ , "react-basic-hooks" , "routing" , "transformers" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/RoutingPushReactHooks/src/Main.purs b/recipes/RoutingPushReactHooks/src/Main.purs index 67555f96..ba4a6f63 100644 --- a/recipes/RoutingPushReactHooks/src/Main.purs +++ b/recipes/RoutingPushReactHooks/src/Main.purs @@ -9,12 +9,13 @@ import Data.Foldable as Foldable import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Class as Effect.Class -import Effect.Exception as Exception +import Effect.Exception (throw) import Foreign as Foreign import Partial.Unsafe as Partial.Unsafe import React.Basic (JSX, ReactContext) import React.Basic as React.Basic import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.DOM.Events as DOM.Events import React.Basic.Events as Events import React.Basic.Hooks (Hook, Render, UseContext, (/\)) @@ -23,23 +24,23 @@ import Routing.Match (Match) import Routing.Match as Match import Routing.PushState (PushStateInterface) import Routing.PushState as PushState -import Web.HTML as HTML -import Web.HTML.HTMLDocument as HTMLDocument -import Web.HTML.HTMLElement as HTMLElement -import Web.HTML.Window as Window +import Web.DOM.NonElementParentNode (getElementById) +import Web.HTML (window) +import Web.HTML.HTMLDocument (toNonElementParentNode) +import Web.HTML.Window (document) main :: Effect Unit main = do - maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window - case maybeBody of - Nothing -> Exception.throw "Could not find body." - Just body -> do + doc <- document =<< window + root <- getElementById "root" $ toNonElementParentNode doc + case root of + Nothing -> throw "Could not find root." + Just container -> do + reactRoot <- createRoot container routerContext <- mkRouterContext routerProvider <- Reader.runReaderT mkRouterProvider routerContext app <- Reader.runReaderT mkApp routerContext - R.render - (routerProvider [ app unit ]) - (HTMLElement.toElement body) + renderRoot reactRoot (routerProvider [ app {} ]) -- | Note that we are not using `React.Basic.Hooks.Component` here, replacing it -- | instead with a very similar type, that has some extra "environment" @@ -56,7 +57,7 @@ component -> Component props component name render = ReaderT \_ -> React.component name render -mkApp :: Component Unit +mkApp :: Component {} mkApp = do routerContext <- Reader.ask postIndex <- mkPostIndex @@ -99,15 +100,14 @@ mkPostIndex = do component "PostIndex" \_ -> pure do R.ul_ - ( Array.range 1 10 - <#> \n -> - R.li_ - [ link - { to: "/posts/" <> show n - , children: - [ R.text ("Post " <> show n) ] - } - ] + ( Array.range 1 10 <#> \n -> + R.li_ + [ link + { to: "/posts/" <> show n + , children: + [ R.text ("Post " <> show n) ] + } + ] ) mkPost :: Component Int @@ -203,13 +203,11 @@ mkRouterProvider = do routerContext <- Reader.ask nav <- Effect.Class.liftEffect PushState.makeInterface component "Router" \children -> React.do - let - routerProvider = React.Basic.provider routerContext + let routerProvider = React.Basic.provider routerContext route /\ setRoute <- React.useState' (Just Home) React.useEffectOnce do - nav - # PushState.matches appRoute \_ newRoute -> do - setRoute newRoute + nav # PushState.matches appRoute \_ newRoute -> do + setRoute newRoute pure (routerProvider (Just { nav, route }) children) mkLink :: Component { to :: String, children :: Array JSX } @@ -221,9 +219,7 @@ mkLink = do R.a { href: to , onClick: - Events.handler - DOM.Events.preventDefault - \_ -> do - nav.pushState (Foreign.unsafeToForeign unit) to + Events.handler DOM.Events.preventDefault \_ -> do + nav.pushState (Foreign.unsafeToForeign unit) to , children } diff --git a/recipes/RoutingPushReactHooks/web/index.html b/recipes/RoutingPushReactHooks/web/index.html index 93e06351..98409604 100644 --- a/recipes/RoutingPushReactHooks/web/index.html +++ b/recipes/RoutingPushReactHooks/web/index.html @@ -1,13 +1,12 @@ + + + RoutingPushReactHooks + - - - RoutingPushReactHooks - - - - - - + +
+ + From 3165deb560ab80eee26283543f4c7651c1864f95 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:37:21 +0200 Subject: [PATCH 19/22] Update ShapesReactHooks --- recipes/ShapesReactHooks/spago.dhall | 1 + recipes/ShapesReactHooks/src/Main.purs | 25 ++++++++++++++----------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/recipes/ShapesReactHooks/spago.dhall b/recipes/ShapesReactHooks/spago.dhall index 631e81c5..ba7b685d 100644 --- a/recipes/ShapesReactHooks/spago.dhall +++ b/recipes/ShapesReactHooks/spago.dhall @@ -6,6 +6,7 @@ , "prelude" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/ShapesReactHooks/src/Main.purs b/recipes/ShapesReactHooks/src/Main.purs index fd51717d..fcddbcaa 100644 --- a/recipes/ShapesReactHooks/src/Main.purs +++ b/recipes/ShapesReactHooks/src/Main.purs @@ -5,25 +5,28 @@ import Prelude import Data.Maybe (Maybe(..)) import Effect (Effect) import Effect.Exception (throw) -import React.Basic.DOM (render, text) +import React.Basic.DOM (text) +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.DOM.SVG as R import React.Basic.Hooks (Component, component) +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 - shapesComponent <- mkShapesComponent - render (shapesComponent unit) (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 {}) -mkShapesComponent :: Component Unit -mkShapesComponent = do +mkApp :: Component {} +mkApp = component "ShapesComponent" \_ -> React.do pure $ R.svg From 2ad11357579147899836fccbaf7db7c6f97089fa Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:40:35 +0200 Subject: [PATCH 20/22] Update TextFieldsReactHooks --- recipes/TextFieldsReactHooks/spago.dhall | 1 + recipes/TextFieldsReactHooks/src/Main.purs | 36 +++++++++++----------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/recipes/TextFieldsReactHooks/spago.dhall b/recipes/TextFieldsReactHooks/spago.dhall index e9fb4db0..ee548b22 100644 --- a/recipes/TextFieldsReactHooks/spago.dhall +++ b/recipes/TextFieldsReactHooks/spago.dhall @@ -9,6 +9,7 @@ , "react-basic-dom" , "react-basic-hooks" , "strings" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/TextFieldsReactHooks/src/Main.purs b/recipes/TextFieldsReactHooks/src/Main.purs index 0a9eaf4d..f1ae32a7 100644 --- a/recipes/TextFieldsReactHooks/src/Main.purs +++ b/recipes/TextFieldsReactHooks/src/Main.purs @@ -7,37 +7,37 @@ import Data.Maybe (Maybe(..), fromMaybe) import Data.String (fromCodePointArray, toCodePointArray) 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.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 (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 - textField <- mkTextField - render (textField {}) (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 {}) -mkTextField :: Component {} -mkTextField = do +mkApp :: Component {} +mkApp = component "TextField" \_ -> React.do content /\ setContent <- useState "" - let - onChange = handler targetValue (setContent <<< const <<< fromMaybe "") - pure - $ R.div_ - [ R.input { placeholder: "Text to reverse", value: content, onChange } - , R.div_ [ R.text (reverse content) ] - ] + let onChange = handler targetValue (setContent <<< const <<< fromMaybe "") + pure $ R.div_ + [ R.input { placeholder: "Text to reverse", value: content, onChange } + , R.div_ [ R.text (reverse content) ] + ] reverse :: String -> String reverse = fromCodePointArray <<< Array.reverse <<< toCodePointArray From 2c32f99a11ab00a87504d776c7c70ffbf9b83057 Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 20:44:36 +0200 Subject: [PATCH 21/22] Update TicTacToeReactHooks --- recipes/TicTacToeReactHooks/spago.dhall | 1 + recipes/TicTacToeReactHooks/src/Main.purs | 41 +++++++++++------------ 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/recipes/TicTacToeReactHooks/spago.dhall b/recipes/TicTacToeReactHooks/spago.dhall index 5486021b..53166e1c 100644 --- a/recipes/TicTacToeReactHooks/spago.dhall +++ b/recipes/TicTacToeReactHooks/spago.dhall @@ -11,6 +11,7 @@ , "react-basic" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/TicTacToeReactHooks/src/Main.purs b/recipes/TicTacToeReactHooks/src/Main.purs index 8b80c51b..035d0053 100644 --- a/recipes/TicTacToeReactHooks/src/Main.purs +++ b/recipes/TicTacToeReactHooks/src/Main.purs @@ -15,25 +15,27 @@ import Data.Maybe (Maybe(..), fromMaybe, isJust) import Data.Show.Generic (genericShow) import Effect (Effect) import Effect.Exception (throw) -import React.Basic.DOM (CSS, css, render) +import React.Basic.DOM (CSS, css) import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) import React.Basic.Events (EventHandler, handler_) import React.Basic.Hooks (Component, JSX, Reducer, component, keyed, mkReducer, useReducer, (/\)) 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 - game <- mkGame - render (game unit) (toElement b) - mempty + 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 {}) mkSquare :: Component { onClick :: EventHandler, value :: Square } mkSquare = @@ -71,8 +73,7 @@ mkBoard mkBoard = do square <- mkSquare component "Board" \props -> React.do - let - renderSquare i j = square { value: props.squares i j, onClick: props.onClick i j } + let renderSquare i j = square { value: props.squares i j, onClick: props.onClick i j } pure $ R.div_ [ R.div @@ -142,8 +143,8 @@ initialState = , xIsNext: true } -mkGame :: Component Unit -mkGame = do +mkApp :: Component {} +mkApp = do board <- mkBoard reducer <- reducerFn component "Game" \_ -> React.do @@ -168,7 +169,9 @@ mkGame = do moves :: Array JSX moves = renderMove "Go to start" 0 - : Array.mapWithIndex (\i _ -> renderMove ("Go to move #" <> show (i + 1)) (i + 1)) (NonEmpty.tail state.history) + : Array.mapWithIndex + (\i _ -> renderMove ("Go to move #" <> show (i + 1)) (i + 1)) + (NonEmpty.tail state.history) status :: String status = case calculateWinner current of @@ -222,13 +225,7 @@ calculateWinner f = -- These styles could be provided by a proper stylesheet, we are only -- defining them here for the sake of compatibility with TryPureScript -styles - :: { list :: CSS - , boardRow :: CSS - , square :: CSS - , game :: CSS - , gameInfo :: CSS - } +styles :: { list :: CSS, boardRow :: CSS, square :: CSS, game :: CSS, gameInfo :: CSS } styles = { list: css From b7bf89f544d50674f5cb1b23bbfcc4285ff6a5ba Mon Sep 17 00:00:00 2001 From: andys8 Date: Wed, 10 Aug 2022 21:09:25 +0200 Subject: [PATCH 22/22] Update TimeReactHooks --- recipes/TimeReactHooks/spago.dhall | 1 + recipes/TimeReactHooks/src/Main.purs | 26 ++++++++++++++------------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/recipes/TimeReactHooks/spago.dhall b/recipes/TimeReactHooks/spago.dhall index 443eeb8c..21220c33 100644 --- a/recipes/TimeReactHooks/spago.dhall +++ b/recipes/TimeReactHooks/spago.dhall @@ -11,6 +11,7 @@ , "prelude" , "react-basic-dom" , "react-basic-hooks" + , "web-dom" , "web-html" ] , packages = ../../packages.dhall diff --git a/recipes/TimeReactHooks/src/Main.purs b/recipes/TimeReactHooks/src/Main.purs index 6e2173bb..1e1a3a7f 100644 --- a/recipes/TimeReactHooks/src/Main.purs +++ b/recipes/TimeReactHooks/src/Main.purs @@ -11,28 +11,30 @@ import Data.Newtype (class Newtype) import Effect (Effect) import Effect.Exception (throw) import Effect.Timer (clearInterval, setInterval) -import React.Basic.DOM (render) import React.Basic.DOM as R +import React.Basic.DOM.Client (createRoot, renderRoot) 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 (body) -import Web.HTML.HTMLElement (toElement) +import Web.HTML.HTMLDocument (toNonElementParentNode) import Web.HTML.Window (document) type Time = { hours :: Int, minutes :: Int, seconds :: Int } main :: Effect Unit main = do - body <- body =<< document =<< window - case body of - Nothing -> throw "Could not find body." - Just b -> do - time <- mkTime - render (time {}) (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 {}) -mkTime :: Component {} -mkTime = do +mkApp :: Component {} +mkApp = do now <- JSDate.now >>= getTime component "Time" \_ -> React.do { hours, minutes, seconds } <- useCurrentTime now @@ -48,7 +50,7 @@ mkTime = do newtype UseCurrentTime hooks = UseCurrentTime (UseEffect Unit (UseState Time hooks)) -derive instance ntUseCurrentTime :: Newtype (UseCurrentTime hooks) _ +derive instance Newtype (UseCurrentTime hooks) _ useCurrentTime :: Time -> Hook UseCurrentTime Time useCurrentTime initialTime =