Merge pull request #775 from chrisgarrity/feature/use-l10n

Import translations from scratch-l10n package

.tx/config

@@ -0,0 +1,8 @@
+[main]
+host = https://www.transifex.com
+
+[experimental-scratch.scratch-gui]
+file_filter = translations/<lang>.json
+source_file = translations/en.json
+source_lang = en
+type = CHROME

package.json

@@ -4,12 +4,11 @@
   "description": "GraphicaL User Interface for creating and running Scratch 3.0 projects",
   "main": "./src/index.js",
   "scripts": {
-    "build": "npm run clean && npm run i18n:msgs && webpack --progress --colors --bail",
+    "build": "npm run clean && webpack --progress --colors --bail",
     "clean": "rimraf ./build && mkdirp build",
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
-    "i18n:msgs": "node ./scripts/generate-locale-messages.js",
     "i18n:src": "babel src > tmp.js && rimraf tmp.js && ./scripts/build-i18n-source.js ./translations/messages/ ./translations/",
-    "start": "npm run i18n:msgs && webpack-dev-server",
+    "start": "webpack-dev-server",
     "test": "npm run test:lint && npm run test:unit && NODE_ENV=production npm run build && npm run test:integration",
     "test:integration": "jest --runInBand test[\\\\/]integration",
     "test:lint": "eslint . --ext .js,.jsx",
@@ -86,6 +85,7 @@
     "scratch-audio": "latest",
     "scratch-paint": "latest",
     "scratch-blocks": "latest",
+    "scratch-l10n": "1.0.20171013211708",
     "scratch-render": "latest",
     "scratch-storage": "^0.2.0",
     "scratch-vm": "latest",

scripts/generate-locale-messages.js

@@ -1,67 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Generates locale/messages.json from current translastion files
-
-Translations are expected to be in the ./translations directory.
-Translation files are in Chrome i18n json format:
-'''
-{
-    "message.id": {
-        "message": "The translated text",
-        "description": "Tips for translators"
-    },
-    ...
-}
-'''
-They are named by locale, for example: 'fr.json' or 'zh-cn.json'
-
-Current languages supported are listed in ../src/languages.json
-
-Converts the collection of translation files to a single set of messages.
-Example output:
-'''
-{
-  "en": {
-    "action.addBackdrop": "Add Backdrop",
-    "action.addCostume": "Add Costume",
-    "action.recordSound": "Record Sound",
-    "action.addSound": "Add Sound"
-  },
-  "fr": {
-    "action.addSound": "Ajouter Son",
-    "action.addCostume": "Ajouter Costume",
-    "action.addBackdrop": "Ajouter Arrière-plan",
-    "action.recordSound": "Enregistrement du Son"
-  }
-}
-'''
-
-Missing locales are ignored, react-intl will use the default messages for them.
- */
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-
-const locales = ['en', 'es', 'de', 'ar', 'he'];
-const LANG_DIR = './translations/';
-const MSGS_DIR = './locale/';
-
-let messages = locales.reduce((collection, lang) => {
-    let langMessages = {};
-    try {
-        let langData = JSON.parse(
-            fs.readFileSync(path.resolve(LANG_DIR, lang + '.json'), 'utf8')
-        );
-        Object.keys(langData).forEach((id) => {
-            langMessages[id] = langData[id].message;
-        });
-        collection[lang] = langMessages;
-    } catch (e) {
-        process.stdout.write(lang + ' translation file missing, will use defaults.\n');
-    }
-    return collection;
-}, {});
-
-mkdirp.sync(MSGS_DIR);
-fs.writeFileSync(MSGS_DIR + 'messages.json', JSON.stringify(messages, null, 2));

src/components/language-selector/language-selector.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Box from '../box/box.jsx';
-import languages from '../../locale.js';
+import locales from 'scratch-l10n';
 import languageIcon from './language-icon.svg';
 import styles from './language-selector.css';
 
@@ -22,12 +22,12 @@ const LanguageSelector = ({
                 value={currentLocale}
                 onChange={onChange}
             >
-                {Object.keys(languages).map(locale => (
+                {Object.keys(locales).map(locale => (
                     <option
                         key={locale}
                         value={locale}
                     >
-                        {languages[locale].name}
+                        {locales[locale].name}
                     </option>
                 ))}
             </select>

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -44,7 +44,7 @@ const SpriteSelectorItem = props => (
                     <FormattedMessage
                         defaultMessage="duplicate"
                         description="Menu item to duplicate in the right click menu"
-                        id="contextMenu.duplicate"
+                        id="gui.spriteSelectorItem.contextMenuDuplicate"
                     />
                 </MenuItem>
             ) : null}

src/locale.js

@@ -1,35 +0,0 @@
-import localeDataEn from 'react-intl/locale-data/en';
-import localeDataEs from 'react-intl/locale-data/es';
-import localeDataAr from 'react-intl/locale-data/ar';
-import localeDataDe from 'react-intl/locale-data/de';
-import localeDataHe from 'react-intl/locale-data/he';
-
-import messages from '../locale/messages.json'; // eslint-disable-line import/no-unresolved
-
-export default {
-    en: {
-        name: 'English',
-        localeData: localeDataEn,
-        messages: messages.en
-    },
-    es: {
-        name: 'Español',
-        localeData: localeDataEs,
-        messages: messages.es
-    },
-    ar: {
-        name: 'العربية',
-        localeData: localeDataAr,
-        messages: messages.ar
-    },
-    de: {
-        name: 'Deutsch',
-        localeData: localeDataDe,
-        messages: messages.de
-    },
-    he: {
-        name: 'עִבְרִית',
-        localeData: localeDataHe,
-        messages: messages.he
-    }
-};

src/reducers/intl.js

@@ -2,7 +2,7 @@ import {addLocaleData} from 'react-intl';
 import {updateIntl as superUpdateIntl} from 'react-intl-redux';
 import {IntlProvider, intlReducer} from 'react-intl-redux';
 
-import locales from '../locale.js';
+import locales from 'scratch-l10n';
 
 Object.keys(locales).forEach(locale => {
     // TODO: will need to handle locales not in the default intl - see www/custom-locales