Merge pull request #7 from input-output-hk/master

Upgrade to PureScript 0.14 and Halogen 6 + bonus bugfix

.gitignore

@@ -5,7 +5,8 @@ node_modules
 yarn.lock
 
 .psc-ide-port
+.parcel-cache
 .psci_modules
 .spago
 output
-docs
+docs

.purs-repl

@@ -0,0 +1 @@
+import Prelude

bower.json

@@ -12,14 +12,6 @@
   "ignore": [
     "**/.*",
     "node_modules",
-    "bower_components",
     "output"
-  ],
-  "dependencies": {
-    "purescript-halogen": "^5.0.0-rc.7"
-  },
-  "devDependencies": {
-    "purescript-jest": "^0.2.0",
-    "purescript-psci-support": "^4.0.0"
-  }
+  ]
 }

examples/index.html

@@ -13,7 +13,7 @@
 
     </article>
 
-    <script src="main.js"></script>
+    <script type="module" src="main.js"></script>
 
     <a href="https://github.com/nonbili/purescript-halogen-nselect" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
   </body>

examples/package.json

@@ -13,6 +13,7 @@
     "highlight.js": "^9.18.1",
     "markdown-it-anchor": "^5.2.5",
     "markdown-it-table-of-contents": "^0.4.4",
+    "parcel": "^2.2.1",
     "tailwindcss": "^1.2.0"
   }
 }

examples/spago.dhall

@@ -1,5 +1,18 @@
 { name = "purescript-halogen-nselect"
-, dependencies = [ "console", "effect", "halogen", "halogen-custom-element" ]
-, packages = ./packages.dhall
-, sources = [ "../src/**/*.purs", "src/**/*.purs" ]
+, dependencies =
+  [ "aff"
+  , "arrays"
+  , "control"
+  , "effect"
+  , "foldable-traversable"
+  , "halogen"
+  , "halogen-custom-element"
+  , "halogen-nselect"
+  , "prelude"
+  , "strings"
+  , "web-events"
+  , "web-uievents"
+  ]
+, packages = ../packages.dhall
+, sources = [ "src/**/*.purs" ]
 }

examples/src/Example/Autocomplete.purs

@@ -4,22 +4,17 @@ import Example.Prelude
 
 import Control.MonadPlus (guard)
 import Data.Array as Array
-import Data.Const (Const)
 import Data.Foldable (for_)
-import Data.Maybe (Maybe(..))
 import Data.Monoid as Monoid
 import Data.String as String
-import Data.Symbol (SProxy(..))
 import Effect.Aff (Aff)
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Properties as HP
 import NSelect as Select
+import Type.Proxy (Proxy(..))
 
-type Query = Const Void
-
-data Action
-  = HandleDropdown (Select.Message Action)
+data Action = HandleDropdown (Select.Message Action)
 
 type State =
   { value :: String
@@ -31,7 +26,7 @@ type Slots =
   ( dropdown :: Select.Slot Action Unit
   )
 
-_dropdown = SProxy :: SProxy "dropdown"
+_dropdown = Proxy :: Proxy "dropdown"
 
 type HTML = H.ComponentHTML Action Slots Aff
 
@@ -59,42 +54,43 @@ initialState =
 renderSelect :: State -> Select.State -> Select.HTML Action () Aff
 renderSelect state st =
   HH.div
-  ( Select.setRootProps [ class_ "inline-block"]
-  ) $ join
-  [ pure $ HH.input
-    ( Select.setInputProps
-      [ style "width: 20rem"
-      , HP.value state.value
-      , HP.placeholder "Autocomplete input"
-      ]
-    )
-  , guard st.isOpen $> HH.div
-    [ class_ "Dropdown"
-    ]
-    [ HH.div
-      ( Select.setMenuProps
-        [ class_ "overflow-y-auto"
-        , style "max-height: 10rem;"
+    ( Select.setRootProps [ class_ "inline-block" ]
+    ) $ join
+    [ pure $ HH.input
+        ( Select.setInputProps
+            [ style "width: 20rem"
+            , HP.value state.value
+            , HP.placeholder "Autocomplete input"
+            ]
+        )
+    , guard st.isOpen $> HH.div
+        [ class_ "Dropdown"
         ]
-      ) $ state.filteredItems # Array.mapWithIndex \index item ->
-      HH.div
-      ( Select.setItemProps index
-        [ class_ $ "py-1 px-3 cursor-pointer" <>
-            Monoid.guard (index == st.highlightedIndex) " bg-blue-300"
+        [ HH.div
+            ( Select.setMenuProps
+                [ class_ "overflow-y-auto"
+                , style "max-height: 10rem;"
+                ]
+            ) $ state.filteredItems # Array.mapWithIndex \index item ->
+            HH.div
+              ( Select.setItemProps index
+                  [ class_ $ "py-1 px-3 cursor-pointer" <>
+                      Monoid.guard (index == st.highlightedIndex) " bg-blue-300"
+                  ]
+              )
+              [ HH.text item ]
         ]
-      )
-      [ HH.text item ]
     ]
-  ]
 
 render :: State -> HTML
 render state =
   HH.slot _dropdown unit Select.component
-  { render: renderSelect state
-  , itemCount: Array.length state.filteredItems
-  } $ Just <<< HandleDropdown
+    { render: renderSelect state
+    , itemCount: Array.length state.filteredItems
+    }
+    HandleDropdown
 
-component :: H.Component HH.HTML Query Unit Void Aff
+component :: forall q. H.Component q Unit Void Aff
 component = H.mkComponent
   { initialState: const initialState
   , render
@@ -108,7 +104,7 @@ handleAction (HandleDropdown msg) = case msg of
     state <- H.get
     for_ (Array.index state.filteredItems index) \item ->
       H.modify_ $ _ { value = item }
-    void $ H.query _dropdown unit $ H.tell Select.Close
+    void $ H.tell _dropdown unit Select.Close
   Select.InputValueChanged value -> do
     H.modify_ $ \state -> state
       { value = value

examples/src/Example/ComponentInDropdown.purs

@@ -3,17 +3,13 @@ module Example.ComponentInDropdown where
 import Example.Prelude
 
 import Control.MonadPlus (guard)
-import Data.Const (Const)
-import Data.Maybe (Maybe(..))
-import Data.Symbol (SProxy(..))
+import Type.Proxy (Proxy(..))
 import Effect.Aff (Aff)
 import Example.ComponentInDropdown.Child as Child
 import Halogen as H
 import Halogen.HTML as HH
 import NSelect as Select
 
-type Query = Const Void
-
 data Action
   = HandleDropdown (Select.Message Action)
   | HandleChild Child.Message
@@ -27,11 +23,11 @@ type Slots =
   )
 
 type SelectSlots =
-  ( child :: H.Slot Child.Query Child.Message Unit
+  ( child :: forall q. H.Slot q Child.Message Unit
   )
 
-_dropdown = SProxy :: SProxy "dropdown"
-_child = SProxy :: SProxy "child"
+_dropdown = Proxy :: Proxy "dropdown"
+_child = Proxy :: Proxy "child"
 
 type HTML = H.ComponentHTML Action Slots Aff
 
@@ -41,36 +37,37 @@ initialState =
   }
 
 renderSelect :: State -> Select.State -> Select.HTML Action SelectSlots Aff
-renderSelect state st =
+renderSelect _ st =
   HH.div
-  ( Select.setRootProps
-    [ class_ "inline-block" ]
-  ) $ join
-  [ pure $ HH.button
-    ( Select.setToggleProps [])
-    [ HH.text "Toggle" ]
-  , guard st.isOpen $>
-      HH.div
-      [ class_ "Dropdown p-4"
-      ]
-      [ HH.slot _child unit Child.component unit
-          (Just <<< Select.raise <<< HandleChild)
-      ]
-  ]
+    ( Select.setRootProps
+        [ class_ "inline-block" ]
+    ) $ join
+    [ pure $ HH.button
+        (Select.setToggleProps [])
+        [ HH.text "Toggle" ]
+    , guard st.isOpen $>
+        HH.div
+          [ class_ "Dropdown p-4"
+          ]
+          [ HH.slot _child unit Child.component unit
+              (Select.raise <<< HandleChild)
+          ]
+    ]
 
 render :: State -> HTML
 render state =
   HH.div_
-  [ HH.slot _dropdown unit Select.component
-    { render: renderSelect state
-    , itemCount: 0
-    } $ Just <<< HandleDropdown
-  , HH.div_
-    [ HH.text $ "You typed: " <> state.value
+    [ HH.slot _dropdown unit Select.component
+        { render: renderSelect state
+        , itemCount: 0
+        }
+        HandleDropdown
+    , HH.div_
+        [ HH.text $ "You typed: " <> state.value
+        ]
     ]
-  ]
 
-component :: H.Component HH.HTML Query Unit Void Aff
+component :: forall q. H.Component q Unit Void Aff
 component = H.mkComponent
   { initialState: const initialState
   , render

examples/src/Example/ComponentInDropdown/Child.purs

@@ -2,20 +2,15 @@ module Example.ComponentInDropdown.Child where
 
 import Prelude
 
-import Data.Const (Const)
-import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff)
 import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
 
-type Query = Const Void
-
 type Message = String
 
-data Action
-  = OnInput String
+data Action = OnInput String
 
 type State =
   { value :: String
@@ -31,14 +26,14 @@ initialState =
 render :: State -> HTML
 render state =
   HH.div_
-  [ HH.input
-    [ HP.value state.value
-    , HP.placeholder "Type something"
-    , HE.onValueInput $ Just <<< OnInput
+    [ HH.input
+        [ HP.value state.value
+        , HP.placeholder "Type something"
+        , HE.onValueInput OnInput
+        ]
     ]
-  ]
 
-component :: H.Component HH.HTML Query Unit Message Aff
+component :: forall q. H.Component q Unit Message Aff
 component = H.mkComponent
   { initialState: const initialState
   , render