Add localisation support #397

ph1p · 2017-11-12T22:21:51Z

Hey folks,

I've created one type of language support and I've seen the i18next branch to late.
This is why I used another library.

I used react-intl and wrote small spartanic helper functions for main process files.
All languages are located in /locales/*.json.
There is no specific reason why I've used react-intl instead of any other i18n lib.

My main goal was to change as little code as possible and to add new languages easily.

Menu item

Some links

Issues
#285, #292, #284

Closes #285

Remove unused locale files Add Configuration to i18n index.js Add language menu item to view menu Add ipc event to show restart message Add google translator spanish Move i18n to shared folder

Write i18n as singleton

Fix webpack config schema Fix webpack extract text plugin schema Remove babili package and add babel-minify-webpack-plugin (babel/minify#124)

sallar · 2017-11-13T08:13:08Z

Thanks @ph1p for the great work. I quite like this. It's ok to use react-intl as far as I can see, since obviously its easy to use the translations in non-react files too.
Before I review the code, could you check why are the tests failing?

Fix i18n file

ph1p · 2017-11-13T11:20:04Z

@sallar Thank you! I have a problem with the current version of buttercup. I can't run npm run build:renderer. This is why I updated all outdated packages (That did not help).
Webpack freezes at 91% additional asset processing and node throws FATAL ERROR: CALL_AND_RETRY_LAST.
Your last working commit was 8732150474e9bf6be7cb78faf9bff7f17d9049e2.
And the problem is babili (babel-minify). I replaced it with uglify and commented out babel-minify. Now it works, hopefully :)

Commented out BabelMinify

Update i18n config and call correct formatMessage method Remove contenthash from exported css file Add minimize css option

sallar

Thanks @ph1p. This looks great. I requested some changes that are small... I would also need to run the app to see how it looks after you do the changes :) Cheers!

sallar · 2017-11-13T20:10:56Z

config/webpack.config.production.js

@@ -47,7 +70,55 @@ module.exports = merge(baseConfig, {
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
-    new BabiliPlugin(),
+    new UglifyJSPlugin({


Does uglifyJS support ES6 which we are using? I think the reason I used Babili was that it was the only one that supported ES6 out of the box.

Jep. Documentation says, that i can use the ecma option (https://github.com/webpack-contrib/uglifyjs-webpack-plugin#uglifyoptions)

sallar · 2017-11-13T20:11:05Z

config/webpack.config.production.js

+        }
+      }
+    }),
+    // new MinifyPlugin({


Can you remove this unused comments?

sallar · 2017-11-13T20:11:50Z

package.json

@@ -108,36 +108,37 @@
  },
  "homepage": "https://buttercup.pw",
  "dependencies": {
-    "opencollective": "^1.0.3"
+    "opencollective": "^1.0.3",
+    "react-intl": "^2.4.0"


Can we move this to devDependencies? Since it will be compiled to the final package

sallar · 2017-11-13T20:12:56Z

src/main/menu.js

 import pkg from '../../package.json';

-const defaultTemplate = [


Is this diff block because you moved this constant to the setup function?

Yes, because I need the store variable for all menu points.

sallar · 2017-11-13T20:17:21Z

src/renderer/index.js

@@ -61,10 +63,17 @@ ipc.on('will-quit', () => {
  store.dispatch(setUIState('isExiting', true));
 });

+// show message, when locale changed
+ipc.on('locale-changed', (e, payload) => {
+  alert(payload);


Can you use the showDialog function in renderer/system/dialog.js?

Also, why does the user need to relaunch the program? wont react-intl change the texts in place?

Because I can't find a solution to update the whole electron menu.

@ph1p We do that when a new archive is added. For example I call it everytime the store gets updated: store.subscribe(debounce(() => setupMenu(store), 500));. So this should also update the language already if everything's setup correctly

Ok cool. I'll try it :)

Yeah, it works!

sallar · 2017-11-13T20:20:02Z

src/shared/i18n/index.js

+  const translations = [];
+
+  config.availableLanguages.forEach(lang => {
+    translations[lang.code] = require(`../../../locales/${lang.code}`);


I think this wont work when compiled. Since the paths will change. in menu.js I do this for resolving: path.resolve(__dirname, `../resources/icons/${item.icon}.png`) and I think this should be similar.

Also can we use .map here?

const translations = config.availableLanguages.map(lang => require(...));

It will compile. I've made the forEach, because if you dynamically require content, webpack typically ignores it. With this little trick I require all translations and load them into the object. So when I add a language to the config object, the translations are automatically added.
Anyways, I have updated my code and decided to import the languages by hand.

perry-mitchell · 2017-11-13T21:08:48Z

locales/de.json

+  "system.dialog.confirm": "Bestätigen",
+  "system.dialog.nevermind": "Abbrechen",
+  "system.dialog.password": "Passwort",
+  "main.menu.language": "Sprache",


I really like the nested style, though I think some components should be named differently. For instance, main.menu alludes to there being a main category with a menu subcategory, which I don't think there is. Should this be main-menu perhaps? Or even menu.main?

perry-mitchell · 2017-11-13T21:09:21Z

locales/en.json

+  "system.dialog.confirm": "Confirm",
+  "system.dialog.nevermind": "Nevermind",
+  "system.dialog.password": "Password",
+  "main.menu.language": "Language",


And here as well..

perry-mitchell · 2017-11-13T21:09:32Z

locales/es.json

+  "system.dialog.confirm": "Confirmar",
+  "system.dialog.nevermind": "No importa",
+  "system.dialog.password": "Contraseña",
+  "main.menu.language": "Idioma",


perry-mitchell · 2017-11-13T21:13:25Z

Also, this shouldn't be merged until we've had a review of the Spanish and German content 😊

ph1p · 2017-11-13T21:25:38Z

I'm german, so I reviewed the german part by myself ^^.
I only added spanish language, because of ticket #284.
A girlfriend of mine speaks spanish, she will translate it.
These language files are only examples. I'll write a little explanation about the naming and update all of them.

Thank you for reviewing my code. I give my best to solve all problems.

…se.js -> resolve -> alias) Add full reload after language change without restarting the app Remove babili (babel-minify) Move react-intl to dev dependencies

ph1p · 2017-11-13T23:37:28Z

I've updated my code and have decided to hold the naming of language ids easier.
The id describes or is itself the translated word written in lower kebab-case.
I think it's better, because it's shorter and easier to use with duplicate words.

perry-mitchell · 2017-11-14T11:25:05Z

I can't find the word Trash

Ah.. well this is more complex. General and Trash are groups - content within the Archive data. These are created as boilerplate items in buttercup-core. I agree that these should be translated - I can add an option to the core for this, but it should be done later imo (not part of this PR).

Task in core: buttercup/buttercup-core#191

ph1p · 2017-11-14T11:28:06Z

@perry-mitchell Ah ok and take look at password generator, this must also be dynamic.

perry-mitchell · 2017-11-14T11:29:29Z

password generator, this must also be dynamic

Agreed.. I think we need to figure out a nice way to pass translations around. I guess the generator, being a separate component, should have it's own internationalisation, but should take the current language from the host application (ie. the desktop application in this case).

perry-mitchell · 2017-11-14T11:42:43Z

Hmm.. appveyor is still dying. Issue seems to be with npm. @ph1p would you mind trying to add npm cache verify to the appveyor build script? Before npm install?

If that doesn't work, npm cache clean before npm install might fix it.

EDIT: Just updated it.. let's see how it goes..

Add missing intl object to compoentn

ph1p · 2017-11-14T16:26:31Z

Ok guys ... I've tried several things, but I don't know why travis and veyor failing. There're stopping at ava && npm run lint. I've tested it on my own and can't reproduce it.

sallar · 2017-11-14T16:27:35Z

@perry-mitchell @ph1p I'll have a crack at the app veyor thing to see whats dying.

sallar · 2017-11-14T16:54:51Z

@ph1p Im going to do some commits to your repo if you dont mind. including reverting some of the package.json upgrades. It's too many changes for this PR and maybe its one of them that breaks the whole thing.

sallar · 2017-11-14T17:32:29Z

@perry-mitchell @ph1p done!

ph1p · 2017-11-14T17:32:44Z

Thanks @sallar. This was a stupid idea of mine, to push all code into the master branch 🤗. Next time I’ll create an extra feature branch and another pull request.

perry-mitchell · 2017-11-14T18:03:44Z

This was a stupid idea of mine

No such thing! This was a huge chunk of work. We obviously need to update packages anyway.. 😁

ph1p · 2017-11-14T18:14:06Z

Ok I've one last commit with some bugfixes and translations (no dependency updates). In about 20 minutes I'll push it.

Fix context menu translations Translate errors

sallar · 2017-11-14T19:43:46Z

Great work @ph1p. I'm going to merge this :)

ph1p added 8 commits November 12, 2017 14:13

Add language support

31209d0

Add language support to main process

a24242e

Add breaks to language config

e022f34

Spanish translation with the help of google translator 🤙

d280a9b

Move language files

ab5003c

Remove unused locale files Add Configuration to i18n index.js Add language menu item to view menu Add ipc event to show restart message Add google translator spanish Move i18n to shared folder

Remove unused resolve from webpack config

c87a691

Add all items to setupMenu method to access translations

1ec27bf

Write i18n as singleton

Update packages

4f9ab34

Fix webpack config schema Fix webpack extract text plugin schema Remove babili package and add babel-minify-webpack-plugin (babel/minify#124)

perry-mitchell requested review from perry-mitchell and sallar November 13, 2017 08:18

perry-mitchell assigned sallar and perry-mitchell Nov 13, 2017

perry-mitchell added MR: Needs release Status: Pending labels Nov 13, 2017

Replace MinifyPlugin with UglifyJSPlugin, because of CALL_AND_RETRY_LAST

1dec0ef

Fix i18n file

ph1p added 4 commits November 13, 2017 13:01

Fix test bug (electron-userland/spectron#244)

56d4149

Commented out BabelMinify

Add i18n setup to file-manager.js

7e643a3

Fix archive button style (add space)

a687446

Add enabled state to menu

a151e77

Update i18n config and call correct formatMessage method Remove contenthash from exported css file Add minimize css option

sallar requested changes Nov 13, 2017

View reviewed changes

perry-mitchell requested changes Nov 13, 2017

View reviewed changes

perry-mitchell added the Status: Blocked label Nov 13, 2017

Add webpack-alias plugin for better path resolving (webpack.config.ba…

9d8b2b2

…se.js -> resolve -> alias) Add full reload after language change without restarting the app Remove babili (babel-minify) Move react-intl to dev dependencies

ph1p added 2 commits November 14, 2017 00:52

Update package-lock.json

eb5eab8

Remove PWD from .babelrc

ae899aa

Add missing translations

41d5986

perry-mitchell and others added 5 commits November 14, 2017 13:50

Add cache verification for npm on appveyor

07124f1

Update build file

c8c1173

Add missing intl object to compoentn

Merge branch 'master' of github.com:ph1p/buttercup-desktop

bd6b1da

Add missing intl const

cece292

Set spectron to fixed version

099d118

Add missing translations to main menu

0e7f3b6

sallar added 5 commits November 14, 2017 18:55

Fix language & config lookup

06b6758

Merge branch 'master' of github.com:ph1p/buttercup-desktop

41b5cef

Revert upgraded deps

6b28025

Upgrade webpack and babel

6be7cd1

Update more deps

1511207

sallar approved these changes Nov 14, 2017

View reviewed changes

Revert package-lock file

b64d210

ph1p added 2 commits November 14, 2017 19:40

Remove unnecessary scope in i18n setup

0db4b88

Fix context menu translations Translate errors

Fix i18n import path

e04411e

sallar merged commit bb9ee4f into buttercup:master Nov 14, 2017

perry-mitchell mentioned this pull request Nov 20, 2017

<localisations> Untranslated password tips&hints #433

Closed

		import pkg from '../../package.json';

		const defaultTemplate = [

Add localisation support #397

Add localisation support #397

Conversation

ph1p commented Nov 12, 2017 • edited by perry-mitchell Loading

sallar commented Nov 13, 2017

ph1p commented Nov 13, 2017

sallar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ph1p Nov 14, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

perry-mitchell commented Nov 13, 2017

ph1p commented Nov 13, 2017 • edited Loading

ph1p commented Nov 13, 2017

perry-mitchell commented Nov 14, 2017 • edited Loading

ph1p commented Nov 14, 2017

perry-mitchell commented Nov 14, 2017

perry-mitchell commented Nov 14, 2017 • edited Loading

ph1p commented Nov 14, 2017

sallar commented Nov 14, 2017

sallar commented Nov 14, 2017

sallar commented Nov 14, 2017

ph1p commented Nov 14, 2017

perry-mitchell commented Nov 14, 2017

ph1p commented Nov 14, 2017

sallar commented Nov 14, 2017

ph1p commented Nov 12, 2017 •

edited by perry-mitchell

Loading

ph1p Nov 14, 2017 •

edited

Loading

ph1p commented Nov 13, 2017 •

edited

Loading

perry-mitchell commented Nov 14, 2017 •

edited

Loading

perry-mitchell commented Nov 14, 2017 •

edited

Loading