Update for Halogen 1.0.0
parent
068279fd30
commit
5aa4fa846c
|
@ -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}"
|
||||
|
|
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.
|
||||
|
||||
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.
|
||||
|
|
|
@ -10,6 +10,6 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"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,
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
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
|
||||
|
|
Loading…
Reference in New Issue