Merge pull request #22 from JordanMartinez/development

Update Spago to 0.8.3.0 and PureScript to 0.13.0

.travis.yml

@@ -1,7 +1,8 @@
 dist: xenial
 language: node_js
-  - "node"
-  # ^ use latest version of NodeJS
+  # ^ We don't specify the NodeJS version here because
+  # it's difficult to know which number actually installs something rather
+  # than resulting in an erroneous build
 
 # Unless we specify "sudo: false", build runs in VM, not container
 
@@ -15,7 +16,13 @@ branches:
   - latestRelease
 
 install:
-  - npm i -g [email protected] [email protected] parcel
+  - nvm install node
+  # ^ Use NVM to install latest node since Travis CI's docs aren't very'
+  # helpful as to how to do that
+  - npm i -g npm
+  # Also update NPM
+  - npm i -g [email protected] [email protected] parcel
+  # ^ Installing PureScript 0.13.0 hopefully now works
 
 # Print version numbers
 before_script:

ReadMe.md

@@ -7,13 +7,13 @@ Learn [`purescript-halogen`](https://github.com/slamdata/purescript-halogen), (`
 ## Requirements
 
 Before learning Halogen via this project, you will need to install the following. (If you don't have them already installed, see my purescript learning repo's [Install Guide](https://github.com/JordanMartinez/purescript-jordans-reference/blob/latestRelease/00-Getting-Started/02-Install-Guide.md)
-- purescript (v0.12.5)
-- spago (v0.8.0.0)
+- purescript (v0.13.0)
+- spago (v0.8.3.0)
 - parcel (v1.12.3)
 
 Or, to install them in one line
 ```bash
-npm i -g purescript@0.12.5 [email protected].0 parcel
+npm i -g purescript@0.13.0 [email protected].3 parcel
 ```
 
 ## Target Audience

packages.dhall

@@ -109,10 +109,10 @@ let additions =
 -}
 
 let mkPackage =
-      https://raw.githubusercontent.com/purescript/package-sets/psc-0.12.5-20190427/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.0-20190602/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57
 
 let upstream =
-      https://raw.githubusercontent.com/purescript/package-sets/psc-0.12.5-20190427/src/packages.dhall sha256:6b17811247e1f825034fa4dacc4b8ec5eddd0e832e0e1579c2ba3b9b2a1c63fe
+      https://raw.githubusercontent.com/purescript/package-sets/psc-0.13.0-20190602/src/packages.dhall sha256:5da1578dd297709265715a92eda5f42989dce92e121fcc889cff669a3b997c3d
 
 let overrides =
       { halogen =
@@ -121,31 +121,6 @@ let overrides =
           upstream.halogen-vdom // { version = "v6.1.0" }
       }
 
-{- Halogen SVG has not been updated to Halogen 5 yet
-
-This fails with:
-Error found:
-in module Core
-at .spago/halogen-svg/v0.1.0/src/Svg/Core.purs:7:32 - 7:50 (line 7, column 32 - line 7, column 50)
-
-  Cannot import type ElemSpec from module Halogen.VDom
-  It either does not exist or the module does not export it.
-
-
-See https://github.com/purescript/documentation/blob/master/errors/UnknownImport.md for more information,
-or to contribute content related to this error.
-
-let additions =
-      { halogen-svg =
-          mkPackage
-            [ "strings"
-            , "halogen"
-            , "dom-indexed"
-            ]
-            "https://github.com/kwohlfahrt/purescript-halogen-svg.git"
-            "v0.1.0"
-      }
--}
 let additions = {=}
 
 in  upstream // overrides // additions

src/08-Going-Deeper/06-Various-Tips-and-Tricks.md

@@ -106,3 +106,46 @@ There are three reasons not to write this:
 1. One must keep these two versions (or maybe more depending on the number of conditions) of the same code in sync with one another. As one adds more complexity, this gets harder to maintain / get right.
 2. The code isn't as readable, so it's harder to see how one state is different from another.
 3. The above code might not be as performant in some situations as just using `HH.text ""`. By using this placeholder HTML value, the index values of the other children do not change. If we don't use that placeholder value, then `alwaysRenderChild3`'s index will switch from 3 to 2 and vice-versa.
+
+## A better way to assign multiple CSS classes
+
+If we look at Halogen's code, we'll see that there are two ways to assign a class to an HTML element:
+- single class: `HP.class_ $ ClassName "class-name"`
+- multiple classes: HP.classes [ ClassName "class1", ClassName "class2" ]
+
+As a result, when we want to added a lot of clases to a component (e.g. if we were using Tachyons to style our components using functional css), assigning multiple classes can get especially tedious and boilerplate-y:
+```purescript
+HP.classes
+  [ ClassName "class1"
+  , ClassName "class2"
+  , ClassName "class3"
+  , ClassName "class4"
+  , ClassName "class5"
+  , ClassName "class6"
+  ]
+```
+After a while, one might choose to reduce some of that boilerplate by using `map`/`<$>` from `Functor:
+```purescript
+HP.classes $ ClassName <$>
+  [ "class1"
+  , "class2"
+  , "class3"
+  , "class4"
+  , "class5"
+  , "class6"
+  ]
+```
+Fortunately, there's an even better way than the `Functor` approach (as I discovered after looking at the source code for `halogen-formless`). The trick is to use one `String` value that adds spaces between the classes:
+```purescript
+HP.class_ $ ClassName "class1 class2 class3 class4 class5 class6"
+```
+Since the `HP.class_ $ ClassName` part is boilerplate-y, we can abstract this into an easier function:
+```purescript
+class_ :: forall r t. String -> HH.IProp ( "class" :: String | r ) t
+class_ = HP.class_ <<< ClassName
+
+-- which allows us to now write:
+HH.div
+  [ class_ "class1 class2 class3 class4 class5 class6" ]
+  [ HH.text "Much easier..." ]
+```