translate language, with polyfill

webrecorder · Nov 20, 2021 · 4445c4c · 4445c4c
1 parent c1ebb93
commit 4445c4c
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 12 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,6 +5,8 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@formatjs/intl-displaynames": "^5.2.5",
+    "@formatjs/intl-getcanonicallocales": "^1.8.0",
     "@lit/localize": "^0.11.1",
     "@shoelace-style/shoelace": "^2.0.0-beta.61",
     "axios": "^0.22.0",

diff --git a/frontend/src/components/locale-picker.ts b/frontend/src/components/locale-picker.ts
@@ -1,36 +1,84 @@
 import { LitElement, html } from "lit";
+import { shouldPolyfill } from "@formatjs/intl-displaynames/should-polyfill";
 
 import { allLocales } from "../__generated__/locale-codes";
 import { getLocale, setLocaleFromUrl } from "../utils/localization";
 import { localized } from "@lit/localize";
 
-const localeNames: {
-  [L in typeof allLocales[number]]: string;
-} = {
-  en: "English",
-  ko: "ko",
+type LocaleCode = typeof allLocales[number];
+type LocaleNames = {
+  [L in LocaleCode]: string;
 };
 
-// Note we use updateWhenLocaleChanges here so that we're always up to date with
-// the active locale (the result of getLocale()) when the locale changes via a
-// history navigation.
 @localized()
 export class LocalePicker extends LitElement {
+  localeNames?: LocaleNames;
+
+  private setLocaleName = (locale: LocaleCode) => {
+    // TODO figure out what version
+    // https://github.com/microsoft/TypeScript/pull/45647
+    // is in and remove `as any`
+    this.localeNames![locale] = new (Intl as any).DisplayNames([locale], {
+      type: "language",
+    }).of(locale);
+  };
+
+  async firstUpdated() {
+    let isFirstPolyfill = true;
+
+    // polyfill if needed
+    const polyfill = async (locale: LocaleCode) => {
+      if (!shouldPolyfill(locale)) {
+        return;
+      }
+
+      if (isFirstPolyfill) {
+        await import("@formatjs/intl-getcanonicallocales/polyfill");
+        await import("@formatjs/intl-displaynames/polyfill");
+
+        isFirstPolyfill = false;
+      }
+
+      switch (locale) {
+        default:
+          await import("@formatjs/intl-displaynames/locale-data/en");
+          break;
+        case "ko":
+          await import("@formatjs/intl-displaynames/locale-data/ko"); // @ts-ignore
+          break;
+      }
+    };
+
+    await Promise.all(
+      allLocales.map((locale) => polyfill(locale as LocaleCode))
+    );
+
+    this.localeNames = {} as LocaleNames;
+    allLocales.forEach(this.setLocaleName);
+
+    this.requestUpdate();
+  }
+
   render() {
+    if (!this.localeNames) {
+      return;
+    }
+
     return html`
       <select @change=${this.localeChanged}>
         ${allLocales.map(
           (locale) =>
             html`<option value=${locale} ?selected=${locale === getLocale()}>
-              ${localeNames[locale]}
+              ${this.localeNames![locale]}
             </option>`
         )}
       </select>
     `;
   }
 
-  localeChanged(event: Event) {
-    const newLocale = (event.target as HTMLSelectElement).value;
+  async localeChanged(event: Event) {
+    const newLocale = (event.target as HTMLSelectElement).value as LocaleCode;
+
     if (newLocale !== getLocale()) {
       const url = new URL(window.location.href);
       url.searchParams.set("locale", newLocale);

diff --git a/frontend/src/index.ts b/frontend/src/index.ts
@@ -24,6 +24,10 @@ export class App extends LiteElement {
 
   constructor() {
     super();
+
+    // Note we use updateWhenLocaleChanges here so that we're always up to date with
+    // the active locale (the result of getLocale()) when the locale changes via a
+    // history navigation.
     updateWhenLocaleChanges(this);
 
     this.authState = null;

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "./dist/",
-    "module": "esnext",
+    "module": "es2020",
     "target": "es6",
     "moduleResolution": "node",
     "allowJs": true,

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -66,6 +66,37 @@
   dependencies:
     "@types/chai" "^4.2.12"
 
+"@formatjs/[email protected]":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.10.0.tgz#f51b9167535c9463113c24644de90262aa5d31a7"
+  integrity sha512-WNkcUHC6xw12rWY87TUw6KXzb1LnOooYBLLqtyn1kW2j197rcwpqmUOJMBED56YcLzaJPfVw1L2ShiDhL5pVnQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.21"
+    tslib "^2.1.0"
+
+"@formatjs/intl-displaynames@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-5.2.5.tgz#c8cb4983a3ce3bdc18d11e22cffc7dad9ceb3050"
+  integrity sha512-iYlce/hG31ohJOwpv3yhOiEIwEBMqOt2kzA2BQTx1ra8ferBn4WlTxkouoDNiAKEBD1LFYZBIC25jsSJUJOEbg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.10.0"
+    "@formatjs/intl-localematcher" "0.2.21"
+    tslib "^2.1.0"
+
+"@formatjs/intl-getcanonicallocales@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.8.0.tgz#2987a879f399b2fdf2812e76431f1db8a5b02a64"
+  integrity sha512-nBwLvOaClSPt4UrvNKHuOf3vgQ8ofZ8jS5TB54bKBw1VKe3Rt/omvze/UhiboWFxs3VCWVHswqikHS5UfUq3SA==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/[email protected]":
+  version "0.2.21"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.21.tgz#39ef33d701fe8084f3d693cd3ff7cbe03cdd3a49"
+  integrity sha512-JTJeLiNwexN4Gy0cMxoUPvJbKhXdnSuo5jPrDafEZpnDWlJ5VDYta8zUVVozO/pwzEmFVHEUpgiEDj+39L4oMg==
+  dependencies:
+    tslib "^2.1.0"
+
 "@humanwhocodes/config-array@^0.6.0":
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.6.0.tgz#b5621fdb3b32309d2d16575456cbc277fa8f021a"
@@ -4505,6 +4536,11 @@ tslib@^1.10.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 [email protected]:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"