[l10n] Enable lingui, string extraction

[himdel]

Depends on #742 (merged)
Fixes AAH-803

This adds gettext:extract and gettext:compile tasks, and switches to the browser-preferred language when available.

Workflow:

1. run gettext:extract to extract translatable strings from src/ into locale/*.po
2. those *.po files get uploaded to a translation service (outside automation)
3. updated *.po files get downloaded from the service and merged in (use msgmerge to resolve conflicts if necessary)
4. run gettext:compile to create locale/*.js files for each po counterpart
5. webpack automatically builds each locale js into a separate bundle
6. using a dynamic import in src/l10n.ts to import the right one at runtime

---

This also removes the temporary l10n function from #677,
and renames the callers from _`str` to t`str`, and adds the appropriate import.
(lingui/js-lingui#1113)

And updates typescript module version to allow dynamic imports.

And fixes any string ending with a space - extract trims trailing whitespace, so we can't have t`Strings ` end in a whitespace (we'll need a linter for that, added to AAH-804, rg \\bt'`'.*' `' detects them).

---

Current language is autodetected based on browser settings, and compared with the list of availableLanguages in src/l10n.js.

It may be easier to install https://chrome.google.com/webstore/detail/locale-switcher/kngfjpghaokedippaapkfihdlmmlafcc for switching.

---

Examples:

Translating where a string result is expected (no jsx):

import { t } from '@lingui/macro';
const data = "untranslated";
const string = t`Hello ${data}`;

(translators will see Hello {data}, translate to something like Hola {data} resulting in Hola untranslated in the UI)

❗ Prefer using variables in string substition: t`Hello ${data.data}` is using an expression, not a simple variable, so the translators will see Hello {0}, they won't know what {0} means without context.

Translating where a JSX result is expected (string with html):

import { Trans } from '@lingui/macro';
const data = "untranslated";
const MyComponent = () => (
  <Trans>Hello <b>World</b>: {data}</Trans>
);

(translators will see Hello <0>World</0>: {data}, translate to Hola <0>mundo</0>: {data} resulting in Hola mundo: untranslated)

Translating plurals:

import { plural } from '@lingui/macro';
const myCount = 123;
const string = plural(myCount, {
  one: '# byte',
  other: '# bytes',
}); // yields 0 bytes, 1 byte, 2 bytes, ... depending on myCount

(translators will see {myCount, plural, one {# byte} other {# bytes}}, translate to something like {myCount, plural, one {# byt} few {# byty} other {# bytů}}, yielding 0 bytů, 1 byt, 2 byty, ..., 5 bytů depending on myCount)

[himdel]

Testing...

deliberately left a cs locale available, (we have others now)
you can edit locale/fr.po to translate a string,
run npm run gettext:compile,
and as long as webpack is running and the browser is set to use the language, it will :)

[himdel]

Cc @ZitaNemeckova this should be ready :) (hm, the spec is passing locally, I'll fix that bit tomorrow)

Cc @ShaiahWren and @jerabekjiri read the Examples section in the description above please, we had to change the marker from _ to t, and we can also do translated string with html/react inside and plurals now :)

[rooftopcellist]

@himdel do you mind adding "es", "fr", "nl", "ja", "zh" to this list?

I tested this out and it appear to work properly:

[himdel]

Sure, updated :)

(I also had to add it to the list in src/l10n.js, but I'll look into updating that to read the list of available locales from locales/.)

[rooftopcellist]

oh, so that the compiled language files get imported by the UI. Nice!

[ZitaNemeckova]

LGTM 👍