feat: add packages/locales/@local/locales

Currently contains a hacky workaround, waiting for privatenumber/tsx#181

README.md

@@ -33,8 +33,9 @@ So if you use SSR, you could use the official [Nuxt Kinde](https://nuxt.com/modu
     - If the `frontend` and `backend` are on different domains then the backend will be called directly without proxy.
     - This could be configured in frontend's [`app.config.ts`](./apps/frontend/app/app.config.ts)
 - [`backend`](./apps/backend/README.md): a [Hono🔥](https://hono.dev/) app.
-- `@local/common`: a shared library that can contain constants, functions, types shared across all apps.
-- `@local/common-vue`: a shared library that can contain components, constants, functions, types shared across vue-based apps.
+- [`@local/locales`](./packages/locales/README.md): a shared locales/i18n library powered by [unplugin-sheet-i18n](https://github.com/NamesMT/unplugin-sheet-i18n).
+- `@local/common`: a shared library that can contain constants, functions, types.
+- `@local/common-vue`: a shared library that can contain components, constants, functions, types for vue-based apps.
 - `tsconfig`: `tsconfig.json`s used throughout the monorepo.
 
 Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

apps/frontend/i18n.config.ts

@@ -1,20 +1,14 @@
+import en from '@local/locales/en.json'
+import vi from '@local/locales/vi.json'
+
 export default defineI18nConfig(() => ({
   legacy: false,
   fallbackWarn: false,
   fallbackLocale: 'en',
   locale: 'en',
   messages: {
-    en: {
-      'layouts.title': `starter-fullstack {'|'} {title}`,
-      'pages.title.home': `Home`,
-      'language': 'Language',
-      'welcome': `Welcome`,
-    },
-    vi: {
-      'pages.title.home': `Trang chủ`,
-      'language': 'Ngôn ngữ',
-      'welcome': `Xin chào`,
-    },
+    en,
+    vi,
   },
   flatJson: true,
 }))

packages/locales/README.md

@@ -0,0 +1,5 @@
+# @local/locales
+
+Refer to [unplugin-sheet-i18n](https://github.com/NamesMT/unplugin-sheet-i18n) for more information.
+
+Basically, a power-packed plugin to process i18n [spread]sheets into anything :D.

packages/locales/index.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'unplugin-sheet-i18n'
+
+// Hacky workaround to reload i18n.csv when it changes, waiting for https://github.com/privatenumber/tsx/issues/181
+// @ts-expect-error it'll throw, but it's ok, we just want to hint tsx to relaod upon i18n.csv change
+import('./src/i18n.csv').catch(() => null)
+
+createContext({
+  outDir: 'dist',
+}).scanConvert()

packages/locales/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@local/locales",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {
+    "./*": {
+      "import": "./dist/*"
+    }
+  },
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "scripts": {
+    "lint": "eslint .",
+    "dev": "tsx watch index.ts",
+    "postinstall": "tsx index.ts"
+  },
+  "devDependencies": {
+    "@local/tsconfig": "workspace:*",
+    "unplugin-sheet-i18n": "^0.4.8"
+  }
+}

packages/locales/src/i18n.csv

@@ -0,0 +1,5 @@
+KEY,Description,en,vi
+layouts.title,,starter-fullstack {'|'} {title},
+pages.title.home,,Home,Trang chủ
+language,,Language,Ngôn ngữ
+welcome,,Welcome,Xin chào

packages/locales/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@local/tsconfig/base.json",
+  "include": ["."],
+  "exclude": ["dist", "node_modules"]
+}