feat(message-loader): add a simple plugin for vite (#3511)

.changeset/afraid-cherries-deny.md

@@ -0,0 +1,9 @@
+---
+'@commercetools-frontend/mc-scripts': minor
+---
+
+Adds a `vite` plugin to compile i18n messages when building
+
+When both `ENABLE_EXPERIMENTAL_VITE_BUNDLER` and `ENABLE_I18N_MESSAGE_COMPILATION` are set to `true` on the `process.env`, `vite-plugin-i18n-message-compilation` will transform any file matching `**/i18n/data/*.json` using the `compile` function from `@formatjs/cli-lib` when building.
+
+Previously added `ENABLE_WEBPACK_LOADER_I18N_MESSAGE_COMPILATION` has been renamed to `ENABLE_I18N_MESSAGE_COMPILATION` for consistency.

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

@@ -7,6 +7,7 @@ import { packageLocation as applicationStaticAssetsPath } from '@commercetools-f
 import { generateTemplate } from '@commercetools-frontend/mc-html-template';
 import paths from '../config/paths';
 import pluginDynamicBaseAssetsGlobals from '../vite-plugins/vite-plugin-dynamic-base-assets-globals';
+import pluginI18nMessageCompilation from '../vite-plugins/vite-plugin-i18n-message-compilation';
 import pluginSvgr from '../vite-plugins/vite-plugin-svgr';
 
 async function run() {
@@ -75,6 +76,7 @@ async function run() {
       }),
       pluginSvgr(),
       pluginDynamicBaseAssetsGlobals(),
+      pluginI18nMessageCompilation(),
     ],
   });
 

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

@@ -495,8 +495,7 @@ function createWebpackConfigForProduction(
           exclude: /node_modules/,
           use: [require.resolve('graphql-tag/loader')],
         },
-        process.env.ENABLE_WEBPACK_LOADER_I18N_MESSAGE_COMPILATION ===
-          'true' && {
+        process.env.ENABLE_I18N_MESSAGE_COMPILATION === 'true' && {
           test: /i18n\/data\/.*\.json$/,
           use: [
             require.resolve(

packages/mc-scripts/src/utils/get-i18n-message-format.tsx

@@ -0,0 +1,9 @@
+type TMessageFormat = 'simple' | 'transifex';
+
+function getI18nMessageFormat(source: string): TMessageFormat {
+  const messageContents = JSON.parse(source);
+  const firstValue = Object.values(messageContents)[0];
+  return typeof firstValue === 'string' ? 'simple' : 'transifex';
+}
+
+export default getI18nMessageFormat;

packages/mc-scripts/src/vite-plugins/vite-plugin-i18n-message-compilation.ts

@@ -0,0 +1,22 @@
+import { compile } from '@formatjs/cli-lib';
+import { createFilter } from '@rollup/pluginutils';
+import type { Plugin } from 'vite';
+import getI18nMessageFormat from '../utils/get-i18n-message-format';
+
+function vitePluginI18nMessageCompilation(): Plugin {
+  const filter = createFilter('**/i18n/data/*.json');
+  return {
+    name: 'vite-plugin-i18n-message-compilation',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (process.env.ENABLE_I18N_MESSAGE_COMPILATION && filter(id)) {
+        const format = getI18nMessageFormat(code);
+        const res = await compile([id], { ast: true, format });
+        return { code: res, map: null };
+      }
+      return null;
+    },
+  };
+}
+
+export default vitePluginI18nMessageCompilation;

packages/mc-scripts/src/webpack-loaders/i18n-message-compilation-loader.ts

@@ -1,15 +1,12 @@
 import { compile } from '@formatjs/cli-lib';
 import type { LoaderDefinitionFunction } from 'webpack';
+import getI18nMessageFormat from '../utils/get-i18n-message-format';
 
 const i18nMessageCompilationLoader: LoaderDefinitionFunction = function (
   source
 ) {
   const callback = this.async();
-
-  const messageContents = JSON.parse(source);
-  const firstValue = Object.values(messageContents)[0];
-  const format = typeof firstValue === 'string' ? 'simple' : 'transifex';
-
+  const format = getI18nMessageFormat(source);
   compile([this.resourcePath], { ast: true, format }).then((result) => {
     callback(null, result);
   });