plain-design 1.0.0-beta.10 → 1.0.0-beta.100

package/src/packages/i18n/i18n.utils.ts

@@ -1,148 +1,272 @@
-import {computed, reactive} from "plain-design-composition";
-import {deepIterateObject} from "../utils/deepIterateObject";
+import {createSyncHooks, reactive} from "plain-design-composition";
+import {ZhCnLocale} from './lang/zh-cn';
+import {deepmerge} from "../components/PageThemeUtils/deepmerge";
+import {PlainObject} from "plain-utils/utils/event";
+import {createCache} from "../utils/createCache";
 
 /**
- * 获取对象的属性值访问路径字符串联合类型
- * 比如 type A = {
- *   base:{
- *     confirm:'确定',
- *     cancel:'取消',
- *   },
- *   date:{
- *     year:'年',
- *     month:'月',
- *     date:'日',
- *   },
- * }
- * 得到的联合类型是：'base.confirm'|'base.cancel'|'date.year'|'date.month'|'date.date'
+ /**
+ * 默认语言为中文
  * @author  韦胜健
- * @date    2022.5.2 11:44
+ * @date    2023/10/12 15:14
  */
-export type ObjectAccessPaths<T, Prev extends string = '', K = keyof T> =
-  K extends keyof T ? (
-      K extends string ? (
-        T[K] extends Record<string, any> ? ObjectAccessPaths<T[K], `${Prev}.${K}`> : (
-          `${Prev}.${K}` extends `.${infer L}` ? L : `${Prev}.${K}`
-          )
-        ) : never
-      ) :
-    never;
-// type A = ObjectAccessPaths<tZhCnLocale>
+const DEFAULT_LANG = 'zh-cn';
 
 /**
- * 将字符串类型分割为元组类型
- * base.select.reverse => ['base','select','reverse']
+ * 根据中文解析出来允许访问的编码类型
  * @author  韦胜健
- * @date    2022.5.2 11:46
+ * @date    2023/10/12 15:14
  */
-type Split<Str extends string, Sep extends string, Prev extends any[] = []> = Str extends `${infer L}${Sep}${infer R}` ? [...Prev, L, ...Split<R, Sep>] : [...Prev, Str]
-// type A = Split<'base.select.reverse', '.'>
+type iFormat<
+  T extends Record<string, any>,
+  PREV extends string = '',
+  K = keyof T
+> = K extends keyof T
+  ? T[K] extends Record<any, any>
+    ? iFormat<T[K], K extends string ? (PREV extends '' ? K : `${PREV}.${K}`) : ''>
+    : [PREV] extends ['']
+      ? K
+      : K extends string
+        ? `${PREV}.${K}`
+        : never
+  : never;
 
 /**
- * 通过访问路劲元组类型，得到对象中具体属性值的类型
- * AccessObjectValue<A,['base','confirm']> 得到的类型是 `确定`
+ * 允许访问的编码类型
  * @author  韦胜健
- * @date    2022.5.2 11:48
+ * @date    2023/10/12 15:14
  */
-type AccessObjectValue<Obj extends Record<string, any>, Path extends string[]> = Path extends [infer L, ...infer R] ? (
-  L extends keyof Obj ? (R extends string[] ? AccessObjectValue<Obj[L], R> : never) : never
-  ) : Obj
-// type N = AccessObjectValue<tZhCnLocale, ['base', 'confirm']>
+type iStandardLangPath = iFormat<typeof ZhCnLocale>;
 
-/**
- * 将对象类型转换为平铺属性的对象类型，比如A类型转化为
- * {
- *   "base.confirm":"确定",
- *   "base.cancel":"取消",
- *   "base.year":"年",
- *   "base.month":"月",
- *   "base.date":"日",
- * }
- * @author  韦胜健
- * @date    2022.5.2 11:49
- */
-type ObjectMap<T extends Record<string, any>> = { [k in ObjectAccessPaths<T>]: AccessObjectValue<T, Split<k, '.'>> }
-// type O = ObjectMap<tZhCnLocale>
-
-/**
- * 联合类型转换为交叉类型（函数重载类型就是交叉类型）
- * @author  韦胜健
- * @date    2022.5.2 11:50
- */
-type UnionToIntersection<T> = (T extends any ? ((t: T) => void) : never) extends ((r: infer R) => any) ? R : never
-
-/**
- * 创建i18n对象
- * @author  韦胜健
- * @date    2022.5.2 10:34
- */
-export function createI18n<Locale extends Record<string, any>, OM = ObjectMap<Locale>, K extends keyof OM = keyof OM>(defaultLocale: Locale): UnionToIntersection<K extends keyof OM ? ((k: K, params?: Record<string, any>) => { d: <D = unknown>(defaultLang?: D) => OM[K] | D }) : never> & {
-  setLocale: (locale: any) => void,
-  setDefaultLocale: (defaultLocale: any) => void,
-} {
+export const i18n = (() => {
 
   const state = reactive({
-    /*当前语言*/
-    locale: defaultLocale,
-    /*从当前语言中取不到值得时候，从这个默认语言中取值*/
-    defaultLocale,
+    currentLang: DEFAULT_LANG,
+    langs: {
+      [DEFAULT_LANG]: ZhCnLocale,
+    } as any,
+    localeOptions: [
+      { label: '中文', key: DEFAULT_LANG, lang: ZhCnLocale }
+    ] as { label: string, key: string, lang: PlainObject }[]
   });
 
+  const hooks = {
+    onChangeLang: createSyncHooks<() => void>(),
+    onUpdateLangs: createSyncHooks<() => void>()
+  };
+
+  /**
+   * 使用指定的语言转化编码
+   * @author  韦胜健
+   * @date    2023/10/11 9:28
+   * @param   lang    指定的域名名字
+   * @param   path    要转换的编码
+   * @param   options 转换编码时的格式化参数
+   */
+  const intlWithLang = (lang: string, path: string, options: any): string | undefined => {
+    if (!state.langs[lang]) {
+      console.log({ langs: state.langs, lang });
+      throw new Error(`不存在多语言：${lang}`);
+    }
+    const array = path.split('.');
+    let current = state.langs[lang];
+    for (let i = 0, j = array.length; i < j; i++) {
+      const property = array[i];
+      let value = current[property];
+      if (i === j - 1) return !options ? value : formatLang(value, options);
+      if (!value) return '';
+      current = value;
+    }
+    return '';
+  };
+
   /**
-   * 将多层级的对象拍平为一层的对象
+   * 使用当前语言转换编码
    * @author  韦胜健
-   * @date    2022.5.2 12:04
+   * @date    2023/10/11 9:29
    */
-  const getMapObject = <Obj extends Record<string, any>>(obj: Obj): ObjectMap<Obj> => {
-    const map = {} as any;
-    deepIterateObject(obj, (key, value, accessPath) => {
-      if (typeof value === "string") {
-        map[accessPath?.join('.')] = value;
+  const $t = (path: string, options?: Record<string, any>) => {
+    let { currentLang } = state;
+    if (!state.langs[currentLang]) {
+      currentLang = DEFAULT_LANG;
+    }
+    const isDefaultLang = currentLang === DEFAULT_LANG;
+
+    let valString = intlWithLang(currentLang, path, options);
+
+    if (!valString) {
+      if (!isDefaultLang) {
+        valString = intlWithLang(DEFAULT_LANG, path, options);
       }
-    });
-    return map;
+    }
+
+    return valString;
   };
 
-  const map = computed(() => ({
-    locale: getMapObject(state.locale),
-    defaultLocale: getMapObject(state.defaultLocale)
-  }));
+  /**
+   * 类似于$t, 可以指定默认展示文本，当多语言配置即使默认语言也没有办法转化这个编码时
+   * @author  韦胜健
+   * @date    2023/10/12 15:12
+   */
+  const $intl = (path: string, options?: Record<string, any>) => {
+    return {
+      d: (desc: string): any => {
+        const valString = $t(path, options);
+        if (!!valString) {
+          return valString;
+        }
+        return desc;
+      }
+    };
+  };
+
+  const $it = (path: iStandardLangPath, options?: Record<string, any>) => {
+    return $intl(path, options);
+  };
 
   /**
-   * 设置当前语言
+   * 应用指定语言
    * @author  韦胜健
-   * @date    2022.5.2 10:33
+   * @date    2023/10/11 9:29
    */
-  const setLocale = (locale: Locale) => state.locale = locale as any;
+  const use = (lang: string, locale: any) => {
+    state.currentLang = lang;
+    if (!!locale) {state.langs[lang] = deepmerge(state.langs[lang], locale);}
+    hooks.onChangeLang.exec(undefined);
+  };
   /**
-   * 设置默认语言
+   * 切换至指定语言
    * @author  韦胜健
-   * @date    2022.5.2 10:33
+   * @date    2023/10/11 9:30
    */
-  const setDefaultLocale = (defaultLocale: Locale) => state.defaultLocale = defaultLocale as any;
-
+  const switchTo = async (lang: string, loadMethod?: () => any) => {
+    let locale = !loadMethod ? undefined : await loadMethod();
+    use(lang, locale);
+  };
   /**
-   * 取值
+   * 获取当前使用的语言
    * @author  韦胜健
-   * @date    2022.5.2 10:33
+   * @date    2023/10/11 9:30
    */
-  const getter = (path: string, params?: Record<string, any>) => {
-    let value = (map.value.locale as any)[path];
-    if (!value) {
-      value = (map.value.defaultLocale as any)[path];
+  const getCurrentLanguage = () => {return state.currentLang;};
+  /**
+   * 设置语言
+   * @author  韦胜健
+   * @date    2023/10/11 9:30
+   */
+  const setLangs = (langs: any) => {
+
+    let result = {} as any;
+    Object.keys({ ...state.langs, ...langs }).forEach(localeName => {
+      result[localeName] = mergeLangs(
+        state.langs[localeName],
+        langs[localeName],
+        (lang1, lang2) => {
+          return mergeLangs(
+            lang1,
+            lang2,
+            (item1, item2) => {
+              return {
+                ...item1,
+                ...item2,
+              };
+            }
+          );
+        }
+      );
+    });
+
+    state.langs = result;
+
+    hooks.onUpdateLangs.exec(undefined);
+  };
+
+  const mergeLangs = (lang1: PlainObject | undefined, lang2: PlainObject | undefined, merge: (val1: PlainObject, val2: PlainObject) => PlainObject | undefined): PlainObject | undefined => {
+
+    if (!lang1 || !lang2) {
+      return lang1 || lang2;
     }
-    return {
-      d: (defaultString: string) => {
-        if (!!value) {
-          if (/\{.+\}/.test(value)) {
-            value = (value as string).replace(/\{(.+?)\}/, (input, group1) => params?.[group1]);
-          }
-          return value;
+
+    if (typeof lang1 !== "object" || typeof lang2 !== "object") {
+      return lang2 != null ? lang2 : lang1;
+    }
+
+    const keys = new Set<string>();
+    Object.keys(lang1).forEach(key => {keys.add(key);});
+    Object.keys(lang2).forEach(key => {keys.add(key);});
+    const result = {} as PlainObject;
+    keys.forEach((key) => {
+      const val1 = lang1[key];
+      const val2 = lang2[key];
+      if (!!val1 && !!val2) {
+        if (typeof val1 === "object" && typeof val2 === "object") {
+          result[key] = merge(val1, val2);
+        } else {
+          result[key] = val2;
         }
-        return defaultString || '';
-      },
-    };
+      } else {
+        result[key] = val1 || val2;
+      }
+    });
+    return result;
   };
 
-  return Object.assign(getter, { setLocale, setDefaultLocale }) as any;
-}
+  const applyCache = () => {
+    const cache = createCache<string>('@@I18N_LANG');
+    if (cache.get()) {switchTo(cache.get()!);}
+    hooks.onChangeLang.use(() => {cache.set(state.currentLang);});
+  };
+
+  return {
+    $t,
+    $intl,
+    $it,
+    use,
+    switchTo,
+    getCurrentLanguage,
+    setLangs,
+    DEFAULT_LANG,
+    state,
+    hooks,
+    applyCache,
+  };
+})();
+
+const formatLang = (() => {
+  const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+  function hasOwn(obj: any, key: string) {
+    return hasOwnProperty.call(obj, key);
+  }
+
+  const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+
+  const format = (string: string | null | undefined, ...args: any) => {
+    if (string == null || string.length === 0) {
+      return null;
+    }
+    if (args.length === 1 && typeof args[0] === 'object') {
+      args = args[0];
+    }
+
+    if (!args || !args.hasOwnProperty) {
+      args = {};
+    }
+
+    return string.replace(RE_NARGS, (match, prefix, i, index) => {
+      let result;
+
+      if (string[index - 1] === '{' && string[index + match.length] === '}') {
+        return i;
+      } else {
+        result = hasOwn(args, i) ? args[i] : null;
+        if (result === null || result === undefined) {
+          return '';
+        }
+
+        return result;
+      }
+    });
+  };
+  return format;
+})();

package/src/packages/i18n/index.ts

@@ -1,4 +1,5 @@
-import {createI18n} from "./i18n.utils";
-import {ZhCnLocale} from "./lang/zh-cn";
+import {i18n} from './i18n.utils';
 
-export const i18n = createI18n(ZhCnLocale);
+export default i18n;
+
+export {i18n};