chore: Use @formatjs/cli instead of babel-plugin-react-intl (#9695)

Co-authored-by: Florian Imdahl <[email protected]>

.github/workflows/download_translations.yml → .github/workflows/sync_translations.yml

@@ -1,4 +1,4 @@
-name: Download translations
+name: Sync translations
 
 on:
   push:
@@ -7,7 +7,7 @@ on:
     - cron: '0 8 * * *'
 
 jobs:
-  download_translations:
+  sync_translations:
     runs-on: ubuntu-latest
 
     steps:

babel.config.js

@@ -30,12 +30,6 @@ module.exports = {
     '@babel/plugin-proposal-nullish-coalescing-operator',
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import',
-    [
-      'babel-plugin-react-intl',
-      {
-        messagesDir: './temp/i18n',
-      },
-    ],
   ],
   presets: [
     '@babel/preset-react',

bin/translations_extract_formatter.js

@@ -0,0 +1,30 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+const webappTranslations = require('../src/i18n/en-US.json');
+
+exports.format = function (messages) {
+  return Object.entries(messages).reduce(
+    (accumulator, [key, value]) => ({
+      ...accumulator,
+      [key]: value.defaultMessage,
+    }),
+    {...webappTranslations},
+  );
+};

crowdin.yaml

@@ -2,7 +2,6 @@ project_id: 342359
 base_path: .
 
 files:
-  -
-    source: 'src/i18n/en-US.json'
-    translation: '%locale%.json'
+  - source: '/src/i18n/en-US.json'
+    translation: '/src/i18n/%locale%.json'
     update_option: 'update_as_unapproved'

package.json

@@ -58,6 +58,7 @@
     "@babel/preset-react": "7.10.4",
     "@babel/preset-typescript": "7.10.4",
     "@emotion/babel-preset-css-prop": "10.0.27",
+    "@formatjs/cli": "2.11.3",
     "@hot-loader/react-dom": "16.13.0",
     "@types/adm-zip": "0.4.33",
     "@types/dexie-batch": "0.4.1",
@@ -95,7 +96,6 @@
     "autoprefixer": "9.8.6",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
-    "babel-plugin-react-intl": "7.9.4",
     "concurrently": "5.3.0",
     "cross-env": "7.0.2",
     "cspell": "4.1.0",
@@ -229,7 +229,7 @@
     "test:server": "cd server && yarn test",
     "test:types": "tsc --noEmit && cd server && tsc --noEmit",
     "translate:extract": "i18next-scanner 'src/{page,script}/**/*.{js,html,htm}'",
-    "translate:merge": "yarn bundle:prod && ts-node ./bin/translations_normalize.ts",
+    "translate:merge": "formatjs extract --format './bin/translations_extract_formatter.js' --out-file './src/i18n/en-US.json' './src/script/strings.ts'",
     "translate:upload": "yarn translate:merge && ts-node ./bin/translations_upload.ts",
     "translate:download": "ts-node ./bin/translations_download.ts"
   },

src/i18n/en-US.json

@@ -136,7 +136,7 @@
   "authVerifyAccountHeadline": "Add email address and password.",
   "authVerifyAccountLogout": "Log out",
   "authVerifyCodeChangePhone": "Change phone number",
-  "authVerifyCodeDescription": "Enter the verification code\nwe sent to {number}.",
+  "authVerifyCodeDescription": "Enter the verification code we sent to {number}.",
   "authVerifyCodeResend": "No code showing up?",
   "authVerifyCodeResendDetail": "Resend",
   "authVerifyCodeResendTimer": "You can request a new code {{expiration}}.",

src/script/strings.ts

@@ -743,7 +743,7 @@ export const phoneLoginStrings = defineMessages({
     id: 'authVerifyCodeChangePhone',
   },
   verifyCodeDescription: {
-    defaultMessage: 'Enter the verification code\nwe sent to {number}.',
+    defaultMessage: 'Enter the verification code we sent to {number}.',
     id: 'authVerifyCodeDescription',
   },
   verifyCodeResend: {