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