Elm-init: Code generation tool

I’ve created a little tool that makes project building easier.

elm-init

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
        }
5 Likes