mf-lifecycle

组件说明

mf 整个加载过程的生命周期。

API

  /**
   * 注册单个 mf 应用
   *
   * @param {string} scope
   * @returns
   * @memberof MF
   */
  registerApp(scope: string)

  /**
   * 注册所有的 mf 应用
   *
   * @param {string[]} scopes
   * @returns
   * @memberof MF
   */
  registerAllApps (scopes: string[])

  /**
   * 获取所有的 mf 应用
   *
   * @returns {string[]}
   * @memberof MF
   */
  getAllApps (): string[]

  /**
   * 获取 mf 装载包裹函数
   *
   * @param {string} scope
   * @returns {(TRemoteParcel | undefined)}
   * @memberof MF
   */
  mountParcel (scope: string): TRemoteParcel | undefined

  /**
   * mf 应用注册函数，全局执行一次
   *
   * @param {(TStartOpts | (() => Promise<TStartOpts>))} opts
   * @param {string[]} opts.preFetchApps 预加载 mf
   * @param {IAppStoreModule} opts.globalData 全局数据
   * @param {string} opts.startModule 启动模块名称
   * @param {string} opts.remoteConfig 模块联邦配置
   * @memberof MF
   */
  start (opts: TStartOpts | (() => Promise<TStartOpts>))

  /**
   * 懒加载 mf 组件
   *
   * @param {(() => Promise<T>)} ctor 接受一个函数，这个函数需要动态调用 mf.import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 mf 组件
   * @returns
   * @memberof MF
   */
  lazy<T = any> (ctor: () => Promise<T>)

  /**
   * 预加载
   *
   * @param {string[]} scopes 模块联邦名称
   * @param {(scope: string) => Promise<null>} [preFetchCallback] 加载完成的回调函数
   * @memberof MF
   */
  prefetch (scopes: string[], preFetchCallback?: (parcel: TRemoteParcel) => Promise<null>)

  /**
   * 异步加载 mf 组件
   *
   * @param options 参数对象
   * @param options.component vue 组件
   * @param options.props vue 组件的 props 定义
   * @param options.factory 获取 vue 组件的实例对象，默认取 default export
   * @param options.loading loading 组件
   * @param options.delay 延迟显示 loading 组件，默认 200ms
   * @param options.error error 组件
   * @param options.timeout 超时显示 error 组件，默认 20000ms
   * @param options.waiting 等待指定的时间之后再渲染组件，单位ms
   * @returns 
   */
  export const defineAsyncComponent = (options: IAsyncComponentOptions)

使用方式

<script lang="ts">
import { MF } from 'mf-lifecycle'

const lifeCycles = {
  // beforeLoad: async (mfApp) => {
  //   console.log(`[___LiuSha_MF___]: mf ${mfApp.scope} beforeLoad`)
  // },
  // afterLoad: async (mfApp) => {
  //   console.log(`[___LiuSha_MF___]: mf ${mfApp.scope} afterLoad`)
  // }
}
const mf = new MF('___LiuSha_MF___', lifeCycles)

mf.start({
  preFetchApps: [],
  globalData: store.state,
  remoteConfig: {}
})

@Component({
  components: {
    MyAppPanelContent: MF.lazy(() => mf.import('my_app/Panel'))
  }
})