@umijs/plugins 4.0.0-beta.9 → 4.0.0-canary-20240513.3

package/templates/locale/locale.tpl

@@ -0,0 +1,82 @@
+import React from 'react';
+{{#Antd}}
+import { ConfigProvider } from 'antd';
+{{/Antd}}
+
+{{#MomentLocales.length}}
+import moment from '{{{momentPkgPath}}}';
+{{#MomentLocales}}
+import '{{{momentPkgPath}}}/locale/{{.}}';
+{{/MomentLocales}}
+{{/MomentLocales.length}}
+import { RawIntlProvider, getLocale, getDirection , setIntl, getIntl, localeInfo, event, LANG_CHANGE_EVENT } from './localeExports';
+
+{{#DefaultAntdLocales}}
+import {{NormalizeAntdLocalesName}} from '{{{.}}}';
+{{/DefaultAntdLocales}}
+
+
+
+export function _onCreate() {
+  const locale = getLocale();
+  {{#MomentLocales.length}}
+  if (moment?.locale) {
+    moment.locale(localeInfo[locale]?.momentLocale || '{{{DefaultMomentLocale}}}');
+  }
+  {{/MomentLocales.length}}
+  setIntl(locale);
+}
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+    ? React.useLayoutEffect
+    : React.useEffect
+
+export const _LocaleContainer = (props:any) => {
+    const initLocale = getLocale();
+    const [locale, setLocale] = React.useState(initLocale);
+  const [intl, setContainerIntl] = React.useState(() => getIntl(locale, true));
+
+  const handleLangChange = (locale:string) => {
+    {{#MomentLocales.length}}
+    if (moment?.locale) {
+      moment.locale(localeInfo[locale]?.momentLocale || 'en');
+    }
+    {{/MomentLocales.length}}
+    setLocale(locale);
+    setContainerIntl(getIntl(locale));
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    event.on(LANG_CHANGE_EVENT, handleLangChange);
+    {{#Title}}
+    // avoid reset route title
+    if (typeof document !== 'undefined' && intl.messages['{{.}}']) {
+      document.title = intl.formatMessage({ id: '{{.}}' });
+    }
+    {{/Title}}
+    return () => {
+      event.off(LANG_CHANGE_EVENT, handleLangChange);
+    };
+  }, []);
+
+  {{#Antd}}
+  const defaultAntdLocale = {
+    {{#DefaultAntdLocales}}
+    ...{{NormalizeAntdLocalesName}},
+    {{/DefaultAntdLocales}}
+  }
+  const direction = getDirection();
+
+  return (
+    <ConfigProvider  direction={direction} locale={localeInfo[locale]?.antd || defaultAntdLocale}>
+      <RawIntlProvider value={intl}>{props.children}</RawIntlProvider>
+    </ConfigProvider>
+  )
+  {{/Antd}}
+  {{^Antd}}
+  return <RawIntlProvider value={intl}>{props.children}</RawIntlProvider>;
+  {{/Antd}}
+};

package/templates/locale/localeExports.tpl

@@ -0,0 +1,307 @@
+import {
+  createIntl,
+  IntlShape,
+  MessageDescriptor,
+} from '{{{ reactIntlPkgPath }}}';
+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}}
+
+const flattenMessages=(
+  nestedMessages: Record<string, any>,
+  prefix = '',
+) => {
+  return Object.keys(nestedMessages).reduce(
+    (messages: Record<string, any>, key) => {
+      const value = nestedMessages[key];
+      const prefixedKey = prefix ? `${prefix}.${key}` : key;
+      if (typeof value === 'string') {
+        messages[prefixedKey] = value;
+      } else {
+        Object.assign(messages, flattenMessages(value, prefixedKey));
+      }
+      return messages;
+    },
+    {},
+  );
+}
+
+export const localeInfo: {[key: string]: any} = {
+  {{#LocaleList}}
+  '{{name}}': {
+    messages: {
+      {{#paths}}...flattenMessages(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: import('antd/es/locale').Locale
+  },
+) => {
+  if (!name) {
+    return;
+  }
+  // 可以合并
+  const mergeMessages = localeInfo[name]?.messages
+    ? Object.assign({}, localeInfo[name].messages, messages)
+    : messages;
+
+  // 用户只是追加 messages 时，extraLocales 可选
+  const { momentLocale = localeInfo[name]?.momentLocale, antd = localeInfo[name]?.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);
+  }
+};
+
+const applyRuntimeLocalePlugin = (initialValue: any) => {
+  return getPluginManager().applyPlugins({
+    key: 'locale',
+    type: 'modify',
+    initialValue
+  });
+}
+
+const _createIntl = (locale: string) => {
+    const runtimeLocale = applyRuntimeLocalePlugin(localeInfo[locale]);
+    const { cache, ...config } = runtimeLocale;
+    return createIntl(config, cache);
+}
+
+/**
+ * 获取当前的 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;
+  }
+  // 获取当前 locale
+  if (!locale) locale = getLocale();
+  // 如果存在于 localeInfo 中
+  if (locale&&localeInfo[locale]) {
+    return _createIntl(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({{{ 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 = applyRuntimeLocalePlugin({});
+  // 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 =
+      navigator.cookieEnabled && 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',
+  //  workaround: 不使用 ApplyPluginsType.modify 是为了避免循环依赖，与 fast-refresh 一起用时会有问题
+  //  type: 'modify',
+  //  initialValue: {},
+  //});
+
+  const updater = () => {
+    if (getLocale() !== lang) {
+       if (navigator.cookieEnabled && 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;
+  }
+  if (!g_intl) {
+    setIntl(getLocale());
+  }
+  return g_intl.formatMessage(descriptor, values);
+};
+
+/**
+ * 获取语言列表
+ * @returns string[]
+ */
+export const getAllLocales = () => Object.keys(localeInfo);

package/templates/locale/runtime.tpl

@@ -0,0 +1,34 @@
+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) {
+        route.locale = 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.children) {
+        traverseRoute(route.children);
+      }
+    })
+  }
+  traverseRoute(routes);
+}
+{{/Title}}

package/templates/mf/runtime.ts.tpl

@@ -0,0 +1,149 @@
+import { lazy, Suspense } from 'react'
+import type { Component, ReactNode } from 'react'
+const remotes = {
+{{{ remoteCodeString }}}
+};
+const scriptLoadedMap: Record<string, Promise<void> | 0 | undefined> = {};
+
+type MFModuleImportRequest = { entry: string; remoteName: string; moduleName: string; }
+type MFModuleRegisterRequest = { entry: string; remoteName: string; aliasName?:string; }
+
+export async function rawMfImport(opts: MFModuleImportRequest) {
+  await loadRemoteScriptWithCache(opts.remoteName, opts.entry);
+  return getRemoteModule(opts.remoteName, opts.moduleName);
+}
+
+export function registerMfRemote (opts: MFModuleRegisterRequest) {
+  const aliasName = opts.aliasName || opts.remoteName;
+  if( remotes[aliasName] ){
+    return console.warn(`registerMfRemote: ${aliasName} is already registered as`, remotes[aliasName]);
+  }
+  remotes[aliasName] ={
+    ...opts,
+    aliasName,
+  }
+}
+
+export async function safeMfImport(moduleSpecifier: any, fallback: any) {
+  try {
+    const i = moduleSpecifier.indexOf('/');
+    if (i < 0) {
+      console.error(
+        `safeMfImport: bad Module Name ${moduleSpecifier}, should match pattern 'remote/moduleName'`,
+        moduleSpecifier,
+      );
+
+      return fallback;
+    }
+
+    const aliasName = moduleSpecifier.slice(0, i);
+    const module = moduleSpecifier.slice(i + 1);
+    const entry = remotes[aliasName]?.entry;
+    const remoteName = remotes[aliasName]?.remoteName;
+
+    if(!entry){
+      console.error(
+        `safeMfImport: bad Module Name ${moduleSpecifier}, no remote for "aliasName"`,
+        moduleSpecifier,
+      );
+      return fallback;
+    }
+
+    await loadRemoteScriptWithCache(remoteName, entry);
+
+    return getRemoteModule(remoteName, module);
+  } catch (e) {
+    console.error('safeMfImport: Module', moduleSpecifier, 'failed', e);
+    return fallback;
+  }
+}
+
+async function loadScript(url): Promise<void> {
+  const element = document.createElement('script');
+  element.src = url;
+  element.type = 'text/javascript';
+  element.async = true;
+
+  const loadScriptQ = new Promise<void>((resolve, reject) => {
+    element.onload = () => {
+      document.head.removeChild(element);
+      resolve();
+    };
+    element.onerror = (e) => {
+      document.head.removeChild(element);
+      reject(e);
+    };
+  });
+  document.head.appendChild(element);
+
+  return loadScriptQ;
+}
+
+async function getRemoteModule(remoteName:string, moduleName: string): any {
+  // @ts-ignore
+  await __webpack_init_sharing__('default');
+  const container = window[remoteName]; // or get the container somewhere else
+  // Initialize the container, it may provide shared modules
+  // @ts-ignore
+  await container.init(__webpack_share_scopes__.default);
+  // @ts-ignore
+  const factory = await window[remoteName].get(`./${moduleName}`);
+  return factory();
+}
+
+async function loadRemoteScriptWithCache(remoteName:string, url: string): Promise<void> {
+
+  const loadCache = scriptLoadedMap[remoteName];
+  let scriptLoadQ: Promise<void> | null = null;
+
+  if(loadCache === 0){
+    // script Already loaded
+    return;
+  } else if(loadCache) {
+    await loadCache
+  }else{
+    let p = loadScript(url).then(()=>{
+      scriptLoadedMap[remoteName] = 0;
+    },(e)=>{
+      scriptLoadedMap[remoteName] = undefined;
+      throw e;
+    });
+    scriptLoadedMap[remoteName] = p;
+    await p;
+  }
+}
+
+type SafeRemoteComponentOpts ={
+  moduleSpecifier:string;
+  fallbackComponent: ComponentType<any>;
+  loadingElement: ReactNode
+}
+
+export function safeRemoteComponent<T extends ComponentType<any>>(opts: SafeRemoteComponentOpts): T {
+  const Lazy = lazy<T>(()=>safeMfImport(opts.moduleSpecifier, { default: opts.fallbackComponent }));
+  return (props)=> (<Suspense fallback={opts.loadingElement}>
+     <Lazy {...props} />
+  </Suspense>)
+}
+
+type RawRemoteComponentOpts ={
+  mfConfig:{
+    entry:string;
+    remoteName: string;
+    moduleName: string;
+  };
+  fallbackComponent: ComponentType<any>;
+  loadingElement: ReactNode;
+}
+
+export function safeRemoteComponentWithMfConfig<T extends ComponentType<any>>(opts: RawRemoteComponentOpts): T {
+  const Lazy = lazy<T>(()=>{
+    return rawMfImport(opts.mfConfig)
+      .catch(()=>{
+        return { default: opts.fallbackComponent };
+      })
+  })
+  return (props)=> (<Suspense fallback={opts.loadingElement}>
+     <Lazy {...props} />
+  </Suspense>)
+}

package/dist/icons.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = (api) => {
-    api;
-};

package/dist/sass.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = (api) => {
-    api;
-};