From 273c7c9e70ed68055b1f9887f5eb713b918dac19 Mon Sep 17 00:00:00 2001 From: Jordan Martinez Date: Mon, 3 Jun 2019 22:14:13 -0700 Subject: [PATCH 1/3] Add tip: use modified single-class assignment to assign multiple classes --- .../06-Various-Tips-and-Tricks.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/src/08-Going-Deeper/06-Various-Tips-and-Tricks.md b/src/08-Going-Deeper/06-Various-Tips-and-Tricks.md index e1feea9..d5a56d0 100644 --- a/src/08-Going-Deeper/06-Various-Tips-and-Tricks.md +++ b/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..." ] +``` From 18d8e6b45600e02fdae7d17b9323e3ec5852c6f4 Mon Sep 17 00:00:00 2001 From: Jordan Martinez Date: Mon, 3 Jun 2019 22:08:03 -0700 Subject: [PATCH 2/3] Update Spago to 0.8.3.0 and PureScript to 0.13.0 --- .travis.yml | 2 +- ReadMe.md | 6 +++--- packages.dhall | 29 ++--------------------------- 3 files changed, 6 insertions(+), 31 deletions(-) diff --git a/.travis.yml b/.travis.yml index 4cba4d6..be81abb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,7 +15,7 @@ branches: - latestRelease install: - - npm i -g purescript@0.12.5 spago@0.8.0 parcel + - npm i -g purescript@0.13.0 spago@0.8.3 parcel # Print version numbers before_script: diff --git a/ReadMe.md b/ReadMe.md index 4e3e949..1292e7d 100644 --- a/ReadMe.md +++ b/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 spago@0.8.0 parcel +npm i -g purescript@0.13.0 spago@0.8.3 parcel ``` ## Target Audience diff --git a/packages.dhall b/packages.dhall index cb5637e..f7aa50b 100644 --- a/packages.dhall +++ b/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 From 9f07beb2c820d19839c093325d61fa83a2fc36f1 Mon Sep 17 00:00:00 2001 From: Jordan Martinez Date: Tue, 4 Jun 2019 07:32:09 -0700 Subject: [PATCH 3/3] Update Travis CI to use Node 10 and update NPM on build --- .travis.yml | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index be81abb..ed28e61 100644 --- a/.travis.yml +++ b/.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: + - 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 purescript@0.13.0 spago@0.8.3 parcel + # ^ Installing PureScript 0.13.0 hopefully now works # Print version numbers before_script: