choonkeat/elm-webapp/3.0.2

Formerly choonkeat/create-elm-server, choonkeat/elm-fullstack. Search finds this package by either name.

Webapp.Client

The README is better for getting an understanding and for getting started. In general we'd just use the code generated by elm-webapp cli without the need to reference here.

Definition

type alias Ports msg =
{ websocketConnected :
(Int -> FrameworkMsg msg) -> Sub (FrameworkMsg msg)
, websocketIn :
(String -> FrameworkMsg msg) -> Sub (FrameworkMsg msg)
}

Hook up ports to use websockets for passing serverMsg and clientMsg

websocketConnected port receives an Int for time now in milliseconds. Currently Webapp.Client does not use this information for anything.

websocketIn port receives the raw string from websocket event.data which will be parsed as a Result x serverMsg (see sendToServer)

type alias Protocol serverMsg clientMsg model msg x =
{ updateFromServer : serverMsg -> model -> ( model, Cmd msg )
, clientMsgEncoder : clientMsg -> Value
, serverMsgDecoder : Decoder serverMsg
, errorDecoder : Decoder x
, httpEndpoint : String
}

A set of required protocols.

- `updateFromServer` is called when `serverMsg` is received, e.g. as response of `sendToServer`
- `clientMsgEncoder` encodes outgoing `clientMsg`, e.g. via `sendToServer`
- `serverMsgDecoder` decodes replies from Server
- `errorDecoder` decodes error replies from Server
type alias Program flags model msg =
Program flags model (FrameworkMsg msg)

Exported type to enable apps to write their type signature of main, e.g.

main : Webapp.Client.Program Flags Model Msg
main =
    webapp.element

Common Helpers

{ element :
{ init : flags -> ( model, Cmd msg )
, view : model -> Html msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
}
, ports : Ports msg
, protocol : Protocol serverMsg clientMsg model msg x
}
-> { element : Program flags model (FrameworkMsg msg)
, sendToServer : clientMsg -> Task Error (Result x serverMsg)
}

Returns a Browser.element to use as main in your client app and a sendToServer function to send clientMsg with

main =
    webapp.element
{ document :
{ init : flags -> ( model, Cmd msg )
, view : model -> Document msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
}
, ports : Ports msg
, protocol : Protocol serverMsg clientMsg model msg x
}
-> { document : Program flags model (FrameworkMsg msg)
, sendToServer : clientMsg -> Task Error (Result x serverMsg)
}

Returns a Browser.document to use as main in your client app and a sendToServer function to send clientMsg with

main =
    webapp.document
{ application :
{ init : flags -> Url -> Key -> ( model, Cmd msg )
, view : model -> Document msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
, onUrlRequest : UrlRequest -> msg
, onUrlChange : Url -> msg
}
, ports : Ports msg
, protocol : Protocol serverMsg clientMsg model msg x
}
-> { application : Program flags model (FrameworkMsg msg)
, sendToServer : clientMsg -> Task Error (Result x serverMsg)
}

Returns a Browser.application to use as main in your client app and a sendToServer function to send clientMsg with

main =
    webapp.application