The miso package

[Tags:bsd3, library]

Miso is a small isomorphic Haskell front-end framework featuring a virtual-dom, diffing / patching algorithm, event delegation, event batching, SVG, Server-sent events, Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm, Redux and Bobril. Miso is pure by default, but side effects (like XHR) can be introduced into the system via the Effect data type. Miso makes heavy use of the GHCJS FFI and therefore has minimal dependencies.


[Skip to Readme]

Properties

Versions 0.1.0.0, 0.1.0.1, 0.1.0.2, 0.1.0.3, 0.1.0.4, 0.1.1.0, 0.1.2.0, 0.1.3.0, 0.1.4.0, 0.1.5.0, 0.2.0.0, 0.2.1.0, 0.3.0.0
Dependencies aeson, base (<5), BoundedChan, bytestring, containers, ghcjs-base, hspec, hspec-core, http-api-data, http-types, lucid, miso, network-uri, scientific, servant, text, transformers, unordered-containers, vector [details]
License BSD3
Copyright Copyright (c) 2017 David M. Johnson
Author David M. Johnson <djohnson.m@gmail.com>
Maintainer David M. Johnson <djohnson.m@gmail.com>
Category Web, Miso, Data Structures
Home page http://github.com/dmjio/miso
Source repository head: git clone https://github.com/dmjio/miso.git
Uploaded Thu Jul 20 02:50:29 UTC 2017 by DavidJohnson
Distributions NixOS:0.2.1.0, Stackage:0.3.0.0
Downloads 391 total (391 in the last 30 days)
Votes
1 []
Status Docs available [build log]
Last success reported on 2017-07-20 [all 1 reports]
Hackage Matrix CI

Modules

[Index]

Flags

NameDescriptionDefaultType
examplesBuilds Miso's examplesDisabledAutomatic
testsBuilds Miso's testsDisabledAutomatic

Use -f <flag> to enable a flag, or -f -<flag> to disable that flag. More info

Downloads

Maintainer's Corner

For package maintainers and hackage trustees

Readme for miso

Readme for miso-0.3.0.0

<h1 align="center">miso</h1> <p align="center"> <a href="https://haskell-miso.org"> <img width=10% src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/96/steaming-bowl_1f35c.png"> </a> <p align="center">A <i>tasty</i> <a href="https://www.haskell.org/"><strong>Haskell</strong></a> front-end framework</p> </p> <p align="center"> <a href="https://haskell-miso-slack.herokuapp.com"> <img src="https://img.shields.io/badge/slack-miso-E01563.svg?style=flat-square" alt="Miso Slack"> </a> <a href="http://hackage.haskell.org/package/miso"> <img src="https://img.shields.io/hackage/v/miso.svg?style=flat-square" alt="Hackage"> </a> <a href="https://haskell.org"> <img src="https://img.shields.io/badge/language-Haskell-green.svg?style=flat-square" alt="Haskell"> </a> <a href="https://img.shields.io/hackage-deps/v/miso.svg"> <img src="https://img.shields.io/hackage-deps/v/miso.svg?style=flat-square" alt="Hackage"> </a> <a href="https://github.com/dmjio/miso/blob/master/LICENSE"> <img src="http://img.shields.io/badge/license-BSD3-brightgreen.svg?style=flat-square" alt="LICENSE"> </a> <a href="https://ci.appveyor.com/project/dmjio/miso"> <img src="https://img.shields.io/appveyor/ci/dmjio/miso/master.svg?style=flat-square" alt="appveyor"> </a> <a href="https://hydra.dmj.io"> <img src="https://img.shields.io/badge/build-Hydra-00BDFD.svg?style=flat-square" alt="Miso Hydra"> </a> <a href="https://www.irccloud.com/invite?channel=%23haskell-miso&amp;hostname=irc.freenode.net&amp;port=6697&amp;ssl=1"> <img src="https://img.shields.io/badge/irc-%23haskell--miso-1e72ff.svg?style=flat-square" alt="IRC #haskell-miso"> </a> </p>

Miso is a small "isomorphic" Haskell front-end framework featuring a virtual-dom, diffing / patching algorithm, event delegation, event batching, SVG, Server-sent events, Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm, Redux and Bobril. Miso is pure by default, but side effects (like XHR) can be introduced into the system via the Effect data type. Miso makes heavy use of the GHCJS FFI and therefore has minimal dependencies.

Table of Contents

Examples

Haddocks

Sample application

-- | Haskell language pragma
{-# LANGUAGE RecordWildCards #-}

-- | Haskell module declaration
module Main where

-- | Miso framework import
import Miso

-- | Type synonym for an application model
type Model = Int

-- | Sum type for application events
data Action
  = AddOne
  | SubtractOne
  | NoOp
  | SayHelloWorld
  deriving (Show, Eq)

-- | Entry point for a miso application
main :: IO ()
main = startApp App {..}
  where
    initialAction = SayHelloWorld -- initial action to be executed on application load
    model  = 0            -- initial model
    update = updateModel      -- update function
    view   = viewModel        -- view function
    events = defaultEvents    -- default delegated events
    subs   = []           -- empty subscription list

-- | Updates model, optionally introduces side effects
updateModel :: Action -> Model -> Effect Model Action
updateModel AddOne m = noEff (m + 1)
updateModel SubtractOne m = noEff (m - 1)
updateModel NoOp m = noEff m
updateModel SayHelloWorld m = m <# do
  putStrLn "Hello World" >> pure NoOp

-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel x = div_ [] [
   button_ [ onClick AddOne ] [ text "+" ]
 , text (show x)
 , button_ [ onClick SubtractOne ] [ text "-" ]
 ]

Building examples

The easiest way to build the examples is with the nix package manager

git clone https://github.com/dmjio/miso && cd miso && nix-build

This will build all examples and documentation into a folder named result

➜  miso git:(master) ✗ tree result -d
result
|-- doc
|   |-- x86_64-osx-ghc-8.0.2
|   |   `-- miso-0.2.0.0
|   |       `-- html
|   |           `-- src
|   `-- x86_64-osx-ghcjs-0.2.0-ghc7_10_3
|       `-- miso-0.2.0.0
|           `-- html
|               `-- src
|-- examples
|   |-- mario.jsexe
|   |   `-- imgs
|   |       |-- jump
|   |       |-- stand
|   |       `-- walk
|   |-- router.jsexe
|   |-- simple.jsexe
|   |-- tests.jsexe
|   |-- todo-mvc.jsexe
|   `-- websocket.jsexe

To see examples, we recommend hosting them with a webserver

cd result/examples/todo-mvc.jsexe && python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...