feat: add i18n pipeline tools (#3)

* feat: add i18n pipeline tools

* refactor: lint config file

* fix: export translated messages from package

* fix: properly name korean i18n file

* Update README.rst

.gitignore

@@ -3,3 +3,5 @@
 coverage
 dist
 node_modules
+temp
+src/i18n/transifex_input.json

.tx/config

@@ -0,0 +1,8 @@
+[main]
+host = https://www.transifex.com
+
+[edx-platform.frontend-component-header-edx]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type = KEYVALUEJSON

Makefile

@@ -1,7 +1,58 @@
+transifex_resource = frontend-component-header-edx
+transifex_langs = "ar,fr,es_419,zh_CN"
+
+transifex_utils = ./node_modules/.bin/transifex-utils.js
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
+
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
 build:
 	rm -rf ./dist
 	./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	@rm -rf dist/**/*.test.jsx
 	@rm -rf dist/**/__snapshots__
 	@rm -rf dist/__mocks__
+
+requirements:
+	npm install
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
+	npm run-script i18n_extract
+
+i18n.concat:
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
+
+extract_translations: | requirements i18n.extract i18n.concat
+
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)
+
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --language=$(transifex_langs)
+
+# This target is used by Travis.
+validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
+	git diff --exit-code package-lock.json

README.rst

@@ -3,9 +3,9 @@ frontend-component-header-edx
 
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
-This is the standard edX header for use in React applications.
-It default exports the `SiteHeader` and named exports messages
-for translations.
+This is the standard edX header for use in React applications. It has two exports:
+  - **default**: The Header Component
+  - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
 
 TODO
 ----

babel.config.js

@@ -13,6 +13,17 @@ module.exports = {
     '@babel/plugin-proposal-class-properties',
   ],
   env: {
+    i18n: {
+      plugins: [
+        [
+          'react-intl',
+          {
+            messagesDir: './temp/babel-plugin-react-intl',
+            moduleSourceName: '@edx/frontend-i18n',
+          },
+        ],
+      ],
+    },
     test: {
       presets: [
         '@babel/preset-env',

package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "build": "make build",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
     "lint": "eslint --ext .js --ext .jsx .",
     "precommit": "npm run lint",
     "semantic-release": "semantic-release",
@@ -43,6 +44,7 @@
     "@edx/frontend-logging": "^3.0.1",
     "@edx/paragon": "^7.1.2",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-react-intl": "^4.1.18",
     "dotenv": "^8.1.0",
     "enzyme": "^3.10.0",
     "eslint": "^6.3.0",
@@ -55,6 +57,7 @@
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.0.1",
     "react-test-renderer": "^16.9.0",
+    "reactifex": "^1.1.1",
     "redux": "^4.0.4",
     "redux-saga": "^1.0.5",
     "sass": "^1.22.12",

src/i18n/index.js

@@ -0,0 +1,18 @@
+import arMessages from './messages/ar.json';
+// no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import kokrMessages from './messages/ko_KR.json';
+import ptbrMessages from './messages/pt_BR.json';
+import zhcnMessages from './messages/zh_CN.json';
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  'ko-kr': kokrMessages,
+  'pt-br': ptbrMessages,
+};
+
+export default messages;

src/i18n/messages/ar.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/es_419.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/fr.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/ko_KR.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/pt_BR.json

@@ -0,0 +1,2 @@
+{
+}

src/i18n/messages/zh_CN.json

@@ -0,0 +1,2 @@
+{
+}