@umijs/plugins 4.0.0-beta.7 → 4.0.0-rc.2

package/libs/locale/localeExports.tpl

@@ -0,0 +1,271 @@
+import {
+  createIntl,
+  IntlShape,
+  MessageDescriptor,
+} from '{{{ reactIntlPkgPath }}}';
+import { ApplyPluginsType } from 'umi';
+import { getPluginManager } from '../core/plugin';
+import EventEmitter from '{{{EventEmitterPkg}}}';
+// @ts-ignore
+import warning from '{{{ warningPkgPath }}}';
+
+export {
+  createIntl,
+};
+export {
+  FormattedDate,
+  FormattedDateParts,
+  FormattedDisplayName,
+  FormattedHTMLMessage,
+  FormattedList,
+  FormattedMessage,
+  FormattedNumber,
+  FormattedNumberParts,
+  FormattedPlural,
+  FormattedRelativeTime,
+  FormattedTime,
+  FormattedTimeParts,
+  IntlContext,
+  IntlProvider,
+  RawIntlProvider,
+  createIntlCache,
+  defineMessages,
+  injectIntl,
+  useIntl,
+} from '{{{ reactIntlPkgPath }}}';
+
+let g_intl: IntlShape;
+
+const useLocalStorage = {{{UseLocalStorage}}};
+
+// @ts-ignore
+export const event = new EventEmitter();
+
+export const LANG_CHANGE_EVENT = Symbol('LANG_CHANGE');
+
+{{#LocaleList}}
+{{#antdLocale}}
+import {{lang}}{{country}}{{index}} from '{{{locale}}}';
+{{/antdLocale}}
+{{#paths}}
+import lang_{{lang}}{{country}}{{index}} from "{{{path}}}";
+{{/paths}}
+{{/LocaleList}}
+
+export const localeInfo: {[key: string]: any} = {
+  {{#LocaleList}}
+  '{{name}}': {
+    messages: {
+      {{#paths}}...lang_{{lang}}{{country}}{{index}},{{/paths}}
+    },
+    locale: '{{locale}}',
+    {{#Antd}}antd: {
+      {{#antdLocale}}
+      ...{{lang}}{{country}}{{index}},
+      {{/antdLocale}}
+    },{{/Antd}}
+    momentLocale: '{{momentLocale}}',
+  },
+  {{/LocaleList}}
+};
+
+/**
+ * 增加一个新的国际化语言
+ * @param name 语言的 key
+ * @param messages 对应的枚举对象
+ * @param extraLocales momentLocale, antd 国际化
+ */
+export const addLocale = (
+  name: string,
+  messages: Object,
+  extraLocales: {
+    momentLocale:string;
+    antd:string
+  },
+) => {
+  if (!name) {
+    return;
+  }
+  // 可以合并
+  const mergeMessages = localeInfo[name]?.messages
+    ? Object.assign({}, localeInfo[name].messages, messages)
+    : messages;
+
+
+  const { momentLocale, antd } = extraLocales || {};
+  const locale = name.split('{{BaseSeparator}}')?.join('-')
+  localeInfo[name] = {
+    messages: mergeMessages,
+    locale,
+    momentLocale: momentLocale,
+    {{#Antd}}antd,{{/Antd}}
+  };
+   // 如果这是的 name 和当前的locale 相同需要重新设置一下，不然更新不了
+  if (locale === getLocale()) {
+    event.emit(LANG_CHANGE_EVENT, locale);
+  }
+};
+
+/**
+ * 获取当前的 intl 对象，可以在 node 中使用
+ * @param locale 需要切换的语言类型
+ * @param changeIntl 是否不使用 g_intl
+ * @returns IntlShape
+ */
+export const getIntl = (locale?: string, changeIntl?: boolean) => {
+  // 如果全局的 g_intl 存在，且不是 setIntl 调用
+  if (g_intl && !changeIntl && !locale) {
+    return g_intl;
+  }
+  // 如果存在于 localeInfo 中
+  if (locale&&localeInfo[locale]) {
+    return createIntl(localeInfo[locale]);
+  }
+  {{#ExistLocaleDir}}
+  // 不存在需要一个报错提醒
+  warning(
+    !locale||!!localeInfo[locale],
+    `The current popular language does not exist, please check the {{{LocaleDir}}} folder!`,
+  );
+  {{/ExistLocaleDir}}
+  // 使用 zh-CN
+  if (localeInfo[{{{ DefaultLocale }}}]) return createIntl(localeInfo[{{{ DefaultLocale }}}]);
+
+  // 如果还没有，返回一个空的
+  return createIntl({
+    locale: {{{ DefaultLocale }}},
+    messages: {},
+  });
+};
+
+/**
+ * 切换全局的 intl 的设置
+ * @param locale 语言的key
+ */
+export const setIntl = (locale: string) => {
+  g_intl = getIntl(locale, true);
+};
+
+/**
+ * 获取当前选择的语言
+ * @returns string
+ */
+export const getLocale = () => {
+  const runtimeLocale = getPluginManager().applyPlugins({
+    key: 'locale',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+  });
+  // runtime getLocale for user define
+  if (typeof runtimeLocale?.getLocale === 'function') {
+   return runtimeLocale.getLocale();
+  }
+  // please clear localStorage if you change the baseSeparator config
+  // because changing will break the app
+  const lang =
+    typeof localStorage !== 'undefined' && useLocalStorage
+      ? window.localStorage.getItem('umi_locale')
+      : '';
+  // support baseNavigator, default true
+  let browserLang;
+  {{#BaseNavigator}}
+  const isNavigatorLanguageValid =
+    typeof navigator !== 'undefined' && typeof navigator.language === 'string';
+  browserLang = isNavigatorLanguageValid
+    ? navigator.language.split('-').join('{{BaseSeparator}}')
+    : '';
+  {{/BaseNavigator}}
+  return lang || browserLang || {{{DefaultLocale}}};
+};
+
+
+/**
+ * 获取当前选择的方向
+ * @returns string
+ */
+export const getDirection = () => {
+  const lang = getLocale();
+  // array with all prefixs for rtl langueges ex: ar-EG , he-IL
+  const rtlLangs = ['he', 'ar', 'fa', 'ku']
+  const direction =  rtlLangs.filter(lng => lang.startsWith(lng)).length ? 'rtl' : 'ltr';
+  return direction;
+};
+
+/**
+ * 切换语言
+ * @param lang 语言的 key
+ * @param realReload 是否刷新页面，默认刷新
+ * @returns string
+ */
+export const setLocale = (lang: string, realReload: boolean = true) => {
+  //const { pluginManager } = useAppContext();
+  //const runtimeLocale = pluginManagerapplyPlugins({
+  //  key: 'locale',
+  //  type: ApplyPluginsType.modify,
+  //  initialValue: {},
+  //});
+
+  const updater = () => {
+    if (getLocale() !== lang) {
+      if (typeof window.localStorage !== 'undefined' && useLocalStorage) {
+        window.localStorage.setItem('umi_locale', lang || '');
+      }
+      setIntl(lang);
+      if (realReload) {
+        window.location.reload();
+      } else {
+        event.emit(LANG_CHANGE_EVENT, lang);
+        // chrome 不支持这个事件。所以人肉触发一下
+        if (window.dispatchEvent) {
+          const event = new Event('languagechange');
+          window.dispatchEvent(event);
+        }
+      }
+    }
+  }
+
+  //if (typeof runtimeLocale?.setLocale === 'function') {
+  //  runtimeLocale.setLocale({
+  //    lang,
+  //    realReload,
+  //    updater: updater,
+  //  });
+  //  return;
+  //}
+
+  updater();
+};
+
+let firstWaring = true;
+
+/**
+ * intl.formatMessage 的语法糖
+ * @deprecated 使用此 api 会造成切换语言的时候无法自动刷新，请使用 useIntl 或 injectIntl
+ * @param descriptor { id : string, defaultMessage : string }
+ * @param values { [key:string] : string }
+ * @returns string
+ */
+export const formatMessage: IntlShape['formatMessage'] = (
+  descriptor: MessageDescriptor,
+  values: any,
+) => {
+  if (firstWaring) {
+    warning(
+      false,
+      `Using this API will cause automatic refresh when switching languages, please use useIntl or injectIntl.
+
+使用此 api 会造成切换语言的时候无法自动刷新，请使用 useIntl 或 injectIntl。
+
+http://j.mp/37Fkd5Q
+      `,
+    );
+    firstWaring = false;
+  }
+  return g_intl.formatMessage(descriptor, values);
+};
+
+/**
+ * 获取语言列表
+ * @returns string[]
+ */
+export const getAllLocales = () => Object.keys(localeInfo);

package/libs/locale/runtime.tpl

@@ -0,0 +1,33 @@
+import React from 'react';
+// @ts-ignore
+import { _LocaleContainer } from './locale';
+{{#Title}}
+import { getIntl, getLocale } from './localeExports';
+{{/Title}}
+export function i18nProvider(container: Element) {
+  return React.createElement(_LocaleContainer, null, container);
+}
+
+{{#Title}}
+export function patchRoutes({ routes }) {
+  // loop all route for patch title field
+  const intl = getIntl(getLocale());
+  const traverseRoute = (routes) => {
+    Object.keys(routes).forEach((key) => {
+      const route = routes[key];
+      if (route.title) {
+        const newTitle = intl.messages[route.title] ? intl.formatMessage({ id: route.title }, {}) : route.title;
+        route.name = intl.messages[route.title] ? intl.formatMessage({ id: route.title }, {}) : route.name;
+        route.title = newTitle;
+      }
+      if (route.routes) {
+        traverseRoute(route.routes);
+      }
+      if (route.routes) {
+        traverseRoute(route.routes);
+      }
+    })
+  }
+  traverseRoute(routes);
+}
+{{/Title}}

package/libs/model.tsx

@@ -0,0 +1,140 @@
+// @ts-ignore
+import isEqual from 'fast-deep-equal';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+// @ts-ignore
+const Context = React.createContext<{ dispatcher: Dispatcher }>(null);
+
+class Dispatcher {
+  callbacks: Record<string, Set<Function>> = {};
+  data: Record<string, unknown> = {};
+  update = (namespace: string) => {
+    if (this.callbacks[namespace]) {
+      this.callbacks[namespace].forEach((cb) => {
+        try {
+          const data = this.data[namespace];
+          cb(data);
+        } catch (e) {
+          cb(undefined);
+        }
+      });
+    }
+  };
+}
+
+interface ExecutorProps {
+  hook: () => any;
+  onUpdate: (val: any) => void;
+  namespace: string;
+}
+
+function Executor(props: ExecutorProps) {
+  const { hook, onUpdate, namespace } = props;
+
+  const updateRef = useRef(onUpdate);
+  const initialLoad = useRef(false);
+
+  let data: any;
+  try {
+    data = hook();
+  } catch (e) {
+    console.error(
+      `plugin-model: Invoking '${namespace || 'unknown'}' model failed:`,
+      e,
+    );
+  }
+
+  // 首次执行时立刻返回初始值
+  useMemo(() => {
+    updateRef.current(data);
+  }, []);
+
+  // React 16.13 后 update 函数用 useEffect 包裹
+  useEffect(() => {
+    if (initialLoad.current) {
+      updateRef.current(data);
+    } else {
+      initialLoad.current = true;
+    }
+  });
+
+  return null;
+}
+
+const dispatcher = new Dispatcher();
+
+export function Provider(props: {
+  models: Record<string, any>;
+  children: React.ReactNode;
+}) {
+  return (
+    <Context.Provider value={{ dispatcher }}>
+      {Object.keys(props.models).map((namespace) => {
+        return (
+          <Executor
+            key={namespace}
+            hook={props.models[namespace]}
+            namespace={namespace}
+            onUpdate={(val) => {
+              dispatcher.data[namespace] = val;
+              dispatcher.update(namespace);
+            }}
+          />
+        );
+      })}
+      {props.children}
+    </Context.Provider>
+  );
+}
+
+export function useModel(namespace: string, selector?: any) {
+  const { dispatcher } = useContext<{ dispatcher: Dispatcher }>(Context);
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const [state, setState] = useState(() =>
+    selectorRef.current
+      ? selectorRef.current(dispatcher.data[namespace])
+      : dispatcher.data[namespace],
+  );
+  const stateRef = useRef<any>(state);
+  stateRef.current = state;
+
+  const isMount = useRef(false);
+  useEffect(() => {
+    isMount.current = true;
+    return () => {
+      isMount.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const handler = (data: any) => {
+      if (!isMount.current) {
+        // 如果 handler 执行过程中，组件被卸载了，则强制更新全局 data
+        // TODO: 需要加个 example 测试
+        setTimeout(() => {
+          dispatcher.data[namespace] = data;
+          dispatcher.update(namespace);
+        });
+      } else {
+        const currentState = selectorRef.current
+          ? selectorRef.current(data)
+          : data;
+        const previousState = stateRef.current;
+        if (!isEqual(currentState, previousState)) {
+          setState(currentState);
+        }
+      }
+    };
+
+    dispatcher.callbacks[namespace] ||= new Set();
+    dispatcher.callbacks[namespace].add(handler);
+    dispatcher.update(namespace);
+
+    return () => {
+      dispatcher.callbacks[namespace].delete(handler);
+    };
+  }, [namespace]);
+
+  return state;
+}

package/libs/qiankun/master/AntdErrorBoundary.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+/* eslint-disable */
+import { Button, Result } from 'antd';
+import React from 'react';
+import { getLocale } from 'umi';
+
+const defaultLocale = 'en-US';
+
+export const ErrorBoundary = ({ error }: { error: any }) => {
+  console.error(error);
+
+  const currentLocale = getLocale ? getLocale() : defaultLocale;
+
+  return (
+    <Result
+      status="500"
+      title={
+        currentLocale === defaultLocale
+          ? 'Whoops, something went wrong'
+          : '出错了'
+      }
+      subTitle={
+        currentLocale === defaultLocale
+          ? 'This page failed to load, please try again later'
+          : '页面加载失败，请稍后重试'
+      }
+      extra={
+        <Button type="primary" onClick={() => window.location.reload()}>
+          {currentLocale === defaultLocale ? 'Reload' : '再试一次'}
+        </Button>
+      }
+    />
+  );
+};

package/libs/qiankun/master/AntdLoader.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+/* eslint-disable */
+import { Spin } from 'antd';
+import React from 'react';
+
+export default function AntdLoader(props: { loading: boolean }) {
+  const { loading } = props;
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  };
+  return <Spin spinning={loading} size="large" style={style} />;
+}

package/libs/qiankun/master/ErrorBoundary.tsx

@@ -0,0 +1,7 @@
+// @ts-nocheck
+/* eslint-disable */
+import React from 'react';
+
+export const ErrorBoundary = ({ error }: { error: any }) => (
+  <div>{error?.message}</div>
+);