reimplemented l10n using dynamic import() (#1012)

this should greatly reduce the complexity of the l10n code
and build pipeline and eliminate the most common error
seen in sentry logs (no translate function)

app/capabilities.js

@@ -52,9 +52,9 @@ function checkStreams() {
   }
 }
 
-function polyfillStreams() {
+async function polyfillStreams() {
   try {
-    require('@mattiasbuelens/web-streams-polyfill');
+    await import('@mattiasbuelens/web-streams-polyfill');
     return true;
   } catch (e) {
     return false;
@@ -64,7 +64,10 @@ function polyfillStreams() {
 export default async function capabilities() {
   const crypto = await checkCrypto();
   const nativeStreams = checkStreams();
-  const polyStreams = nativeStreams ? false : polyfillStreams();
+  let polyStreams = false;
+  if (!nativeStreams) {
+    polyStreams = await polyfillStreams();
+  }
   let account = typeof AUTH_CONFIG !== 'undefined';
   try {
     account = account && !!localStorage;

app/locale.js

@@ -0,0 +1,26 @@
+import { FluentBundle } from 'fluent';
+
+function makeBundle(locale, ftl) {
+  const bundle = new FluentBundle(locale, { useIsolating: false });
+  bundle.addMessages(ftl);
+  return bundle;
+}
+
+export async function getTranslator(locale) {
+  const bundles = [];
+  const { default: en } = await import('../public/locales/en-US/send.ftl');
+  if (locale !== 'en-US') {
+    const {
+      default: ftl
+    } = await import(`../public/locales/${locale}/send.ftl`);
+    bundles.push(makeBundle(locale, ftl));
+  }
+  bundles.push(makeBundle('en-US', en));
+  return function(id, data) {
+    for (let bundle of bundles) {
+      if (bundle.hasMessage(id)) {
+        return bundle.format(bundle.getMessage(id), data);
+      }
+    }
+  };
+}

app/main.js

@@ -1,10 +1,11 @@
+/* global LOCALE */
+import 'core-js';
 import 'fast-text-encoding'; // MS Edge support
 import 'fluent-intl-polyfill';
 import choo from 'choo';
 import nanotiming from 'nanotiming';
 import routes from './routes';
 import capabilities from './capabilities';
-import locale from '../common/locales';
 import controller from './controller';
 import dragManager from './dragManager';
 import pasteManager from './pasteManager';
@@ -14,6 +15,7 @@ import experiments from './experiments';
 import Raven from 'raven-js';
 import './main.css';
 import User from './user';
+import { getTranslator } from './locale';
 
 (async function start() {
   const app = routes(choo());
@@ -28,11 +30,13 @@ import User from './user';
     navigator.serviceWorker.register('/serviceWorker.js');
   }
 
+  const translate = await getTranslator(LOCALE);
+
   app.use((state, emitter) => {
     state.capabilities = capa;
     state.transfer = null;
     state.fileInfo = null;
-    state.translate = locale.getTranslator();
+    state.translate = translate;
     state.storage = storage;
     state.raven = Raven;
     state.user = new User(storage);