Merge pull request #2 from edx/abutterworth/fix-i18n-messages-export

fix: export i18n messages properly

.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]
+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
+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.
+	@# --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/**/*.test.jsx
-	rm -rf dist/**/__snapshots__
+	@rm -rf dist/**/__snapshots__
-	rm -rf dist/__mocks__
+	@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,7 +3,9 @@ frontend-component-header
 
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
-This repository is a work in progress.  Nothing found here is at all production-ready.
+This is the standard Open 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 } }``
 
 .. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-header.svg?branch=master-edx
    :target: https://travis-ci.org/edx/frontend-component-header

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',

openedx.yaml

@@ -0,0 +1,8 @@
+# openedx.yaml
+
+---
+owner: edx/fedx-team
+tags:
+  - library
+  - component
+  - react

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@edx/frontend-component-header",
+  "name": "@edx/frontend-component-header-edx",
   "version": "1.0.0-semantically-released",
   "lockfileVersion": 1,
   "requires": true,
@@ -1460,9 +1460,9 @@
       }
     },
     "@edx/frontend-base": {
-      "version": "1.1.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.1.tgz",
-      "integrity": "sha512-V46BKNltEKe20bbFBU79uwVSwk914LZXvoOHQx/vJORok/+37ysq3etIP52dxku/3c942sA6ZXmMskE0POP8pQ==",
+      "integrity": "sha512-YWbjaygt16oG9KJuIukl7FC8P46Brhje/nV+zH6+d/WbQTdp8IKtuBnrgXoypvR2unJiaFUsHcaESp9gFdOE/w==",
       "dev": true,
       "requires": {
         "history": "4.9.0",
@@ -3105,6 +3105,27 @@
         "@types/babel__traverse": "^7.0.6"
       }
     },
+    "babel-plugin-react-intl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-4.1.18.tgz",
+      "integrity": "sha512-Vg83Y8zv8DWyOsO6bmLNs94ulZzxsJ5uWKvSEc6EvrBihcnUpVRSYSiWEra0kAGxZjIYXO0a7G3/JmimQapguw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.4.5",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@types/babel__core": "^7.1.2",
+        "fs-extra": "^8.0.1",
+        "intl-messageformat-parser": "^3.1.1"
+      },
+      "dependencies": {
+        "intl-messageformat-parser": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.1.1.tgz",
+          "integrity": "sha512-rp28ut8Xj/R0IN3wcvJqtVTKWDNaBk9Z5R+D/mSB7rpycc1jsE3vn5ShZa//zN7NpYXF3rkl8A6mZVhWNlMUJA==",
+          "dev": true
+        }
+      }
+    },
     "babel-preset-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -15099,6 +15120,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactifex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/reactifex/-/reactifex-1.1.1.tgz",
+      "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==",
+      "dev": true
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -8,6 +8,7 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "make build",
+    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
     "lint": "eslint --ext .js --ext .jsx .",
     "semantic-release": "semantic-release",
     "start": "parcel ./example/index.html --no-source-maps --out-dir example/dist",
@@ -36,11 +37,12 @@
     "@babel/preset-react": "^7.0.0",
     "@edx/frontend-analytics": "^2.0.0",
     "@edx/frontend-auth": "^6.0.1",
-    "@edx/frontend-base": "^1.1.0",
+    "@edx/frontend-base": "^1.1.1",
     "@edx/frontend-i18n": "^3.0.2",
     "@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",
@@ -53,13 +55,15 @@
     "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",
     "semantic-release": "^15.13.24"
   },
   "peerDependencies": {
-    "@edx/frontend-base": "^1.1.0",
+    "@edx/frontend-analytics": "^2.0.0",
+    "@edx/frontend-base": "^1.1.1",
     "@edx/frontend-i18n": "^3.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.9.0"

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 @@
+{
+}

src/index.jsx

@@ -1,5 +1,5 @@
 import SiteHeader from './SiteHeader';
-import messages from './SiteHeader.messages';
+import messages from './i18n/index';
 
 export { messages };