Localize menu entries, dialogs, and error messages

components/mjs/dependencies.js

@@ -72,7 +72,8 @@ export const paths = {
 };
 
 export const provides = {
-  'startup': ['loader'],
+  'startup': ['loader', 'core'],
+  'loader': ['core'],
   'input/tex': [
     'input/tex-base',
     '[tex]/ams',

components/mjs/loader/loader.js

@@ -1,13 +1,20 @@
 import './lib/loader.js';
+import '../core/core.js';
 
 import {Loader, CONFIG} from '#js/components/loader.js';
 import {combineDefaults} from '#js/components/global.js';
 import {dependencies, paths, provides} from '../dependencies.js';
+import {Locale} from '#js/util/Locale.js';
+
+Loader.preLoaded('loader', 'core');
 
 combineDefaults(MathJax.config.loader, 'dependencies', dependencies);
 combineDefaults(MathJax.config.loader, 'paths', paths);
 combineDefaults(MathJax.config.loader, 'provides', provides);
 
-Loader.load(...CONFIG.load)
-      .then(() => CONFIG.ready())
-      .catch((message, name) => CONFIG.failed(message, name));
+let locale = MathJax.config.locale ?? Locale.current;
+try { locale = localStorage.getitem('MathJax-locale') ?? locale; } catch (_err) {}
+Locale.setLocale(locale)
+  .then(() => Loader.load(...CONFIG.load))
+  .then(() => CONFIG.ready())
+  .catch((message, name) => CONFIG.failed(message, name));

components/mjs/startup/init.js

@@ -5,6 +5,7 @@ import '../core/core.js';
 import {combineDefaults} from '#js/components/global.js';
 import {dependencies, paths, provides, compatibility} from '../dependencies.js';
 import {Loader, CONFIG} from '#js/components/loader.js';
+import {Locale} from '#js/util/Locale.js';
 
 Loader.preLoaded('loader', 'startup', 'core');
 
@@ -14,7 +15,10 @@ combineDefaults(MathJax.config.loader, 'provides', provides);
 combineDefaults(MathJax.config.loader, 'source', compatibility);
 
 export function startup(ready) {
-  return Loader.load(...CONFIG.load)
+  let locale = MathJax.config.locale ?? Locale.current;
+  try { locale = localStorage.getItem('MathJax-locale') ?? locale; } catch (_err) {}
+  return Locale.setLocale(locale)
+               .then(() => Loader.load(...CONFIG.load))
                .then(() => (ready || function () {})())
                .then(() => CONFIG.ready())
                .catch(error => CONFIG.failed(error));

components/mjs/ui/menu/config.json

@@ -4,6 +4,12 @@
     "targets": ["ui/menu", "a11y/speech/SpeechMenu.ts"],
     "excludeSubdirs": true
   },
+  "copy": {
+    "to": "[bundle]/ui/menu",
+    "from": "[ts]/ui/menu",
+    "copy": ["__locales__"],
+    "excludes": ["__locales__/Component.ts"]
+  },
   "webpack": {
     "name": "ui/menu",
     "libs": [

package.json

@@ -82,7 +82,9 @@
     "=============================================================================== copy": "",
     "copy:assets": "pnpm -s log:comp 'Copying assets'; copy() { pnpm -s copy:locales $1 && pnpm -s copy:mj2 $1 && pnpm -s copy:mml3 $1 && pnpm -s copy:html $1; }; copy",
     "copy:html": "copy() { pnpm -s log:single 'Copying sre auxiliary files'; pnpm copyfiles -u 1 'ts/a11y/sre/*.html' 'ts/a11y/sre/require.*' $1; }; copy",
-    "copy:locales": "pnpm -s log:single 'Copying TeX extension locales'; copy() { pnpm copyfiles -u 3 'ts/input/tex/__locales__/*.json' 'ts/input/tex/*/__locales__/*.json' $1/input/tex/extensions; }; copy",
+    "copy:locales": "copy() { pnpm -s copy:locales:menu $1; pnpm -s copy:locales:tex $1; }; copy ",
+    "copy:locales:menu": "pnpm -s log:single 'Copying menu locales'; copy() { pnpm copyfiles -u 1 'ts/ui/menu/__locales__/*.json' $1; }; copy",
+    "copy:locales:tex": "pnpm -s log:single 'Copying TeX extension locales'; copy() { pnpm copyfiles -u 1 'ts/input/tex/__locales__/*.json' $1 && pnpm copyfiles -u 3 'ts/input/tex/*/__locales__/*.json' $1/input/tex/extensions; }; copy",
     "copy:mj2": "copy() { pnpm -s log:single 'Copying legacy code AsciiMath'; pnpm copyfiles -u 1 'ts/input/asciimath/legacy/**/*' $1; }; copy",
     "copy:mml3": "copy() { pnpm -s log:single 'Copying MathML3 extension json'; pnpm copyfiles -u 1 ts/input/mathml/mml3/mml3.sef.json $1; }; copy",
     "copy:pkg": "copy() { pnpm -s log:single \"Copying package.json to $1\"; pnpm copyfiles -u 2 components/bin/package.json $1; }; copy",

ts/a11y/speech/SpeechMenu.ts

@@ -29,6 +29,7 @@ import {
   SelectionGrid,
 } from '../../ui/dialog/SelectionDialog.js';
 import { SubMenu, Submenu } from '../../ui/menu/mj-context-menu.js';
+import { localize } from '../../ui/menu/__locales__/Component.js';
 import * as Sre from '../sre.js';
 
 /**
@@ -127,7 +128,7 @@ function csSelectionBox(menu: MJContextMenu, locale: string): object {
     });
   }
   const sb = new SelectionDialog(
-    'Clearspeak Preferences',
+    localize('ClearspeakTitle'),
     '',
     items,
     SelectionOrder.ALPHABETICAL,
@@ -137,7 +138,7 @@ function csSelectionBox(menu: MJContextMenu, locale: string): object {
   return {
     type: 'command',
     id: 'ClearspeakPreferences',
-    content: 'Select Preferences',
+    content: localize('SelectPrefs'),
     action: () => sb.post(),
   };
 }
@@ -159,13 +160,13 @@ function basePreferences(previous: string): object[] {
   const items = [
     {
       type: 'radio',
-      content: 'No Preferences',
+      content: localize('NoPrefs'),
       id: 'clearspeak-default',
       variable: 'speechRules',
     },
     {
       type: 'radio',
-      content: 'Current Preferences',
+      content: localize('CurrentPrefs'),
       id: 'clearspeak-' + previous,
       variable: 'speechRules',
     },
@@ -191,7 +192,7 @@ function smartPreferences(
 ): object[] {
   const loc = localePreferences.get(locale);
   const items = [
-    { type: 'label', content: 'Preferences for ' + smart },
+    { type: 'label', content: localize('PrefsFor', smart) },
     { type: 'rule' },
   ];
   return items.concat(

ts/components/loader.ts

@@ -41,6 +41,7 @@ import {
 import { FunctionList } from '../util/FunctionList.js';
 import { mjxRoot } from '#root/root.js';
 import { context } from '../util/context.js';
+import { Locale } from '../util/Locale.js';
 
 /**
  * Function used to determine path to a given package.
@@ -201,61 +202,69 @@ export const Loader = {
     //
     // Create a promise for this load() call
     //
-    const promise = Promise.resolve().then(async () => {
-      //
-      // Collect the promises for all the named packages,
-      // creating the package if needed, and add checks
-      // for the version numbers used in the components.
-      //
-      const promises = [];
-      for (const name of names) {
-        let extension = Package.packages.get(name);
-        if (!extension) {
-          extension = new Package(name);
-          extension.provides(CONFIG.provides[name]);
+    const promise = Promise.resolve()
+      .then(async () => {
+        //
+        // Collect the promises for all the named packages,
+        // creating the package if needed, and add checks
+        // for the version numbers used in the components.
+        //
+        const promises = [];
+        for (const name of names) {
+          let extension = Package.packages.get(name);
+          if (!extension) {
+            extension = new Package(name);
+            extension.provides(CONFIG.provides[name]);
+          }
+          extension.checkNoLoad();
+          promises.push(
+            extension.promise.then(() => {
+              if (
+                CONFIG.versionWarnings &&
+                extension.isLoaded &&
+                !Loader.versions.has(Package.resolvePath(name))
+              ) {
+                console.warn(
+                  `No version information available for component ${name}`
+                );
+              }
+              return extension.result;
+            }) as Promise<any>
+          );
         }
-        extension.checkNoLoad();
-        promises.push(
-          extension.promise.then(() => {
-            if (
-              CONFIG.versionWarnings &&
-              extension.isLoaded &&
-              !Loader.versions.has(Package.resolvePath(name))
-            ) {
-              console.warn(
-                `No version information available for component ${name}`
-              );
-            }
-            return extension.result;
-          }) as Promise<any>
-        );
-      }
-      //
-      // Load everything that was requested and wait for
-      // them to be loaded.
-      //
-      Package.loadAll();
-      const result = await Promise.all(promises);
-      //
-      // If any other loads occurred while we were waiting,
-      // Wait for those promises, and clear the list so that
-      // if even MORE loads occur while waiting for those,
-      // we can wait for them, too.  Keep doing that until
-      // no additional loads occurred, in which case we are
-      // now done.
-      //
-      while (nested.length) {
-        const promise = Promise.all(nested);
-        nested = this.nestedLoads[this.nestedLoads.indexOf(nested)] = [];
-        await promise;
-      }
-      //
-      // Remove the (empty) list from the nested list,
-      // and return the result.
-      //
-      this.nestedLoads.splice(this.nestedLoads.indexOf(nested), 1);
-      return result;
-    });
+        //
+        // Load everything that was requested and wait for
+        // them to be loaded.
+        //
+        Package.loadAll();
+        const result = await Promise.all(promises);
+        //
+        // If any other loads occurred while we were waiting,
+        // Wait for those promises, and clear the list so that
+        // if even MORE loads occur while waiting for those,
+        // we can wait for them, too.  Keep doing that until
+        // no additional loads occurred, in which case we are
+        // now done.
+        //
+        while (nested.length) {
+          const promise = Promise.all(nested);
+          nested = this.nestedLoads[this.nestedLoads.indexOf(nested)] = [];
+          await promise;
+        }
+        //
+        // Remove the (empty) list from the nested list,
+        // and return the result.
+        //
+        this.nestedLoads.splice(this.nestedLoads.indexOf(nested), 1);
+        return result;
+      })
+      .then(async (result) => {
+        //
+        // If any of the components registered localization files, load them.
+        //
+        await Locale.setLocale();
+        return result;
+      });
     //
     // Add this load promise to the lists for any parent load() call that are
     // pending when this load() was performed, then return the load promise.

ts/components/startup.ts

@@ -43,7 +43,6 @@ import { DOMAdaptor } from '../core/DOMAdaptor.js';
 import { PrioritizedList } from '../util/PrioritizedList.js';
 import { OptionList, OPTIONS } from '../util/Options.js';
 import { context } from '../util/context.js';
-import { Locale } from '../util/Locale.js';
 
 import { TeX } from '../input/tex.js';
 
@@ -308,8 +307,7 @@ export abstract class Startup {
   public static defaultReady() {
     Startup.getComponents();
     Startup.makeMethods();
-    Startup.setLocale()
-      .then(() => Startup.pagePromise)
+    Startup.pagePromise
       .then(() => CONFIG.pageReady()) // usually the initial typesetting call
       .then(() => Startup.promiseResolve())
       .catch((err) => Startup.promiseReject(err));
@@ -339,15 +337,6 @@ export abstract class Startup {
       .then(() => Startup.promiseResolve());
   }
 
-  /**
-   * Set the locale and load any needed locale data files.
-   *
-   * @returns {Promise<void[]>}  A promise for when the locale is loaded and ready.
-   */
-  public static setLocale(): Promise<void[]> {
-    return Locale.setLocale(MathJax.config.locale || 'en');
-  }
-
   /**
    * The default OptionError function
    */

ts/input/tex/require/RequireConfiguration.ts

@@ -39,7 +39,6 @@ import { Loader, CONFIG as LOADERCONFIG } from '../../../components/loader.js';
 import { mathjax } from '../../../mathjax.js';
 import { expandable } from '../../../util/Options.js';
 import { MenuMathDocument } from '../../../ui/menu/MenuHandler.js';
-import { Locale } from '../../../util/Locale.js';
 
 import { COMPONENT } from './__locales__/Component.js';
 export { COMPONENT };
@@ -176,11 +175,7 @@ export function RequireLoad(parser: TexParser, name: string) {
   }
   const data = Package.packages.get(extension);
   if (!data) {
-    mathjax.retryAfter(
-      Loader.load(extension)
-        .then(() => Locale.setLocale())
-        .catch((_) => {})
-    );
+    mathjax.retryAfter(Loader.load(extension).catch((_) => {}));
   }
   if (data.hasFailed) {
     throw new TexError(COMPONENT, 'RequireFail', name);

ts/ui/menu/MJContextMenu.ts

@@ -24,6 +24,7 @@
 import { MathItem } from '../../core/MathItem.js';
 import { OptionList } from '../../util/Options.js';
 import { JaxList } from './Menu.js';
+import { localize } from './__locales__/Component.js';
 import { ExplorerMathItem } from '../../a11y/explorer.js';
 
 import {
@@ -167,7 +168,9 @@ export class MJContextMenu extends ContextMenu {
     const input = this.mathItem.inputJax.name;
     const original = this.findID('Show', 'Original');
     original.content =
-      input === 'MathML' ? 'Original MathML' : input + ' Commands';
+      input === 'MathML'
+        ? localize('OriginalMathML')
+        : localize('Commands', input);
     const clipboard = this.findID('Copy', 'Original');
     clipboard.content = original.content;
   }
@@ -187,26 +190,26 @@ export class MJContextMenu extends ContextMenu {
    */
   protected getSpeechMenu() {
     const speech = this.mathItem.outputData.speech;
-    this.findID('Show', 'Speech')[speech ? 'enable' : 'disable']();
-    this.findID('Copy', 'Speech')[speech ? 'enable' : 'disable']();
+    this.findID('Show', 'SpeechText')[speech ? 'enable' : 'disable']();
+    this.findID('Copy', 'SpeechText')[speech ? 'enable' : 'disable']();
   }
 
   /**
    * Enable/disable the Braille menus
    */
   protected getBrailleMenu() {
     const braille = this.mathItem.outputData.braille;
-    this.findID('Show', 'Braille')[braille ? 'enable' : 'disable']();
-    this.findID('Copy', 'Braille')[braille ? 'enable' : 'disable']();
+    this.findID('Show', 'BrailleCode')[braille ? 'enable' : 'disable']();
+    this.findID('Copy', 'BrailleCode')[braille ? 'enable' : 'disable']();
   }
 
   /**
    * Enable/disable the svg menus
    */
   protected getSvgMenu() {
     const svg = this.jax.SVG;
-    this.findID('Show', 'SVG')[svg ? 'enable' : 'disable']();
-    this.findID('Copy', 'SVG')[svg ? 'enable' : 'disable']();
+    this.findID('Show', 'SvgImage')[svg ? 'enable' : 'disable']();
+    this.findID('Copy', 'SvgImage')[svg ? 'enable' : 'disable']();
   }
 
   /**