@commercetools-frontend/babel-preset-mc-app 22.37.0 → 22.38.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @commercetools-frontend/babel-preset-mc-app
 
+## 22.38.0
+
+### Minor Changes
+
+- [#3672](https://github.com/commercetools/merchant-center-application-kit/pull/3672) [`5c33a40`](https://github.com/commercetools/merchant-center-application-kit/commit/5c33a40910d1f46d3d28080f666150fe1d002757) Thanks [@ragafus](https://github.com/ragafus)! - Add `babel-plugin-formatjs` to avoid bloating bundles with useless data from `formatjs` messages (`description`, `defaultMessage` props). Opt-in flags:
+
+  - i18nAst: pre-parse defaultMessage into AST for faster runtime perf
+  - i18nRemoveDefaultMessage: remove defaultMessage field in generated js after extraction
+
 ## 22.37.0
 
 ## 22.36.0

package/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),
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/babel-preset-mc-app",
-  "version": "22.37.0",
+  "version": "22.38.0",
   "description": "Babel preset used by a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -42,6 +42,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",

package/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": "!"
+          }]
+        }
+      });"
+    `);
+  });
+});