@xingtukeji/micro 1.0.0

package/index.ts

@@ -0,0 +1,268 @@
+import qs from 'qs'
+import { ref } from 'vue'
+
+export interface AppOption {
+  name: string
+  url: string
+  el?: HTMLElement | string
+  preload?: boolean
+  params?: { [key: string]: any }
+}
+export interface App extends AppOption {
+  instance: MicroApp
+}
+
+const _apps = []
+
+/**
+ * 判断是否在微应用中
+ */
+const _isMicro = ref(false)
+Object.defineProperty(window, '__XT_MICRO', {
+  get: function () {
+    return this.__XT_MICRO
+  },
+  set: function (newValue) {
+    _isMicro.value = newValue
+  },
+})
+export const isMicro = _isMicro
+
+//dom id前缀
+export const DOM_ID_PREFIX = 'xt-ifr-'
+
+/**
+ * 生成微应用id
+ * 增加前缀
+ * @param name 微应用名称（唯一）
+ * @returns 返回dom id
+ */
+const generateId = (name: string) => {
+  return `${DOM_ID_PREFIX}${name}`
+}
+/**
+ * 处理微应用url
+ * @param url 微应用url
+ * @param params 携带参数
+ * @returns 拼接后的url
+ */
+const generateURL = (url: string, params: { [key: string]: any } = {}) => {
+  function isObject(variable) {
+    return variable !== null && typeof variable === 'object' && !Array.isArray(variable)
+  }
+  const _parmas = typeof params === 'function' ? params() : isObject(params) ? params : {}
+  return `${url}?__XT_MICRO=true&${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.url, this.app.params)
+        ifr.src = url
+        ifr.classList.add('micro-iframe')
+        ifr.onload = this.onLoad.call(this)
+        // ifr.onunload = this.onUnload
+        ifr.onerror = this.onError
+        this.dom = ifr
+      }
+      // else {
+      //   ifr = this.dom
+      // }
+      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() {
+
+  }
+
+  onUnload() {
+
+  }
+
+  onError() {
+
+  }
+}
+
+/**
+ * 安装微应用
+ * @param app
+ */
+export const setupApp = (app: AppOption) => {
+  _postMicro()
+  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()
+      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, " "));
+}
+
+/**
+ * 微应用-子应用初始化
+ * 非必须，但建议使用
+ */
+export const microInit = () => {
+
+  //处理url参数
+  // const urlParams = new URLSearchParams(window.location.search)
+  // const micro = urlParams.get('__XT_MICRO')
+  const micro = getQueryParameter('__XT_MICRO')
+  //
+  if (micro) {
+    window['__XT_MICRO'] = true
+  }
+  //监听message，设置环境变量
+  window.addEventListener('message', (e) => {
+    //
+    if (e.data.cmd === '$xt/micro') {
+      //
+      window['__XT_MICRO'] = e.data.data
+    }
+  })
+}
+
+// window.postMessage({ cmd: '$xt/micro', data: true }, '*')
+
+const _postMicro = () => {
+  window.postMessage({ cmd: '$xt/micro', data: true }, '*')
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@xingtukeji/micro",
+  "version": "1.0.0",
+  "private": false,
+  "description": "",
+  "main": "index.ts",
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {}
+}