Add localization tooling and clean up existing locales

Author: robertlong

.gitignore

@@ -65,3 +65,5 @@ dist/
 certs/
 results/
 .ret.credentials
+src/assets/locales/en.json
+src/assets/locales/extracted-messages.json

package-lock.json

@@ -36,7 +36,8 @@
     "spritesheet:system-notice": "spritesheet-js -f json -p src/assets/images/spritesheets/ --padding 8 --divisibleByTwo -n sprite-system-notice-spritesheet --powerOfTwo src/assets/images/sprites/notice/*",
     "storybook": "start-storybook -p 6006",
     "deploy-storybook": "storybook-to-ghpages",
-    "extract": "formatjs extract src/**/*.js --throws --extract-source-location --extract-from-format-message-call"
+    "intl-extract": "node ./src/assets/locales/intl-extract.js",
+    "intl-extract-en-locale": "node ./src/assets/locales/intl-extract.js en"
   },
   "scripts-info": {
     "start": "Run the client against your Hubs Cloud instance, or Mozilla's developer infrastructure,\n  using application configs pulled from the server",
@@ -176,6 +177,7 @@
     "esm": "^3.2.5",
     "fast-plural-rules": "0.0.3",
     "file-loader": "^1.1.10",
+    "glob": "^7.1.6",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^4.2.0",
     "htmlhint": "^0.11.0",

package.json

@@ -1,5 +1,21 @@
 # Localization
 
+The Hubs redesign has a lot of new text and we need help from people like you to translate it. Follow the steps below to get started.
+
+## CLI Tools
+
+### `npm run intl-extract`
+
+This script extracts all existing messages in the Hubs codebase to a temporary file, `extracted-messages.json`. This file includes the message id, default message, and where the translation is used in the codebase.
+
+### `npm run intl-extract-en-locale`
+
+This script extracts all existing messages in the Hubs codebase to a temporary file `en.json`. It does not contain any metadata, just the id and English translation. It can be used as a template for other locales.
+
+### Coming Soon
+
+Our goal is to integrate with [Mozilla Pontoon](https://pontoon.mozilla.org) in the near future.
+
 ## Adding Locales
 
 1. Add an entry to `AVAILABLE_LOCALES` in [locale_config.js](locale_config.js) with the appropriate locale code and in-language translation of the language.
@@ -8,9 +24,7 @@
 3. Edit your new locale file with your translations.
 
 ## Adding to existing Locales
-
-1. Add your new message to the Hubs client. Be sure to follow the best practices guide below. The default message should be in English. You do not need to add an additional message to the en.json file.
-2. Update the other locale files with correct translations if available.
+Add your new message to the Hubs client in the appropriate json file in this directory. Be sure to follow the best practices guide below. The default message should be in English.
 
 ## Best Practices
 The best practices for localization are the following:

src/assets/locales/README.md

@@ -0,0 +1,66 @@
+const path = require("path");
+const { extract } = require("@formatjs/cli");
+const glob = require("glob");
+const promisify = require("util").promisify;
+const asyncGlob = promisify(glob);
+const fs = require("fs");
+const asyncWriteFile = promisify(fs.writeFile);
+
+async function main(argv) {
+  const command = argv[2];
+  const basePath = path.resolve(__dirname, "..", "..", "..");
+  const files = await asyncGlob("../../../src/**/*.js", { cwd: __dirname, absolute: true });
+
+  if (command === "en") {
+    const outPath = path.join(__dirname, "en.json");
+
+    const extractedMessages = await extract(files, {
+      extractSourceLocation: false,
+      extractFromFormatMessageCall: true,
+      removeDefaultMessage: false,
+      format: {
+        format: msgs => {
+          for (const id in msgs) {
+            msgs[id] = msgs[id].defaultMessage;
+          }
+          return msgs;
+        }
+      }
+    });
+
+    await asyncWriteFile(outPath, extractedMessages);
+
+    console.log(`Wrote file to ${outPath}`);
+  } else {
+    const outPath = path.join(__dirname, "extracted-messages.json");
+
+    const extractedMessages = await extract(files, {
+      extractSourceLocation: true,
+      extractFromFormatMessageCall: true,
+      removeDefaultMessage: false,
+      format: {
+        format: msgs => {
+          for (const id in msgs) {
+            const msg = msgs[id];
+            msg.file = path.relative(basePath, msg.file);
+          }
+
+          return msgs;
+        }
+      }
+    });
+
+    await asyncWriteFile(outPath, extractedMessages);
+
+    console.log(`Wrote file to ${outPath}`);
+  }
+}
+
+main(process.argv)
+  .then(() => {
+    process.exit(0);
+  })
+  .catch(error => {
+    console.error(error);
+    process.exit(1);
+  });