====== Useful Elm ======

===== Base structure =====
<code>
module Happened exposing (..)

import Browser
import Html exposing (div, text)

main =
  Browser.element
    { init = init
    , update = update
    , subscriptions = subscriptions
    , view = view
    }

type alias Model = 
    { number: Int
    , flags: Flags
    }

initialModel : Flags -> Model
initialModel flags = { number = 0, flags = flags }

subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none

type alias Flags = 
    { value : String
    }

init : Flags -> (Model, Cmd Msg)
init flags = (initialModel flags, Cmd.none)

type Msg = NoMsg

update msg model =
  case msg of
    NoMsg -> (model, Cmd.none)

view model = div [] [text ("hello " ++ model.flags.value) ]

</code>

<code> 
<div id="elm-app"></div>
<script src="{% dstatic 'js/elm-components.js' %}"></script>
<script>
  var app = Elm.Happened.init({
    node: document.getElementById("elm-app"),
    flags: {
        value: "world"
    }
  });
</script>
</code>
===== Language toolbox =====
==== Packages ====
Install a package:
<code>
 elm install elm/json
</code>
Useful packages:
  * elm/json, for json encoding and decoding.
  * elm/http, for requests.

===== Libraries =====

  * [[https://www.elm-spa.dev/|elm-spa]]
===== Code Examples =====

==== SPA ====

  * https://github.com/rtfeldman/elm-spa-example
  * {{ :wiki2:elm:elm-spa-example-master.zip |}}

==== eCommerce ====

  * {{ https://github.com/lucamug/elm-ecommerce }}
  * {{ :wiki2:elm:elm-ecommerce-master.zip |}}
===== How to... =====

==== Add several modules to one js script? ====

We will need two "main" modules. Then compile it like this:
<code>
elm make src/Main1.elm src/Main2.elm --output=main.js
</code>

After this you can call it like this:
<code>
<div id="elm-app1"></div>
<div id="elm-app2"></div>

<script src="main.js"></script>
<script>
  var app = Elm.Main1.init({
    node: document.getElementById("elm-app1")
  });
  var app2 = Elm.Main2.init({
    node: document.getElementById("elm-app2")
  });
</script>
</code>