wolfadex / earl-grey / Tea

Create


type Tea flags model msg effect

Instead of dealing with ( model, Cmd msg ) we get a more robust type that allows us to deal with other styles of effects.


type alias Branch flags model msg effect =
{ init : Context flags -> Tea flags model msg effect
, subscriptions : Context flags -> model -> Platform.Sub.Sub msg
, update : Context flags -> msg -> model -> Tea flags model msg effect
, urlChanged : Context flags -> model -> Tea flags model msg effect
, view : Context flags -> model -> Html msg 
}

A little more than a Browser.element but less than a Browser.application


type alias Route flags model msg effect =
Branch flags (Maybe model) msg effect

A little more than a Browser.element but less than a Browser.application, and can handle URLs


type Effects msg effect

Just a wrapper for effectful things

toApplication : { decodeFlags : encodedFlags -> flags, root : Branch flags model msg effect, rootEffect : effect -> model -> ( model, Platform.Cmd.Cmd msg ) } -> { init : encodedFlags -> Url -> Browser.Navigation.Key -> ( Model model flags, Platform.Cmd.Cmd (Msg msg) ), subscriptions : Model model flags -> Platform.Sub.Sub (Msg msg), update : Msg msg -> Model model flags -> ( Model model flags, Platform.Cmd.Cmd (Msg msg) ), view : Model model flags -> Browser.Document (Msg msg), onUrlRequest : Browser.UrlRequest -> Msg msg, onUrlChange : Url -> Msg msg }

Converting your Tea app into a Browser.application.

route : { pathHandler : List String -> PathHandler args, init : args -> Context flags -> Tea flags model msg effect, subscriptions : Context flags -> model -> Platform.Sub.Sub msg, update : Context flags -> msg -> model -> Tea flags model msg effect, urlChanged : args -> Context flags -> model -> Tea flags model msg effect, view : Context flags -> model -> Html msg } -> Route flags model msg effect

Create a branch of your Tea app that can handle URLs


type PathHandler args
    = Match ({ path : List String, args : args })
    | Ignore

Whether you want to match on the current, relative path or not. If you match, you specify how much of the path to match on (this will be consumed and unavailable in the Context), as well as an additional args you may extract from the URL.

Context


type Context flags

For storing things like the logged in User, current theme, etc.


type Model model flags

The overall model of your Tea app


type Msg msg

The root msg of your Tea app


type alias RouteModel model =
Maybe model

Helpful alias for working with routes

absolutePath : Context flags -> List String

Get the full URL path

relativePath : Context flags -> List String

Get the portion of the URL path that is available to this branch, i.e. hasn't been consumed by parent components

consumePath : List String -> Context flags -> Context flags

Used when you want to consume a portion of the URL path before passing Context on to a child. This will likely go away in the future, but can be useful now for consuming dynamic paths.

flags : Context flags -> flags

Get the flags out of the context

Update

save : model -> Tea flags model msg effect

Save the state of your model

withCmd : Platform.Cmd.Cmd msg -> Tea flags model msg effect -> Tea flags model msg effect

Add a Cmd to your Tea

withMsg : msg -> Tea flags model msg effect -> Tea flags model msg effect

Add a Msg to your Tea, to be handled in a future update

withEffect : effect -> Tea flags model msg effect -> Tea flags model msg effect

Add an effect to your Tea, to be handled by the parent component

Update Child

mapModel : (model1 -> model2) -> Tea flags model1 msg effect -> Tea flags model2 msg effect

Map over the model of your Tea

mapMsg : (msg1 -> msg2) -> Tea flags model msg1 effect -> Tea flags model msg2 effect

Map over the msg of your Tea

andThen : (model1 -> Tea flags model2 msg effects) -> Tea flags model1 msg effects -> Tea flags model2 msg effects

Go from one Tea to another, with access to the model of the first

applyEffects : (childEffect -> Tea flags model msg parentEffect -> Tea flags model msg parentEffect) -> Tea flags model msg childEffect -> Tea flags model msg parentEffect

Convert the effects of a child into something concrete, or maybe wrap them in your own effect to pass further upwards

extractModel : Tea flags model msg effect -> ( model, Effects msg effect )

Useful for when you have multiple child components

withChildEffects : (childMsg -> parentMsg) -> (childEffect -> Tea flags model parentMsg parentEffect -> Tea flags model parentMsg parentEffect) -> Effects childMsg childEffect -> Tea flags model parentMsg parentEffect -> Tea flags model parentMsg parentEffect

The pairing helper for extractModel

Effects

setFlags : flags -> Tea flags model msg effect -> Tea flags model msg effect

Used to update the flags in your Tea

navigate : String -> Tea flags model msg effect -> Tea flags model msg effect

For manual, non-link based navigation