🪟 🔧 Compile i18n messages at build time (#6481)

airbyte-webapp/package.json

@@ -112,6 +112,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
+    "@formatjs/icu-messageformat-parser": "^2.4.0",
     "@modyfi/vite-plugin-yaml": "^1.0.4",
     "@storybook/addon-actions": "^7.0.2",
     "@storybook/addon-docs": "^7.0.2",

airbyte-webapp/packages/vite-plugins/compile-formatjs-msgs.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from "vite";
+
+import { parse } from "@formatjs/icu-messageformat-parser";
+
+export function compileFormatJsMessages(): Plugin {
+  return {
+    name: "airbyte/compile-formatjs-messages",
+    transform(code: string, id: string) {
+      // Transform all JSON files under /locales/
+      if (/\/locales\/.+\.json$/.test(id)) {
+        if (!code.startsWith("export default {") || !code.endsWith("};\n")) {
+          throw new Error(`Tried to compile JSON locale file, but got an unexpected format. (${id})`);
+        }
+        // Remove JS export, to extract raw JSON from that file
+        const rawJson = code.replace(/^export default {/, "{").replace(/\};\n$/, "}");
+        const messages = JSON.parse(rawJson);
+        // Parse every message using the formatjs utils into an AST
+        const compiledMsgs = Object.fromEntries(
+          Object.entries(messages).map(([key, i18nmsg]) => [key, parse(i18nmsg as string)])
+        );
+        return `export default ${JSON.stringify(compiledMsgs)};`;
+      }
+    },
+  };
+}

airbyte-webapp/packages/vite-plugins/index.ts

@@ -1,2 +1,5 @@
 export { docMiddleware } from "./doc-middleware";
 export { buildInfo } from "./build-info";
+export { environmentVariables } from "./environment-variables";
+export { experimentOverwrites } from "./experiment-overwrites";
+export { compileFormatJsMessages } from "./compile-formatjs-msgs";