Purescript Counter

Main.js

(function(exports) {
  // Generated by psc version 0.8.5.0
  "use strict";
  var Prelude = PS["Prelude"];
  var Control_Monad_Aff = PS["Control.Monad.Aff"];
  var Control_Monad_Eff = PS["Control.Monad.Eff"];
  var Halogen = PS["Halogen"];
  var Halogen_Util = PS["Halogen.Util"];
  var Halogen_HTML_Indexed = PS["Halogen.HTML.Indexed"];
  var Halogen_HTML_Properties_Indexed = PS["Halogen.HTML.Properties.Indexed"];
  var Halogen_HTML_Elements = PS["Halogen.HTML.Elements"];
  var Halogen_HTML_Elements_Indexed = PS["Halogen.HTML.Elements.Indexed"];
  var Halogen_HTML = PS["Halogen.HTML"];
  var Control_Monad_Free = PS["Control.Monad.Free"];
  var Halogen_Query = PS["Halogen.Query"];
  var Halogen_Component = PS["Halogen.Component"];
  var Halogen_Driver = PS["Halogen.Driver"];        
  var State = function (x) {
      return x;
  };
  var Tick = (function () {
      function Tick(value0) {
          this.value0 = value0;
      };
      Tick.create = function (value0) {
          return new Tick(value0);
      };
      return Tick;
  })();
  var ui = (function () {
      var render = function (v) {
          return Halogen_HTML_Elements.div_([ Halogen_HTML_Elements_Indexed.h1([ Halogen_HTML_Properties_Indexed.id_("header") ])([ Halogen_HTML.text("counter") ]), Halogen_HTML_Elements.p_([ Halogen_HTML.text(Prelude.show(Prelude.showInt)(v)) ]) ]);
      };
      var $$eval = function (v) {
          return Prelude.bind(Control_Monad_Free.freeBind)(Halogen_Query.modify(function (v1) {
              return v1 + 1 | 0;
          }))(function () {
              return Prelude.pure(Control_Monad_Free.freeApplicative)(v.value0);
          });
      };
      return Halogen_Component.component({
          render: render, 
          "eval": $$eval
      });
  })();
  var setInterval = function (ms) {
      return function (a) {
          return Control_Monad_Aff["later'"](ms)(Prelude.bind(Control_Monad_Aff.bindAff)(a)(function () {
              return setInterval(ms)(a);
          }));
      };
  };
  var initialState = 0;
  var main = Halogen_Util.runHalogenAff(Prelude.bind(Control_Monad_Aff.bindAff)(Halogen_Util.awaitBody)(function (v) {
      return Prelude.bind(Control_Monad_Aff.bindAff)(Halogen_Driver.runUI(ui)(initialState)(v))(function (v1) {
          return setInterval(1000)(v1(Halogen_Query.action(Tick.create)));
      });
  }));
  exports["Tick"] = Tick;
  exports["State"] = State;
  exports["setInterval"] = setInterval;
  exports["main"] = main;
  exports["ui"] = ui;
  exports["initialState"] = initialState;
})(PS["Main"] = PS["Main"] || {});
PS["Main"].main();

Main.purs

module Main where

import Prelude

import Control.Monad.Aff (Aff, later')
import Control.Monad.Eff (Eff)

import Halogen
import Halogen.Util (runHalogenAff, awaitBody)
import Halogen.HTML.Indexed as H
import Halogen.HTML.Properties.Indexed as P

newtype State = State Int
initialState = State 0

data Query a = Tick a

ui :: forall g. Component State Query g
ui = component { render, eval }
  where
    render :: State -> ComponentHTML Query
    render (State n) =
      H.div_
        [ H.h1
          [ P.id_ "header" ]
          [ H.text "counter" ]
        , H.p_
          [ H.text (show n) ]
        ]

    eval :: Natural Query (ComponentDSL State Query g)
    eval (Tick next) = do
      modify (\(State n) -> State (n + 1))
      pure next

main :: Eff (HalogenEffects()) Unit
main = runHalogenAff do
  body <- awaitBody
  driver <- runUI ui initialState body
  setInterval 1000 $ driver (action Tick)

setInterval :: forall e a. Int -> Aff e a -> Aff e Unit
setInterval ms a = later' ms $ do
  a
  setInterval ms a