Localization MDD-1173

Ahoj🇨🇿

Привет🇷🇺

Вітання🇺🇦

こんにちは🇯🇵

🇸🇦مرحبا

Сześć🇵🇱

你好🇨🇳

Прывітанне🇧🇾

Hallo🇩🇪

Hello🇬🇧

Salut🇫🇷

🔥It's showtime🔥

What you will get:

  • ~ 15 mins
  • Goal of the Epic
  • Chosen Framework
  • API
  • Workflow
  • Demo
  • Current Progress

What I expect:

  • Make sure you've been kept posted
  • Feedback about API and Workflow
  • Recommendations for the Progress
  • A bit applause 👏

Goal

🔥The WebApp is translatable to any language🔥

😫 Adapt the existing codebase

😰 Consider Plugins

🙅‍♂️ Export/Import Translation Catalogs

i18n Framework Lingui.js (Brno🇨🇿)

🤘 Universal (JS/TS and React)

🚀 Full rich-text support

🙏 Powerful tooling

😎 Unopinionated

😈 Lightweight and optimized (1.9kb + 3.1kb)

🙊 Active Community

👀 Rich Documentation

Our API

// anyService.ts
import { i18n } from '~/app/services/LocalizationService'
import { t } from '@lingui/macro'

function sayHello(name) {
  return i18n(t('app.delete')`Hello ${name}`)
}
// anyWidget.tsx
import { Trans } from '@lingui/macro'
const Greetings = ({ name }) =>
  <Trans id="greetins">Hello {name}</Trans>
// anyService.ts
import { i18n } from '~/app/services/LocalizationService'
import { plural } from '@lingui/macro'

function getMessagesCount(count) {
  return i18n(plural('messages', {
    value: count,
    one: "Message",
    other: "Messages"
  }))
}
// anyWidget.tsx
import { Plural } from '@lingui/macro'
const Greetings = ({ count }) =>
  <Plural
    id="messages"
    value={count}
    one="Message"
    other="Messages"
  />

Our API

// anyService.ts
import { i18n } from '~/app/services/LocalizationService'
import { t } from '@lingui/macro'

function sayHello(name) {
  return i18n(t('app.delete')`Hello ${name}`)
}
// anyWidget.tsx
import { Trans } from '@lingui/macro'
const Greetings = ({ name }) =>
  <Trans id="greetins">Hello {name}</Trans>
// anyService.ts
import { i18n } from '~/app/services/LocalizationService'
import { plural } from '@lingui/macro'

function getMessagesCount(count) {
  return i18n(plural('messages', {
    value: count,
    one: "Message",
    other: "Messages"
  }))
}
// anyWidget.tsx
import { Plural } from '@lingui/macro'
const Greetings = ({ count }) =>
  <Plural
    id="messages"
    value={count}
    one="Message"
    other="Messages"
  />

👍 Plain text with Variables

🔥 Conditional Translation

🎉 Pluralization

🤩 Date

😲 More in Macros Docs

Workflow

Add Configurations

Set Languages

Wrap Text

Extract Messages

Compile Catalogs

/* eslint-disable */
// THIS IS A GENERATED FILE. DO NOT CHANGE DIRECTLY.
// Run `yarn loc:add-plugin <plugin_names>` to regenerate
module.exports = {
  localeDir: 'locales/<plugin_name>',
  srcPathDirs: ['src/plugins/<plugin_name>'],
  fallbackLocale: 'en',
  sourceLocale: 'en',
  format: 'po',
  compileNamespace: 'cjs',
  srcPathIgnorePatterns: [
    '/node_modules/', '.xtest.ts', '.stories.tsx', '__mocks__'
  ]
}
yarn loc:add-plugin <plugin_names>

Workflow

Add Configurations

Set Languages

Wrap Text

Extract Messages

Compile Catalogs

msgid ""
msgstr ""
"POT-Creation-Date: 2019-11-19 10:17+0100\n"
"Mime-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: @lingui/cli\n"
"Language: cs\n"
"Project-Id-Version: \n"
"Report-Msgid-Bugs-To: \n"
"PO-Revision-Date: \n"
"Last-Translator: \n"
"Language-Team: \n"
"Plural-Forms: \n"

locales

|_ <plugin_name>

     |_ <language>

          |_ messages.po

yarn loc:add <locales>

Workflow

Add Configurations

Set Languages

Wrap Text

Extract Messages

Compile Catalogs

// anyService.ts
import { i18n } from '~/app/services/LocalizationService'
import { t } from '@lingui/macro'

function sayHello(name) {
  return i18n(t('app.hello')`Hello ${name}`)
}

Workflow

Add Configurations

Set Languages

Wrap Text

Extract Messages

Compile Catalogs

msgid ""
msgstr ""
"POT-Creation-Date: 2019-11-19 10:17+0100\n"
"Mime-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: @lingui/cli\n"
"Language: en\n"
"Project-Id-Version: \n"
"Report-Msgid-Bugs-To: \n"
"PO-Revision-Date: \n"
"Last-Translator: \n"
"Language-Team: \n"
"Plural-Forms: \n"

#: src/core/actions/sayHello.ts:31
msgid "app.hello"
msgstr "Hello {name}"

Workflow

Add Configurations

Set Languages

Wrap Text

Extract Messages

Compile Catalogs

/* eslint-disable */
module.exports = {
    languageData: {},
    messages: {
       "app.hello": function(a) {
            return ["Hello ", a("name")]
        }
    }
};
yarn loc:compile <plugin_names>

🎉Demo time

Workflow

Add Configurations

Set Languages

Wrap Text

Extract Messages

Compile Catalogs

often by Translators on translating and Developers on adding text

often by Developers on adding text

often by Developers ❓ manually or on build + gitignored

occasionally by Developerson on adding a language or introducing a new plugin

occasionally by Developerson on introducing a new plugin

Progress

✅ Introducing the framework to the current build

✅ Plugin Distribution

⏳ Adapt a Widget, a Service and an Action

⏳ Add Tests

⏳ Documentation

Localization MDD-1173

Děkuji🇨🇿

Спасибо🇷🇺

Дякую🇺🇦

ありがとう🇯🇵

🇸🇦شكرا لك

Dziękuję🇵🇱

謝謝啦🇨🇳

Дзякуй🇧🇾

Danke🇩🇪

Thanks🇬🇧

Merci🇫🇷

Made with Slides.com