gristlabs_grist-core/app/client/lib/localization.ts

import {getGristConfig} from 'app/common/urlUtils';
import {DomContents} from 'grainjs';
import i18next from 'i18next';
import {G} from 'grainjs/dist/cjs/lib/browserGlobals';

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.
  lng = lng.replace(/-/g, '_');
  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 ?? ['client'];
  // 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 client namespace.
      defaultNS: 'client',
      // 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 client namespace for any addons.
      fallbackNS: 'client',
      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 tString(key: string, args?: any, instance = i18next): string {
  if (!instance.exists(key, args || undefined)) {
    const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
    reportError(error);
  }
  return instance.t(key, args);
}

// We will try to infer result from the arguments passed to `t` function.
// For plain objects we expect string as a result. If any property doesn't look as a plain value
// we assume that it might be a dom node and the result is DomContents.
type InferResult<T> = T extends Record<string, string | number | boolean>|undefined|null ? string : DomContents;

/**
 * Resolves the translation of the given key and substitutes. Supports dom elements interpolation.
 */
export function t<T extends Record<string, any>>(key: string, args?: T|null, instance = i18next): InferResult<T> {
  if (!instance.exists(key, args || undefined)) {
    const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
    reportError(error);
  }
  // Don't need to bind `t` function.
  return domT(key, args, instance.t);
}

function domT(key: string, args: any, tImpl: typeof i18next.t) {
  // If there are any DomElements in args, handle it with missingInterpolationHandler.
  const domElements = !args ? [] : Object.entries(args).filter(([_, value]) => isLikeDomContents(value));
  if (!args || !domElements.length) {
    return tImpl(key, args || undefined);
  } else {
    // Make a copy of the arguments, and remove any dom elements from it. It will instruct
    // i18next library to use `missingInterpolationHandler` handler.
    const copy = {...args};
    domElements.forEach(([prop]) => delete copy[prop]);

    // Passing `missingInterpolationHandler` will allow as to resolve all missing keys
    // and replace them with a marker.
    const result: string = tImpl(key, {...copy, missingInterpolationHandler});

    // Now replace all markers with dom elements passed as arguments.
    const parts = result.split(/(\[\[\[[^\]]+?\]\]\])/);
    for (let i = 1; i < parts.length; i += 2) { // Every second element is our dom element.
      const propName = parts[i].substring(3, parts[i].length - 3);
      const domElement = args[propName] ?? `{{${propName}}}`; // If the prop is not there, simulate default behavior.
      parts[i] = domElement;
    }
    return parts.filter(p => p !== '') as any; // Remove empty parts.
  }
}

/**
 * Checks if the given key exists in the any supported language.
 */
export function hasTranslation(key: string) {
  return i18next.exists(key);
}

function missingInterpolationHandler(key: string, value: any) {
  return `[[[${value[1]}]]]`;
}

/**
 * Very naive detection if an element has DomContents type.
 */
function isLikeDomContents(value: any): boolean {
  // As null and undefined are valid DomContents values, we don't treat them as such.
  if (value === null || value === undefined) { return false; }
  return value instanceof G.Node || // Node
    (Array.isArray(value) && isLikeDomContents(value[0])) || // DomComputed
    typeof value === 'function'; // DomMethod
}

/**
 * Helper function to create a scoped t function. Scoped t function is bounded to a specific
 * namespace and a key prefix (a scope).
 */
export function makeT(scope: string, instance?: typeof i18next) {
  // Can't create the scopedInstance yet as it might not be initialized.
  let scopedInstance: null|typeof i18next = null;
  let scopedResolver: null|typeof i18next.t = null;
  return function<T extends Record<string, any>>(key: string, args?: T|null) {
    // Create a scoped instance with disabled namespace and nested features.
    // This enables keys like `key1.key2:key3` to be resolved properly.
    if (!scopedInstance) {
      scopedInstance = (instance ?? i18next).cloneInstance({
        keySeparator: false,
        nsSeparator: false,
        saveMissing: true,
        missingKeyHandler: (lng, ns, _key) => console.warn(`Missing translation for key: ${_key}`)
      });

      // Create a version of `t` function that will use the provided prefix as default.
      const fixedResolver = scopedInstance.getFixedT(null, null, scope);

      // Override the resolver with a custom one, that will use the argument as a default.
      // This will remove all the overloads from the function, but we don't need them.
      scopedResolver = (_key: string, _args?: any) => fixedResolver(_key, {defaultValue: _key, ..._args});
    }
    // If the key has interpolation or we did pass some arguments, make sure that
    // the key exists.
    if ((args || key.includes("{{")) && !scopedInstance.exists(`${scope}.${key}`, args || undefined)) {
      const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
      reportError(error);
    }
    return domT(key, args, scopedResolver!);
  };
}