@umijs/plugins 4.0.0-beta.13 → 4.0.0-beta.14

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/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>
+);

package/libs/qiankun/master/MicroApp.tsx

@@ -0,0 +1,262 @@
+// @ts-nocheck
+/* eslint-disable */
+__USE_MODEL__;
+import concat from 'lodash/concat';
+import mergeWith from 'lodash/mergeWith';
+import noop from 'lodash/noop';
+import {
+  FrameworkConfiguration,
+  loadMicroApp,
+  MicroApp as MicroAppType,
+  prefetchApps,
+} from 'qiankun';
+import React, {
+  forwardRef,
+  Ref,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { ErrorBoundary } from './ErrorBoundary';
+import { getMasterOptions } from './masterOptions';
+import MicroAppLoader from './MicroAppLoader';
+import { MasterOptions } from './types';
+
+const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
+
+type HashHistory = {
+  type?: 'hash';
+} & any;
+
+type BrowserHistory = {
+  type?: 'browser';
+} & any;
+
+type MemoryHistory = {
+  type?: 'memory';
+} & any;
+
+export type Props = {
+  name: string;
+  settings?: FrameworkConfiguration;
+  base?: string;
+  history?:
+    | 'hash'
+    | 'browser'
+    | 'memory'
+    | HashHistory
+    | BrowserHistory
+    | MemoryHistory;
+  getMatchedBase?: () => string;
+  loader?: (loading: boolean) => React.ReactNode;
+  errorBoundary?: (error: any) => React.ReactNode;
+  onHistoryInit?: (history: any) => void;
+  autoSetLoading?: boolean;
+  autoCaptureError?: boolean;
+  // 仅开启 loader 时需要
+  wrapperClassName?: string;
+  className?: string;
+} & Record<string, any>;
+
+function unmountMicroApp(microApp?: MicroAppType) {
+  if (microApp) {
+    microApp.mountPromise.then(() => microApp.unmount());
+  }
+}
+
+let noneMounted = true;
+
+export const MicroApp = forwardRef(
+  (componentProps: Props, componentRef: Ref<MicroAppType>) => {
+    const {
+      masterHistoryType,
+      apps = [],
+      lifeCycles: globalLifeCycles,
+      prefetch = true,
+      ...globalSettings
+    } = getMasterOptions() as MasterOptions;
+
+    const {
+      name,
+      settings: settingsFromProps = {},
+      loader,
+      errorBoundary,
+      lifeCycles,
+      wrapperClassName,
+      className,
+      ...propsFromParams
+    } = componentProps;
+
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<any>(null);
+    // 未配置自定义 errorBoundary 且开启了 autoCaptureError 场景下，使用插件默认的 errorBoundary，否则使用自定义 errorBoundary
+    const microAppErrorBoundary =
+      errorBoundary ||
+      (propsFromParams.autoCaptureError
+        ? (e) => <ErrorBoundary error={e} />
+        : null);
+
+    // 配置了 errorBoundary 才改 error 状态，否则直接往上抛异常
+    const setComponentError = (error: any) => {
+      if (microAppErrorBoundary) {
+        setError(error);
+        // error log 出来，不要吞
+        if (error) {
+          console.error(error);
+        }
+      } else if (error) {
+        throw error;
+      }
+    };
+
+    const containerRef = useRef<HTMLDivElement>();
+    const microAppRef = useRef<MicroAppType>();
+    const updatingPromise = useRef<Promise<any>>();
+    const updatingTimestamp = useRef(Date.now());
+
+    useImperativeHandle(componentRef, () => microAppRef.current);
+
+    const appConfig = apps.find((app: any) => app.name === name);
+    useEffect(() => {
+      if (!appConfig) {
+        setComponentError(
+          new Error(
+            `[@umijs/plugin-qiankun]: Can not find the configuration of ${name} app!`,
+          ),
+        );
+      }
+      return noop;
+    }, []);
+
+    // 约定使用 src/app.ts/useQiankunStateForSlave 中的数据作为主应用透传给微应用的 props，优先级高于 propsFromConfig
+    const stateForSlave = (useModel || noop)(
+      qiankunStateForSlaveModelNamespace,
+    );
+    const { entry, props: propsFromConfig = {} } = appConfig || {};
+
+    useEffect(() => {
+      setComponentError(null);
+      setLoading(true);
+      const configuration = {
+        globalContext: window,
+        ...globalSettings,
+        ...settingsFromProps,
+      };
+      microAppRef.current = loadMicroApp(
+        {
+          name,
+          entry,
+          container: containerRef.current!,
+          props: {
+            ...propsFromConfig,
+            ...stateForSlave,
+            ...propsFromParams,
+            setLoading,
+          },
+        },
+        configuration,
+        mergeWith({}, globalLifeCycles, lifeCycles, (v1, v2) =>
+          concat(v1 ?? [], v2 ?? []),
+        ),
+      );
+
+      // 当配置了 prefetch true 时，在第一个应用 mount 完成之后，再去预加载其他应用
+      if (prefetch && prefetch !== 'all' && noneMounted) {
+        microAppRef.current?.mountPromise.then(() => {
+          if (noneMounted) {
+            if (Array.isArray(prefetch)) {
+              const specialPrefetchApps = apps.filter(
+                (app) => app.name !== name && prefetch.indexOf(app.name) !== -1,
+              );
+              prefetchApps(specialPrefetchApps, configuration);
+            } else {
+              const otherNotMountedApps = apps.filter(
+                (app) => app.name !== name,
+              );
+              prefetchApps(otherNotMountedApps, configuration);
+            }
+            noneMounted = false;
+          }
+        });
+      }
+
+      (['loadPromise', 'bootstrapPromise', 'mountPromise'] as const).forEach(
+        (key) => {
+          const promise = microAppRef.current?.[key];
+          promise.catch((e) => {
+            setComponentError(e);
+            setLoading(false);
+          });
+        },
+      );
+
+      return () => unmountMicroApp(microAppRef.current);
+    }, [name]);
+
+    useEffect(() => {
+      const microApp = microAppRef.current;
+      if (microApp) {
+        if (!updatingPromise.current) {
+          // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后
+          updatingPromise.current = microApp.mountPromise;
+        } else {
+          // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成
+          updatingPromise.current = updatingPromise.current.then(() => {
+            const canUpdate = (microApp?: MicroAppType) =>
+              microApp?.update && microApp.getStatus() === 'MOUNTED';
+            if (canUpdate(microApp)) {
+              const props = {
+                ...propsFromConfig,
+                ...stateForSlave,
+                ...propsFromParams,
+                setLoading,
+              };
+
+              if (process.env.NODE_ENV === 'development') {
+                if (Date.now() - updatingTimestamp.current < 200) {
+                  console.warn(
+                    `[@umijs/plugin-qiankun] It seems like microApp ${name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.`,
+                  );
+                }
+
+                console.info(
+                  `[@umijs/plugin-qiankun] MicroApp ${name} is updating with props: `,
+                  props,
+                );
+                updatingTimestamp.current = Date.now();
+              }
+
+              // 返回 microApp.update 形成链式调用
+              // @ts-ignore
+              return microApp.update(props);
+            }
+
+            return void 0;
+          });
+        }
+      }
+
+      return noop;
+    }, Object.values({ ...stateForSlave, ...propsFromParams }));
+
+    // 未配置自定义 loader 且开启了 autoSetLoading 场景下，使用插件默认的 loader，否则使用自定义 loader
+    const microAppLoader =
+      loader ||
+      (propsFromParams.autoSetLoading
+        ? (loading) => <MicroAppLoader loading={loading} />
+        : null);
+
+    return Boolean(microAppLoader) || Boolean(microAppErrorBoundary) ? (
+      <div style={{ position: 'relative' }} className={wrapperClassName}>
+        {Boolean(microAppLoader) && microAppLoader(loading)}
+        {Boolean(microAppErrorBoundary) &&
+          Boolean(error) &&
+          microAppErrorBoundary(error)}
+        <div ref={containerRef} className={className} />
+      </div>
+    ) : (
+      <div ref={containerRef} className={className} />
+    );
+  },
+);

package/libs/qiankun/master/MicroAppWithMemoHistory.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { MicroApp, Props as MicroAppProps } from './MicroApp';
+
+export interface Props extends MicroAppProps {
+  history?: never;
+}
+
+export function MicroAppWithMemoHistory(componentProps: Props) {
+  const { url, ...rest } = componentProps;
+  const history = useRef();
+  // url 的变更不会透传给下游，组件内自己会处理掉，所以这里直接用 ref 来存
+  const historyOpts = useRef({
+    type: 'memory',
+    initialEntries: [url],
+    initialIndex: 1,
+  });
+  const historyInitHandler = useCallback((h) => (history.current = h), []);
+
+  useEffect(() => {
+    // push history for slave app when url property changed
+    // the initial url will be ignored because the history has not been initialized
+    if (history.current && url) {
+      history.current.push(url);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    // reset the history when name changed
+    historyOpts.current.initialEntries = [url];
+    historyOpts.current.initialIndex = 1;
+  }, [componentProps.name]);
+
+  return (
+    <MicroApp
+      {...rest}
+      history={historyOpts.current}
+      onHistoryInit={historyInitHandler}
+    />
+  );
+}