update purescript, react, and add hooks+classic example

package.json

@@ -17,8 +17,8 @@
     "clean:everything": "npm run clean && rm -rf node_modules .spago"
   },
   "dependencies": {
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "clean-webpack-plugin": "^3.0.0",
@@ -27,14 +27,14 @@
     "html-webpack-plugin": "^4.3.0",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "purescript": "^0.13.6",
-    "purescript-psa": "^0.7.3",
-    "purs-loader": "^3.7.1",
+    "purescript": "^0.14.5",
+    "purescript-psa": "^0.8.2",
+    "purs-loader": "^3.7.2",
     "resource-hints-webpack-plugin": "0.0.2",
     "sass-loader": "8.0.2",
     "script-ext-html-webpack-plugin": "^2.1.4",
     "source-map-loader": "0.2.4",
-    "spago": "^0.15.2",
+    "spago": "^0.20.3",
     "style-loader": "1.2.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^4.43.0",

packages.dhall

@@ -116,10 +116,8 @@ let additions =
   }
 -------------------------------
 -}
-
-
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200507/packages.dhall sha256:9c1e8951e721b79de1de551f31ecb5a339e82bbd43300eb5ccfb1bf8cf7bbd62
+      https://github.com/purescript/package-sets/releases/download/psc-0.14.4-20211030/packages.dhall sha256:5cd7c5696feea3d3f84505d311348b9e90a76c4ce3684930a0ff29606d2d816c
 
 let overrides = {=}
 

spago.dhall

@@ -4,7 +4,20 @@ You can edit this file as you like.
 -}
 { name = "react-basic-starter"
 , dependencies =
-  [ "console", "effect", "prelude", "psci-support", "react-basic" ]
+  [ "console"
+  , "effect"
+  , "exceptions"
+  , "maybe"
+  , "prelude"
+  , "psci-support"
+  , "react-basic"
+  , "react-basic-classic"
+  , "react-basic-dom"
+  , "react-basic-hooks"
+  , "tuples"
+  , "web-dom"
+  , "web-html"
+  ]
 , packages = ./packages.dhall
 , sources = [ "src/**/*.purs", "test/**/*.purs" ]
 }

src/Components/App.purs

@@ -3,16 +3,35 @@ module Components.App where
 import Prelude
 
 import Components.Toggle (toggle)
-import React.Basic (Component, JSX, createComponent, makeStateless)
+import Components.Counter (mkCounter)
+import Components.ToggleHooks (mkToggle)
+import Effect (Effect)
+import React.Basic.Classic (Component, JSX, createComponent, makeStateless)
 import React.Basic.DOM as R
 
 component :: Component Unit
 component = createComponent "App"
 
-app :: JSX
-app = unit # makeStateless component \_ ->
+
+classicApp :: JSX
+classicApp = unit # makeStateless component \_ ->
   R.div_
     [ R.h1_ [ R.text "Hello world" ]
     , toggle { initialValue: true }
     , toggle { initialValue: false }
     ]
+
+mkApp :: Effect JSX
+mkApp = do
+  counter <- mkCounter
+  toggleHooks <- mkToggle
+
+  pure $ unit # makeStateless component \_ ->
+    R.div_
+      [ R.h1_ [ R.text "Hello world" ]
+      , toggle { initialValue: true }
+      , toggle { initialValue: false }
+      , counter 0
+      , toggleHooks false
+      , toggleHooks true
+      ]

src/Components/Counter.purs

@@ -0,0 +1,22 @@
+module Components.Counter where
+
+import Prelude
+
+import Data.Tuple.Nested ((/\))
+import React.Basic.DOM as R
+import React.Basic.Events (handler_)
+import React.Basic.Hooks (Component, component, useState)
+import React.Basic.Hooks as React
+
+mkCounter :: Component Int -- Effect (Int -> JSX)
+mkCounter = do
+  component "Counter" \initialValue -> React.do
+    counter /\ setCounter <- useState initialValue
+
+    pure
+      $ R.button
+          { onClick: handler_ do
+              setCounter (_ + 1)
+          , children:
+              [ R.text $ "Increment: " <> show counter ]
+          }

src/Components/Toggle.purs

@@ -3,7 +3,7 @@ module Components.Toggle where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe)
-import React.Basic (Component, JSX, createComponent, make)
+import React.Basic.Classic (Component, JSX, createComponent, make)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (capture_)
 
@@ -33,7 +33,7 @@ toggle = make component { initialState, render }
           , children:
               [ R.text
                   if on
-                    then "On"
-                    else "Off"
+                    then "Classic On"
+                    else "Classic Off"
               ]
           }

src/Components/ToggleHooks.purs

@@ -0,0 +1,22 @@
+module Components.ToggleHooks where
+
+import Prelude
+
+import Data.Tuple.Nested ((/\))
+import React.Basic.DOM as R
+import React.Basic.Events (handler_)
+import React.Basic.Hooks (Component, component, useState)
+import React.Basic.Hooks as React
+
+
+mkToggle :: Component Boolean -- Effect (Boolean -> JSX)
+mkToggle = do
+  component "ToggleHook" \initialValue -> React.do
+    toggleOn /\ setToggle <- useState initialValue
+
+    pure
+      $ R.button
+          { onClick: handler_ do
+              setToggle not
+          , children: [ R.text if toggleOn then "Hook On" else "Hook Off" ]
+          }

src/Main.purs

@@ -2,7 +2,7 @@ module Main where
 
 import Prelude
 
-import Components.App (app)
+import Components.App (classicApp, mkApp)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
@@ -15,6 +15,8 @@ import Web.HTML.Window (document)
 main :: Effect Unit
 main = do
   root <- getElementById "root" =<< (map toNonElementParentNode $ document =<< window)
+  hookApp <- mkApp
   case root of
     Nothing -> throw "Root element not found."
-    Just r  -> render app r
+    -- Just r  -> render classicApp r -- classic-only app is pure func
+    Just r  -> render hookApp r -- Hooks app runs in Effect