Internationalization in Elm

Sébastien Besnier

@_sebbes_

module Page.Team exposing
  (Model, view, ...)
     

view : Model -> Html Msg
view model =
  Html.text "Team!"
module Page.Book exposing
  (Model, view, ...)
     

view : Model -> Html Msg
view model =
  Html.text "Book!"
module Main exposing
  (main)
     

view : MainModel -> Html Msg
view model =
  case model.page of
    Team teamModel ->
      Page.Team.view teamModel
      
    Book bookModel ->
      Page.Book.view bookModel
module Page.Team exposing
  (Model, view, ...)
     

view : Model -> Html Msg
view model =
  Html.text "Team!"
module Page.Book exposing
  (Model, view, ...)
     

view : Model -> Html Msg
view model =
  Html.text "Book!"
module Page.Team exposing
  (Model, Locale, view, ...)

type alias Locale =
  { team : String }

view : Locale -> Model -> Html Msg
view locale model =
  Html.text locale.team
module Main exposing (...)

view : MainModel -> Html Msg
view model =
  let locale = case model.lang of
    En -> Lang.En.locale
    Fr -> Lang.Fr.locale
  in
  case model.page of
    Team teamModel ->
      Page.Team.view locale.teamPage teamModel
      
    Book bookModel ->
      Page.Book.view locale.bookPage bookModel
module Main exposing (...)

view : MainModel -> Html Msg
view model =
  let locale = case model.lang of
    En -> Lang.En.locale
    Fr -> Lang.Fr.locale
  in
  case model.page of
    Team teamModel ->
      Page.Team.view locale.teamPage teamModel
      
    Book bookModel ->
      Page.Book.view locale.bookPage bookModel
Page.Team.Locale
Page.Book.Locale
Global.Locale
module Global exposing (Locale)

import Page.Team
import Page.Book

type alias Locale =
  { login: String
  , logout: String
  , teamPage : Page.Team.Locale
  , bookPage : Page.Book.Locale
  }
module Lang.Fr exposing (locale)

import Global
import Page.Team
import Page.Book

locale : Global.Local
locale =
  { login = "Connexion"
  , logout = "Déconnexion"
  , teamPage = teamPage
  , bookPage = bookPage
  }
  
teamPage : Page.Team.Locale
teamPage =
  { team = "Équipe!" }
  
bookPage : Page.Book.Locale
bookPage =
  { book = "Livre!" }

FANCY FIELDS

"Your team has 5 members!"

module Page.Team exposing
  (Model, Locale, view, ...)

type alias Locale =
  { yourTeamHasXMembers : Int -> String }

view : Locale -> Model -> Html Msg
view locale model =
  Html.text 
    (locale.yourTeamHasXMembers model.count)
module Lang.En exposing (locale)

{- ... -}
  
teamPage : Page.Team.Locale
teamPage =
  { yourTeamHasXMembers = \ count ->
    case count of
      0 -> "No member in your team :("
      1 -> "Only one member in your team"
      _ -> "Your team has "
             ++ String.fromInt count
             ++ " members"
  }

FANCY FIELDS

"Your team has 5 members!"

module Page.Team exposing
  (Model, Locale, view, ...)

type alias Locale =
  { yourTeamHasXMembers : Int -> Html Msg }

view : Locale -> Model -> Html Msg
view locale model =
  Html.span [Html.Attributes.class "text-xl"]
    [locale.yourTeamHasXMembers model.count]
module Lang.En exposing (locale)

{- ... -}
  
teamPage : Page.Team.Locale
teamPage =
  { yourTeamHasXMembers = \ count ->
     span []
       [ text "Your team has "
       , span [ class "text-red" ] 
       		[ text (String.fromInt count) ]
       , text " members"
       ]
  }

FORMAT FIELDS

$59.42

59,42$

cuducos/elm-format-number
module Page.Team exposing
  (Model, Locale, view, ...)

type alias Locale =
  { ...
  , formatDollars : Float -> String 
  }
module Page.Book exposing
  (Model, Locale, view, ...)

type alias Locale =
  { ...
  , formatDollars : Float -> String 
  }
module Lang.En exposing (locale)

import FormatNumber.Locales as (..)

formatDollars amount =
  "$" ++ FormatNumber.format
           { usLocale | decimals = Exact 2 }
           amount

  
teamPage : Page.Team.Locale
teamPage =
  { ...
  , formatDollars = formatDollars
  }

bookPage : Page.Book.Locale
bookPage =
  { ...
  , formatDollars = formatDollars
  }

IMPORTS GRAPH

Main
Page.Team
Page.Book
Lang.Fr
Lang.En
Global

IMPORTS

Internationalization in Elm

Sébastien Besnier

@_sebbes_

elm-translation

By sebbes

elm-translation

  • 803