feat!: babel-plugin-react-intl to babel-plugin-formatjs migration

README.rst

@@ -26,7 +26,7 @@ documentation to learn what options are available. Example package.json::
   {
      "scripts": {
         "build": "fedx-scripts webpack",
-        "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+        "i18n_extract": "fedx-scripts formatjs extract",
         "lint": "fedx-scripts eslint --ext .jsx,.js .",
         "precommit": "npm run lint",
         "snapshot": "fedx-scripts jest --updateSnapshot",

bin/fedx-scripts.js

@@ -68,6 +68,18 @@ switch (commandName) {
     ensureConfigOption(presets.webpackDevServer);
     require('webpack-dev-server/bin/webpack-dev-server');
     break;
+  case 'formatjs': {
+    const commonArgs = [
+      '--format', 'node_modules/@edx/frontend-build/lib/formatter.js',
+      '--ignore', 'src/**/*.json',
+      '--out-file', './temp/babel-plugin-formatjs/Default.messages.json',
+      '--', 'src/**/*.js*',
+    ];
+    process.argv = process.argv.concat(commonArgs);
+    ensureConfigOption(presets.formatjs);
+    require('@formatjs/cli/bin/formatjs');
+    break;
+  }
   case 'serve':
     require('../lib/scripts/serve');
     break;

config/babel-preserve-modules.config.js

@@ -17,11 +17,7 @@ module.exports = {
     i18n: {
       plugins: [
         [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-platform/i18n',
-          },
+          'formatjs',
         ],
       ],
     },

config/babel.config.js

@@ -33,11 +33,7 @@ module.exports = {
     i18n: {
       plugins: [
         [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-platform/i18n',
-          },
+          'formatjs',
         ],
       ],
     },

lib/formatter.js

@@ -0,0 +1,10 @@
+exports.format = (messages) => {
+  const results = Object.entries(messages).map(([id, message]) => (
+    {
+      id,
+      defaultMessage: message.defaultMessage,
+      description: message.description,
+    }
+  ));
+  return results;
+};

lib/presets.js

@@ -8,6 +8,12 @@ const babel = new ConfigPreset({
   searchFilepaths,
 });
 
+const formatjs = new ConfigPreset({
+  defaultFilename: 'babel.config.js',
+  searchFilenames: ['.babelrc', '.babelrc.js', 'babel.config.js'],
+  searchFilepaths,
+});
+
 const babelPreserveModules = new ConfigPreset({
   defaultFilename: 'babel-preserve-modules.config.js',
   searchFilenames: ['.babelrc', '.babelrc.js', 'babel.config.js'],
@@ -52,6 +58,7 @@ const webpack = new ConfigPreset({
 
 module.exports = {
   babel,
+  formatjs,
   babelPreserveModules,
   'babel-preserve-modules': babelPreserveModules,
   'babel-typescript': babelTypescript,