feat: add locales JSON transformation plugin to Vite configuration

- Introduced a new plugin for transforming JSON files in the locales directory, enhancing internationalization support.
- Updated the Vite configuration to include the new localesJsonPlugin, streamlining the handling of localization files.

Signed-off-by: Innei <tukon479@gmail.com>

apps/web/vite.config.ts

@@ -15,6 +15,7 @@ import PKG from '../../package.json'
 import { ogImagePlugin } from '../../plugins/og-image-plugin'
 import { createDependencyChunksPlugin } from '../../plugins/vite/deps'
 import { createFeedSitemapPlugin } from '../../plugins/vite/feed-sitemap'
+import { localesJsonPlugin } from '../../plugins/vite/locales-json'
 import { siteConfig } from '../../site.config'
 
 if (process.env.CI) {
@@ -51,6 +52,7 @@ export default defineConfig({
       ['react', 'react-dom'],
       ['i18next', 'i18next-browser-languagedetector', 'react-i18next'],
     ]),
+    localesJsonPlugin(),
     tailwindcss(),
     ogImagePlugin({
       title: siteConfig.title,

plugins/vite/locales-json.ts

@@ -0,0 +1,35 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { set } from 'es-toolkit/compat'
+import type { Plugin } from 'vite'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const localesDir = path.resolve(__dirname, '../../locales')
+
+export function localesJsonPlugin(): Plugin {
+  return {
+    name: 'locales-json-transform',
+    enforce: 'pre',
+
+    async transform(code, id) {
+      if (!id.includes(localesDir) || !id.endsWith('.json')) {
+        return null
+      }
+
+      const content = JSON.parse(code)
+      const obj = {}
+
+      const keys = Object.keys(content as object)
+      for (const accessorKey of keys) {
+        set(obj, accessorKey, (content as any)[accessorKey])
+      }
+
+      console.info('[locales-json-transform] Transformed:', id)
+      return {
+        code: JSON.stringify(obj),
+        map: null,
+      }
+    },
+  }
+}