choonkeat/elm-webapp/1.0.0

NOTE: the latest version is 3.0.2

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

Webapp.Client

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

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

A set of required protocols.

- `updateFromServer` is called when `serverMsg` is received via websocket
- `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

{ 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

{ 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