@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/master/masterRuntimePlugin.tsx

@@ -0,0 +1,153 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import { getPluginManager } from '@@/core/plugin';
+import { prefetchApps } from 'qiankun';
+import { ApplyPluginsType } from 'umi';
+import { insertRoute, noop, patchMicroAppRoute } from './common';
+import { getMicroAppRouteComponent } from './getMicroAppRouteComponent';
+import { getMasterOptions, setMasterOptions } from './masterOptions';
+import { MasterOptions, MicroAppRoute } from './types';
+import { deepFilterLeafRoutes } from './routeUtils';
+
+let microAppRuntimeRoutes: MicroAppRoute[];
+
+async function getMasterRuntime() {
+  const config = await getPluginManager().applyPlugins({
+    key: 'qiankunNew',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+    async: true,
+  });
+  const { master } = config;
+  return master || config;
+}
+
+// modify route with "microApp" attribute to use real component
+function patchMicroAppRouteComponent(routes: any[]) {
+  const insertRoutes = microAppRuntimeRoutes.filter(
+    (r) => r.insert || r.insertBefore || r.appendChildTo,
+  );
+  // 先处理 insert 配置
+  insertRoutes.forEach((route) => {
+    insertRoute(routes, route);
+  });
+
+  const getRootRoutes = (routes: any[]) => {
+    // 重定向根路由不能用作 microAppRuntimeRoutes 的父节点
+    const rootRoute = routes.find(
+      // 基于是否有 .to props 判断是否为 redirect
+      (route) => route.path === '/' && !route.element?.props?.to,
+    );
+    if (rootRoute) {
+      // 如果根路由是叶子节点，则直接返回其父节点
+      if (!rootRoute.children?.length) {
+        return routes;
+      }
+      return getRootRoutes(rootRoute.children);
+    }
+    return routes;
+  };
+
+  const rootRoutes = getRootRoutes(routes);
+  if (rootRoutes) {
+    const { routeBindingAlias, base, masterHistoryType } =
+      getMasterOptions() as MasterOptions;
+    microAppRuntimeRoutes.reverse().forEach((microAppRoute) => {
+      const patchRoute = (route: any) => {
+        patchMicroAppRoute(route, getMicroAppRouteComponent, {
+          base,
+          routePath: route.path,
+          masterHistoryType,
+          routeBindingAlias,
+        });
+        if (route.children?.length) {
+          route.children.forEach(patchRoute);
+        }
+      };
+
+      patchRoute(microAppRoute);
+      if (
+        !microAppRoute.insert &&
+        !microAppRoute.insertBefore &&
+        !microAppRoute.appendChildTo
+      ) {
+        rootRoutes.unshift(microAppRoute);
+      }
+    });
+  }
+}
+
+export async function render(oldRender: typeof noop) {
+  const runtimeOptions = await getMasterRuntime();
+  let masterOptions: MasterOptions = {
+    ...getMasterOptions(),
+    ...runtimeOptions,
+  };
+
+  const masterApps = masterOptions.apps || [];
+  const credentialsApps = masterApps.filter((app) => app.credentials);
+  if (credentialsApps.length) {
+    const defaultFetch = masterOptions.fetch || window.fetch;
+    const fetchWithCredentials = (url: string, init?: RequestInit) => {
+      // 如果当前 url 为 credentials 应用的 entry，则为其加上 cors 相关配置
+      if (credentialsApps.some((app) => app.entry === url)) {
+        return defaultFetch(url, {
+          ...init,
+          mode: 'cors',
+          credentials: 'include',
+        });
+      }
+      return defaultFetch(url, init);
+    };
+    // 设置新的 fetch
+    masterOptions = { ...masterOptions, fetch: fetchWithCredentials };
+  }
+
+  // 更新 master options
+  setMasterOptions(masterOptions);
+
+  const { apps = [], routes, ...options } = masterOptions;
+  microAppRuntimeRoutes = routes;
+
+  // 主应用相关的配置注册完毕后即可开启渲染
+  oldRender();
+
+  // 未使用 base 配置的可以认为是路由关联或者使用标签装载的应用
+  const loadableApps = apps.filter((app) => !app.base);
+  if (loadableApps.length) {
+    const { prefetch, ...importEntryOpts } = options;
+    if (prefetch === 'all') {
+      prefetchApps(loadableApps, importEntryOpts);
+    } else if (Array.isArray(prefetch)) {
+      const specialPrefetchApps = loadableApps.filter(
+        (app) => prefetch.indexOf(app.name) !== -1,
+      );
+      prefetchApps(specialPrefetchApps, importEntryOpts);
+    }
+  }
+
+  // 使用了 base 配置的应用为可注册应用
+  // 不再支持
+  const registrableApps = apps.filter((app) => app.base);
+  if (registrableApps.length) {
+    console.error(
+      '[plugins/qiankun] 检测到还在使用旧版配置，该配置已移除，请尽快升级到最新配置方式以获得更好的开发体验，详见 https://umijs.org/plugins/plugin-qiankun#%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97',
+    );
+  }
+}
+
+export function patchClientRoutes({ routes }: { routes: any[] }) {
+  const microAppRoutes = [].concat(
+    deepFilterLeafRoutes(routes),
+    deepFilterLeafRoutes(microAppRuntimeRoutes),
+  );
+  // 微应用的 routes 存到 masterOptions.microAppRoutes 下以供 MicroAppLink 使用
+  const masterOptions = getMasterOptions();
+  masterOptions.microAppRoutes = microAppRoutes;
+  setMasterOptions(masterOptions);
+
+  if (microAppRuntimeRoutes) {
+    patchMicroAppRouteComponent(routes);
+  }
+}

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/master/routeUtils.ts

@@ -0,0 +1,26 @@
+interface Route extends Record<string, any> {
+  children: Route[];
+  microApp?: string;
+}
+
+export function deepFilterLeafRoutes(routeTree: Route[]) {
+  if (!routeTree?.length) {
+    return [];
+  }
+
+  const leafRoutes: Route[] = [];
+
+  const findLeafRoutes = (routes: Route[]) => {
+    for (let i = 0; i < routes.length; i++) {
+      const r = routes[i];
+      if (r.children) {
+        findLeafRoutes(r.children);
+      }
+      leafRoutes.push(r);
+    }
+  };
+
+  findLeafRoutes(routeTree);
+
+  return leafRoutes.filter((r) => r.microApp);
+}

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/master/types.ts

@@ -0,0 +1,48 @@
+// @ts-nocheck
+/* eslint-disable */
+import { FrameworkConfiguration, FrameworkLifeCycles } from 'qiankun';
+
+type BaseIConfig = any;
+
+export type HistoryType = 'browser' | 'hash';
+export type App = {
+  name: string;
+  entry: string | { scripts: string[]; styles: string[] };
+  base?: string | string[];
+  history?: HistoryType;
+  // 取 entry 时是否需要开启跨域 credentials
+  credentials?: boolean;
+  props?: any;
+} & Partial<Pick<BaseIConfig, 'mountElementId'>>;
+
+export type MicroAppRoute = {
+  path: string;
+  microApp: string;
+} & Record<string, any>;
+
+export type MasterOptions = {
+  enable?: boolean;
+  apps?: App[];
+  routes?: MicroAppRoute[];
+  lifeCycles?: FrameworkLifeCycles<object>;
+  masterHistoryType?: HistoryType;
+  base?: string;
+  // 关联路由标记的别名，默认 microApp
+  routeBindingAlias?: string;
+  // 导出的组件别名，默认 MicroApp
+  exportComponentAlias?: string;
+  // MicroApp 寻址时使用的应用名唯一键，默认是 name
+  appNameKeyAlias?: string;
+  // 预加载应用阈值
+  prefetchThreshold?: number;
+} & FrameworkConfiguration;
+
+export type SlaveOptions = {
+  enable?: boolean;
+  devSourceMap?: boolean;
+  keepOriginalRoutes?: boolean | string;
+  shouldNotModifyRuntimePublicPath?: boolean;
+  shouldNotModifyDefaultBase?: boolean;
+  // library name 是否增加 -[name] 应对多 chunk 场景
+  shouldNotAddLibraryChunkName?: boolean;
+};

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/slave/MicroAppLink.tsx

@@ -0,0 +1,122 @@
+// @ts-nocheck
+/* eslint-disable */
+__USE_MODEL__;
+import React, {
+  forwardRef,
+  FC,
+  useImperativeHandle,
+  useRef,
+  MouseEvent,
+  HTMLAttributes,
+  useCallback,
+} from 'react';
+import noop from 'lodash/noop';
+import find from 'lodash/find';
+import {
+  qiankunStateFromMasterModelNamespace,
+  defaultHistoryType,
+} from './constants';
+
+const COMPONENT_NAME = 'qiankun-microapp-link';
+
+interface MicroAppLinkProps {
+  // 应用名称
+  name?: string;
+
+  // 相对路由，不包含应用前缀，以为 `/` 开头
+  to: string;
+
+  // 是否主应用下的路由，默认false
+  isMaster?: boolean;
+}
+
+const urlFactory =
+  (base: string, routes: Record<string, any>[]) =>
+  ({ name, to, isMaster }: MicroAppLinkProps) => {
+    if (isMaster) {
+      return to;
+    }
+
+    if (!to?.startsWith('/')) {
+      throw new Error(`[${COMPONENT_NAME}] props "to" should start with "/"`);
+    }
+
+    const app = find(routes, ({ microApp }) => microApp === name);
+    if (!app) {
+      console.error(`[${COMPONENT_NAME}] microapp "${name}" is not found`);
+      return to;
+    }
+
+    const prefix =
+      base === '/'
+        ? app.path.replace('/*', '')
+        : `${base}${app.path.replace('/*', '')}`;
+    return `${prefix}${to}`;
+  };
+
+export const MicroAppLink: FC<
+  MicroAppLinkProps & HTMLAttributes<HTMLAnchorElement>
+> = forwardRef((props, ref) => {
+  const { children, name, to, isMaster = false, ...anchorProps } = props;
+  const stateFromMaster = (useModel || noop)(
+    qiankunStateFromMasterModelNamespace,
+  );
+  const linkRef = useRef<HTMLAnchorElement>();
+
+  const {
+    masterHistoryType,
+    microAppRoutes,
+    base,
+    appNameKeyAlias = 'name',
+  } = stateFromMaster?.__globalRoutesInfo || {};
+  // ref: https://github.com/umijs/plugins/pull/866 基于 name 或 appNameKeyAlias 取到 appName 的逻辑
+  const appName =
+    name && props[appNameKeyAlias] ? name : props[appNameKeyAlias] || name;
+
+  const linkProps = { name: appName, to, isMaster };
+  const createHerf = urlFactory(base, microAppRoutes);
+
+  const linkUrl =
+    masterHistoryType === 'browser'
+      ? createHerf(linkProps)
+      : `#${createHerf(linkProps)}`;
+
+  useImperativeHandle(ref, () => linkRef.current);
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      if (anchorProps.onClick) {
+        return anchorProps.onClick(e);
+      }
+
+      // hash路由 使用 a标签 默认行为
+      if (masterHistoryType === 'hash') {
+        return;
+      }
+
+      if (masterHistoryType === 'browser') {
+        e?.stopPropagation();
+        e?.preventDefault();
+        return window.history.pushState({}, '', linkUrl);
+      }
+
+      console.error(
+        `[${COMPONENT_NAME}] not support "masterHistoryType = '${masterHistoryType}'"`,
+      );
+      return;
+    },
+    [anchorProps.onClick, masterHistoryType],
+  );
+
+  return (
+    <a
+      {...anchorProps}
+      ref={linkRef}
+      className={`${COMPONENT_NAME} ${anchorProps.className}`}
+      href={linkUrl}
+      onClick={handleClick}
+    >
+      {children}
+    </a>
+  );
+});

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/slave/connectMaster.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+__USE_MODEL__;
+import React from 'react';
+
+const noop = () => {};
+
+const connectMaster = <T extends object>(Component: React.ComponentType<T>) => {
+  return (props: T, ...rest: any[]) => {
+    const masterProps = (useModel || noop)('@@qiankunStateFromMaster') || {};
+    return <Component {...props} {...rest} {...masterProps} />;
+  };
+};
+
+export { connectMaster };

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/slave/constants.ts

@@ -0,0 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
+
+export const defaultHistoryType = 'browser';
+export const qiankunStateFromMasterModelNamespace = '@@qiankunStateFromMaster';

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/slave/lifecycles.ts

@@ -0,0 +1,164 @@
+// @ts-nocheck
+import { getPluginManager } from '@@/core/plugin';
+import ReactDOM from 'react-dom';
+import { ApplyPluginsType, __getRoot, history } from 'umi';
+import { setModelState } from './qiankunModel';
+
+const noop = () => {};
+
+type Defer = {
+  promise: Promise<any>;
+  resolve(value?: any): void;
+};
+
+// @ts-ignore
+const defer: Defer = {};
+defer.promise = new Promise((resolve) => {
+  defer.resolve = resolve;
+});
+
+let render = noop;
+let hasMountedAtLeastOnce = false;
+
+export default () => defer.promise;
+export const contextOptsStack: any[] = [];
+
+function normalizeHistory(
+  history?: 'string' | Record<string, any>,
+  base?: string,
+) {
+  let normalizedHistory: Record<string, any> = {};
+  if (base) normalizedHistory.basename = base;
+  if (history) {
+    if (typeof history === 'string') {
+      normalizedHistory.type = history;
+    } else {
+      normalizedHistory = history;
+    }
+  }
+
+  return normalizedHistory;
+}
+
+async function getSlaveRuntime() {
+  const config = await getPluginManager().applyPlugins({
+    key: 'qiankun',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+    async: true,
+  });
+  // 应用既是 master 又是 slave 的场景，运行时 slave 配置方式为 export const qiankun = { slave: {} }
+  const { slave } = config;
+  return slave || config;
+}
+
+export function genBootstrap(oldRender: typeof noop) {
+  return async (props: any) => {
+    const slaveRuntime = await getSlaveRuntime();
+    if (slaveRuntime.bootstrap) {
+      await slaveRuntime.bootstrap(props);
+    }
+    render = oldRender;
+  };
+}
+
+export function genMount(mountElementId: string) {
+  return async (props?: any) => {
+    // props 有值时说明应用是通过 lifecycle 被主应用唤醒的，而不是独立运行时自己 mount
+    if (typeof props !== 'undefined') {
+      setModelState(props);
+
+      const slaveRuntime = await getSlaveRuntime();
+      if (slaveRuntime.mount) {
+        await slaveRuntime.mount(props);
+      }
+
+      const { type, ...historyOpts } = normalizeHistory(
+        props?.history || {},
+        props?.base,
+      );
+
+      // 更新 clientRender 配置
+      const clientRenderOpts = {
+        callback: () => {
+          // 默认开启
+          // 如果需要手动控制 loading，通过主应用配置 props.autoSetLoading false 可以关闭
+          if (props.autoSetLoading && typeof props.setLoading === 'function') {
+            props.setLoading(false);
+          }
+
+          // 支持将子应用的 history 回传给父应用
+          if (typeof props?.onHistoryInit === 'function') {
+            props.onHistoryInit(history);
+          }
+        },
+        // 支持通过 props 注入 container 来限定子应用 mountElementId 的查找范围
+        // 避免多个子应用出现在同一主应用时出现 mount 冲突
+        rootElement:
+          props.container?.querySelector(`#${mountElementId}`) ||
+          document.getElementById(mountElementId),
+
+        basename: props.base,
+
+        // 支持 MicroAppWithMemoHistory 需要
+        historyType: type,
+        historyOpts: historyOpts,
+
+        // 当存在同一个 umi 子应用在同一个页面被多实例渲染的场景时（比如一个页面里，同时展示了这个子应用的多个路由页面）
+        // mount 钩子会被调用多次，但是具体什么时候对应的实例开始 render 则是不定的，即它调用 applyPlugins('modifyClientRenderOpts') 的时机是不确定的
+        // 为了保证每次 applyPlugins('modifyClientRenderOpts') 调用是生成正确的 history，我们需要这里通过闭包上下文维持 mount 调用时的一些配置信息
+        // FIXME 由于 umi history 是全局的，通过 import { history } from 'umi' 调用的永远都是最后一个调用 createHistory 产生的对象，所以这种场景下会存在子应用内部获取 history 时，获取到的是同一个 history 的问题。这种场景下就不能直接从 umi import history，而应该从组件的 props 中取
+        // getHistory() {
+        //   // 动态改变 history
+        //   const historyOptions = normalizeHistory(props.history, props.base);
+        //   setCreateHistoryOptions(historyOptions);
+        //
+        //   // FIXME 子应用嵌入模式下不支持热更
+        //   return createHistory();
+        // },
+      };
+
+      contextOptsStack.push(clientRenderOpts);
+    }
+
+    // 第一次 mount defer 被 resolve 后umi 会自动触发 render，非第一次 mount 则需手动触发
+    if (hasMountedAtLeastOnce) {
+      render();
+    } else {
+      defer.resolve();
+    }
+
+    hasMountedAtLeastOnce = true;
+  };
+}
+
+export function genUpdate() {
+  return async (props: any) => {
+    setModelState(props);
+    const slaveRuntime = await getSlaveRuntime();
+    if (slaveRuntime.update) {
+      await slaveRuntime.update(props);
+    }
+  };
+}
+
+export function genUnmount(mountElementId: string) {
+  return async (props: any) => {
+    const root = __getRoot();
+
+    // support react 18 unmount
+    if (typeof root?.unmount === 'function') {
+      root.unmount();
+    } else {
+      const container = props?.container
+        ? props.container.querySelector(`#${mountElementId}`)
+        : document.getElementById(mountElementId);
+      if (container) {
+        ReactDOM.unmountComponentAtNode(container);
+      }
+    }
+
+    const slaveRuntime = await getSlaveRuntime();
+    if (slaveRuntime.unmount) await slaveRuntime.unmount(props);
+  };
+}

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/slave/qiankunModel.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import { useState } from 'react';
+
+let initState: any;
+let setModelState = (val: any) => {
+  initState = val;
+};
+
+export default () => {
+  const [state, setState] = useState(initState);
+  setModelState = (val: any) => {
+    initState = val;
+    setState(val);
+  };
+  return state;
+};
+
+export { setModelState };

package/lib/templates/qiankun/cf-workbench-base/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import qiankunRender, { contextOptsStack } from './lifecycles';
+import { createHistory } from '@@/core/history';
+
+export function render(oldRender: any) {
+  return qiankunRender().then(oldRender);
+}
+
+export function modifyClientRenderOpts(memo: any) {
+  // 每次应用 render 的时候会调 modifyClientRenderOpts，这时尝试从队列中取 render 的配置
+  const clientRenderOpts = contextOptsStack.shift();
+  const { basename, historyType } = memo;
+
+  const newBasename = clientRenderOpts?.basename || basename;
+  const newHistoryType = clientRenderOpts?.historyType || historyType;
+
+  if (newHistoryType !== historyType || newBasename !== basename) {
+    clientRenderOpts.history = createHistory({
+      type: newHistoryType,
+      basename: newBasename,
+      ...clientRenderOpts.historyOpts,
+    });
+  }
+  return {
+    ...memo,
+    ...clientRenderOpts,
+    basename: newBasename,
+    historyType: newHistoryType,
+  };
+}

package/lib/templates/qiankun/cf-workbench-base/plugins/qiankun/constants.ts

@@ -0,0 +1,5 @@
+export const defaultMasterRootId = 'root-master';
+export const defaultHistoryType = 'browser';
+export const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
+export const qiankunStateFromMasterModelNamespace = '@@qiankunStateFromMaster';
+export const MODEL_EXPORT_NAME = 'useQiankunStateForSlave';