From 5aa4fa846cb90f68e01ff547c4b3daa20533933a Mon Sep 17 00:00:00 2001 From: Gary Burgess Date: Tue, 28 Feb 2017 00:31:13 +0000 Subject: [PATCH] Update for Halogen 1.0.0 --- .travis.yml | 8 -------- README.md | 20 +++++++++---------- bower.json | 2 +- package.json | 14 +++++--------- src/Component.purs | 48 ++++++++++++++++++++++++++++++++++++++++++++++ src/Main.purs | 48 +++++++--------------------------------------- 6 files changed, 70 insertions(+), 70 deletions(-) create mode 100644 src/Component.purs diff --git a/.travis.yml b/.travis.yml index f8ab9a3..e3514bc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -7,11 +7,3 @@ install: - npm install script: - npm run build -after_success: -- >- - test $TRAVIS_TAG && - node_modules/.bin/psc-publish > .pursuit.json && - curl -X POST http://pursuit.purescript.org/packages \ - -d @.pursuit.json \ - -H 'Accept: application/json' \ - -H "Authorization: token ${GITHUB_TOKEN}" diff --git a/README.md b/README.md index e2d1417..bbeec65 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This is a template for starting a fresh project using the [purescript-halogen](h This guide assumes you already have Git and Node.js installed with `npm` somewhere on your path. -In the PureScript ecosystem [Bower](http://bower.io/) is the most commonly used package manager and we'll be relying on it for this project, so if you don't already have it, you can install it like this: +In the PureScript ecosystem [Bower](http://bower.io/) is currently the most commonly used package manager and we'll be relying on it for this project, so if you don't already have it, you can install it like this: ``` shell npm install --global bower @@ -23,19 +23,17 @@ git clone https://github.com/slamdata/purescript-halogen-template.git my-halogen cd my-halogen-project ``` -If you already have a global installation of the PureScript compiler and [Pulp](https://github.com/bodil/pulp), you can run: - -``` shell -npm install --production -``` - -If you want to install a local copy of the PureScript compiler and Pulp then just run the usual: +If you don't already have a global installation of the PureScript compiler and [Pulp](https://github.com/bodil/pulp) (or you want a local installation with the appropriate versions) you can run: ``` shell npm install ``` -`npm install` is required for Halogen due to its dependency on `virtual-dom`. A postinstall script should have installed the remaining Bower dependencies. +Finally you'll need to install the PureScript library dependencies for this project with Bower: + +``` shell +bower install +``` ## Building @@ -45,12 +43,12 @@ The project can now be built with: npm run build ``` -This will build the PureScript source code, run Browserify on the output, and produce a bundled JS file with `virtual-dom` and the PureScript-compiled JS as `dist/app.js`. +This will build the PureScript source code and produce a bundled JS file as `dist/app.js`. This is an alias for the Pulp command: ``` shell -pulp browserify --to dist/app.js +pulp build --to dist/app.js ``` If you open `dist/index.html` you should now have a basic working Halogen app. diff --git a/bower.json b/bower.json index 77215b3..1f013dc 100644 --- a/bower.json +++ b/bower.json @@ -10,6 +10,6 @@ ], "dependencies": { "purescript-console": "^2.0.0", - "purescript-halogen": "^0.12.0" + "purescript-halogen": "^1.0.0" } } diff --git a/package.json b/package.json index 5209e02..9383366 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,12 @@ { "private": true, "scripts": { - "postinstall": "bower install", - "build": "pulp browserify --optimise --to dist/app.js", - "watch": "pulp -w browserify --to dist/app.js" - }, - "dependencies": { - "virtual-dom": "^2.1.1" + "build": "pulp build --to dist/app.js", + "watch": "pulp -w build --to dist/app.js" }, "devDependencies": { - "pulp": "^9.0.1", - "purescript": "^0.10.1", - "purescript-psa": "^0.3.9" + "pulp": "^10.0.1", + "purescript": "^0.10.7", + "purescript-psa": "^0.4.0" } } diff --git a/src/Component.purs b/src/Component.purs new file mode 100644 index 0000000..b614349 --- /dev/null +++ b/src/Component.purs @@ -0,0 +1,48 @@ +module Component where + +import Prelude + +import Data.Maybe (Maybe(..)) + +import Halogen as H +import Halogen.HTML as HH +import Halogen.HTML.Events as HE + +data Query a = ToggleState a + +type State = { on :: Boolean } + +component :: forall m. H.Component HH.HTML Query Unit Void m +component = + H.component + { initialState: const initialState + , render + , eval + , receiver: const Nothing + } + where + + initialState :: State + initialState = { on: false } + + render :: State -> H.ComponentHTML Query + render state = + HH.div_ + [ HH.h1_ + [ HH.text "Hello world!" ] + , HH.p_ + [ HH.text "Why not toggle this button:" ] + , HH.button + [ HE.onClick (HE.input_ ToggleState) ] + [ HH.text + if not state.on + then "Don't push me" + else "I said don't push me!" + ] + ] + + eval :: Query ~> H.ComponentDSL State Query Void m + eval = case _ of + ToggleState next -> do + H.modify (\state -> { on: not state.on }) + pure next diff --git a/src/Main.purs b/src/Main.purs index cf415af..b20cea3 100644 --- a/src/Main.purs +++ b/src/Main.purs @@ -1,47 +1,13 @@ module Main where import Prelude - import Control.Monad.Eff (Eff) +import Halogen.Aff as HA +import Halogen.VDom.Driver (runUI) -import Halogen as H -import Halogen.HTML.Events.Indexed as HE -import Halogen.HTML.Indexed as HH -import Halogen.Util (awaitBody, runHalogenAff) +import Component (component) -data Query a = ToggleState a - -type State = { on :: Boolean } - -initialState :: State -initialState = { on: false } - -ui :: forall g. H.Component State Query g -ui = H.component { render, eval } - where - - render :: State -> H.ComponentHTML Query - render state = - HH.div_ - [ HH.h1_ - [ HH.text "Hello world!" ] - , HH.p_ - [ HH.text "Why not toggle this button:" ] - , HH.button - [ HE.onClick (HE.input_ ToggleState) ] - [ HH.text - if not state.on - then "Don't push me" - else "I said don't push me!" - ] - ] - - eval :: Query ~> H.ComponentDSL State Query g - eval (ToggleState next) = do - H.modify (\state -> { on: not state.on }) - pure next - -main :: Eff (H.HalogenEffects ()) Unit -main = runHalogenAff do - body <- awaitBody - H.runUI ui initialState body +main :: Eff (HA.HalogenEffects ()) Unit +main = HA.runHalogenAff do + body <- HA.awaitBody + runUI component unit body