From 6b657f3f2bdbfcfa2990e1418e8bde47ee31ec8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 7 Nov 2024 15:26:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E6=9B=B4=E6=96=B0=E5=9B=BD?=
 =?UTF-8?q?=E9=99=85=E5=8C=96=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E6=96=87=E4=BB=B6=E5=92=8C=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=B1=BB=E5=9E=8B=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts                 |  1 -
 src/components/i18nComp/index.vue | 76 +++++++++++++------------------
 src/locales/en.json               |  8 ++--
 src/locales/zh.json               |  8 ++--
 src/main.ts                       | 23 ++++------
 src/types/env.ts                  |  1 +
 vite.config.ts                    | 13 ++++--
 7 files changed, 57 insertions(+), 73 deletions(-)

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 0a049a8..168f61d 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -151,7 +151,6 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useCountdown: typeof import('utils4u/vue-use')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
diff --git a/src/components/i18nComp/index.vue b/src/components/i18nComp/index.vue
index ab1f903..f95c1e2 100644
--- a/src/components/i18nComp/index.vue
+++ b/src/components/i18nComp/index.vue
@@ -1,47 +1,47 @@
-<template>
-  <pre>
-&lt;i18n lang="json"&gt;
+<i18n lang="json">
 {
   "en": {
     "unplugin-hello": "Hello, unplugin-vue-i18n!"
   },
-  "ja": {
-    "unplugin-hello": "こんにちは、unplugin-vue-i18n!"
+  "zh": {
+    "unplugin-hello": "你好，unplugin-vue-i18n！"
   }
 }
-&lt;/i18n&gt;</pre
-  >
-  <br />
-  <button @click="showMessage">show messages</button>
-  <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
-  <p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
-  <p><span class="label">t('message.hello'): Component1 locale messages: </span>: {{ t('message.hello') }}</p>
-  <p>
-    <span class="label">t('message.greeting'): Fallback global locale messages: </span>: {{ t('message.greeting') }}
-  </p>
-  <p><span class="label">$t('unplugin-hello')</span>: {{ $t('unplugin-hello') }}</p>
+</i18n>
 
-  <select v-model="$i18n.locale">
-    <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">{{ lang }}</option>
-  </select>
+<template>
+  <div class="i18nComp">
+    <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
+    <p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
+
+    <p>
+      <span class="label">t('unplugin-hello')</span>: {{ t('unplugin-hello') }}
+      <b>这个定义在i18n lang="json"的</b>
+    </p>
+    <p>
+      <span class="label">t('message.greeting')</span>: {{ t('message.greeting') }}
+      <b>这个在i18n lang="json"没有，会fallback到全局的</b>
+    </p>
+
+    <form>
+      <label for="locale">Change locale:</label>
+      <select id="locale" v-model="$i18n.locale">
+        <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
+      </select>
+    </form>
+  </div>
 </template>
 
-<script lang="ts">
-const messages = {
-  en: { message: { hello: 'hello component1' } },
-  ja: { message: { hello: 'こんにちは、component1' } },
-};
-</script>
-
 <script setup lang="ts">
-const { t } = useI18n({ messages });
-function showMessage() {
-  alert(JSON.stringify(messages, null, 2));
-}
+const { t } = useI18n({
+  inheritLocale: true,
+  useScope: 'local',
+});
 </script>
 
-<style scoped>
-.label {
+<style>
+.i18nComp .label,
+.i18nComp label {
   color: #2c3e50;
   font-weight: bold;
   background-color: #f8f9fa;
@@ -50,15 +50,3 @@ function showMessage() {
   font-family: monospace;
 }
 </style>
-
-https://vue-i18n.intlify.dev/guide/advanced/sfc.html#unplugin-vue-i18n
-<i18n lang="json">
-{
-  "en": {
-    "unplugin-hello": "Hello, unplugin-vue-i18n!"
-  },
-  "ja": {
-    "unplugin-hello": "こんにちは、unplugin-vue-i18n!"
-  }
-}
-</i18n>
diff --git a/src/locales/en.json b/src/locales/en.json
index a54d61d..b9eb8af 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,8 +1,6 @@
 {
-  "welcome": "Welcome",
-  "hello": "Hello, {name}!",
-  "nav": {
-    "home": "Home",
-    "about": "About"
+  "message": {
+    "hello": "hello world",
+    "greeting": "good morning, world!"
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 5f654e1..4a7d900 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1,8 +1,6 @@
 {
-  "welcome": "欢迎",
-  "hello": "你好，{name}！",
-  "nav": {
-    "home": "首页",
-    "about": "关于"
+  "message": {
+    "hello": "你好，世界",
+    "greeting": "早上好，世界！"
   }
 }
diff --git a/src/main.ts b/src/main.ts
index f43dfb9..a9f0bcb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,12 @@ import App from './App.vue';
 import { router } from './router';
 import { createI18n } from 'vue-i18n';
 
+/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages';
+
 async function init() {
   if (import.meta.env.MODE === 'development' || 1 === 1) {
     // TODO: https://github.com/hu3dao/vite-plugin-debug/
@@ -24,6 +30,7 @@ async function init() {
     });
   }
 
+  console.debug(`messages :>> `, messages);
   const app = createApp(App)
     .use(createHead())
     .use(createPinia().use(piniaPluginPersistedstate))
@@ -36,21 +43,7 @@ async function init() {
       createI18n({
         legacy: false, // you must set `false`, to use Composition API
         locale: navigator.language,
-        fallbackLocale: 'en',
-        messages: {
-          en: {
-            message: {
-              hello: 'hello world',
-              greeting: 'good morning, world!',
-            },
-          },
-          ja: {
-            message: {
-              hello: 'こんにちは、世界',
-              greeting: 'おはよう、世界！',
-            },
-          },
-        },
+        messages,
       }),
     );
   app.config.globalProperties.$__DEV__ = $__DEV__;
diff --git a/src/types/env.ts b/src/types/env.ts
index 5b3c02c..08df4f1 100644
--- a/src/types/env.ts
+++ b/src/types/env.ts
@@ -2,3 +2,4 @@
 /// <reference types="unplugin-vue-router/client" />
 /// <reference types="unplugin-vue-macros/macros-global" />
 /// <reference types="unplugin-icons/types/vue" />
+/// <reference types="@intlify/unplugin-vue-i18n/messages" />
diff --git a/vite.config.ts b/vite.config.ts
index 03e23f9..9003e5f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,8 +3,8 @@ import { unheadVueComposablesImports } from '@unhead/vue';
 import { VantResolver } from '@vant/auto-import-resolver';
 import Vue from '@vitejs/plugin-vue';
 import VueJsx from '@vitejs/plugin-vue-jsx';
-import { dirname } from 'node:path';
-import { fileURLToPath, resolve, URL } from 'node:url';
+import path from 'node:path';
+import { fileURLToPath, URL } from 'node:url';
 import UnoCSS from 'unocss/vite';
 import { type ImportsMap } from 'unplugin-auto-import/types';
 import AutoImport from 'unplugin-auto-import/vite';
@@ -145,7 +145,14 @@ function Plugins() {
     VueI18nPlugin({
       /* options */
       // locale messages resource pre-compile option
-      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
+      include: [path.resolve(__dirname, './src/locales/**')],
+
+      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
+      // transformI18nBlock(src) {
+      //   console.debug(`src :>> `, src);
+      //   console.debug(`typeof src :>> `, typeof src);
+      //   return src as string;
+      // },
     }),
   );