refactor(config): external locale config for on demand import (vexip-…

…ui#302) * refactor: extra locale config * docs: update BREAKING CHANGE: `en-US` and `ta-IN` isn't included in internal locale config no longer. Now these config are exported independently, using e.g. `import { enUSLocale } from 'vexip-ui'` to import locale config that you want to use. See docs about global config for more details.
alphaelf · Apr 6, 2023 · 86eab10 · 86eab10
1 parent e9ee8ce
commit 86eab10
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 50 deletions.
diff --git a/common/config/src/locale/index.ts b/common/config/src/locale/index.ts
@@ -1,8 +1,6 @@
 import { computed, provide, inject, unref } from 'vue'
 import { mergeObjects } from '@vexip-ui/utils'
 import { zhCNLocale } from './zh-CN'
-import { enUSLocale } from './en-US'
-import { taINLocale } from './ta-IN'
 
 import type { App, ComputedRef } from 'vue'
 import type { LocaleConfig, LocaleNames, LocaleOptions } from './helper'
@@ -11,45 +9,45 @@ import type { MaybeRef } from '../types'
 export * from './helper'
 export * from './zh-CN'
 export * from './en-US'
+export * from './ta-IN'
 
 export const PROVIDED_LOCALE = '__vxp-provided-locale'
 export const globalLocal = computed(() => zhCNLocale())
 
+const cached = new Map<string, LocaleConfig>()
+
 export function getDefaultLocaleConfig(locale?: string) {
   if (!locale) {
     return globalLocal.value
   }
 
-  switch (locale) {
-    case 'en-US':
-      return enUSLocale()
-    case 'ta-IN':
-      return taINLocale()
-    default:
-      return zhCNLocale()
-  }
+  return cached.get(locale) || globalLocal.value
+}
+
+export function registerLocale(locale: LocaleConfig) {
+  locale.locale && cached.set(locale.locale, locale)
 }
 
 export function configLocale(sourceLocale: MaybeRef<LocaleOptions>, app?: App) {
   if (app) {
     const locale = computed(() => {
       const locale = unref(sourceLocale)
 
-      return mergeObjects(getDefaultLocaleConfig(locale.locale), locale, false)
+      return mergeObjects(getDefaultLocaleConfig(locale.locale), locale)
     })
 
     app.provide(PROVIDED_LOCALE, locale)
   } else {
     const upstreamLocale = inject<ComputedRef<LocaleConfig> | null>(PROVIDED_LOCALE, null)
     const locale = computed(() => {
       const locale = unref(sourceLocale)
-      const providedLocale = mergeObjects(getDefaultLocaleConfig(locale.locale), locale)
+      // const providedLocale = mergeObjects(getDefaultLocaleConfig(locale.locale), locale)
 
       if (!upstreamLocale?.value) {
-        return providedLocale
+        return mergeObjects(getDefaultLocaleConfig(locale.locale), locale)
       }
 
-      return mergeObjects(upstreamLocale.value as any, providedLocale)
+      return mergeObjects(upstreamLocale.value as any, locale)
     })
 
     provide(PROVIDED_LOCALE, locale)

diff --git a/components/create.ts b/components/create.ts
@@ -9,7 +9,7 @@ import {
 import { toCapitalCase } from '@vexip-ui/utils'
 
 import type { Ref, App } from 'vue'
-import type { LocaleOptions, IconsOptions } from '@vexip-ui/config'
+import type { LocaleConfig, LocaleOptions, IconsOptions } from '@vexip-ui/config'
 import type { PropsOptions } from './props'
 
 type MaybeRef<T> = T | Ref<T>
@@ -23,19 +23,19 @@ export interface InstallOptions {
   icons?: MaybeRef<IconsOptions>
 }
 
-export function buildInstall(components: any[] = [], defaultLocale?: 'zh-CN' | 'en-US') {
+export function buildInstall(components: any[] = [], defaultLocale?: LocaleConfig) {
   return function install(app: App, options: InstallOptions = {}) {
     const {
       prefix = '',
       namespace = '',
       props = {},
-      locale = { locale: defaultLocale },
+      locale = defaultLocale,
       zIndex,
       icons = {}
     } = options
 
     const withDefaultLocale = computed(() => {
-      return { locale: defaultLocale, ...unref(locale) }
+      return { ...defaultLocale, ...unref(locale) }
     })
 
     configNamespace(namespace, app)

diff --git a/components/index.ts b/components/index.ts
@@ -112,15 +112,7 @@ import { Title, Text, Blockquote, OL, UL, H1, H2, H3, H4, H5, H6, P, Strong } fr
 import { buildInstall } from './create'
 import { install as installDirectives } from '@/directives'
 
-export type {
-  ComponentSize,
-  ComponentState,
-  LocaleConfig,
-  LocaleNames,
-  LocaleOptions
-} from '@vexip-ui/config'
 export type { PropsOptions } from './props'
-
 export { version } from './version'
 
 const components = [

diff --git a/docs/common/header.vue b/docs/common/header.vue
@@ -339,6 +339,7 @@ function formatComponentName(name: string) {
       display: flex;
       padding: 0;
       color: var(--vxp-content-color-base);
+      cursor: pointer;
       background-color: transparent;
       border: 0;
     }

diff --git a/docs/guides/global/desc.en-US.md b/docs/guides/global/desc.en-US.md
@@ -116,14 +116,24 @@ After set, all components name will be prefixed with `V`.
 I18n can be configured by passing the `locale` option in the second parameter when calling `app.use`.
 
 ```ts
+import { enUSLocale } from 'vexip-ui'
+
 app.use(install, {
-  locale: {
-    locale: 'en-US'
-  }
+  locale: enUSLocale()
 })
 ```
 
-The default language used can be set through `locale.locale`. Currently, Vexip UI provides two built-in languages, `'zh-CN'` and `'en-US'`.
+The default language of Vexip UI is `'zh-CN'`. You can register a locale via `registerLocale` method, and then change the locale config via `locale.locale` property.
+
+```ts
+import { registerLocale, enUSLocale } from 'vexip-ui'
+
+registerLocale(enUSLocale())
+
+app.use(install, {
+  locale: { locale: 'en-US' }
+})
+```
 
 Also you can customize the i18n for each components:
 

diff --git a/docs/guides/global/desc.zh-CN.md b/docs/guides/global/desc.zh-CN.md
@@ -116,14 +116,24 @@ createApp(App).use(install, { prefix: 'V' })
 在调用 `app.use` 时通过在第二个参数传入 `locale` 选项可以为所有组件配置国际化。
 
 ```ts
+import { enUSLocale } from 'vexip-ui'
+
 app.use(install, {
-  locale: {
-    locale: 'zh-CN'
-  }
+  locale: enUSLocale()
 })
 ```
 
-通过 `locale.locale` 可以设置使用的默认语言，目前 Vexip UI 提供了 `'zh-CN'` 和 `'en-US'` 两种内置语言。
+Vexip UI 的默认语言为 `'zh-CN'`，你可以通过 `registerLocale` 方法注册一个国际化配置，随后通过修改 `locale.locale` 属性快速切换。
+
+```ts
+import { registerLocale, enUSLocale } from 'vexip-ui'
+
+registerLocale(enUSLocale())
+
+app.use(install, {
+  locale: { locale: 'en-US' }
+})
+```
 
 同时你还可以定制化一些组件的国际化：
 

diff --git a/docs/i18n/index.ts b/docs/i18n/index.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+import { registerLocale, enUSLocale } from 'vexip-ui'
 import { createI18n } from 'vue-i18n'
 import { zhCN } from './zh-CN'
 import { enUS } from './en-US'
@@ -27,3 +28,5 @@ export const i18n = createI18n({
 export const vexipuiLocale = ref<LocaleOptions>({
   locale: 'zh-CN'
 })
+
+registerLocale(enUSLocale())
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -21,7 +21,7 @@
       "@/*": ["../*"],
       "@docs/*": ["./*"],
       "vexip-ui/es/*": ["../components/*"],
-      "vexip-ui": ["../components"]
+      "vexip-ui": [".."]
     },
     "lib": ["esnext", "dom"]
   },

diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -34,7 +34,7 @@ export default defineConfig(({ command }) => {
                 find: /^@vexip-ui\/((?!icons).+)/,
                 replacement: resolve(__dirname, '../common/$1/src')
               },
-              { find: /^vexip-ui$/, replacement: resolve(__dirname, '../components') }
+              { find: /^vexip-ui$/, replacement: resolve(__dirname, '..') }
             ]
           : [])
       ],

diff --git a/components/full-lib.ts → full-lib.ts b/components/full-lib.ts → full-lib.ts
@@ -3,4 +3,4 @@
 import '@/style/index.scss'
 import '@/style/dark/preset.scss'
 
-export * from '.'
+export * from './components'
diff --git a/index.ts b/index.ts
@@ -1 +1,10 @@
 export * from './components'
+export { registerLocale, zhCNLocale, enUSLocale, taINLocale } from '@vexip-ui/config'
+
+export type {
+  ComponentSize,
+  ComponentState,
+  LocaleConfig,
+  LocaleNames,
+  LocaleOptions
+} from '@vexip-ui/config'
diff --git a/scripts/bootstrap.ts b/scripts/bootstrap.ts
@@ -45,18 +45,9 @@ async function main() {
     } from './typography'
 
     import { install as installDirectives } from '@/directives'
-
     import { buildInstall } from './create'
 
-    export type {
-      ComponentSize,
-      ComponentState,
-      LocaleConfig,
-      LocaleNames,
-      LocaleOptions
-    } from '@vexip-ui/config'
     export type { PropsOptions } from './props'
-
     export { version } from './version'
 
     const components = [

diff --git a/tsconfig.json b/tsconfig.json
@@ -24,7 +24,7 @@
         "./*"
       ],
       "@vexip-ui/*": ["common/*/src"],
-      "vexip-ui": ["components"],
+      "vexip-ui": ["."],
       "vue-router": ["node_modules/vue-router"]
     },
     "lib": [
@@ -39,6 +39,7 @@
     "directives",
     "playground",
     "index.ts",
+    "full-lib.ts",
     "types.d.ts"
   ],
   "exclude": [

diff --git a/vite.full.config.ts b/vite.full.config.ts
@@ -16,7 +16,6 @@ interface Manifest {
 }
 
 const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8')) as Manifest
-const componentsDir = resolve(__dirname, 'components')
 
 const logLevel = process.env.LOG_LEVEL
 
@@ -41,9 +40,9 @@ export default defineConfig(async () => {
     },
     build: {
       outDir,
-      sourcemap: false,
+      sourcemap: true,
       lib: {
-        entry: resolve(componentsDir, 'full-lib.ts'),
+        entry: resolve(__dirname, 'full-lib.ts'),
         formats: ['es', 'cjs', 'iife'],
         name: 'VexipUI',
         fileName: format => `vexip-ui.${format === 'es' ? 'mjs' : format === 'cjs' ? 'cjs' : 'js'}`