@xingtukeji/micro 1.0.1 → 1.0.3

package/index.ts

@@ -1,291 +0,0 @@
-import qs from 'qs'
-import { ref } from 'vue'
-
-export interface AppOption {
-  name: string
-  url: string
-  el?: HTMLElement | string
-  preload?: boolean
-  token?: ()=>string | string
-  params?: { [key: string]: any }
-}
-export interface App extends AppOption {
-  instance: MicroApp
-}
-
-const _apps = []
-const CONSTANT = {
-  KEY: '$xtm',  // 父应用注入子应用实例的key
-  IS_MICRO: '__XT_MICRO', // 是否在微应用中
-  MICRO_NAME: '__XT_MICRO_NAME',  // 微应用名称
-  MICRO_TOKEN: '__XT_MICRO_TOKEN', // 微应用token
-  MICRO_APP: '__XT_MICRO_APP', // 微应用实例
-  DOM_ID_PREFIX: 'xt-micro-ifr-'  // dom id前缀
-}
-//dom id前缀
-// export const DOM_ID_PREFIX = 'xt-ifr-'
-
-/**
- * 判断是否在微应用中
- */
-const _isMicro = ref(false)
-Object.defineProperty(window, CONSTANT.IS_MICRO, {
-  get: function () {
-    return _isMicro.value
-  },
-  set: function (newValue) {
-    _isMicro.value = newValue
-  }
-})
-export const isMicro = _isMicro
-
-/**
- * 生成微应用id
- * 增加前缀
- * @param name 微应用名称（唯一）
- * @returns 返回dom id
- */
-const generateId = (name: string) => {
-  return `${CONSTANT.DOM_ID_PREFIX}${name}`
-}
-/**
- * 处理微应用url
- * @param url 微应用url
- * @param params 携带参数
- * @returns 拼接后的url
- */
-const generateURL = (app: AppOption) => {
-  function isObject(variable) {
-    return variable !== null && typeof variable === 'object' && !Array.isArray(variable)
-  }
-  const _parmas = typeof app.params === 'function' ? app.params() : isObject(app.params) ? app.params : {}
-  const _token = typeof app.token === 'function' ? app.token() : isObject(app.token) ? app.token : {}
-  return `${app.url}?${CONSTANT.IS_MICRO}=true
-            &${CONSTANT.MICRO_NAME}=${app.name}
-            &${CONSTANT.MICRO_TOKEN}=${_token}
-            &${qs.stringify(_parmas)}`
-}
-
-class MicroApp {
-  app: App | AppOption
-  dom: HTMLIFrameElement
-  panel: HTMLElement
-
-  constructor(app: AppOption) {
-    this.app = app
-    app.preload && this.preload()
-    return this
-  }
-
-  mount(el: HTMLElement | string, isHide = false) {
-    let panel: HTMLElement | null
-    if (el) {
-      if (typeof el === 'string') {
-        panel = document.querySelector(el)
-      } else {
-        panel = el
-      }
-      //这里清空了容器的内容，为了方便，如果还有其他元素需要特别处理，而且也影响元素再复用
-      panel.innerHTML = ''
-    } else {
-      panel = document.body
-    }
-
-    if (panel) {
-      let ifr = <HTMLIFrameElement>document.getElementById(generateId(this.app.name))
-      if (!ifr) {
-        ifr = document.createElement('iframe')
-        ifr.id = generateId(this.app.name)
-        const url = generateURL(this.app)
-        ifr.src = url
-        ifr.classList.add('micro-iframe')
-        ifr.addEventListener('load', (event)=>{
-          this.onLoad.call(this, event)
-        })
-        ifr.addEventListener('error', this.onError)
-        ifr.addEventListener('unload', this.onUnload)
-        this.dom = ifr
-      }
-      isHide ? (ifr.style.display = 'none') : ifr.style.removeProperty('display')
-      this.panel = panel
-      panel.appendChild(ifr)
-      
-    } else {
-      throw new Error('el not found')
-    }
-  }
-
-  unmount() {
-    const appDom = document.getElementById(generateId(this.app.name))
-    if (appDom) {
-      if (this.preload) {
-        appDom.style.display = 'none'
-        document.body.appendChild(appDom)
-      } else {
-        this.panel.removeChild(appDom)
-      }
-    } else {
-      throw new Error('app dom not found')
-    }
-  }
-
-  /**
-   * 预加载渲染
-   * TODO 还差用户切走之后，如何将ifr还原回去，等待下次载入
-   * @param el 挂载dom对象
-   */
-  preloadRender(el: HTMLElement | string) {
-
-    let appDom: HTMLElement | null = this.dom
-    this.mount(el)
-
-    // const appDom = document.getElementById(generateId(this.app.name))
-    // if (!appDom) {
-    //
-    //   this.render(el)
-    //   return
-    // }
-    //
-    // let panel
-    // if (typeof el === 'string') {
-    //   panel = document.querySelector(el)
-    // } else {
-    //   panel = el
-    // }
-    // appDom!.style.removeProperty('display')
-    // panel?.appendChild(appDom)
-  }
-
-  /**
-   * 预加载app，先放到body，待启动时，挪过来
-   */
-  preload() {
-    this.mount(undefined, true)
-  }
-
-  changeOptions(options: Partial<AppOption>) {
-    this.app = {
-      ...this.app,
-      ...options,
-    }
-  }
-
-  onLoad(event: Event) {
-    console.log('micro app load', this, event)
-    _postMicro(this.app)
-  }
-
-  onUnload() {
-
-  }
-
-  onError() {
-
-  }
-}
-
-/**
- * 安装微应用
- * @param app
- */
-export const setupApp = (app: AppOption) => {
-  //在子应用加载完成后，发送消息给子应用
-  // setTimeout(() => {
-  //   _postMicro(app)
-  // },0)
-  return (_apps[app.name] = {
-    ...app,
-    instance: new MicroApp(app),
-  })
-}
-
-export const getApp = (name: string) => {
-  return _apps[name]
-}
-
-const setApp = (app: App, options?: Partial<AppOption>) => {
-  return (_apps[app.name] = {
-    ...app,
-    ...options,
-  })
-}
-
-/**
- * 启动微应用
- * @param name 应用名称
- * @param options 应用配置
- * @returns
- */
-export const startApp = (name: string, options?: Partial<AppOption>) => {
-  return new Promise((resolve, reject) => {
-    let app = getApp(name)
-    if (app) {
-      if (options) {
-        app.instance.changeOptions(options)
-        app = setApp(app, options)
-      }
-      if (app.preload) {
-        app.instance.preloadRender(app.el)
-      } else {
-        app.instance.mount(app.el)
-      }
-      // _postMicro(app)
-      resolve(app)
-    } else {
-      reject('app not found')
-    }
-  })
-}
-
-export const stopApp = (name: string) => {
-  let app = getApp(name)
-  if (app) {
-    app.instance.unmount()
-  }
-}
-
-function getQueryParameter(name, url = window.location.href) {
-  name = name.replace(/[\[\]]/g, "\\$&");
-  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-      results = regex.exec(url);
-  if (!results) return null;
-  if (!results[2]) return '';
-  return decodeURIComponent(results[2].replace(/\+/g, " "));
-}
-
-interface MicroInitOptions{
-  authHandler?: (token: string) => void
-}
-/**
- * 微应用-子应用初始化
- * 非必须，但建议使用
- */
-export const microInit = (options: MicroInitOptions = {}) => {
-  //处理url参数
-  const micro = getQueryParameter(CONSTANT.IS_MICRO)
-  const microName = getQueryParameter(CONSTANT.MICRO_NAME)
-  //设置环境变量
-  if (micro) {
-    window[CONSTANT.IS_MICRO] = true
-  }
-  //监听message，设置环境变量
-  window.addEventListener('message', (e) => {
-    if (e.data.cmd === `$xt/micro/${microName}`) {
-      console.log('micro', e.data.data)
-      window[CONSTANT.MICRO_APP] = e.data.data
-    }
-  })
-
-  //处理token
-  const token = getQueryParameter(CONSTANT.MICRO_TOKEN)
-  options.authHandler && options.authHandler(token)
-}
-
-const _postMicro = (app: AppOption) => {
-  window.postMessage({ cmd: `$xt/micro/${app.name}`, data: {
-    name: app.name,
-    url: app.url,
-    preload: app.preload,
-    // params: app.params
-  } }, '*')
-}