@varlet/cli 2.22.3 → 3.0.0-alpha.1707916363117

package/template/generators/config/i18n/sfc/src/locale/index.ts

@@ -2,64 +2,74 @@ import { ref } from 'vue'
 import type { Ref } from 'vue'
 import zhCN from './zh-CN'
 
-export type Pack = {
+export type Message = {
   // Button component
   button: string
 
   // internal
   lang?: string
+  [key: PropertyKey]: any
 }
 
-function useLocale<T = Pack>() {
-  const packs: Record<string, Partial<T>> = {}
-  const pack: Ref<Partial<T>> = ref({})
+function useLocale<T = Message>() {
+  const messages: Record<string, Partial<T>> = {}
+  const currentMessage: Ref<Partial<T>> = ref({})
 
-  const add = (lang: string, pack: Partial<T> & { lang?: string }) => {
-    pack.lang = lang
-    packs[lang] = pack
+  const add = (lang: string, message: Partial<T> & { lang?: string }) => {
+    message.lang = lang
+    messages[lang] = message
   }
 
   const use = (lang: string) => {
-    if (!packs[lang]) {
-      console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
+    if (!messages[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`)
       return {}
     }
 
-    pack.value = packs[lang]
+    currentMessage.value = messages[lang]
   }
 
-  const merge = (lang: string, pack: Partial<T>) => {
-    if (!packs[lang]) {
-      console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
+  const merge = (lang: string, message: Partial<T>) => {
+    if (!messages[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`)
       return
     }
 
-    packs[lang] = { ...packs[lang], ...pack }
+    messages[lang] = { ...messages[lang], ...message }
 
     use(lang)
   }
 
+  const t = (id: string) => {
+    if (Object.prototype.hasOwnProperty.call(currentMessage.value, id)) {
+      return currentMessage.value[id]
+    }
+
+    return id
+  }
+
   return {
-    packs,
-    pack,
+    messages,
+    currentMessage,
     add,
     use,
     merge,
+    t
   }
 }
 
-const { packs, pack, add, use, merge } = useLocale()
+const { messages, currentMessage, add, use, merge } = useLocale()
 
 add('zh-CN', zhCN)
 use('zh-CN')
 
-export { packs, pack, add, use, merge, useLocale }
+export { messages, currentMessage, add, use, merge, useLocale }
 
-export const _LocaleComponent = { packs, pack, add, use, merge, useLocale }
+export const _LocaleComponent = { messages, currentMessage, add, use, merge, useLocale }
 
 export default {
-  packs,
-  pack,
+  messages,
+  currentMessage,
   add,
   use,
   merge,

package/template/generators/config/i18n/tsx/src/button/example/BasicUse.vue

@@ -1,11 +1,11 @@
 <script setup>
 import VaButton from '..'
 import { watchLang } from '@varlet/cli/client'
-import { pack, use } from './locale'
+import { t, use } from './locale'
 
 watchLang(use, 'pc')
 </script>
 
 <template>
-  <va-button>{{ pack.start }}</va-button>
+  <va-button>{{ t('start') }}</va-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/example/ModifyColor.vue

@@ -1,11 +1,11 @@
 <script setup>
 import VaButton from '..'
 import { watchLang } from '@varlet/cli/client'
-import { pack, use } from './locale'
+import { t, use } from './locale'
 
 watchLang(use, 'pc')
 </script>
 
 <template>
-  <va-button color="#03A9F4">{{ pack.start }}</va-button>
+  <va-button color="#03A9F4">{{ t('start') }}</va-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/example/index.vue

@@ -1,15 +1,15 @@
 <script setup>
 import VaButton from '..'
 import { watchLang, AppType } from '@varlet/cli/client'
-import { pack, use } from './locale'
+import { t, use } from './locale'
 
 watchLang(use)
 </script>
 
 <template>
-  <app-type>{{ pack.basicUse }}</app-type>
-  <va-button>{{ pack.start }}</va-button>
+  <app-type>{{ t('basicUse') }}</app-type>
+  <va-button>{{ t('start') }}</va-button>
 
-  <app-type>{{ pack.modifyColor }}</app-type>
-  <va-button color="#03A9F4">{{ pack.start }}</va-button>
+  <app-type>{{ t('modifyColor') }}</app-type>
+  <va-button color="#03A9F4">{{ t('start') }}</va-button>
 </template>

package/template/generators/config/i18n/tsx/src/button/example/locale/index.ts

@@ -6,18 +6,18 @@ import zhCN from './zh-CN'
 import enUS from './en-US'
 import { useLocale, add as _add, use as _use } from '../../../locale'
 
-const { add, use: exampleUse, pack, packs, merge } = useLocale()
+const { add, use: exampleUse, t, merge } = useLocale()
 
 const use = (lang: string) => {
   _use(lang)
   exampleUse(lang)
 }
 
-export { add, pack, packs, merge, use }
+export { add, t, merge, use }
 
 // lib
 _add('zh-CN', _zhCN)
 _add('en-US', _enCN)
 // mobile example doc
-add('zh-CN', zhCN as any)
-add('en-US', enUS as any)
+add('zh-CN', zhCN)
+add('en-US', enUS)

package/template/generators/config/i18n/tsx/src/locale/index.ts

@@ -2,66 +2,78 @@ import { ref } from 'vue'
 import type { Ref } from 'vue'
 import zhCN from './zh-CN'
 
-export type Pack = {
+export type Message = {
   // Button component
   button: string
 
   // internal
   lang?: string
+
+  [key: PropertyKey]: any
 }
 
-function useLocale<T = Pack>() {
-  const packs: Record<string, Partial<T>> = {}
-  const pack: Ref<Partial<T>> = ref({})
+function useLocale<T = Message>() {
+  const messages: Record<string, Partial<T>> = {}
+  const currentMessage: Ref<Partial<T>> = ref({})
 
-  const add = (lang: string, pack: Partial<T> & { lang?: string }) => {
-    pack.lang = lang
-    packs[lang] = pack
+  const add = (lang: string, message: Partial<T> & { lang?: string }) => {
+    message.lang = lang
+    messages[lang] = message
   }
 
   const use = (lang: string) => {
-    if (!packs[lang]) {
-      console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
+    if (!messages[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`)
       return {}
     }
 
-    pack.value = packs[lang]
+    currentMessage.value = messages[lang]
   }
 
-  const merge = (lang: string, pack: Partial<T>) => {
-    if (!packs[lang]) {
-      console.warn(`The ${lang} does not exist. You can mount a language package using the add method`)
+  const merge = (lang: string, message: Partial<T>) => {
+    if (!messages[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`)
       return
     }
 
-    packs[lang] = { ...packs[lang], ...pack }
+    messages[lang] = { ...messages[lang], ...message }
 
     use(lang)
   }
 
+  const t = (id: string) => {
+    if (Object.prototype.hasOwnProperty.call(currentMessage.value, id)) {
+      return currentMessage.value[id]
+    }
+
+    return id
+  }
+
   return {
-    packs,
-    pack,
+    messages,
+    currentMessage,
     add,
     use,
     merge,
+    t
   }
 }
 
-const { packs, pack, add, use, merge } = useLocale()
+const { messages, currentMessage, t, add, use, merge } = useLocale()
 
 add('zh-CN', zhCN)
 use('zh-CN')
 
-export { packs, pack, add, use, merge, useLocale }
+export { messages, currentMessage, t, add, use, merge, useLocale }
 
-export const _LocaleComponent = { packs, pack, add, use, merge, useLocale }
+export const _LocaleComponent = { messages, currentMessage, t, add, use, merge, useLocale }
 
 export default {
-  packs,
-  pack,
+  messages,
+  currentMessage,
   add,
   use,
   merge,
+  t,
   useLocale,
 }