(core) i18

Summary:
Adding initial work for localization support.

Summary in https://grist.quip.com/OtZKA6RHdQ6T/Internationalization-and-Localization

Test Plan: Not yet

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: paulfitz

Differential Revision: https://phab.getgrist.com/D3633

app/client/app.js

@@ -8,6 +8,8 @@ if (window._gristAppLoaded) {
 }
 window._gristAppLoaded = true;
 
+const {setupLocale} = require('./lib/localization');
+
 const {App} = require('./ui/App');
 
 // Disable longStackTraces, which seem to be enabled in the browser by default.
@@ -28,7 +30,14 @@ $(function() {
     if (event.persisted) { window.location.reload(); }
   };
 
-  window.gristApp = App.create(null);
+  const localeSetup = setupLocale();
+  // By the time dom ready is fired, resource files should already be loaded, but
+  // if that is not the case, we will redirect to an error page by throwing an error.
+  localeSetup.then(() => {
+    window.gristApp = App.create(null);
+  }).catch(error => {
+    throw new Error(`Failed to load locale: ${error?.message || 'Unknown error'}`);
+  })
   // Set from the login tests to stub and un-stub functions during execution.
   window.loginTestSandbox = null;
 
@@ -46,4 +55,5 @@ $(function() {
         .then(() => window.exposedModules._loadScript(name));
     }
   };
+
 });

app/client/lib/localization.ts

@@ -0,0 +1,86 @@
+import {getGristConfig} from 'app/common/urlUtils';
+import i18next from 'i18next';
+
+export async function setupLocale() {
+  const now = Date.now();
+  const supportedLngs = getGristConfig().supportedLngs ?? ['en'];
+  let lng = window.navigator.language || 'en';
+  // If user agent language is not in the list of supported languages, use the default one.
+  if (!supportedLngs.includes(lng)) {
+    // Test if server supports general language.
+    if (lng.includes("-") && supportedLngs.includes(lng.split("-")[0])) {
+      lng = lng.split("-")[0]!;
+    } else {
+      lng = 'en';
+    }
+  }
+
+  const ns = getGristConfig().namespaces ?? ['core'];
+  // Initialize localization plugin
+  try {
+    // We don't await this promise, as it is resolved synchronously due to initImmediate: false.
+    i18next.init({
+      // By default we use english language.
+      fallbackLng: 'en',
+      // Fallback from en-US, en-GB, etc to en.
+      nonExplicitSupportedLngs: true,
+      // We will load resources ourselves.
+      initImmediate: false,
+      // Read language from navigator object.
+      lng,
+      // By default we use core namespace.
+      defaultNS: 'core',
+      // Read namespaces that are supported by the server.
+      // TODO: this can be converted to a dynamic list of namespaces, for async components.
+      // for now just import all what server offers.
+      // We can fallback to core namespace for any addons.
+      fallbackNS: 'core',
+      ns,
+      supportedLngs
+    }).catch((err: any) => {
+      // This should not happen, the promise should be resolved synchronously, without
+      // any errors reported.
+      console.error("i18next failed unexpectedly", err);
+    });
+    // Detect what is resolved languages to load.
+    const languages = i18next.languages;
+    // Fetch all json files (all of which should be already preloaded);
+    const loadPath = `${document.baseURI}locales/{{lng}}.{{ns}}.json`;
+    const pathsToLoad: Promise<any>[] = [];
+    async function load(lang: string, n: string) {
+      const resourceUrl = loadPath.replace('{{lng}}', lang).replace('{{ns}}', n);
+      const response = await fetch(resourceUrl);
+      if (!response.ok) {
+        throw new Error(`Failed to load ${resourceUrl}`);
+      }
+      i18next.addResourceBundle(lang, n, await response.json());
+    }
+    for (const lang of languages) {
+      for (const n of ns) {
+        pathsToLoad.push(load(lang, n));
+      }
+    }
+    await Promise.all(pathsToLoad);
+    console.log("Localization initialized in " + (Date.now() - now) + "ms");
+  } catch (error: any) {
+    reportError(error);
+  }
+}
+
+/**
+ * Resolves the translation of the given key, using the given options.
+ */
+export function t(key: string, args?: any): string {
+  if (!i18next.exists(key)) {
+    const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
+    reportError(error);
+  }
+  return i18next.t(key, args);
+}
+
+/**
+ * Checks if the given key exists in the any supported language.
+ */
+export function hasTranslation(key: string) {
+  return i18next.exists(key);
+}

app/client/models/HomeModel.ts

@@ -264,6 +264,9 @@ export class HomeModelImpl extends Disposable implements HomeModel, ViewSettings
 
   // Fetches and updates workspaces, which include contained docs as well.
   private async _updateWorkspaces() {
+    if (this.isDisposed()) {
+      return;
+    }
     const org = this._app.currentOrg;
     if (!org) {
       this.workspaces.set([]);
@@ -285,7 +288,9 @@ export class HomeModelImpl extends Disposable implements HomeModel, ViewSettings
       this.loading.set("slow");
     }
     const [wss, trashWss, templateWss] = await promise;
-
+    if (this.isDisposed()) {
+      return;
+    }
     // bundleChanges defers computeds' evaluations until all changes have been applied.
     bundleChanges(() => {
       this.workspaces.set(wss || []);

app/client/ui/AddNewButton.ts

@@ -1,13 +1,14 @@
 import {theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomElementArg, Observable, styled} from "grainjs";
+import {t} from 'app/client/lib/localization';
 
 export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...args: DomElementArg[]) {
   return cssAddNewButton(
     cssAddNewButton.cls('-open', isOpen),
     // Setting spacing as flex items allows them to shrink faster when there isn't enough space.
     cssLeftMargin(),
-    cssAddText('Add New'),
+    cssAddText(t('AddNew')),
     dom('div', {style: 'flex: 1 1 16px'}),
     cssPlusButton(cssPlusIcon('Plus')),
     dom('div', {style: 'flex: 0 1 16px'}),

app/client/ui/DocMenu.ts

@@ -29,6 +29,7 @@ import {Document, Workspace} from 'app/common/UserAPI';
 import {computed, Computed, dom, DomArg, DomContents, IDisposableOwner,
         makeTestId, observable, Observable} from 'grainjs';
 import {buildTemplateDocs} from 'app/client/ui/TemplateDocs';
+import {t} from 'app/client/lib/localization';
 import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
 import {bigBasicButton} from 'app/client/ui2018/buttons';
 import sortBy = require('lodash/sortBy');
@@ -104,10 +105,10 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                 null :
                 css.docListHeader(
                   (
-                    page === 'all' ? 'All Documents' :
+                    page === 'all' ? t('AllDocuments') :
                     page === 'templates' ?
                       dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
-                        hasFeaturedTemplates ? 'More Examples & Templates' : 'Examples & Templates'
+                        hasFeaturedTemplates ? t('MoreExamplesAndTemplates') : t('ExamplesAndTemplates')
                     ) :
                     page === 'trash' ? 'Trash' :
                     workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
@@ -267,7 +268,7 @@ function buildOtherSites(home: HomeModel) {
     return css.otherSitesBlock(
       dom.autoDispose(hideOtherSitesObs),
       css.otherSitesHeader(
-        'Other Sites',
+        t('OtherSites'),
         dom.domComputed(hideOtherSitesObs, (collapsed) =>
           collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse')
         ),
@@ -275,11 +276,11 @@ function buildOtherSites(home: HomeModel) {
         testId('other-sites-header'),
       ),
       dom.maybe((use) => !use(hideOtherSitesObs), () => {
-        const onPersonalSite = Boolean(home.app.currentOrg?.owner);
-        const siteName = onPersonalSite ? 'your personal site' : `the ${home.app.currentOrgName} site`;
+        const personal = Boolean(home.app.currentOrg?.owner);
+        const siteName = home.app.currentOrgName;
         return [
           dom('div',
-            `You are on ${siteName}. You also have access to the following sites:`,
+            t('OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
             testId('other-sites-message')
           ),
           css.otherSitesButtons(

app/client/ui/HomeIntro.ts

@@ -1,3 +1,4 @@
+import {t} from 'app/client/lib/localization';
 import {getLoginOrSignupUrl, urlState} from 'app/client/models/gristUrlState';
 import {HomeModel} from 'app/client/models/HomeModel';
 import {productPill} from 'app/client/ui/AppHeader';
@@ -111,7 +112,7 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
 function makeAnonIntro(homeModel: HomeModel) {
   const signUp = cssLink({href: getLoginOrSignupUrl()}, 'Sign up');
   return [
-    css.docListHeader(`Welcome to Grist!`, testId('welcome-title')),
+    css.docListHeader(t('Welcome'), testId('welcome-title')),
     cssIntroLine('Get started by exploring templates, or creating your first Grist document.'),
     cssIntroLine(signUp, ' to save your work.',
       (shouldHideUiElement('helpCenter') ? null : [' Visit our ', helpCenterLink(), ' to learn more.']),

app/client/ui/setupPage.ts

@@ -1,4 +1,5 @@
 import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
+import {setupLocale} from 'app/client/lib/localization';
 import {AppModel, TopAppModelImpl} from 'app/client/models/AppModel';
 import {setUpErrorHandling} from 'app/client/models/errors';
 import {buildSnackbarDom} from 'app/client/ui/NotifyUI';
@@ -19,6 +20,8 @@ export function setupPage(buildPage: (appModel: AppModel) => DomContents) {
   attachCssRootVars(topAppModel.productFlavor);
   addViewportTag();
 
+  void setupLocale();
+
   // Add globals needed by test utils.
   G.window.gristApp = {
     testNumPendingApiRequests: () => BaseAPI.numPendingRequests(),