i18n Ideas

simple-message = Some translated stuff

internal-reference = Internal Reference
interpolation = Of { internal-reference } and { $external }


plurals =
    { $unreadEmails ->
        [one] You have one unread email.
       *[other] You have { $unreadEmails } unread emails.
    }

# `currency` is usually specified by the caller.
currencies = 
    { NUMBER($price, style: "currency", currency: "EUR") }

dates = 
    { DATETIME($date, day: "2-digit", month: "2-digit", year: "numeric") }
times =
    { DATETIME($time, hour: "2-digit", minute: "2-digit") }

some-message = Read our 
   <some-elem title="Privacy Policy">privacy policy</some-elem>.

+

<Localized id="some-message">
  <a key="some-elem" href="https://www.mozilla.org/privacy" />
</Localized>

=

Read our 
<a href="https://www.mozilla.org/privacy"
  title="Privacy Policy">privacy policy</a>.

import React from 'react'
import { Localized, Consumer } from 'localization'

interface MyComponentProps {
  href: string
  username: string
}

const MyComponent: React.SFC<MyComponentProps> = ({ href, username }) => (
  <div>
    <Localized id="some-text" props={{ username }}>
      <a href={href} />
    </Localized>
  </div>
)

const MyInput: React.SFC<{}> = () => (
  <Consumer>
    {translate => (
      <input
        type="text" 
        placeholder={translate('some-placeholder', { required: true })} />
    )}
  </Consumer>
)

// some-translation =
//    Translation with { $string } 
//    and { NUMBER($number) } 
//    and { DATETIME($date) }

// turns into js code:
const Translations = {
  ["some-translation"]({ string, number, date }) {
    const _number = …format(number)
    const _date = …format(date)
    return `Translation with ${string} and ${_number} and ${_date}`
  }
}

// typescript definitons:
interface Props { string: string, number: number, date: Date }
interface Translate {
  (id: 'some-translation', props: Props): string
  (id: 'returns-react'): React.ReactNode
}

declare var translate: Translate
// … and similar for React Components

// simple-msg = Some simple Message.
// -internal = Internal
// interpolated = with { -internal } and { $external } Interpolation

function simpleMsg() {
  return "Some simple Message.";
}
function _internal() {
  return "Internal";
}
function interpolated({ external }) {
  return "with " + _internal() + " and " + String(external) + " Interpolation";
}

export default {
  "simple-msg": simpleMsg,
  "interpolated": interpolated,
};