i18n rebuild, elementui,vuetify rebuild i18n

packages/elementui/index.js

@@ -13,36 +13,27 @@
  *  }
  */
 import localElement from 'element-ui/lib/locale'
-<%option = option ||{}%>
+const importers = {
+<%if(option.langs){%>
 <%for(let lang in option.langs){%>
-import <%=lang%>_lang from 'element-ui/lib/locale/lang/<%=option.langs[lang]%>'
+  <%=lang%>:()=>import("element-ui/lib/locale/lang/<%=option.langs[lang]%>.js"),
 <%}%>
-const langs = {}
-<%for(let lang in option.langs){%>
-langs.<%=lang%> =  <%=lang%>_lang
 <%}%>
-// const test = import('element-ui/lib/locale/lang/zh-CN.js')
-// console.log(test)
-
+}
 export default function(option,Context){
+  Context.I18n.setLocaleMessages(importers)
+
   Context.hook("APP:INIT",function(options) {
     Object.assign(options,{
       mixin:{
         beforeCreate(){
           if(this.$i18n){
             // 💡 第一种方法是借助vuei8n来实现
             localElement.i18n((key, value) => this.$i18n.t(key, value))
-            this.$i18n.mergeLocaleMessage(this.$i18n.locale,langs[this.$i18n.locale])
             // 💡 第二种方法自己设置语言包,但是前端切换语言的时候elementui重绘前会有延迟
             // localElement.use(langs[this.$i18n.locale])
           }
         },
-        watch:{
-          '$i18n.locale'(newLocal) {
-            this.$i18n.mergeLocaleMessage(newLocal,langs[newLocal])
-            // localElement.use(langs[newLocal])
-          }
-        }
       }
     })
   })

packages/elementui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitescv/elementui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "main": "index.js",
   "description": "element-ui module for vitescv & vue2.7",
@@ -12,6 +12,7 @@
     "./components": "./elementuiesm.js"
   },
   "peerDependencies": {
-    "vitescv":"^2.0.0"
+    "vitescv":"^2.0.0",
+    "@vitescv/i18n":"^2.0.0"
   }
 }

packages/elementui/readme.md

@@ -16,7 +16,7 @@ pnpm add @vitescv/elementui
 modules:{
   ...
   "@vitescv/elementui":{
-    // 与i18n的语言包映射关系
+    // 与@vitecv/i18n的语言包映射关系
     "langs":{
       'en':'en',
       'zh':'zh-CN',

packages/i18n/index.js

@@ -10,48 +10,47 @@
 import VueI18n from 'vue-i18n'
 <%const dir = option.dir||'i18n'%>
 const langsImporter = import.meta.glob("@/<%=(option.dir)||'i18n'%>/*.json")
-console.log(langsImporter)
+// console.log(langsImporter)
 // i18n操作类
 class LocaleOperator{
-  constructor(options,Contenxt){
+  constructor(options){
     this.dymicImporters = {}
     for(var k in langsImporter){
       const regs = k.match(/\W([a-zA-Z]+\w+)\.json$/i)
       if(regs&&regs.length>1){
         const lang = regs[1]
+        // if(!options.messages[lang]){
+        //   options.messages[lang] = {}
+        // }
         this.dymicImporters[lang] = [langsImporter[k]]
-        if(!options.messages[lang]){
-          options.messages[lang] = {}
-        }
       }
     }
     this.langs = Object.keys(this.dymicImporters)
     this.langsLoaded = []
-    this.langsModules
-    if(this.langs>0 && this.options.locale){
-      this.setLocale
-    }
     this.i18n = new VueI18n(options)
-    this.Contenxt = Contenxt
     this.localeKey = '__locale'
   }
   // 获取当前语言
   getLocale(){
+    if(window&&window.localStorage){
+      return localStorage.getItem(this.localeKey)
+    }
     return this.i18n.locale
   }
   // 设置当前语言
   setLocale(lang){
-    // if(window){
-    //   localStorage.setItem(this.localeKey,lang)
-    //   document.querySelector('html').setAttribute('lang', lang)
-    // }
-   this.i18n.locale = lang
-   return lang
+    if(window&&window.localStorage){
+      localStorage.setItem(this.localeKey,lang)
+      document.querySelector('html').setAttribute('lang', lang)
+    }
+    this.i18n.locale = lang
+    // console.log(lang,this.i18n.getLocaleMessage(lang))
+    return lang
   }
   // 加载语言包
   loadLocaleMessage(lang){
     // 不包含语言包
-    if(!this.langs.includes(lang)){
+    if(!lang || !this.langs.includes(lang)){
       console.error('[@vitescv/i18n] '+lang+' is not exited!')
       return Promise.resolve(false)
     }
@@ -65,17 +64,27 @@ class LocaleOperator{
     // }
     // 尚未加载
     return Promise.all(this.dymicImporters[lang].map(importer=>{
-              return importer()
-              // .catch(e=>{
-              //   console.error('[@vitescv/i18n] '+lang+' is not exited!')
-              //   return false
-              // })
-            })).then((message)=>{
-              this.i18n.mergeLocaleMessage(lang,message.default)
-              // this.i18n.setLocaleMessage(lang, message.default)
-              this.langsLoaded.push(lang)
-              return this.setLocale(lang)
+            if(typeof importer == 'function'){
+              importer = importer()
+            }
+            if(importer instanceof Promise){
+              return importer.then(m=>m.default).catch(e=>{
+                console.error('[@vitescv/i18n] '+e.message)
+                return false
+              })
+            }
+            return importer
+          }))
+          .then((messages)=>{
+            messages.forEach(message=>{
+              this.i18n.mergeLocaleMessage(lang,message)
+              // this.i18n.setLocaleMessage(lang, message)
             })
+            this.langsLoaded.push(lang)
+            return this.setLocale(lang)
+          }).catch(e=>{
+            console.error(e)
+          })
   }
 }
 
@@ -89,9 +98,28 @@ export default async function(option,Context){
     silentFallbackWarn:false,
     messages:{}
   },option)
+  // 初始化
+  const localeOperator = new LocaleOperator(option)
+  // 注入Context语言包加载语言包方法给第三方
+  Context.I18n = {
+    // 增加语言包对应的加载方法或者数据
+    setLocaleMessage(lang,importer){
+      if(localeOperator.langs.includes(lang)){
+        localeOperator.dymicImporters[lang].push(importer)
+      }
+    },
+    // setLocaleMessage的批量方法，importers为lang和importer的映射对象
+    setLocaleMessages(importers){
+      for (const lang in importers) {
+        this.setLocaleMessage(lang,importers[lang])
+      }
+    },
+    // 获取支持的语言包列表
+    langs:localeOperator.langs,
+    // i18n实例
+    i18n:localeOperator.i18n,
+  }
 
-  const localeOperator = new LocaleOperator(option,Context)
-  await localeOperator.loadLocaleMessage(option.locale)
   Context.hook("APP:INIT",function(options) {
     Object.assign(options,{
       i18n:localeOperator.i18n,
@@ -106,9 +134,11 @@ export default async function(option,Context){
 
   })
   Context.hook("APP:CREATED",function(){
+    // 初始化默认语言
+    localeOperator.loadLocaleMessage(localeOperator.getLocale())
     // 注册router钩子函数来判断语言
     Context.router.beforeEach((to,from,next)=>{
-      localeOperator.loadLocaleMessage(option.locale).then(next())
+      localeOperator.loadLocaleMessage(localeOperator.i18n.locale).then(next())
     })
   })
 }

packages/i18n/readme.md

@@ -45,4 +45,25 @@ export default {
   },
   ...
 }
-```
+```
+
+#### 扩展
+
+该模块扩展了上下文，提供`Context.I18n`对象可以在其他摸块中提供对语言解决方案,该对象的api如下：
+
+- **langs**
+
+​	当前支持的语言列表数组
+
+- **i18n**
+
+​	vue-i18n的实例
+
+- **setLocaleMessage(lang,importer)**
+
+​	针对某个语言增加全局语言包或者语言包加载器，其中importer方法可以返回一个json数据，也可以返回一个promise实现异步加载
+
+- **setLocaleMessages(importers)**
+
+ setLocaleMessage的批量方法，importers为lang和importer的映射对象
+

packages/vuetify/config.js

@@ -18,5 +18,4 @@ export default {
       }
     }
   ],
-  manualChunks:{'vuetifyui': ['vuetify/lib']},
 }

packages/vuetify/index.js

@@ -1,5 +1,5 @@
 /**
- * Element-ui for vitescv & vue2  
+ * vuetify for vitescv & vue2  
  * 配置信息可选，主要是设置多语言，依赖于vue-i18n 如下
  * @param option
  *  {
@@ -11,43 +11,26 @@
  */
 import Vuetify from 'vuetify/lib'
 import 'vuetify/dist/vuetify.min.css'
-<%option = option ||{langs:{}}%>
+const importers = {
+<%if(option.langs){%>
 <%for(let lang in option.langs){%>
-import <%=lang%>_lang from 'vuetify/lib/locale/<%=option.langs[lang]%>'
+  <%=lang%>:()=>import("vuetify/lib/locale/<%=option.langs[lang]%>.js").then(m=>{return {default:{'$vuetify':m.default}}}),
 <%}%>
-const langs = {}
-<%for(let lang in option.langs){%>
-langs.<%=lang%> =  <%=lang%>_lang
 <%}%>
+}
 
-export default function(option,{Vue,hook}){
-  option = Object.assign({
-    langs:{'en':'en'}
-  },option)
-  Vue.use(Vuetify)
-  hook("APP:INIT",function(options) {
-    const vuetify = new Vuetify(Object.assign(option,{
+export default function(option,Context){
+  Context.Vue.use(Vuetify)
+  Context.I18n.setLocaleMessages(importers)
+  Context.hook("APP:INIT",function(options) {
+    const optionVuetify = Object.assign({
       lang: {
-        locales: langs,
-        current: 'en',
+        t: (key, ...params) => Context.I18n.i18n.t(key, params),
       },
-    }))
+    },option.option)
+    const vuetify = new Vuetify(optionVuetify)
     Object.assign(options,{
       vuetify,
-      mixin:{
-        created(){
-          if(this.$i18n){
-            this.$vuetify.lang.current = this.$i18n.locale
-          }
-        },
-        watch:{
-          '$i18n.locale'(newLocal) {
-            this.$vuetify.lang.current = newLocal
-          }
-        }
-      }
     })
   })
-  // hook("APP:created",function(options) {
-  // })
 }

packages/vuetify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitescv/vuetify",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "vuetify module for vitescv",
   "main": "index.js",
   "type": "module",
@@ -15,7 +15,8 @@
     "sass-loader": "^13.3.2",
     "vue": "^2.7.14"
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "peerDependencies": {
+    "vitescv":"^2.0.0",
+    "@vitescv/i18n":"^2.0.0"
   }
 }

packages/vuetify/readme.md

@@ -17,13 +17,13 @@ pnpm add @vitescv/vuetify
 modules:{
   ...
   "@vitescv/vuetify":{
-     // 与i18n的语言包映射关系
+     // 与i18n的语言包映射关系,模块会自动根据这些配置导入对应的语言包
     "langs":{
       'en':'en',
       'zh':'zh-Hans',
       ...
     },
-    // vuetify的初始化配置，lang部分已经自动根据上面的配置处理了,无需处理
+    // vuetify的初始化配置，lang部分已经自动根据上面的配置自动处理了,如果自行设置会覆盖原有的自动处理
     "option":{
       ...
     }