Add todoapp benchmark

bench/implementations/elm-0.16-optimized/Todo.elm

@@ -0,0 +1,339 @@
+module Todo where
+{-| TodoMVC implemented in Elm, using plain HTML and CSS for rendering.
+
+This application is broken up into four distinct parts:
+
+  1. Model  - a full definition of the application's state
+  2. Update - a way to step the application state forward
+  3. View   - a way to visualize our application state with HTML
+  4. Inputs - the signals necessary to manage events
+
+This clean division of concerns is a core part of Elm. You can read more about
+this in the Pong tutorial: http://elm-lang.org/blog/making-pong
+
+This program is not particularly large, so definitely see the following
+for notes on structuring more complex GUIs with Elm:
+https://github.com/evancz/elm-architecture-tutorial/
+-}
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Html.Lazy exposing (lazy2, lazy3)
+import Json.Decode as Json
+import Signal exposing (Signal, Address)
+import String
+import Window
+
+
+---- MODEL ----
+
+-- The full application state of our todo app.
+type alias Model =
+    { tasks : List Task
+    , field : String
+    , uid : Int
+    , visibility : String
+    }
+
+
+type alias Task =
+    { description : String
+    , completed : Bool
+    , editing : Bool
+    , id : Int
+    }
+
+
+newTask : String -> Int -> Task
+newTask desc id =
+    { description = desc
+    , completed = False
+    , editing = False
+    , id = id
+    }
+
+
+emptyModel : Model
+emptyModel =
+    { tasks = []
+    , visibility = "All"
+    , field = ""
+    , uid = 0
+    }
+
+
+---- UPDATE ----
+
+-- A description of the kinds of actions that can be performed on the model of
+-- our application. See the following for more info on this pattern and
+-- some alternatives: https://github.com/evancz/elm-architecture-tutorial/
+type Action
+    = NoOp
+    | UpdateField String
+    | EditingTask Int Bool
+    | UpdateTask Int String
+    | Add
+    | Delete Int
+    | DeleteComplete
+    | Check Int Bool
+    | CheckAll Bool
+    | ChangeVisibility String
+
+
+-- How we update our Model on a given Action?
+update : Action -> Model -> Model
+update action model =
+    case action of
+      NoOp -> model
+
+      Add ->
+          { model |
+              uid = model.uid + 1,
+              field = "",
+              tasks =
+                  if String.isEmpty model.field
+                    then model.tasks
+                    else model.tasks ++ [newTask model.field model.uid]
+          }
+
+      UpdateField str ->
+          { model | field = str }
+
+      EditingTask id isEditing ->
+          let updateTask t = if t.id == id then { t | editing = isEditing } else t
+          in
+              { model | tasks = List.map updateTask model.tasks }
+
+      UpdateTask id task ->
+          let updateTask t = if t.id == id then { t | description = task } else t
+          in
+              { model | tasks = List.map updateTask model.tasks }
+
+      Delete id ->
+          { model | tasks = List.filter (\t -> t.id /= id) model.tasks }
+
+      DeleteComplete ->
+          { model | tasks = List.filter (not << .completed) model.tasks }
+
+      Check id isCompleted ->
+          let updateTask t = if t.id == id then { t | completed = isCompleted } else t
+          in
+              { model | tasks = List.map updateTask model.tasks }
+
+      CheckAll isCompleted ->
+          let updateTask t = { t | completed = isCompleted }
+          in
+              { model | tasks = List.map updateTask model.tasks }
+
+      ChangeVisibility visibility ->
+          { model | visibility = visibility }
+
+
+---- VIEW ----
+
+view : Address Action -> Model -> Html
+view address model =
+    div
+      [ class "todomvc-wrapper"
+      , style [ ("visibility", "hidden") ]
+      ]
+      [ section
+          [ class "todoapp" ]
+          [ lazy2 taskEntry address model.field
+          , lazy3 taskList address model.visibility model.tasks
+          , lazy3 controls address model.visibility model.tasks
+          ]
+      , infoFooter
+      ]
+
+
+onEnter : Address a -> a -> Attribute
+onEnter address value =
+    on "keydown"
+      (Json.customDecoder keyCode is13)
+      (\_ -> Signal.message address value)
+
+
+is13 : Int -> Result String ()
+is13 code =
+  if code == 13 then Ok () else Err "not the right key code"
+
+
+taskEntry : Address Action -> String -> Html
+taskEntry address task =
+    header
+      [ class "header" ]
+      [ h1 [] [ text "todos" ]
+      , input
+          [ class "new-todo"
+          , placeholder "What needs to be done?"
+          , autofocus True
+          , value task
+          , name "newTodo"
+          , on "input" targetValue (Signal.message address << UpdateField)
+          , onEnter address Add
+          ]
+          []
+      ]
+
+
+taskList : Address Action -> String -> List Task -> Html
+taskList address visibility tasks =
+    let isVisible todo =
+            case visibility of
+              "Completed" -> todo.completed
+              "Active" -> not todo.completed
+              _ -> True
+
+        allCompleted = List.all .completed tasks
+
+        cssVisibility = if List.isEmpty tasks then "hidden" else "visible"
+    in
+    section
+      [ class "main"
+      , style [ ("visibility", cssVisibility) ]
+      ]
+      [ input
+          [ class "toggle-all"
+          , type' "checkbox"
+          , name "toggle"
+          , checked allCompleted
+          , onClick address (CheckAll (not allCompleted))
+          ]
+          []
+      , label
+          [ for "toggle-all" ]
+          [ text "Mark all as complete" ]
+      , ul
+          [ class "todo-list" ]
+          (List.map (todoItem address) (List.filter isVisible tasks))
+      ]
+
+
+todoItem : Address Action -> Task -> Html
+todoItem address todo =
+    li
+      [ classList [ ("completed", todo.completed), ("editing", todo.editing) ]
+      , key (toString todo.id)
+      ]
+      [ div
+          [ class "view" ]
+          [ input
+              [ class "toggle"
+              , type' "checkbox"
+              , checked todo.completed
+              , onClick address (Check todo.id (not todo.completed))
+              ]
+              []
+          , label
+              [ onDoubleClick address (EditingTask todo.id True) ]
+              [ text todo.description ]
+          , button
+              [ class "destroy"
+              , onClick address (Delete todo.id)
+              ]
+              []
+          ]
+      , input
+          [ class "edit"
+          , value todo.description
+          , name "title"
+          , id ("todo-" ++ toString todo.id)
+          , on "input" targetValue (Signal.message address << UpdateTask todo.id)
+          , onBlur address (EditingTask todo.id False)
+          , onEnter address (EditingTask todo.id False)
+          ]
+          []
+      ]
+
+
+controls : Address Action -> String -> List Task -> Html
+controls address visibility tasks =
+    let tasksCompleted = List.length (List.filter .completed tasks)
+        tasksLeft = List.length tasks - tasksCompleted
+        item_ = if tasksLeft == 1 then " item" else " items"
+    in
+    footer
+      [ class "footer"
+      , hidden (List.isEmpty tasks)
+      ]
+      [ span
+          [ class "todo-count" ]
+          [ strong [] [ text (toString tasksLeft) ]
+          , text (item_ ++ " left")
+          ]
+      , ul
+          [ class "filters" ]
+          [ visibilitySwap address "#/" "All" visibility
+          , text " "
+          , visibilitySwap address "#/active" "Active" visibility
+          , text " "
+          , visibilitySwap address "#/completed" "Completed" visibility
+          ]
+      , button
+          [ class "clear-completed"
+          , hidden (tasksCompleted == 0)
+          , onClick address DeleteComplete
+          ]
+          [ text ("Clear completed (" ++ toString tasksCompleted ++ ")") ]
+      ]
+
+
+visibilitySwap : Address Action -> String -> String -> String -> Html
+visibilitySwap address uri visibility actualVisibility =
+    li
+      [ onClick address (ChangeVisibility visibility) ]
+      [ a [ href uri, classList [("selected", visibility == actualVisibility)] ] [ text visibility ] ]
+
+
+infoFooter : Html
+infoFooter =
+    footer [ class "info" ]
+      [ p [] [ text "Double-click to edit a todo" ]
+      , p []
+          [ text "Written by "
+          , a [ href "https://github.com/evancz" ] [ text "Evan Czaplicki" ]
+          ]
+      , p []
+          [ text "Part of "
+          , a [ href "http://todomvc.com" ] [ text "TodoMVC" ]
+          ]
+      ]
+
+
+---- INPUTS ----
+
+-- wire the entire application together
+main : Signal Html
+main =
+  Signal.map (view actions.address) model
+
+
+-- manage the model of our application over time
+model : Signal Model
+model =
+  Signal.foldp update emptyModel actions.signal
+
+
+-- actions from user input
+actions : Signal.Mailbox Action
+actions =
+  Signal.mailbox NoOp
+
+
+port focus : Signal String
+port focus =
+    let needsFocus act =
+            case act of
+              EditingTask id bool -> bool
+              _ -> False
+
+        toSelector act =
+            case act of
+              EditingTask id _ -> "#todo-" ++ toString id
+              _ -> ""
+    in
+        actions.signal
+          |> Signal.filter needsFocus (EditingTask 0 True)
+          |> Signal.map toSelector

bench/implementations/elm-0.16-optimized/elm-package.json

@@ -0,0 +1,15 @@
+{
+    "version": "1.0.0",
+    "summary": "TodoMVC created with Elm and elm-html",
+    "repository": "https://github.com/evancz/elm-todomvc.git",
+    "license": "BSD3",
+    "source-directories": [
+        "."
+    ],
+    "exposed-modules": [],
+    "dependencies": {
+        "elm-lang/core": "3.0.0 <= v < 4.0.0",
+        "evancz/elm-html": "4.0.2 <= v < 5.0.0"
+    },
+    "elm-version": "0.16.0 <= v < 0.17.0"
+}

bench/implementations/elm-0.16-optimized/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Elm • TodoMVC</title>
+  <script type="text/javascript" src="elm.js"></script>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+</body>
+
+<script type="text/javascript">
+var todomvc = Elm.fullscreen(Elm.Todo);
+todomvc.ports.focus.subscribe(function(selector) {
+    setTimeout(function() {
+        var nodes = document.querySelectorAll(selector);
+        if (nodes.length === 1 && document.activeElement !== nodes[0]) {
+            nodes[0].focus();
+        }
+    }, 50);
+});
+</script>
+
+</html>

bench/implementations/elm-0.16-optimized/style.css

@@ -0,0 +1,382 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.todomvc-wrapper {
+    visibility: visible !important;
+}
+
+button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+body {
+    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.4em;
+    background: #f5f5f5;
+    color: #4d4d4d;
+    min-width: 230px;
+    max-width: 550px;
+    margin: 0 auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+    outline: none;
+}
+
+.hidden {
+    display: none;
+}
+
+.todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+                0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 24px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    outline: none;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+.new-todo {
+    padding: 16px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+    display: none;
+}
+
+.toggle-all {
+    position: absolute;
+    top: -55px;
+    left: -12px;
+    width: 60px;
+    height: 34px;
+    text-align: center;
+    border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+    content: '❯';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked:before {
+    color: #737373;
+}
+
+.todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+    border-bottom: none;
+}
+
+.todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+}
+
+.todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 13px 17px 12px 17px;
+    margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+    display: none;
+}
+
+.todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none; /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.todo-list li .toggle:after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+.todo-list li .toggle:checked:after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+.todo-list li label {
+    white-space: pre-line;
+    word-break: break-all;
+    padding: 15px 60px 15px 15px;
+    margin-left: 45px;
+    display: block;
+    line-height: 1.2;
+    transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    margin-bottom: 11px;
+    transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+    color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+    content: '×';
+}
+
+.todo-list li:hover .destroy {
+    display: block;
+}
+
+.todo-list li .edit {
+    display: none;
+}
+
+.todo-list li.editing:last-child {
+    margin-bottom: -1px;
+}
+
+.footer {
+    color: #777;
+    padding: 10px 15px;
+    height: 20px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+                0 8px 0 -3px #f6f6f6,
+                0 9px 1px -3px rgba(0, 0, 0, 0.2),
+                0 16px 0 -6px #f6f6f6,
+                0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+    float: left;
+    text-align: left;
+}
+
+.todo-count strong {
+    font-weight: 300;
+}
+
+.filters {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+
+.filters li {
+    display: inline;
+}
+
+.filters li a {
+    color: inherit;
+    margin: 3px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+}
+
+.filters li a.selected,
+.filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+}
+
+.clear-completed:hover {
+    text-decoration: underline;
+}
+
+.info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    font-size: 10px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+}
+
+.info p {
+    line-height: 1;
+}
+
+.info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+}
+
+.info a:hover {
+    text-decoration: underline;
+}
+
+/*
+    Hack to remove background from Mobile Safari.
+    Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+        background: none;
+    }
+
+    .todo-list li .toggle {
+        height: 40px;
+    }
+
+    .toggle-all {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+        -webkit-appearance: none;
+        appearance: none;
+    }
+}
+
+@media (max-width: 430px) {
+    .footer {
+        height: 50px;
+    }
+
+    .filters {
+        bottom: 10px;
+    }
+}