basic i18n support

[nightwing]

Issue #2118

Adds a global option for translation messages. Already rendered messages are not changed when the option is changed.

Another limitation is that this does not support plurals for now, in the future if we decide to support it we can change nls to

pluralRules = new Intl.PluralRules(messages.$id);
function nls(string, params) {
    var translated;
    if (typeof string !== "string") {
        if (Array.isArray(string)) return string.map(part => nls(part, params)).join("");

        var id = string.other || string.many;
        var translated = messages && messages[id] || string

        var value = params[string.plural]
        var pluralClass = pluralRules.select(value);
         
        translated = translated[value] || translated[pluralClass] || translated["other"];        
    } else { 
        translated = messages && messages[string] || string;
    }
    if (params) {
        translated = translated.replace(/\$(\$|[\d]+)/g, function(_, name) {
            if (name == "$") return "$";
            return params[name];
        });
    }
    return translated;
}

which could be called as

 messages["in $0 $1 errors were found"] = {
    0: " $0 no errors were found",
    few: "....some text in russian",
    one: "in $0 one error was found",
    other:  "in $0 $1 errors were found"
}

nls({
    plural: 1,
    0: "in $0 no errors were found",
    one: "in $0 one error was found",
    other:  "in $0 $1 errors were found"
}, ["filename", 3])

[codecov]

Codecov Report

Patch coverage: 100.00% and project coverage change: -0.26 ⚠️

Comparison is base (6f60229) 86.94% compared to head (5190ac8) 86.68%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5153      +/-   ##
==========================================
- Coverage   86.94%   86.68%   -0.26%     
==========================================
  Files         560      560              
  Lines       44220    44223       +3     
  Branches     6854     6853       -1     
==========================================
- Hits        38446    38336     -110     
- Misses       5774     5887     +113     

Flag	Coverage Δ
unittests	86.68% <100.00%> (-0.26%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/autocomplete/popup.js	85.21% <100.00%> (+0.05%)	⬆️
src/config_test.js	98.64% <100.00%> (+0.16%)	⬆️
src/editor.js	80.15% <100.00%> (+0.01%)	⬆️
src/ext/error_marker.js	89.10% <100.00%> (+0.10%)	⬆️
src/keyboard/textinput.js	77.44% <100.00%> (+0.04%)	⬆️
src/layer/gutter.js	90.53% <100.00%> (+0.02%)	⬆️
src/lib/app_config.js	76.04% <100.00%> (+2.78%)	⬆️
src/mouse/default_gutter_handler.js	71.83% <100.00%> (+0.19%)	⬆️

... and 5 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[oykuyilmaz]

what if this throws error?

[nightwing]

it will be printed in the terminal, and the developer running it will decide what to do.

[oykuyilmaz]

Are we going to update all aria-labels like texts to the nls versions in a separate PR?

[nightwing]

Good point, i have forgotten to check aria-labels, updated now.

[akoreman]

We have some more ARIA labels here and here. We also have two aria-roledescription (which is also read by screen readers) here and here.

[oykuyilmaz]

Other than documentation LGTM. I think we can also update strings which need translations in upcoming PRs if we see the need.

[oykuyilmaz]

Sorry, I've missed Alice's comment: #5153 (comment)
Let's update those aria labels as well.

[FirstWhack]

This has broken the default example of react-ace, nls is not defined. Can repro by running the example code with latest version of ace-builds.

While that is beyond the purview of this repo I am curious what we can do to fix it.

[nightwing]

@FirstWhack could you please doublecheck that ace.js and ext-searchbox.js loaded in your page are from the same version of ace-builds? I couldn't reproduce the issue you describe by running

git clone https://github.com/securingsincity/react-ace
cd react-ace
npm i
npm i ace-builds@latest

fixing webpack.config.example.js

    // contentBase: [
      // path.join(__dirname, "example"),
      // path.join(__dirname, "dist")
    // ],
    static: {
      directory: path.join(__dirname, './example'),
      serveIndex: true,
    },

running

npm run example

and in browser console

[ace.version, ace.config.nls]

prints (2) ['1.22.0', ƒ] as it should.

but the error you describe would happen if another version of ace.js was included in the page.

[FirstWhack]

@FirstWhack could you please doublecheck that ace.js and ext-searchbox.js loaded in your page are from the same version of ace-builds? I couldn't reproduce the issue you describe by running

git clone https://github.com/securingsincity/react-ace
cd react-ace
npm i
npm i ace-builds@latest

fixing webpack.config.example.js

    // contentBase: [
      // path.join(__dirname, "example"),
      // path.join(__dirname, "dist")
    // ],
    static: {
      directory: path.join(__dirname, './example'),
      serveIndex: true,
    },

running

npm run example

and in browser console

[ace.version, ace.config.nls]

prints (2) ['1.22.0', ƒ] as it should.

but the error you describe would happen if another version of ace.js was included in the page.

I suppose that is a better way to describe the issue. React-ace has not been updated in around a year and is pointed towards ace-builds ^1.4.14 returning ace.js version 1.16.

If I use yarn resolutions to force latest it works fine. Definitely not an issue with ace itself.