Merge pull request #45 from JordanMartinez/development

Inline scaffolding code into each file

Author: JordanMartinez

packages.dhall

@@ -112,14 +112,9 @@ let mkPackage =
       https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.0-20190626/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
 
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.13.3-20190818/packages.dhall sha256:c95c4a8b8033a48a350106b759179f68a695c7ea2208228c522866fd43814dc8
+      https://github.com/purescript/package-sets/releases/download/psc-0.13.3-20190831/packages.dhall sha256:852cd4b9e463258baf4e253e8524bcfe019124769472ca50b316fe93217c3a47
 
-let overrides =
-      { halogen =
-          upstream.halogen // { version = "v5.0.0-rc.6" }
-      , halogen-vdom =
-          upstream.halogen-vdom // { version = "v6.1.0" }
-      }
+let overrides = {=}
 
 let additions = {=}
 

src/01-Static-HTML/02-Static-HTML.purs

@@ -1,13 +1,17 @@
 module StaticHTML.StaticHTML where
 
+-- Imports for lesson
+import Halogen.HTML as HH
+
+-- Imports for scaffolding
 import Prelude
 
+import Data.Const (Const)
 import Effect (Effect)
-import Halogen.HTML as HH
-import Scaffolding.StaticRenderer (runStaticHtml, StaticHTML)
-
-main :: Effect Unit
-main = runStaticHtml staticHtml
+import Effect.Aff (Aff, launchAff_)
+import Halogen as H
+import Halogen.Aff (awaitBody)
+import Halogen.VDom.Driver (runUI)
 
 -- | Shows how to use Halogen VDOM DSL to render HTML without properties or CSS
 staticHtml :: StaticHTML
@@ -22,3 +26,24 @@ staticHtml =
     , HH.button_
       [ HH.text "You can click me, but I don't do anything." ]
     ]
+
+--- Scaffolded code below ---
+
+main :: Effect Unit
+main = launchAff_ do
+  body <- awaitBody
+  runUI (staticComponent staticHtml) unit body
+
+-- | HTML written in Purescript via Halogen's HTML DSL
+-- | that is always rendered the same and does not include any event handling.
+type StaticHTML = H.ComponentHTML Unit () Aff
+
+-- | Wraps Halogen types cleanly, so that one gets very clear compiler errors
+staticComponent :: StaticHTML
+                -> H.Component HH.HTML (Const Unit) Unit Void Aff
+staticComponent renderHtml =
+  H.mkComponent
+    { initialState: const unit
+    , render: \_ -> renderHtml
+    , eval: H.mkEval H.defaultEval
+    }

src/01-Static-HTML/04-Adding-Properties.purs

@@ -2,15 +2,19 @@ module StaticHTML.AddingProperties where
 
 import Prelude
 
-import Effect (Effect)
+-- Imports for lesson
 import Halogen.HTML (ClassName(..))
 import Halogen.HTML as HH
 import Halogen.HTML.Properties (ButtonType(..))
 import Halogen.HTML.Properties as HP
-import Scaffolding.StaticRenderer (runStaticHtml, StaticHTML)
 
-main :: Effect Unit
-main = runStaticHtml staticHtmlWithProps
+-- Imports for scaffolding
+import Data.Const (Const)
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Halogen as H
+import Halogen.Aff (awaitBody)
+import Halogen.VDom.Driver (runUI)
 
 -- | Shows how to use Halogen VDOM DSL to render static HTML
 -- | that also includes properties
@@ -28,3 +32,24 @@ staticHtmlWithProps =
       [ HP.type_ ButtonButton ]
       [ HH.text "You can click me, but I don't do anything." ]
     ]
+
+--- Scaffolded code below ---
+
+main :: Effect Unit
+main = launchAff_ do
+  body <- awaitBody
+  runUI (staticComponent staticHtmlWithProps) unit body
+
+-- | HTML written in Purescript via Halogen's HTML DSL
+-- | that is always rendered the same and does not include any event handling.
+type StaticHTML = H.ComponentHTML Unit () Aff
+
+-- | Wraps Halogen types cleanly, so that one gets very clear compiler errors
+staticComponent :: StaticHTML
+                -> H.Component HH.HTML (Const Unit) Unit Void Aff
+staticComponent renderHtml =
+  H.mkComponent
+    { initialState: const unit
+    , render: \_ -> renderHtml
+    , eval: H.mkEval H.defaultEval
+    }

src/01-Static-HTML/06-Adding-CSS.purs

@@ -2,17 +2,21 @@ module StaticHTML.AddingCSS where
 
 import Prelude
 
+-- Imports for lesson
 import CSS (backgroundColor, fontSize, orange, px, red)
-import Effect (Effect)
 import Halogen.HTML (ClassName(..))
 import Halogen.HTML as HH
 import Halogen.HTML.CSS as CSS
 import Halogen.HTML.Properties (ButtonType(..))
 import Halogen.HTML.Properties as HP
-import Scaffolding.StaticRenderer (runStaticHtml, StaticHTML)
 
-main :: Effect Unit
-main = runStaticHtml staticHtmlWithPropsAndCss
+-- Imports for scaffolding
+import Data.Const (Const)
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Halogen as H
+import Halogen.Aff (awaitBody)
+import Halogen.VDom.Driver (runUI)
 
 -- | Shows how to use Halogen VDOM DSL to render static HTML
 -- | that also includes properties and CSS
@@ -34,3 +38,24 @@ staticHtmlWithPropsAndCss =
       [ HP.type_ ButtonButton ]
       [ HH.text "You can click me, but I don't do anything." ]
     ]
+
+--- Scaffolded code below ---
+
+main :: Effect Unit
+main = launchAff_ do
+  body <- awaitBody
+  runUI (staticComponent staticHtmlWithPropsAndCss) unit body
+
+-- | HTML written in Purescript via Halogen's HTML DSL
+-- | that is always rendered the same and does not include any event handling.
+type StaticHTML = H.ComponentHTML Unit () Aff
+
+-- | Wraps Halogen types cleanly, so that one gets very clear compiler errors
+staticComponent :: StaticHTML
+                -> H.Component HH.HTML (Const Unit) Unit Void Aff
+staticComponent renderHtml =
+  H.mkComponent
+    { initialState: const unit
+    , render: \_ -> renderHtml
+    , eval: H.mkEval H.defaultEval
+    }

src/02-Dynamic-HTML/02-Adding-State.purs

@@ -2,10 +2,21 @@ module DynamicHtml.AddingState where
 
 import Prelude
 
-import Effect (Effect)
+-- Imports for lesson
 import Halogen.HTML as HH
-import Scaffolding.DynamicRenderer.StateOnly (runStateOnlyDynamicRenderer)
-import Scaffolding.StaticRenderer (StaticHTML)
+
+-- Imports for scaffolding
+import Control.Monad.Error.Class (throwError)
+import Data.Const (Const)
+import Data.Maybe (maybe)
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Effect.Exception (error)
+import Halogen as H
+import Halogen.Aff (awaitLoad, selectElement)
+import Halogen.VDom.Driver (runUI)
+import Web.DOM.ParentNode (QuerySelector(..))
+import Web.HTML (HTMLElement)
 
 main :: Effect Unit
 main =
@@ -18,3 +29,50 @@ main =
 simpleIntState :: Int -> StaticHTML
 simpleIntState state =
   HH.div_ [ HH.text $ "The state was: " <> show state ]
+
+-- Scaffolded code below --
+
+-- | HTML written in Purescript via Halogen's HTML DSL
+-- | that is always rendered the same and does not include any event handling.
+type StaticHTML = H.ComponentHTML Unit () Aff
+
+-- | A function that uses the `state` type's value to render HTML
+-- | with no event-handling.
+type StateOnlyDynamicRenderer state = (state -> StaticHTML)
+
+-- | Uses the `state` type's value to render dynamic HTML
+-- | using 3 different state values.
+runStateOnlyDynamicRenderer :: forall state.
+                               state
+                            -> state
+                            -> state
+                            -> StateOnlyDynamicRenderer state
+                            -> Effect Unit
+runStateOnlyDynamicRenderer firstState secondState thirdState rendererFunction =
+  launchAff_ do
+    awaitLoad
+
+    div1 <- selectElement' "could not find 'div#first'" $ QuerySelector "#first"
+    div2 <- selectElement' "could not find 'div#second'" $ QuerySelector "#second"
+    div3 <- selectElement' "could not find 'div#third'" $ QuerySelector "#third"
+
+    void $ runUI (stateOnlyStaticComponent firstState  rendererFunction) unit div1
+    void $ runUI (stateOnlyStaticComponent secondState rendererFunction) unit div2
+    void $ runUI (stateOnlyStaticComponent thirdState  rendererFunction) unit div3
+
+-- | Wraps Halogen types cleanly, so that one gets very clear compiler errors
+stateOnlyStaticComponent :: forall state.
+                            state
+                         -> StateOnlyDynamicRenderer state
+                         -> H.Component HH.HTML (Const Unit) Unit Void Aff
+stateOnlyStaticComponent state dynamicRenderer =
+  H.mkComponent
+    { initialState: const state
+    , render: dynamicRenderer
+    , eval: H.mkEval H.defaultEval
+    }
+
+selectElement' :: String -> QuerySelector -> Aff HTMLElement
+selectElement' errorMessage query = do
+  maybeElem <- selectElement query
+  maybe (throwError (error errorMessage)) pure maybeElem

src/02-Dynamic-HTML/05-Adding-Event-Handling.purs

@@ -2,12 +2,20 @@ module DynamicHtml.AddingEventHandling where
 
 import Prelude
 
+-- Imports for lesson
 import Control.Monad.State (get, put)
 import Data.Maybe (Maybe(..))
-import Effect (Effect)
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
-import Scaffolding.DynamicRenderer.StateAndEval (HandleSimpleAction, StateAndActionRenderer, runStateAndActionComponent)
+
+-- Imports for scaffolding
+import Data.Const (Const)
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Halogen (ComponentHTML)
+import Halogen as H
+import Halogen.Aff (awaitBody)
+import Halogen.VDom.Driver (runUI)
 
 -- | Our state type. Either the button is 'on' or 'off'.
 type State = Boolean
@@ -45,3 +53,47 @@ main =
     , render: toggleButton
     , handleAction: handleAction
     }
+
+-- Scaffolded Code --
+
+-- | Renders HTML that can respond to events by translating them
+-- | into a value of the `action` that one uses to handle the event.
+type DynamicHtml action = ComponentHTML action () Aff
+
+-- | A function that uses the `state` type's value to render HTML
+-- | with simple event-handling via the `action` type.
+type StateAndActionRenderer state action = (state -> DynamicHtml action)
+
+-- | When an `action` type's value is received, this function
+-- | determines how to update the component (e.g. state updates).
+type HandleSimpleAction state action =
+  (action -> H.HalogenM state action () Void Aff Unit)
+
+-- | Combines all the code we need to define a simple componenet that supports
+-- | state and simple event handling
+type SimpleChildComponent state action =
+  { initialState :: state
+  , render :: StateAndActionRenderer state action
+  , handleAction :: HandleSimpleAction state action
+  }
+
+-- | Uses the `state` type's value to render dynamic HTML
+-- | with event handling via the `action` type.
+runStateAndActionComponent :: forall state action.
+                               SimpleChildComponent state action
+                            -> Effect Unit
+runStateAndActionComponent childSpec = do
+  launchAff_ do
+    body <- awaitBody
+    runUI (stateAndActionCompontent childSpec) unit body
+
+-- | Wraps Halogen types cleanly, so that one gets very clear compiler errors
+stateAndActionCompontent :: forall state action.
+                            SimpleChildComponent state action
+                         -> H.Component HH.HTML (Const Unit) Unit Void Aff
+stateAndActionCompontent spec =
+  H.mkComponent
+    { initialState: const spec.initialState
+    , render: spec.render
+    , eval: H.mkEval $ H.defaultEval { handleAction = spec.handleAction }
+    }