@xingtukeji/micro 1.0.1 → 1.0.3

package/src/parent.ts

@@ -0,0 +1,268 @@
+import { ref } from 'vue'
+import {AppOption, App} from './index.d'
+import {CONSTANT} from './types'
+import {getQueryParameter, addOrReplaceUrlParam, getAbsolutePath} from './utils'
+
+/**
+ * 判断是否在微应用中
+ */
+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: unknown) {
+    return variable !== null && typeof variable === 'object' && !Array.isArray(variable)
+  }
+  // 获取params参数
+  const _parmas = typeof app.params === 'function' ? app.params() : isObject(app.params) ? app.params : {}
+  // 获取token参数
+  const _token = typeof app.token === 'function' ? app.token() : isObject(app.token) ? app.token : ''
+  // 创建URL对象
+  const url = new URL(app.url.indexOf('http') > -1 ? app.url : window.location.origin + app.url)
+  // 获取microBakUrl参数
+  const microBakUrl = getQueryParameter(app.name)
+  // 如果microBakUrl存在
+  if(microBakUrl){
+    // 获取绝对路径
+    const temp = getAbsolutePath(microBakUrl, app.url, true)
+    // 如果绝对路径存在
+    if(temp){
+      // 创建URL对象
+      const tempURL = new URL(temp);
+      // 获取searchParams参数
+      const tempSearchParams = tempURL.searchParams
+      // 遍历searchParams参数
+      tempSearchParams.forEach((value, key) => {
+        // 设置url的searchParams参数
+        url.searchParams.set(key, value)
+      })
+      // 设置url的hash参数
+      url.hash = tempURL.hash
+    }
+  }
+
+  // 设置url的searchParams参数
+  url.searchParams.set(CONSTANT.IS_MICRO, true+'')
+  url.searchParams.set(CONSTANT.MICRO_NAME, app.name)
+  _token && url.searchParams.set(CONSTANT.MICRO_TOKEN, _token)
+
+  if(_parmas){
+    // 设置url的searchParams参数
+    for(let key of Object.keys(_parmas)){
+      url.searchParams.set(key, _parmas[key])
+    }
+  }
+
+  // 清空主路由上的子应用路由sync参数
+  const mainURL = new URL(window.location.href)
+  mainURL.searchParams.delete(app.name)
+  window.history.replaceState({}, '', mainURL.href)
+  // 返回url的href属性
+  return url.href
+}
+
+export class MicroApp {
+  app: App | AppOption
+  dom: HTMLIFrameElement | undefined
+  panel: HTMLElement | undefined
+
+  constructor(app: AppOption) {
+    this.app = app
+    app.preload && this.preload()
+    this.dom = undefined
+    this.panel = undefined
+    return this
+  }
+
+  mount(el: HTMLElement | string | undefined, 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.app.preload) {
+        // 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 | undefined) {
+    // let appDom: HTMLElement | undefined = 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('子应用 onload', this.app.name)
+    // console.log('onLoad',this.app, this.panel, this.dom)
+    // if(this.dom){
+    //   const headerDom = this.dom.contentWindow.document.querySelector('._hedaui-header')
+    //   headerDom && (headerDom.style.display = 'none')
+    // }
+
+    //监听message，设置环境变量
+    // console.log('window', window['__XT_MICRO'])
+    // window.addEventListener('message', (e) => {
+    //   console.log('1111', this.app.name, window.document)
+    //   if (e.data.cmd === `$xt/micro/${this.app.name}`) {
+    //     // console.log('micro', e.data.data)
+    //     window[CONSTANT.MICRO_APP] = e.data.data
+    //     const headerDom = document.querySelector('._hedaui-header')
+    //     headerDom && (headerDom.style.display = 'none')
+    //   }
+    // })
+    _postMicro(this)
+  }
+
+  onUnload(_event: Event) {}
+
+  onError() {}
+}
+
+
+
+
+
+/**
+ * 父应用给子应用发送消息
+ * @param app 微应用对象
+ */
+const _postMicro = (app: MicroApp) => {
+  // console.log(`父应用给子应用「${app.app.name}」发送消息`, app.dom)
+  app.dom?.contentWindow?.postMessage(
+    {
+      cmd: `$xt/micro/${app.app.name}`,
+      data: {
+        name: app.app.name,
+        url: app.app.url,
+        preload: app.app.preload,
+        sync: app.app.sync || true
+        // params: app.params
+      },
+    },
+    '*'
+  )
+}
+
+
+
+/**
+ * 初始化主应用微前端
+ */
+export const mainMicroInit = () => {
+  // 监听window对象的消息事件
+  window.addEventListener('message', (e)=>{
+    // 同步子应用路由到主应用上
+    if (e.data.cmd === '$xt/micro/sync') {
+      // 过滤掉微应用的默认参数
+      const whitelist = [CONSTANT.IS_MICRO, CONSTANT.MICRO_NAME, CONSTANT.MICRO_TOKEN]
+      const tempUrl = new URL(window.decodeURIComponent(e.data.data.url), e.origin)
+      for(let key of whitelist){
+        tempUrl.searchParams.delete(key)
+      }
+      console.log('tempUrl', tempUrl.href)
+      // 调用addOrReplaceUrlParam函数，将e.data.data.name和e.data.data.url作为参数传入
+      const curUrl = addOrReplaceUrlParam(window.location.href, e.data.data.name, tempUrl.href)
+      // 使用replaceState方法替换当前页面的URL
+      window.history.replaceState(null, "", curUrl);
+    }
+  })
+}

package/src/types.ts

@@ -0,0 +1,8 @@
+export const CONSTANT: Record<string, string> = {
+  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前缀
+}

package/src/utils.ts

@@ -0,0 +1,94 @@
+// 获取URL中的查询参数
+// 导出一个函数，用于获取查询参数
+export function getQueryParameter(name: string, url = window.location.href): string | null {
+  // 将参数名中的中括号替换为转义字符
+  name = name.replace(/[\[\]]/g, '\\$&')
+  // 创建正则表达式，匹配查询参数
+  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+    results = regex.exec(url)
+  // 如果没有匹配到查询参数，返回null
+  if (!results) return null
+  // 如果没有匹配到参数值，返回空字符串
+  if (!results[2]) return ''
+  // 对参数值进行解码，并去除首尾空格
+  return decodeURIComponent(results[2].replace(/\+/g, ' ')).trim()
+}
+
+// 导出一个函数，用于获取绝对路径
+export function getAbsolutePath(url: string|undefined, base: string, hash?: boolean): string | undefined {
+  try {
+    // 为空值无需处理
+    if (url) {
+      // 需要处理hash的场景
+      if (hash && url.startsWith("#")) return url;
+      return new URL(url, base).href;
+    } else return url;
+  } catch {
+    return url;
+  }
+}
+
+// 导出一个函数，用于生成一个HTMLAnchorElement元素
+export function anchorElementGenerator(url: string): HTMLAnchorElement {
+  // 创建一个a标签元素
+  const element = window.document.createElement("a");
+  // 设置a标签的href属性为传入的url
+  element.href = url;
+  element.href = element.href; // hack ie
+  return element;
+}
+
+// 导出一个函数，用于获取锚点元素的查询字符串映射
+export function getAnchorElementQueryMap(anchorElement: HTMLAnchorElement): { [key: string]: string } {
+  // 获取锚点元素的查询字符串
+  const queryString = anchorElement.search || "";
+  // 将查询字符串转换为URLSearchParams对象，并使用reduce方法将其转换为键值对映射
+  return [...new URLSearchParams(queryString).entries()].reduce((p, c) => {
+    // 将键值对添加到映射中
+    p[c[0]] = c[1];
+    // 返回映射
+    return p;
+  }, {} as Record<string, string>);
+}
+
+
+//防抖函数，支持传过来一个函数，返回一个防抖后的函数
+export function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+      const context = this;
+
+      if (timer) {
+          clearTimeout(timer);
+      }
+
+      timer = setTimeout(() => {
+          func.apply(context, args);
+      }, delay);
+  };
+}
+
+export function addOrReplaceUrlParam(url: string, paramName: string, paramValue: string): string {
+  // 先分割出 URL 的基础部分和哈希部分
+  const [baseUrl, hash] = url.split('#');
+  const urlObj = new URL(baseUrl);
+  const searchParams = urlObj.searchParams;
+
+  // 如果参数已经存在，则替换其值
+  if (searchParams.has(paramName)) {
+      searchParams.set(paramName, paramValue);
+  } else {
+      // 如果参数不存在，则添加该参数
+      searchParams.append(paramName, paramValue);
+  }
+// 如果原 URL 有哈希部分，再把它加回去
+  if (hash) {
+    urlObj.hash = hash
+  }
+  
+  urlObj.search = searchParams.toString();
+  let newUrl = urlObj.toString();
+  
+  return newUrl;
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": false,
+    "jsx": "preserve",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["element-plus/global"],
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "./dist",
+        "rootDir": "./src",
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts';
+// import { name, version } from './package.json'
+
+export default defineConfig(({ mode }) => {
+  return {
+    base: './',
+    build: {
+      lib: {
+        entry: ['src/index.ts'],
+        name: '__xt_micro__',
+        formats: ['es'],
+        fileName: (format, entryName) => `index.js`,
+        cssFileName: 'my-lib-style',
+      },
+      target: 'es2015',
+      emptyOutDir: true, //去掉打包到项目外的警告
+      outDir: `./dist`,
+    },
+    plugins: [
+      vue(),
+      dts({
+        outDir: 'dist/types'
+    })
+    ],
+  }
+})