Update for Halogen 1.0.0
parent
068279fd30
commit
5aa4fa846c
|
@ -7,11 +7,3 @@ install:
|
||||||
- npm install
|
- npm install
|
||||||
script:
|
script:
|
||||||
- npm run build
|
- 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}"
|
|
||||||
|
|
20
README.md
20
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.
|
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
|
``` shell
|
||||||
npm install --global bower
|
npm install --global bower
|
||||||
|
@ -23,19 +23,17 @@ git clone https://github.com/slamdata/purescript-halogen-template.git my-halogen
|
||||||
cd my-halogen-project
|
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:
|
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 --production
|
|
||||||
```
|
|
||||||
|
|
||||||
If you want to install a local copy of the PureScript compiler and Pulp then just run the usual:
|
|
||||||
|
|
||||||
``` shell
|
``` shell
|
||||||
npm install
|
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
|
## Building
|
||||||
|
|
||||||
|
@ -45,12 +43,12 @@ The project can now be built with:
|
||||||
npm run build
|
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:
|
This is an alias for the Pulp command:
|
||||||
|
|
||||||
``` shell
|
``` 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.
|
If you open `dist/index.html` you should now have a basic working Halogen app.
|
||||||
|
|
|
@ -10,6 +10,6 @@
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"purescript-console": "^2.0.0",
|
"purescript-console": "^2.0.0",
|
||||||
"purescript-halogen": "^0.12.0"
|
"purescript-halogen": "^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
14
package.json
14
package.json
|
@ -1,16 +1,12 @@
|
||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"postinstall": "bower install",
|
"build": "pulp build --to dist/app.js",
|
||||||
"build": "pulp browserify --optimise --to dist/app.js",
|
"watch": "pulp -w build --to dist/app.js"
|
||||||
"watch": "pulp -w browserify --to dist/app.js"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"virtual-dom": "^2.1.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"pulp": "^9.0.1",
|
"pulp": "^10.0.1",
|
||||||
"purescript": "^0.10.1",
|
"purescript": "^0.10.7",
|
||||||
"purescript-psa": "^0.3.9"
|
"purescript-psa": "^0.4.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
|
@ -1,47 +1,13 @@
|
||||||
module Main where
|
module Main where
|
||||||
|
|
||||||
import Prelude
|
import Prelude
|
||||||
|
|
||||||
import Control.Monad.Eff (Eff)
|
import Control.Monad.Eff (Eff)
|
||||||
|
import Halogen.Aff as HA
|
||||||
|
import Halogen.VDom.Driver (runUI)
|
||||||
|
|
||||||
import Halogen as H
|
import Component (component)
|
||||||
import Halogen.HTML.Events.Indexed as HE
|
|
||||||
import Halogen.HTML.Indexed as HH
|
|
||||||
import Halogen.Util (awaitBody, runHalogenAff)
|
|
||||||
|
|
||||||
data Query a = ToggleState a
|
main :: Eff (HA.HalogenEffects ()) Unit
|
||||||
|
main = HA.runHalogenAff do
|
||||||
type State = { on :: Boolean }
|
body <- HA.awaitBody
|
||||||
|
runUI component unit body
|
||||||
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
|
|
||||||
|
|
Loading…
Reference in New Issue