mgreenly/simple-purescript.md

## simple-purescript.md

      
    Raw
  

              simple-purescript.md
            
          
    Quick and dirty https://www.purescript.org/ sample.
create a directory and enter it.
mkdir sample
cd sample

Use npm to install purescript and it's package manager spago.
npm install purescript spago

use spago to initialize the purescript project and then install the halogen package.
Halogen is the library that provides the virtual dom manipulation.
spago init
spago install halogen

Create the source code in src/Main.purs.
cat << EOF > src/Main.purs
> module Main where

import Prelude

import Effect (Effect)
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.VDom.Driver (runUI)

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component unit body

data Action = Increment | Decrement

component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }
  where
  initialState _ = 0

  render state =
    HH.div_
      [ HH.button [ HE.onClick \_ -> Decrement ] [ HH.text "-" ]
      , HH.div_ [ HH.text $ show state ]
      , HH.button [ HE.onClick \_ -> Increment ] [ HH.text "+" ]
      ]

  handleAction = case _ of
    Increment -> H.modify_ \state -> state + 1
    Decrement -> H.modify_ \state -> state - 1
> EOF
Turn the purescript into javascript.
spago bundle-app -t html/site.js

Create an html file to load the javascript.
cat << EOF > ./html/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Purescript Sample</title>
  </head>
  <body>
    <script src="./site.js"></script>
  </body>
</html>
EOF
Open it in a browser.
open html/index.html