I’ve created a little tool that makes project building easier.
You can refer to the help.
elm-init --help
elm-init 0.0.1
ABAB↑↓BA <@ababupdownba>
elm-init CLI
USAGE:
elm-init [FLAGS] <mode>
FLAGS:
-f, --flags flags option
-h, --help Prints help information
-p, --ports ports option
-V, --version Prints version information
ARGS:
<mode> Elm app mode.
sandbox — react to user input, like buttons and checkboxes
element — talk to the outside world, like HTTP and JS interop
document — control the <title> and <body>
application — create single-page apps
You can use it in this way.
elm-init element --flags --ports
This files will be output.
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body>
<main></main>
<script>
var storedData = localStorage.getItem('echo history');
var flags = storedData ? JSON.parse(storedData) : [];
var app = Elm.Main.init({ node: document.querySelector('main') ,flags: flags })
var socket = new WebSocket('wss://echo.websocket.org');
app.ports.sendMessage.subscribe(function(message) {
flags.push(message);
localStorage.setItem('echo history', JSON.stringify(flags));
socket.send(message);
});
socket.addEventListener("message", function(event) {
app.ports.messageReceiver.send(event.data);
});
</script>
</body>
</html>
port module Main exposing (..)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
port sendMessage : String -> Cmd msg
port messageReceiver : (String -> msg) -> Sub msg
type alias Model =
{ draft : String
, messages : List String
}
init : List String -> ( Model, Cmd Msg )
init flags =
( { draft = "", messages = flags }
, Cmd.none
)
type Msg
= DraftChanged String
| Send
| Recv String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
DraftChanged draft ->
( { model | draft = draft }
, Cmd.none
)
Send ->
( { model | draft = "" }
, sendMessage model.draft
)
Recv message ->
( { model | messages = model.messages ++ [ message ] }
, Cmd.none
)
subscriptions : Model -> Sub Msg
subscriptions _ =
messageReceiver Recv
view : Model -> Html Msg
view model =
div []
[ h1 [] [ text "Echo Chat" ]
, input
[ type_ "text"
, placeholder "Draft"
, onInput DraftChanged
, value model.draft
]
[]
, button [ onClick Send ] [ text "Send" ]
, ul []
(List.map (\msg -> li [] [ text msg ]) model.messages)
]
main : Program (List String) Model Msg
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}