feat: add babel-plugin-formatjs to babel-preset-mc-app

.changeset/purple-rice-bow.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/babel-preset-mc-app': minor
+'@commercetools-frontend/mc-scripts': minor
+---
+
+Add `babel-plugin-formatjs` to avoid bloating bundles with useless data from `formatjs` messages (`description`, `defaultMessage` props)

packages/babel-preset-mc-app/create.js

@@ -22,6 +22,12 @@ const defaultOptions = {
   // it explicitely. This will disable `core-js` for `preset-env` and the
   // `plugin-transform-runtime`.
   disableCoreJs: false,
+  // If `formatjs` should pre-parse defaultMessage into AST.
+  // https://formatjs.github.io/docs/tooling/babel-plugin/#ast
+  i18nAst: false,
+  // If `formatjs` default messages should be removed from the bundle or not.
+  // https://formatjs.github.io/docs/tooling/babel-plugin#removedefaultmessage
+  i18nRemoveDefaultMessage: false,
 };
 
 /* eslint-disable global-require */
@@ -189,6 +195,13 @@ module.exports = function createBabePresetConfigForMcApp(api, opts = {}, env) {
         require('@emotion/babel-plugin').default,
       // Cherry-pick Lodash modules
       require('babel-plugin-lodash').default,
+      [
+        require('babel-plugin-formatjs').default,
+        {
+          ast: options.i18nAst,
+          removeDefaultMessage: options.i18nRemoveDefaultMessage,
+        },
+      ],
     ].filter(Boolean),
   };
 };

packages/babel-preset-mc-app/package.json

@@ -37,6 +37,7 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "babel-plugin-dev-expression": "^0.2.3",
+    "babel-plugin-formatjs": "^10.5.25",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-preval": "^5.1.0",

packages/babel-preset-mc-app/production.spec.js

@@ -0,0 +1,94 @@
+import { transformSync } from '@babel/core';
+import getBabePresetConfigForMcAppForProduction from './production';
+
+describe('babel-plugin-formatjs', () => {
+  const code = `
+    import { defineMessages } from 'react-intl';
+
+    const messages = defineMessages({
+      welcome: {
+        id: 'app.welcome',
+        defaultMessage: 'Welcome, {name}!',
+        description: 'Message to greet the user by name',
+      },
+    });
+  `;
+
+  it('should remove description by default', () => {
+    const config = getBabePresetConfigForMcAppForProduction(null);
+
+    const result = transformSync(code, {
+      filename: 'dummy-file-name.js',
+      presets: config.presets,
+      plugins: config.plugins,
+    });
+
+    expect(result.code).toMatchInlineSnapshot(`
+      ""use strict";
+
+      var _reactIntl = require("react-intl");
+      const messages = (0, _reactIntl.defineMessages)({
+        welcome: {
+          id: "app.welcome",
+          defaultMessage: "Welcome, {name}!"
+        }
+      });"
+    `);
+  });
+
+  it('should remove defaultMessage when i18nRemoveDefaultMessage is true', () => {
+    const config = getBabePresetConfigForMcAppForProduction(null, {
+      i18nRemoveDefaultMessage: true,
+    });
+
+    const result = transformSync(code, {
+      filename: 'dummy-file-name.js',
+      presets: config.presets,
+      plugins: config.plugins,
+    });
+
+    expect(result.code).toMatchInlineSnapshot(`
+      ""use strict";
+
+      var _reactIntl = require("react-intl");
+      const messages = (0, _reactIntl.defineMessages)({
+        welcome: {
+          id: "app.welcome"
+        }
+      });"
+    `);
+  });
+
+  it('should parse defaultMessage into AST when i18nAst is true', () => {
+    const config = getBabePresetConfigForMcAppForProduction(null, {
+      i18nAst: true,
+    });
+
+    const result = transformSync(code, {
+      filename: 'dummy-file-name.js',
+      presets: config.presets,
+      plugins: config.plugins,
+    });
+
+    expect(result.code).toMatchInlineSnapshot(`
+      ""use strict";
+
+      var _reactIntl = require("react-intl");
+      const messages = (0, _reactIntl.defineMessages)({
+        welcome: {
+          id: "app.welcome",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Welcome, "
+          }, {
+            "type": 1,
+            "value": "name"
+          }, {
+            "type": 0,
+            "value": "!"
+          }]
+        }
+      });"
+    `);
+  });
+});

packages/mc-scripts/src/commands/build-vite.ts

@@ -82,6 +82,19 @@ async function run() {
           plugins: [
             '@emotion/babel-plugin',
             '@babel/plugin-proposal-do-expressions',
+            [
+              'babel-plugin-formatjs',
+              {
+                removeDefaultMessage:
+                  // Remove default `formatjs` messages from bundles.
+                  // TODO: make it a CLI option when Vite support becomes stable.
+                  process.env.ENABLE_I18N_REMOVE_DEFAULT_MESSAGE === 'true',
+                ast:
+                  // Enable pre-parse default `formatjs` messages into AST.
+                  // TODO: make it a CLI option when Vite support becomes stable.
+                  process.env.ENABLE_I18N_AST === 'true',
+              },
+            ],
           ],
         },
       }),

packages/mc-scripts/src/config/create-webpack-config-for-production.ts

@@ -40,6 +40,10 @@ const defaultToggleFlags: TWebpackConfigToggleFlagsForProduction = {
   // it explicitely. This will disable `core-js` for `preset-env` and the
   // `plugin-transform-runtime`.
   disableCoreJs: false,
+  // Pre-parse default `formatjs` messages into AST
+  i18nAst: false,
+  // Remove default `formatjs` messages from bundles.
+  i18nRemoveDefaultMessage: false,
 };
 const defaultOptions: TWebpackConfigOptions<'production'> = {
   entryPoint: paths.entryPoint,
@@ -255,6 +259,9 @@ function createWebpackConfigForProduction(
                     {
                       runtime: hasJsxRuntime() ? 'automatic' : 'classic',
                       disableCoreJs: mergedOptions.toggleFlags.disableCoreJs,
+                      i18nAst: mergedOptions.toggleFlags.i18nAst,
+                      i18nRemoveDefaultMessage:
+                        mergedOptions.toggleFlags.i18nRemoveDefaultMessage,
                     },
                   ],
                 ],

packages/mc-scripts/src/types.ts

@@ -59,6 +59,14 @@ export type TWebpackConfigToggleFlagsForDevelopment = {
    * `plugin-transform-runtime`.
    */
   disableCoreJs?: boolean;
+  /**
+   * Pre-parse default `formatjs` messages into AST
+   */
+  i18nAst?: boolean;
+  /**
+   * Remove default `formatjs` messages from bundles.
+   */
+  i18nRemoveDefaultMessage?: boolean;
 };
 
 export type TWebpackConfigToggleFlagsForProduction =