improve loading of extension locales with fallback

src/editor/extensions/ext-arrows/ext-arrows.js

@@ -6,13 +6,13 @@
  * @copyright 2010 Alexis Deveria
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'arrows',
   async init (S) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('arrows', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const svgCanvas = svgEditor.canvas;
     const
       addElem = svgCanvas.addSVGElementFromJson,

src/editor/extensions/ext-closepath/ext-closepath.js

@@ -6,6 +6,7 @@
  * @copyright 2010 Jeff Schiller
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 import '../../../common/svgpathseg.js';
 
 // This extension adds a simple button to the contextual panel for paths
@@ -13,7 +14,8 @@ import '../../../common/svgpathseg.js';
 export default {
   name: 'closepath',
   async init ({importLocale, $}) {
-    const strings = await importLocale();
+    const svgEditor = this;
+    const strings = await loadExtensionTranslation('closepath', svgEditor.curPrefs.lang);
     let selElems;
     const updateButton = function (path) {
       const seglist = path.pathSegList,

src/editor/extensions/ext-connector/ext-connector.js

@@ -6,6 +6,7 @@
  * @copyright 2010 Alexis Deveria
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'connector',
@@ -350,8 +351,7 @@ export default {
         }
       }
     }];
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('connector', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     return {
       name: strings.name,
       svgicons: 'conn.svg',

src/editor/extensions/ext-eyedropper/ext-eyedropper.js

@@ -7,12 +7,13 @@
  *
  */
 
+import {loadExtensionTranslation} from '../../locale.js';
+
 export default {
   name: 'eyedropper',
   async init (S) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('eyedropper', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const {$, ChangeElementCommand} = S, // , svgcontent,
       // svgdoc = S.svgroot.parentNode.ownerDocument,
       svgCanvas = svgEditor.canvas,

src/editor/extensions/ext-foreignobject/ext-foreignobject.js

@@ -7,6 +7,8 @@
  *
  */
 
+import {loadExtensionTranslation} from '../../locale.js';
+
 export default {
   name: 'foreignobject',
   async init (S) {
@@ -17,8 +19,8 @@ export default {
       // {svgcontent} = S,
       // addElem = svgCanvas.addSVGElementFromJson,
       svgdoc = S.svgroot.parentNode.ownerDocument;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
+    const strings = await loadExtensionTranslation('foreignobject', svgEditor.curPrefs.lang);
 
     const properlySourceSizeTextArea = function () {
       // TODO: remove magic numbers here and get values from CSS

src/editor/extensions/ext-grid/ext-grid.js

@@ -6,13 +6,13 @@
  * @copyright 2010 Redou Mine, 2010 Alexis Deveria
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'grid',
   async init ({$, NS, getTypeMap}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('grid', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const svgCanvas = svgEditor.canvas;
     const svgdoc = document.getElementById('svgcanvas').ownerDocument,
       {assignAttributes} = svgCanvas,

src/editor/extensions/ext-helloworld/ext-helloworld.js

@@ -12,12 +12,13 @@
 *  the left ("mode") panel. Clicking on the button, and then the canvas
 *  will show the user the point on the canvas that was clicked on.
 */
+import {loadExtensionTranslation} from '../../locale.js';
+
 export default {
   name: 'helloworld',
   async init ({$, importLocale}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('helloworld', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const svgCanvas = svgEditor.canvas;
     return {
       name: strings.name,

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -6,13 +6,13 @@
  * @copyright 2010 Alexis Deveria
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'imagelib',
   async init ({$, decode64, dropXMLInternalSubset}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const imagelibStrings = await loadExtensionTranslation('imagelib', svgEditor.curPrefs.lang);
-    const {default: imagelibStrings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
 
     const {uiStrings, canvas: svgCanvas} = svgEditor;
 

src/editor/extensions/ext-imagelib/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>-</title>
+    <link rel="icon" type="image/png" href="../../images/logo.png" />
+
+    <!-- Lacking browser support -->
+    <script nomodule="" src="../../redirect-on-no-module-support.js"></script>
+    <script type="module" src="../../redirect-on-lacking-support.js"></script>
+
+    <!-- As yet no ES6 -->
+    <script src="../../jquery.min.js"></script>
+
+    <!-- ES6+ polyfills (Babel) -->
+    <script src="../../external/core-js-bundle/minified.js"></script>
+    <script src="../../external/regenerator-runtime/runtime.js"></script>
+
+    <script type="module" src="index.js"></script>
+</head>
+<body>
+
+<h1>Select an image:</h1>
+<a href="smiley.svg">smiley.svg</a>
+<br/>
+<a href="../../images/logo.png">logo.png</a>
+
+</body>
+</html>

src/editor/extensions/ext-imagelib/locale/de.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/en.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/fr.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/pl.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/pt-BR.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/ro.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/sk.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/sl.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-imagelib/locale/zh-CN.js

@@ -12,7 +12,7 @@ export default {
   imgLibs: [
     {
       name: 'Demo library (local)',
-      url: '{path}imagelib/index.html',
+      url: 'extensions/ext-imagelib/index.html',
       description: 'Demonstration library for SVG-edit on this server'
     },
     {

src/editor/extensions/ext-markers/ext-markers.js

@@ -28,13 +28,13 @@
  *    add support for dimension extension lines
  *
 */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'markers',
   async init (S) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('markers', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const {$} = S;
     const svgCanvas = svgEditor.canvas;
     const // {svgcontent} = S,

src/editor/extensions/ext-mathjax/ext-mathjax.js

@@ -7,13 +7,13 @@
  * @copyright 2013 Jo Segaert
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'mathjax',
   async init ({$}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('mathjax', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const svgCanvas = svgEditor.canvas;
 
     // Configuration of the MathJax extention.

src/editor/extensions/ext-panning/ext-panning.js

@@ -9,13 +9,13 @@
 /*
   This is a very basic SVG-Edit extension to let tablet/mobile devices pan without problem
 */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'panning',
   async init ({importLocale}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('panning', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const svgCanvas = svgEditor.canvas;
     const buttons = [{
       id: 'ext-panning',

src/editor/extensions/ext-placemark/ext-placemark.js

@@ -5,6 +5,8 @@
  * @copyright 2010 CloudCanvas, Inc. All rights reserved
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
+
 export default {
   name: 'placemark',
   async init (S) {
@@ -22,8 +24,7 @@ export default {
       // newFOG, newFOGParent, newDef, newImageName, newMaskID,
       // undoCommand = 'Not image',
       // modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('placemark', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const markerTypes = {
       nomarker: {},
       forwardslash:

src/editor/extensions/ext-polygon/ext-polygon.js

@@ -5,6 +5,7 @@
  * @copyright 2010 CloudCanvas, Inc. All rights reserved
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'polygon',
@@ -14,8 +15,7 @@ export default {
     const {$} = S, // {svgcontent}
       // addElem = svgCanvas.addSVGElementFromJson,
       editingitex = false;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('polygon', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     let selElems,
       // svgdoc = S.svgroot.parentNode.ownerDocument,
       // newFOG, newFOGParent, newDef, newImageName, newMaskID, modeChangeG,

src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js

@@ -8,13 +8,13 @@
  *  (I agree to dual license my work to additional GPLv2 or later)
  */
 import {canvg} from '../../../external/canvg/canvg.js';
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'server_moinsave',
   async init ({$, encode64, importLocale}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('server_moinsave', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const svgCanvas = svgEditor.canvas;
     const saveSvgAction = '/+modify';
 

src/editor/extensions/ext-server_opensave/ext-server_opensave.js

@@ -7,13 +7,13 @@
  *
  */
 import {canvg} from '../../../external/canvg/canvg.js';
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'server_opensave',
   async init ({$, decode64, encode64}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('server_opensave', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const {
       curConfig: {
         extPath,

src/editor/extensions/ext-shapes/ext-shapes.js

@@ -6,13 +6,13 @@
  * @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'shapes',
   async init ({$}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('shapes', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const canv = svgEditor.canvas;
     const svgroot = canv.getRootElem();
     let lastBBox = {};

src/editor/extensions/ext-star/ext-star.js

@@ -5,6 +5,7 @@
  * @copyright 2010 CloudCanvas, Inc. All rights reserved
  *
  */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'star',
@@ -23,8 +24,7 @@ export default {
       // newFOG, newFOGParent, newDef, newImageName, newMaskID,
       // undoCommand = 'Not image',
       // modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('star', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
 
     /**
      *

src/editor/extensions/ext-storage/ext-storage.js

@@ -19,6 +19,8 @@
  *   initial (or URL-forced) dialog. *
 */
 
+import {loadExtensionTranslation} from '../../locale.js';
+
 export default {
   name: 'storage',
   init ({$}) {
@@ -167,13 +169,12 @@ export default {
       name: 'storage',
       async langReady ({lang}) {
         const storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
-        // eslint-disable-next-line node/no-unsupported-features/es-syntax
+        const strings = await loadExtensionTranslation('storage', svgEditor.curPrefs.lang);
-        const {default: confirmSetStorage} = await import(`./locale/${lang}.js`);
         const {
           message, storagePrefsAndContent, storagePrefsOnly,
           storagePrefs, storageNoPrefsOrContent, storageNoPrefs,
           rememberLabel, rememberTooltip
-        } = confirmSetStorage;
+        } = strings;
 
         // No need to run this one-time dialog again just because the user
         //   changes the language

src/editor/extensions/ext-webappfind/ext-webappfind.js

@@ -5,13 +5,13 @@
 * @license MIT
 * @todo See WebAppFind Readme for SVG-related todos
 */
+import {loadExtensionTranslation} from '../../locale.js';
 
 export default {
   name: 'webappfind',
   async init ({$}) {
     const svgEditor = this;
-    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const strings = await loadExtensionTranslation('webappfind', svgEditor.curPrefs.lang);
-    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
     const saveMessage = 'save',
       readMessage = 'read',
       excludedMessages = [readMessage, saveMessage];

src/editor/extensions/ext-xdomain-messaging/ext-xdomain-messaging.js

@@ -3,6 +3,7 @@
 *  but an API common for cross-domain and same domain use can be found
 *  in embedapi.js with a demo at embedapi.html.
 */
+
 export default {
   name: 'xdomain-messaging',
   init () {

src/editor/locale.js

@@ -364,3 +364,24 @@ export const putLocale = async function (givenParam, goodLangs) {
   const module = await import(`./locale/lang.${langParam}.js`);
   return readLang(module.default);
 };
+
+/**
+ *
+ * @function module:locale.loadExtensionTranslation
+ * @param {string} extensionName
+ * @param {string} lang
+ * @returns {string} lang will will returned if the translation exists else it will be 'en'
+*/
+export const loadExtensionTranslation = async function (extensionName, lang) {
+  let translationModule;
+  try {
+    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    translationModule = await import(`./extensions/ext-${extensionName}/locale/${lang}.js`);
+  } catch (_error) {
+    // eslint-disable-next-line no-console
+    console.error(`Missing translation (${lang}) for extension ${extensionName} - using 'en'`);
+    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    translationModule = await import(`./extensions/ext-${extensionName}/locale/en.js`);
+  }
+  return translationModule.default;
+};