diff --git a/.gitignore b/.gitignore index 4acc7960..4f5273ee 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ coverage dist node_modules +temp +src/i18n/transifex_input.json diff --git a/.tx/config b/.tx/config new file mode 100644 index 00000000..6f59e7d7 --- /dev/null +++ b/.tx/config @@ -0,0 +1,8 @@ +[main] +host = https://www.transifex.com + +[edx-platform.frontend-component-header-edx] +file_filter = src/i18n/messages/.json +source_file = src/i18n/transifex_input.json +source_lang = en +type = KEYVALUEJSON diff --git a/Makefile b/Makefile index be195c45..ce6f52a5 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,15 @@ +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 @@ -5,3 +17,42 @@ build: @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 diff --git a/README.rst b/README.rst index 304c9359..03fd2e7b 100644 --- a/README.rst +++ b/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 ---- diff --git a/babel.config.js b/babel.config.js index 91729008..89cf18af 100644 --- a/babel.config.js +++ b/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', diff --git a/package-lock.json b/package-lock.json index ece5b3af..02c5b753 100644 --- a/package-lock.json +++ b/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, @@ -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", diff --git a/package.json b/package.json index dd40b4be..4b1b431f 100644 --- a/package.json +++ b/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", diff --git a/src/i18n/index.js b/src/i18n/index.js new file mode 100644 index 00000000..b9352f55 --- /dev/null +++ b/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; diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json new file mode 100644 index 00000000..2c63c085 --- /dev/null +++ b/src/i18n/messages/ar.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json new file mode 100644 index 00000000..2c63c085 --- /dev/null +++ b/src/i18n/messages/es_419.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json new file mode 100644 index 00000000..2c63c085 --- /dev/null +++ b/src/i18n/messages/fr.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/ko_KR.json b/src/i18n/messages/ko_KR.json new file mode 100644 index 00000000..2c63c085 --- /dev/null +++ b/src/i18n/messages/ko_KR.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/pt_BR.json b/src/i18n/messages/pt_BR.json new file mode 100644 index 00000000..2c63c085 --- /dev/null +++ b/src/i18n/messages/pt_BR.json @@ -0,0 +1,2 @@ +{ +} diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json new file mode 100644 index 00000000..2c63c085 --- /dev/null +++ b/src/i18n/messages/zh_CN.json @@ -0,0 +1,2 @@ +{ +}