Upgrade to halogen-5.0.0

bower.json

@@ -17,9 +17,9 @@
     "docs"
   ],
   "dependencies": {
-    "purescript-halogen": "^4.0.0",
-    "purescript-routing": "^8.0.0",
-    "purescript-foreign-object": "^1.0.0"
+    "purescript-halogen": "^5.0.0-rc.4",
+    "purescript-routing": "^9.0.0",
+    "purescript-foreign-object": "^2.0.0"
   },
   "devDependencies": {
     "purescript-psci-support": "^4.0.0"

examples/README.md

@@ -1,5 +1,5 @@
 ```
 yarn
-pulp -w build
+pulp -w build -I ../src
 yarn start
 ```

examples/bower.json

@@ -8,10 +8,11 @@
     "output"
   ],
   "dependencies": {
-    "purescript-halogen": "^4.0.0",
-    "purescript-halogen-storybook": "*"
+    "purescript-halogen": "^5.0.0-rc.4",
+    "purescript-routing": "^9.0.0"
   },
   "devDependencies": {
-    "purescript-psci-support": "^4.0.0"
+    "purescript-psci-support": "^4.0.0",
+    "purescript-debug": "^4.0.0"
   }
 }

examples/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "build": "pulp build --to output/Main/index.js && webpack --mode production --progress",
     "pscid:build": "pulp build",
+    "postinstall": "bower install",
     "start": "webpack-dev-server --mode development --progress"
   },
   "devDependencies": {

examples/src/Example/Count.purs

@@ -2,51 +2,56 @@ module Example.Count where
 
 import Prelude
 
+import Data.Const (Const)
 import Data.Maybe (Maybe(..))
-
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 
-data Query a
-  = Increase a
-  | Decrease a
+type Query = Const Void
+
+data Action
+  = Increase
+  | Decrease
 
 type State = { value :: Int }
 
 component :: forall m. H.Component HH.HTML Query Unit Void m
-component = H.component
+component = H.mkComponent
   { initialState: const initialState
   , render
-  , eval
-  , receiver: const Nothing
+  , eval: H.mkEval $ H.defaultEval
+    { handleAction = handleAction }
   }
   where
 
   initialState :: State
   initialState = { value: 0 }
 
-  render :: State -> H.ComponentHTML Query
+  render :: State -> H.ComponentHTML Action () m
   render state =
     HH.div_
       [ HH.h3_
           [ HH.text "A counter" ]
       , HH.div_
           [ HH.button
-              [ HE.onClick $ HE.input_ Increase ]
+              [ HE.onClick $ Just <<< const Increase ]
               [ HH.text "+" ]
           ]
       , HH.div_
           [ HH.text $ show state.value ]
       , HH.div_
           [ HH.button
-              [ HE.onClick $ HE.input_ Decrease ]
+              [ HE.onClick $ Just <<< const Decrease ]
               [ HH.text "-" ]
           ]
       ]
 
-  eval :: Query ~> H.ComponentDSL State Query Void m
-  eval (Increase next) =
-    H.modify (\state -> state { value = state.value + 1 }) $> next
-  eval (Decrease next) =
-    H.modify (\state -> state { value = state.value - 1 }) $> next
+handleAction
+  :: forall m
+   . Action
+  -> H.HalogenM State Action () Void m Unit
+handleAction Increase = do
+    H.modify_ (\state -> state { value = state.value + 1 })
+handleAction Decrease = do
+    H.modify_ (\state -> state { value = state.value - 1 })

examples/src/Example/Index.purs

@@ -3,8 +3,6 @@ module Example.Index where
 import Prelude
 
 import Data.Const (Const)
-import Data.Maybe (Maybe(..))
-import Data.Newtype (unwrap)
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Properties as HP
@@ -16,7 +14,7 @@ type State = Unit
 initialState :: State
 initialState = unit
 
-render :: State -> H.ComponentHTML Query
+render :: forall m. State -> H.ComponentHTML Void () m
 render state =
   HH.div_
   [ HH.h3_
@@ -31,12 +29,8 @@ render state =
   ]
 
 component :: forall m. H.Component HH.HTML Query Unit Void m
-component = H.component
+component = H.mkComponent
   { initialState: const initialState
   , render
-  , eval
-  , receiver: const Nothing
+  , eval: H.mkEval $ H.defaultEval
   }
-  where
-  eval :: Query ~> H.ComponentDSL State Query Void m
-  eval = absurd <<< unwrap

examples/src/Example/Input.purs

@@ -2,41 +2,47 @@ module Example.Input where
 
 import Prelude
 
+import Data.Const (Const)
 import Data.Maybe (Maybe(..))
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
 
-data Query a = InputName String a
+type Query = Const Void
+
+data Action = InputName String
 
 type State = { name :: String }
 
 component :: forall m. H.Component HH.HTML Query Unit Void m
-component = H.component
+component = H.mkComponent
   { initialState: const initialState
   , render
-  , eval
-  , receiver: const Nothing
+  , eval: H.mkEval $ H.defaultEval
+    { handleAction = handleAction }
   }
   where
 
   initialState :: State
   initialState = { name: "" }
 
-  render :: State -> H.ComponentHTML Query
+  render :: State -> H.ComponentHTML Action () m
   render state =
     HH.div_
       [ HH.h3_
           [ HH.text "What's your name?" ]
       , HH.input
           [ HP.value state.name
-          , HE.onValueInput (HE.input InputName)
+          , HE.onValueInput $ Just <<< InputName
           ]
       , HH.p_
           [ HH.text $ "Hello, " <> state.name ]
       ]
 
-  eval :: Query ~> H.ComponentDSL State Query Void m
-  eval (InputName name next) = next <$ do
-    H.modify _{ name = name }
+handleAction
+  :: forall m
+   . Action
+  -> H.HalogenM State Action () Void m Unit
+handleAction (InputName name) = do
+  H.modify_ $ _{ name = name }

examples/src/Main.purs

@@ -17,7 +17,7 @@ stories :: forall m. Stories m
 stories = Object.fromFoldable
   [ Tuple "" $ proxy ExpIndex.component
   , Tuple "count" $ proxy ExpCount.component
-  , Tuple "input" $ proxy ExpInput.component
+  , Tuple "Form|input" $ proxy ExpInput.component
   ]
 
 logo :: HH.PlainHTML

examples/src/Storybook.css

@@ -27,16 +27,29 @@ body {
 
 .Storybook-nav {
   grid-area: nav;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  padding-top: 0.625rem;
   overflow-y: auto;
   font-size: 0.875rem;
   background-color: #fafafa;
   border-right: 1px solid rgba(0, 0, 0, 0.08);
 }
 
+.Storybook-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.Storybook-nav-section {
+  margin: 1rem 0;
+}
+
+.Storybook-nav-section-title {
+  color: #3a3a3a;
+  text-transform: uppercase;
+  font-weight: bold;
+  padding: 0.625rem 2rem;
+}
+
 .Storybook-link {
   display: block;
   text-decoration: none;