├── .gitignore ├── test └── Main.purs ├── index.html ├── bower.json ├── src ├── Example │ ├── Zero.purs │ ├── CounterRemPrime.purs │ ├── Six.purs │ ├── RemGeneric.purs │ ├── CounterRem.purs │ ├── One.purs │ ├── Counter.purs │ ├── Two.purs │ ├── Four.purs │ ├── FourPrime.purs │ ├── Five.purs │ ├── Three.purs │ └── Seven.purs └── Main.purs ├── package.json ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | .pulp-cache/ 2 | /bower_components/ 3 | /node_modules/ 4 | /output/ 5 | /.psci* 6 | /src/.webpack.js 7 | -------------------------------------------------------------------------------- /test/Main.purs: -------------------------------------------------------------------------------- 1 | module Test.Main where 2 | 3 | import Control.Monad.Eff.Console 4 | 5 | main = do 6 | log "You should add some tests." 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "purs-architecture-tutorial", 3 | "version": "1.0.0", 4 | "moduleType": [ 5 | "node" 6 | ], 7 | "ignore": [ 8 | "**/.*", 9 | "node_modules", 10 | "bower_components", 11 | "output" 12 | ], 13 | "dependencies": { 14 | "purescript-console": "^0.1.0", 15 | "purescript-halogen": "~0.5", 16 | "purescript-affjax": "~0.8.1", 17 | "purescript-generics": "~0.7.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/Example/Zero.purs: -------------------------------------------------------------------------------- 1 | module Example.Zero where 2 | 3 | import Prelude 4 | 5 | import Halogen 6 | import qualified Halogen.HTML.Indexed as H 7 | 8 | data Input a = Input a 9 | 10 | ui :: forall g. (Functor g) => Component Unit Input g 11 | ui = component render eval 12 | where 13 | render _ = 14 | H.div_ [ H.h1_ [ H.text "Hello, World!" ] ] 15 | eval :: Eval Input Unit Input g 16 | eval (Input a) = pure a 17 | -------------------------------------------------------------------------------- /src/Example/CounterRemPrime.purs: -------------------------------------------------------------------------------- 1 | module Example.CounterRemPrime where 2 | 3 | import Prelude 4 | import Control.Plus (Plus) 5 | 6 | import Halogen 7 | 8 | import qualified Example.Counter as Counter 9 | import qualified Example.RemGeneric as Rem 10 | 11 | type State g = Rem.State Counter.State Counter.Input g 12 | type Query = Rem.Query Counter.Input 13 | 14 | ui :: forall g. (Plus g) 15 | => Component (State g) Query g 16 | ui = Rem.addRemove Counter.ui (Counter.init 0) 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "purs-architecture-tutorial", 3 | "version": "1.0.0", 4 | "description": "A port of the [Elm Architecture Tutorial](https://github.com/evancz/elm-architecture-tutorial/) to PureScript.", 5 | "main": "index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "dependencies": { 10 | "virtual-dom": "^2.1.1" 11 | }, 12 | "devDependencies": {}, 13 | "scripts": { 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/parsonsmatt/purs-architecture-tutorial.git" 19 | }, 20 | "author": "", 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/parsonsmatt/purs-architecture-tutorial/issues" 24 | }, 25 | "homepage": "https://github.com/parsonsmatt/purs-architecture-tutorial#readme" 26 | } 27 | -------------------------------------------------------------------------------- /src/Example/Six.purs: -------------------------------------------------------------------------------- 1 | module Example.Six where 2 | 3 | import Prelude 4 | import Control.Plus (Plus) 5 | import Data.Functor.Coproduct (Coproduct(..)) 6 | import Control.Monad.Aff (Aff()) 7 | 8 | import Halogen 9 | import qualified Halogen.HTML.Indexed as H 10 | 11 | import qualified Example.Five as Gif 12 | 13 | data Input a = NoOp a 14 | 15 | type State = 16 | InstalledState Unit Gif.State Input Gif.Input (Aff (Gif.GifEffects ())) Boolean 17 | 18 | type Query = 19 | Coproduct Input (ChildF Boolean Gif.Input) 20 | 21 | ui :: Component State Query (Aff (Gif.GifEffects ())) 22 | ui = parentComponent render eval 23 | where 24 | render _ = 25 | H.div_ 26 | [ H.slot true \_ -> { component: Gif.ui, initialState: Gif.initialState } 27 | , H.slot false \_ -> { component: Gif.ui, initialState: Gif.initialState } 28 | ] 29 | eval :: EvalParent Input Unit Gif.State Input Gif.Input (Aff (Gif.GifEffects ())) Boolean 30 | eval (NoOp a) = pure a 31 | -------------------------------------------------------------------------------- /src/Example/RemGeneric.purs: -------------------------------------------------------------------------------- 1 | module Example.RemGeneric where 2 | 3 | import Prelude 4 | import Control.Plus (Plus) 5 | import Data.Functor.Coproduct (Coproduct(..)) 6 | 7 | import Halogen 8 | import qualified Halogen.HTML.Indexed as H 9 | import qualified Halogen.HTML.Events.Indexed as E 10 | 11 | data QueryP a = Remove a 12 | 13 | type State s f g = 14 | InstalledState Unit s QueryP f g Unit 15 | 16 | type Query f = 17 | Coproduct QueryP (ChildF Unit f) 18 | 19 | addRemove :: forall g s f. (Plus g) 20 | => Component s f g 21 | -> s 22 | -> Component (State s f g) (Query f) g 23 | addRemove comp state = parentComponent render eval 24 | where 25 | render _ = 26 | H.div_ 27 | [ H.slot unit \_ -> { component: comp, initialState: state } 28 | , H.button [ E.onClick $ E.input_ Remove ] 29 | [ H.text "Remove" ] 30 | ] 31 | eval :: EvalParent QueryP Unit s QueryP f g Unit 32 | eval (Remove a) = pure a 33 | -------------------------------------------------------------------------------- /src/Example/CounterRem.purs: -------------------------------------------------------------------------------- 1 | module Example.CounterRem where 2 | 3 | import Prelude 4 | import Control.Plus (Plus) 5 | import Data.Functor.Coproduct 6 | 7 | import Halogen 8 | import qualified Halogen.HTML.Indexed as H 9 | import qualified Halogen.HTML.Events.Indexed as E 10 | 11 | import Example.Three (mslot) 12 | import Example.Two (CounterSlot(..)) 13 | import qualified Example.Counter as Counter 14 | 15 | data Input a = Remove a 16 | 17 | type State g = 18 | InstalledState Unit Counter.State Input Counter.Input g CounterSlot 19 | type Query = 20 | Coproduct Input (ChildF CounterSlot Counter.Input) 21 | 22 | ui :: forall g. (Plus g) 23 | => Component (State g) Query g 24 | ui = parentComponent render eval 25 | where 26 | render _ = 27 | H.div_ 28 | [ mslot (CounterSlot 0) Counter.ui (Counter.init 0) 29 | , H.button [ E.onClick $ E.input_ Remove ] 30 | [ H.text "Remove" ] 31 | ] 32 | eval :: EvalParent Input Unit Counter.State Input Counter.Input g CounterSlot 33 | eval (Remove a) = pure a 34 | -------------------------------------------------------------------------------- /src/Example/One.purs: -------------------------------------------------------------------------------- 1 | module Example.One where 2 | 3 | import Prelude 4 | 5 | import Halogen 6 | import qualified Halogen.HTML.Indexed as H 7 | import qualified Halogen.HTML.Events.Indexed as E 8 | 9 | type State = 10 | { count :: Int 11 | } 12 | 13 | data Input a 14 | = Increment a 15 | | Decrement a 16 | 17 | init :: Int -> State 18 | init i = { count: i } 19 | 20 | ui :: forall g. (Functor g) => Component State Input g 21 | ui = component render eval 22 | where 23 | render :: Render State Input 24 | render state = 25 | H.div_ 26 | [ H.button [ E.onClick $ E.input_ Decrement ] 27 | [ H.text "-" ] 28 | , H.p_ [ H.text (show state.count)] 29 | , H.button [ E.onClick $ E.input_ Increment ] 30 | [ H.text "+" ] 31 | ] 32 | 33 | eval :: Eval Input State Input g 34 | eval (Increment next) = do 35 | modify (\state -> state { count = state.count + 1 }) 36 | pure next 37 | eval (Decrement next) = do 38 | modify (\state -> state { count = state.count - 1 }) 39 | pure next 40 | -------------------------------------------------------------------------------- /src/Example/Counter.purs: -------------------------------------------------------------------------------- 1 | module Example.Counter where 2 | 3 | import Prelude 4 | 5 | import Halogen 6 | import qualified Halogen.HTML.Indexed as H 7 | import qualified Halogen.HTML.Events.Indexed as E 8 | 9 | type State = 10 | { count :: Int 11 | } 12 | 13 | data Input a 14 | = Increment a 15 | | Decrement a 16 | | Reset a 17 | 18 | init :: Int -> State 19 | init i = { count: i } 20 | 21 | ui :: forall g. (Functor g) => Component State Input g 22 | ui = component render eval 23 | where 24 | render :: Render State Input 25 | render state = 26 | H.div_ 27 | [ H.button [ E.onClick $ E.input_ Decrement ] 28 | [ H.text "-" ] 29 | , H.p_ [ H.text (show state.count)] 30 | , H.button [ E.onClick $ E.input_ Increment ] 31 | [ H.text "+" ] 32 | ] 33 | 34 | eval :: Eval Input State Input g 35 | eval (Increment next) = do 36 | modify (\state -> state { count = state.count + 1 }) 37 | pure next 38 | eval (Decrement next) = do 39 | modify (\state -> state { count = state.count - 1 }) 40 | pure next 41 | eval (Reset next) = do 42 | modify (const (init 0)) 43 | pure next 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # purs-architecture-tutorial 2 | 3 | A port of the [Elm Architecture Tutorial](https://github.com/evancz/elm-architecture-tutorial/) to PureScript. 4 | 5 | ## Getting Started: 6 | 7 | 1. Ensure that you've got PureScript 0.7.6 installed. (has also been tested with 0.8RC) 8 | 2. Ensure that you've got pulp 8.x installed (`npm install pulp@8`) 9 | 3. Run `npm install` to get the virtual-dom dependency loaded 10 | 4. Run `pulp dep install` to get the PureScript dependencies loaded. 11 | 5. Run `pulp server` to run the server and access it at `http://localhost:1337` 12 | 13 | ## Blog posts: 14 | 15 | The repository is accompanied by a series of blog posts explaining the code and examples: 16 | 17 | 1. [Elm vs PureScript I: War of the Hello, Worlds](http://www.parsonsmatt.org/programming/2015/10/03/elm_vs_purescript.html) 18 | 2. [Elm vs PureScript II](http://www.parsonsmatt.org/programming/2015/10/05/elm_vs_purescript_ii.html) 19 | 3. [Elm Architecture in PureScript III: Dynamic Lists of Counters](http://www.parsonsmatt.org/programming/2015/10/10/elm_architecture_in_purescript_iii.html) 20 | 4. [Elm Architecture in PureScript IV: Effects](http://www.parsonsmatt.org/programming/2015/10/11/elm_architecture_in_purescript_iv_effects.html) 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/Main.purs: -------------------------------------------------------------------------------- 1 | module Main where 2 | 3 | import Prelude 4 | 5 | import Control.Monad.Aff (runAff) 6 | 7 | import Halogen 8 | import Halogen.Util (appendToBody) 9 | import Control.Monad.Eff.Exception (throwException) 10 | 11 | import qualified Example.Zero as Ex0 12 | import qualified Example.One as Ex1 13 | import qualified Example.Two as Ex2 14 | import qualified Example.Three as Ex3 15 | import qualified Example.Four as Ex4 16 | import qualified Example.CounterRem as CR 17 | import qualified Example.Five as Ex5 18 | import qualified Example.Six as Ex6 19 | import qualified Example.Seven as Ex7 20 | 21 | main = runAff throwException (const (pure unit)) $ do 22 | -- app <- runEx0 23 | -- app <- runEx1 24 | -- app <- runEx2 25 | -- app <- runEx3 26 | -- app <- runRemCounter 27 | -- app <- runEx4 28 | -- app <- runEx5 29 | -- app <- runEx6 30 | app <- runEx7 31 | appendToBody app.node 32 | 33 | runEx0 = runUI Ex0.ui unit 34 | runEx1 = runUI Ex1.ui (Ex1.init 0) 35 | runEx2 = runUI Ex2.ui (installedState Ex2.init) 36 | runEx3 = runUI Ex3.ui (installedState Ex3.initialState) 37 | runRemCounter = runUI CR.ui (installedState unit) 38 | runEx4 = runUI Ex4.ui (installedState Ex3.initialState) 39 | runEx5 = runUI Ex5.ui Ex5.initialState 40 | runEx6 = runUI Ex6.ui (installedState unit) 41 | runEx7 = runUI (Ex7.makeList Ex5.ui Ex5.initialState) Ex7.initialState 42 | -------------------------------------------------------------------------------- /src/Example/Two.purs: -------------------------------------------------------------------------------- 1 | module Example.Two where 2 | 3 | import Prelude 4 | 5 | import Data.Functor.Coproduct 6 | import Control.Monad 7 | import Control.Plus (Plus) 8 | 9 | import Halogen 10 | import qualified Halogen.HTML.Indexed as H 11 | import qualified Halogen.HTML.Events.Indexed as E 12 | 13 | import qualified Example.Counter as Ex1 14 | 15 | newtype CounterSlot = CounterSlot Int 16 | 17 | instance counterSlotOrd :: Ord CounterSlot where 18 | compare (CounterSlot a) (CounterSlot b) = compare a b 19 | 20 | instance counterSlotEq :: Eq CounterSlot where 21 | eq (CounterSlot a) (CounterSlot b) = eq a b 22 | 23 | type StateP = 24 | { topCounter :: CounterSlot 25 | , bottomCounter :: CounterSlot 26 | } 27 | 28 | init :: StateP 29 | init = { topCounter: CounterSlot 0, bottomCounter: CounterSlot 1 } 30 | 31 | data Input a 32 | = Reset a 33 | 34 | type State g = 35 | InstalledState StateP Ex1.State Input Ex1.Input g CounterSlot 36 | type Query = 37 | Coproduct Input (ChildF CounterSlot Ex1.Input) 38 | 39 | ui :: forall g. (Plus g) 40 | => Component (State g) Query g 41 | ui = parentComponent render eval 42 | where 43 | render state = 44 | H.div_ 45 | [ H.slot state.topCounter mkCounter 46 | , H.slot state.bottomCounter mkCounter 47 | , H.button [ E.onClick $ E.input_ Reset ] 48 | [ H.text "Reset!" ] 49 | ] 50 | 51 | mkCounter :: Unit -> { component :: Component Ex1.State Ex1.Input g, initialState :: Ex1.State } 52 | mkCounter _ = { component: Ex1.ui, initialState: Ex1.init 0 } 53 | 54 | eval :: EvalParent _ _ _ _ _ g _ 55 | eval (Reset next) = do 56 | query (CounterSlot 0) (action Ex1.Reset) 57 | query (CounterSlot 1) (action Ex1.Reset) 58 | pure next 59 | -------------------------------------------------------------------------------- /src/Example/Four.purs: -------------------------------------------------------------------------------- 1 | module Example.Four where 2 | 3 | import Prelude 4 | import Data.Either 5 | import Data.Functor.Coproduct 6 | import Data.Array (filter) 7 | import Control.Plus (Plus) 8 | 9 | import Halogen 10 | import qualified Halogen.HTML.Indexed as H 11 | import qualified Halogen.HTML.Events.Indexed as E 12 | 13 | import qualified Example.CounterRem as Counter 14 | import Example.Two (CounterSlot(..)) 15 | import Example.Three (StateP(), mslot, addCounter, initialState) 16 | 17 | data Input a = AddCounter a 18 | 19 | type State g = 20 | InstalledState StateP (Counter.State g) Input Counter.Query g CounterSlot 21 | 22 | type Query = 23 | Coproduct Input (ChildF CounterSlot Counter.Query) 24 | 25 | ui :: forall g. (Plus g) 26 | => Component (State g) Query g 27 | ui = parentComponent' render eval peek 28 | where 29 | render state = 30 | H.div_ 31 | [ H.h1_ [ H.text "Counters" ] 32 | , H.ul_ (map (mapSlot CounterSlot Counter.ui (installedState unit)) state.counterArray) 33 | , H.button [ E.onClick $ E.input_ AddCounter ] 34 | [ H.text "Add Counter" ] 35 | ] 36 | 37 | eval :: EvalParent _ _ _ _ _ g CounterSlot 38 | eval (AddCounter next) = do 39 | modify addCounter 40 | pure next 41 | 42 | peek :: Peek (ChildF CounterSlot Counter.Query) StateP (Counter.State g) Input Counter.Query g CounterSlot 43 | peek (ChildF counterSlot (Coproduct queryAction)) = 44 | case queryAction of 45 | Left (Counter.Remove _) -> 46 | modify (removeCounter counterSlot) 47 | _ -> 48 | pure unit 49 | 50 | mapSlot slot comp state index = mslot (slot index) comp state 51 | 52 | removeCounter :: CounterSlot -> StateP -> StateP 53 | removeCounter (CounterSlot index) state = 54 | state { counterArray = filter (/= index) state.counterArray } 55 | -------------------------------------------------------------------------------- /src/Example/FourPrime.purs: -------------------------------------------------------------------------------- 1 | module Example.FourPrime where 2 | 3 | import Prelude 4 | import Data.Either 5 | import Data.Functor.Coproduct 6 | import Data.Array (filter) 7 | import Control.Plus (Plus) 8 | 9 | import Halogen 10 | import qualified Halogen.HTML.Indexed as H 11 | import qualified Halogen.HTML.Events.Indexed as E 12 | 13 | import qualified Example.CounterRemPrime as Counter 14 | import qualified Example.RemGeneric as Rem 15 | import Example.Two (CounterSlot(..)) 16 | import Example.Three (StateP(), addCounter, initialState) 17 | 18 | data Input a = AddCounter a 19 | 20 | type State g = 21 | InstalledState StateP (Counter.State g) Input Counter.Query g CounterSlot 22 | 23 | type Query = 24 | Coproduct Input (ChildF CounterSlot Counter.Query) 25 | 26 | ui :: forall g. (Plus g) 27 | => Component (State g) Query g 28 | ui = parentComponent' render eval peek 29 | where 30 | render state = 31 | H.div_ 32 | [ H.h1_ [ H.text "Counters" ] 33 | , H.ul_ (map mkChild state.counterArray) 34 | , H.button [ E.onClick $ E.input_ AddCounter ] 35 | [ H.text "Add Counter" ] 36 | ] 37 | 38 | mkChild i = H.slot (CounterSlot i) \_ -> { component: Counter.ui, initialState: installedState unit } 39 | 40 | eval :: EvalParent Input StateP _ Input _ g CounterSlot 41 | eval (AddCounter next) = do 42 | modify addCounter 43 | pure next 44 | 45 | peek :: Peek (ChildF CounterSlot Counter.Query) StateP (Counter.State g) Input Counter.Query g CounterSlot 46 | peek (ChildF counterSlot (Coproduct queryAction)) = 47 | case queryAction of 48 | Left (Rem.Remove _) -> 49 | modify (removeCounter counterSlot) 50 | _ -> 51 | pure unit 52 | 53 | removeCounter :: CounterSlot -> StateP -> StateP 54 | removeCounter (CounterSlot index) state = 55 | state { counterArray = filter (/= index) state.counterArray } 56 | -------------------------------------------------------------------------------- /src/Example/Five.purs: -------------------------------------------------------------------------------- 1 | module Example.Five where 2 | 3 | import Prelude 4 | 5 | import Data.Foldable (mconcat) 6 | import Data.Either (either) 7 | import Control.Monad.Aff (Aff(), runAff) 8 | import Control.Monad.Eff 9 | import Control.Monad.Free (liftFI) 10 | import Data.Foreign.Class (readProp) 11 | 12 | import Halogen 13 | import qualified Halogen.HTML.Indexed as H 14 | import qualified Halogen.HTML.Properties.Indexed as P 15 | import qualified Halogen.HTML.Events.Indexed as E 16 | 17 | import Network.HTTP.Affjax (AJAX()) 18 | import qualified Network.HTTP.Affjax as AJ 19 | 20 | type State = 21 | { topic :: String 22 | , gifUrl :: String 23 | } 24 | 25 | initialState :: State 26 | initialState = { topic: "cats", gifUrl: "" } 27 | 28 | data Input a 29 | = RequestMore a 30 | 31 | type GifEffects eff = HalogenEffects (ajax :: AJAX | eff) 32 | 33 | giphyKey :: String 34 | giphyKey = "dc6zaTOxFJmzC" 35 | 36 | giphyUrl :: String 37 | giphyUrl = "https://api.giphy.com/v1/gifs/random" 38 | 39 | giphyRequestUrl :: String -> String 40 | giphyRequestUrl topic = mconcat 41 | [ giphyUrl 42 | , "?tag=", topic 43 | , "&api_key=", giphyKey 44 | ] 45 | 46 | ui :: Component State Input (Aff (GifEffects ())) 47 | ui = component render eval 48 | where 49 | render :: Render State Input 50 | render state = 51 | H.div_ 52 | [ H.h2_ [ H.text state.topic ] 53 | , H.button [ E.onClick $ E.input_ RequestMore ] 54 | [ H.text "Moar!!" ] 55 | , H.img [ P.src state.gifUrl ] 56 | ] 57 | 58 | eval :: Eval Input State Input (Aff (GifEffects ())) 59 | eval (RequestMore a) = do 60 | state <- get 61 | newGifUrlFn <- liftFI (fetchGif state.topic) 62 | modify \s -> s { gifUrl = newGifUrlFn s.gifUrl } 63 | pure a 64 | 65 | fetchGif :: forall eff. String -> Aff (ajax :: AJAX | eff) (String -> String) 66 | fetchGif topic = do 67 | result <- AJ.get (giphyRequestUrl topic) 68 | let url = readProp "data" result.response >>= readProp "image_url" 69 | pure (either (flip const) const url) 70 | -------------------------------------------------------------------------------- /src/Example/Three.purs: -------------------------------------------------------------------------------- 1 | module Example.Three where 2 | 3 | import Prelude 4 | import Data.Array 5 | import Data.Functor.Coproduct (Coproduct(..)) 6 | import Control.Plus (Plus) 7 | 8 | import Halogen 9 | import qualified Halogen.HTML.Indexed as H 10 | import qualified Halogen.HTML.Events.Indexed as E 11 | 12 | import qualified Example.Counter as Counter 13 | import Example.Two (CounterSlot(..)) 14 | 15 | type StateP = 16 | { counterArray :: Array Int 17 | , nextID :: Int 18 | } 19 | 20 | initialState :: StateP 21 | initialState = 22 | { counterArray: [] 23 | , nextID: 0 24 | } 25 | 26 | data Input a 27 | = AddCounter a 28 | | RemoveCounter a 29 | 30 | type State g = 31 | InstalledState StateP Counter.State Input Counter.Input g CounterSlot 32 | 33 | type Query = 34 | Coproduct Input (ChildF CounterSlot Counter.Input) 35 | 36 | mslot :: forall s f g p i. p -> Component s f g -> s -> HTML (SlotConstructor s f g p) i 37 | mslot slot comp state = H.slot slot \_ -> { component: comp, initialState: state } 38 | 39 | ui :: forall g. (Plus g) 40 | => Component (State g) Query g 41 | ui = parentComponent render eval 42 | where 43 | render state = 44 | H.div_ 45 | [ H.h1_ [ H.text "Counters" ] 46 | , H.ul_ $ map mkSlot state.counterArray 47 | , H.button [ E.onClick $ E.input_ AddCounter ] 48 | [ H.text "Add Counter" ] 49 | , H.button [ E.onClick $ E.input_ RemoveCounter ] 50 | [ H.text "Remove Counter" ] 51 | ] 52 | 53 | mkSlot i = mslot (CounterSlot i) Counter.ui (Counter.init 0) 54 | 55 | eval :: EvalParent Input StateP Counter.State Input Counter.Input g CounterSlot 56 | eval (AddCounter next) = do 57 | modify addCounter 58 | pure next 59 | eval (RemoveCounter next) = do 60 | modify removeCounter 61 | pure next 62 | 63 | addCounter :: StateP -> StateP 64 | addCounter s = 65 | s { counterArray = s.nextID : s.counterArray 66 | , nextID = s.nextID + 1 67 | } 68 | 69 | removeCounter :: StateP -> StateP 70 | removeCounter s = 71 | s { counterArray = drop 1 s.counterArray 72 | , nextID = s.nextID - 1 73 | } 74 | -------------------------------------------------------------------------------- /src/Example/Seven.purs: -------------------------------------------------------------------------------- 1 | module Example.Seven where 2 | 3 | import Prelude 4 | 5 | import Control.Plus (Plus) 6 | import Data.Functor.Coproduct 7 | import Data.Functor (($>)) 8 | import Data.Array 9 | import Data.Generic 10 | 11 | import Halogen 12 | import qualified Halogen.HTML.Indexed as H 13 | import qualified Halogen.HTML.Events.Indexed as E 14 | 15 | type StateP = 16 | { itemArray :: Array Int 17 | , nextID :: Int 18 | } 19 | 20 | initialStateP :: StateP 21 | initialStateP = 22 | { itemArray: [] 23 | , nextID: 0 24 | } 25 | 26 | data QueryP a 27 | = AddItem a 28 | | RemItem a 29 | 30 | newtype Slot = Slot Int 31 | 32 | derive instance genericSlot :: Generic Slot 33 | 34 | instance ordSlot :: Ord Slot where 35 | compare = gCompare 36 | 37 | instance eqSlot :: Eq Slot where 38 | eq = gEq 39 | 40 | makeList :: forall g p s f. (Plus g) 41 | => Component s f g 42 | -> s 43 | -> Component (State s f g) (Query f) g 44 | makeList comp initState = parentComponent render eval 45 | where 46 | render state = 47 | H.div_ 48 | [ H.button [ E.onClick $ E.input_ AddItem ] 49 | [ H.text "+" ] 50 | , H.button [ E.onClick $ E.input_ RemItem ] 51 | [ H.text "-" ] 52 | , H.ul_ (map (\i -> H.slot (Slot i) (initComp comp initState)) state.itemArray) 53 | ] 54 | 55 | initComp :: Component s f g -> s -> Unit -> { component :: _, initialState :: _ } 56 | initComp c s _ = {component: c, initialState: s} 57 | 58 | eval :: EvalParent QueryP StateP s QueryP f g Slot 59 | eval (AddItem next) = modify addItem $> next 60 | eval (RemItem next) = modify remItem $> next 61 | 62 | addItem :: StateP -> StateP 63 | addItem state = 64 | state { itemArray = state.nextID : state.itemArray 65 | , nextID = state.nextID + 1 66 | } 67 | 68 | remItem :: StateP -> StateP 69 | remItem state = 70 | state { itemArray = drop 1 state.itemArray } 71 | 72 | type State s f g = 73 | InstalledState StateP s QueryP f g Slot 74 | 75 | type Query f = 76 | Coproduct QueryP (ChildF Slot f) 77 | 78 | initialState :: forall s f g p. State s f g 79 | initialState = installedState initialStateP 80 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | --------------------------------------------------------------------------------