Merge pull request #2940 from node-red/i18n-update

Update to latest i18n in editor and runtime
2025-03-01 10:36:34 +00:00 · 2021-04-20 10:57:08 +01:00
parent e0c7269b8e f8855b83fa
commit 1d68c8cc87
6 changed files with 43 additions and 30 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -208,7 +208,9 @@ module.exports = function(grunt) {
                        "node_modules/marked/marked.min.js",
                        "node_modules/dompurify/dist/purify.min.js",
                        "packages/node_modules/@node-red/editor-client/src/vendor/d3/d3.v3.min.js",
-                        "packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js",
+                        "node_modules/i18next/i18next.min.js",
+                        "node_modules/i18next-http-backend/i18nextHttpBackend.min.js",
+                        "node_modules/jquery-i18next/jquery-i18next.min.js",
                        "node_modules/jsonata/jsonata-es5.min.js",
                        "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js",
                        "packages/node_modules/@node-red/editor-client/src/vendor/ace/ace.js",
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
        "fs.notify": "0.0.4",
        "hash-sum": "2.0.0",
        "https-proxy-agent": "5.0.0",
-        "i18next": "15.1.2",
+        "i18next": "20.2.1",
        "iconv-lite": "0.6.2",
        "is-utf8": "0.2.1",
        "js-yaml": "3.14.0",
@@ -102,6 +102,8 @@
        "grunt-simple-mocha": "~0.4.1",
        "grunt-simple-nyc": "^3.0.1",
        "http-proxy": "1.18.1",
+        "i18next-http-backend": "1.2.1",
+        "jquery-i18next": "1.2.1",
        "jsdoc-nr-template": "github:node-red/jsdoc-nr-template",
        "marked": "2.0.1",
        "minami": "1.2.3",
--- a/packages/node_modules/@node-red/editor-client/src/js/i18n.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/i18n.js
@@ -18,53 +18,66 @@ RED.i18n = (function() {

    var apiRootUrl;

+    function detectLanguage() {
+        return navigator.language
+    }
+
    return {
        init: function(options, done) {
            apiRootUrl = options.apiRootUrl||"";
            var preferredLanguage = localStorage.getItem("editor-language");
            var opts = {
-                resGetPath: apiRootUrl+'locales/__ns__?lng=__lng__',
-                dynamicLoad: false,
-                load:'current',
-                ns: {
-                    namespaces: ["editor","node-red","jsonata","infotips"],
-                    defaultNs: "editor"
+                backend: {
+                    loadPath: apiRootUrl+'locales/__ns__?lng=__lng__',
                },
+                lng: 'en-US',
+                // debug: true,
+                preload:['en-US'],
+                ns: ["editor","node-red","jsonata","infotips"],
+                defaultNS: "editor",
                fallbackLng: ['en-US'],
-                useCookie: false,
-                returnObjectTrees: true
+                returnObjects: true,
+                interpolation: {
+                    unescapeSuffix: 'HTML',
+                    escapeValue: false,
+                    prefix: '__',
+                    suffix: '__'
+                }
            };
            if (preferredLanguage) {
                opts.lng = preferredLanguage;
            }
-            i18n.init(opts,function() {
+
+            i18next.use(i18nextHttpBackend).init(opts,function() {
                done();
            });
+            jqueryI18next.init(i18next, $, { handleName: 'i18n' });
+
+
            RED["_"] = function() {
-                var v = i18n.t.apply(null,arguments);
+                var v = i18next.t.apply(i18next,arguments);
                if (typeof v === 'string') {
                    return v;
                } else {
                    return arguments[0];
                }
            }
-
        },
        lang: function() {
            // Gets the active message catalog language. This is based on what
            // locale the editor is using and what languages are available.
            //
-            var preferredLangs = i18n.functions.toLanguages(localStorage.getItem("editor-language")||i18n.detectLanguage());
+            var preferredLangs = [localStorage.getItem("editor-language")|| detectLanguage()].concat(i18next.languages);
            var knownLangs = RED.settings.theme("languages")||["en-US"];
            for (var i=0;i<preferredLangs.length;i++) {
                if (knownLangs.indexOf(preferredLangs[i]) > -1) {
                    return preferredLangs[i]
                }
            }
-            return 'end-US'
+            return 'en-US'
        },
        loadNodeCatalog: function(namespace,done) {
-            var languageList = i18n.functions.toLanguages(localStorage.getItem("editor-language")||i18n.detectLanguage());
+            var languageList = [localStorage.getItem("editor-language")|| detectLanguage()].concat(i18next.languages);
            var toLoad = languageList.length;
            languageList.forEach(function(lang) {
                $.ajax({
@@ -74,7 +87,7 @@ RED.i18n = (function() {
                    cache: false,
                    url: apiRootUrl+'nodes/'+namespace+'/messages?lng='+lang,
                    success: function(data) {
-                        i18n.addResourceBundle(lang,namespace,data);
+                        i18next.addResourceBundle(lang,namespace,data);
                        toLoad--;
                        if (toLoad === 0) {
                            done();
@@ -86,7 +99,7 @@ RED.i18n = (function() {
        },

        loadNodeCatalogs: function(done) {
-            var languageList = i18n.functions.toLanguages(localStorage.getItem("editor-language")||i18n.detectLanguage());
+            var languageList = [localStorage.getItem("editor-language")|| detectLanguage()].concat(i18next.languages);
            var toLoad = languageList.length;

            languageList.forEach(function(lang) {
@@ -99,7 +112,7 @@ RED.i18n = (function() {
                    success: function(data) {
                        var namespaces = Object.keys(data);
                        namespaces.forEach(function(ns) {
-                            i18n.addResourceBundle(lang,ns,data[ns]);
+                            i18next.addResourceBundle(lang,ns,data[ns]);
                        });
                        toLoad--;
                        if (toLoad === 0) {
@@ -111,7 +124,7 @@ RED.i18n = (function() {
        },

        loadPluginCatalogs: function(done) {
-            var languageList = i18n.functions.toLanguages(localStorage.getItem("editor-language")||i18n.detectLanguage());
+            var languageList = [localStorage.getItem("editor-language")|| detectLanguage()].concat(i18next.languages);
            var toLoad = languageList.length;

            languageList.forEach(function(lang) {
@@ -124,7 +137,7 @@ RED.i18n = (function() {
                    success: function(data) {
                        var namespaces = Object.keys(data);
                        namespaces.forEach(function(ns) {
-                            i18n.addResourceBundle(lang,ns,data[ns]);
+                            i18next.addResourceBundle(lang,ns,data[ns]);
                        });
                        toLoad--;
                        if (toLoad === 0) {
@@ -133,6 +146,7 @@ RED.i18n = (function() {
                    }
                });
            })
-        }
+        },
+        detectLanguage: detectLanguage
    }
 })();
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -36,7 +36,7 @@ var RED = (function() {
    }
    function loadPlugins(done) {
        loader.reportProgress(RED._("event.loadPlugins",{count:""}), 17)
-        var lang = localStorage.getItem("editor-language")||i18n.detectLanguage();
+        var lang = localStorage.getItem("editor-language")||RED.i18n.detectLanguage();

        $.ajax({
            headers: {
@@ -176,7 +176,7 @@ var RED = (function() {

    function loadNodes() {
        loader.reportProgress(RED._("event.loadNodes",{count:""}), 30)
-        var lang = localStorage.getItem("editor-language")||i18n.detectLanguage();
+        var lang = localStorage.getItem("editor-language")||RED.i18n.detectLanguage();

        $.ajax({
            headers: {
--- a/packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js
+++ b/packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js
--- a/packages/node_modules/@node-red/util/package.json
+++ b/packages/node_modules/@node-red/util/package.json
@@ -16,7 +16,7 @@
    ],
    "dependencies": {
        "clone": "2.1.2",
-        "i18next": "15.1.2",
+        "i18next": "20.2.1",
        "json-stringify-safe": "5.0.1",
        "jsonata": "1.8.4",
        "lodash.clonedeep": "^4.5.0",